L'éditeur graphique des applications


Apps - GUI overview.png

L'éditeur graphique est l'outil de conception des applications. Il permet de :

  • sélectionner les objets de l'application via 2 bibliothèques :
    • bibliothèque de datasources : tous les moyens d'accès aux sources de données (bases, fichiers, sites internet, produits tiers) - la connexion s'effectue via des connecteurs ;
    • bibliothèque de widgets / Custom widgets : tous les composants graphiques permettant d'afficher les données et de définir l'aspect visuel de l'application.
  • bâtir l'application en positionnant les objets sur un espace de travail, nommé volet Conception ;
  • configurer et définir le comportement des objets via un inspecteur de propriétés ;
  • tester l'application en fonction du support d'affichage (smartphone, tablette, écran PC, ...).
     

Chaque application peut :

  • être associée à un thème, définissant sa charte graphique ;
  • être découpée en pages pour regrouper les informations ;
  • contenir des pages publiques (accessibles à tout utilisateur) et des pages privées (informations nécessitant de se connecter) -  Open url.png voir Gestion du mode Public ;
  • être conçue en mode Responsive, permettant une mise à l'échelle automatique suivant le support d'affichage (smartphone, tablette, écran PC, ...).
     

Autres fonctionnalités

  • Le déploiement des applications se fait en communiquant aux utilisateurs un lien d'accès à l'application, via une URL directe ou, de préférence, via un raccourci.
  • Des paramètres peuvent être passés dans l'URL de l'application afin d'appliquer un filtre / vue, ou d'accéder directement à certains enregistrements  - Open url.png voir Propriétés exposées
  • Une gestion des versions permet de revenir à tout moment à une version antérieure de l'application.

Remarques

  • Les widgets utilisant des datasources dynamiques sont automatiquement réactualisés à l'ouverture de l'éditeur graphique et à chaque réaffichage de la page.

Gestion des versions

Historique des versions

  • Il est accessible via EVApps - GUI - History icon.png dans la barre d'outils.
  • Il contient :
    • les points de restauration créés manuellement dans l'historique (champ Add Backup) - leur nombre est limité ;
    • les sauvegardes automatiques effectuées à chaque ouverture de l'application dans l'éditeur graphique - elles apparaissent avec la mention Saved before editing by {Connected_User} ;
    • les sauvegardes manuelles effectuées via EVApps - GUI - Save icon.png - elles apparaissent avec la mention Saved by {Connected_User}.
  • Chacune des sauvegardes indique la date/heure de création.
  • Toutes les versions non supprimées manuellement sont conservés tant que l'application n'est pas supprimée.
     

Sauvegardes système

  • Elles sont effectuées automatiquement par le système suivant une fréquence paramétrée. 
  • Elles n'apparaissent pas dans l'historique des versions.
     

Retour à une version antérieure

  • À tout moment, il est possible de revenir à un état antérieur de l'application en sélectionnant la version souhaitée dans l'historique.
  • En cas d'arrêt anormal du système ou de fermeture involontaire de l'application, le système récupère la version la plus récente de l'application (dernière sauvegarde manuelle ou automatique du système).

Best Practice big icon.pngBonnes pratiques

  • Une annulation des modifications n'étant pas possible, créez un point de restauration via EVApps - GUI - History icon.png avant tout changement important.
  • Pour permettre le lancement (via une URL) de l’application sans paramètre, renseignez des valeurs par défaut dans les propriétés exposées.
  • En mode Exécution, l'utilisateur a accès à toutes ses applications via l'icône EVApps - Execution - List Applications icon.png. Celles-ci sont automatiquement chargées au lancement d'une application. Pour éviter ce chargement et améliorer ainsi les performances d'exécution de l'application courante, masquez l'icône via la propriété dédiée Show App List -  Open url.png voir Propriétés générales

Description de l'éditeur graphique

Accès : Dans la galerie, Apps - Application properties icon.png dans la barre d'outils de l'application

L'écran se décompose en 4 zones :

La barre d'outils

       EVApps - GUI - Toolbar.png

EVApps - GUI - Close Application icon.png : Ferme l'éditeur graphique et revient sur la galerie.


Apps - Application properties icon.png : Affiche les propriétés générales de l'application.
         EVApps - GUI - Application Properties.png

voir Détail des propriétés

  • onglet Apps Icon : Permet de télécharger l'image associée à l'application sur la galerie.
Onglet Représentation sur la galerie
Application Properties - Apps icon tab.png Application Properties - Apps icon tab - Gallery example.png
  • Sélectionnez l'image via Apps - Upload icon.png.
  • Pour rogner l'image :
    • Survolez-la avec la souris et cliquez sur Apps - Crop icon.png.
    • Cliquez-tirez pour sélectionner la zone à conserver.
    • Cliquez sur Crop Image.

      Application Properties - Apps icon tab - Crop.png


  • onglet Apps Header : En mode Exécution, indique si la barre de titre de l'application affiche un titre (option Name) ou un logo (option Logo).
    • option Name : Le titre affiché est le contenu du champ Display Name.
    • option Logo : Téléchargez le logo via Apps - Upload icon.png.
      Best Practice icon.png Pour une visualisation optimale du logo, utilisez une image avec un ratio permettant l'affichage en longueur. Note : Les images sont automatiquement compressées à l'affichage pour garantir les performances du système.
Onglet Représentation sur la barre de titre
Application Properties - Apps header tab.png
  • option Name

    Apps - Title bar with title.png

  • option Logo

    Apps - Title bar with logo.png


  • onglet Favicon : Permet de sélectionner l'icône s'affichant dans la barre d'onglets du navigateur Internet ou comme raccourci de l'application sur le bureau.
    • L'image est automatiquement téléchargée en plusieurs résolutions pour s'adapter aux différents supports.
    • Le choix de la bonne résolution s'effectue automatiquement lorsque l'utilisateur exécute l'application sur un support donné ou installe le raccourci sur son bureau.
Onglet Représentation
Application Properties - Apps header tab.png
  • Sélectionnez l'image via Apps - Upload icon.png.
  • Supprimez toutes les résolutions téléchargées via Apps - Remove uploaded file icon.png.
  • Pour sélectionner une image différente pour une résolution donnée :
    • Survolez la résolution à modifier.
    • Cliquez sur Apps - Upload icon.png et sélectionnez l'image souhaitée.
Application Properties - Favicon tab - one resolution.png

Favicon - Download ok.png : Indique que l'image de la résolution est différente de l'image d'origine.

Favicon - Delete resolution.png : Permet de revenir à l'image d'origine dans la résolution sélectionnée.

  • Name : Nom de l'application affiché sur la galerie.
  • Display Name : Nom de l'application affiché dans la barre de titre en mode Exécution.
  • Theme : Thème de l'application, définissant sa charte graphique (couleurs de l'arrière-plan, bordures, polices, ...).
    • Les changements sont automatiquement visualisés sur le volet Conception.
    • Des configurations particulières peuvent être définies au niveau des pages et des widgets via les propriétés de la catégorie Theme.
  • Description : Descriptif rapide du contenu de l'application, affiché sur la galerie.
  • Choose an execution context : Nom du contexte d'exécution courant, indiquant sur quelle base de données s'exécute l'application.
    • Les contextes d'exécution sont définis au niveau des connecteurs.
    • Si le contexte d'exécution courant n'est pas renseigné et si des alias sont définis sur les datasources, l'application s'exécute sur les valeurs par défaut de ces alias.
  • This application never disconnects : Indique si le compte Product name - ev sas.png de l'application est déconnecté automatiquement au bout d'une certaine durée d'inactivité (case non cochée) ou si le compte reste connecté, même en cas d'inactivité (case cochée).
    Best Practice icon.png Pour des raisons de sécurité, limitez cet usage à des applications affichées sur grand écran comme les écrans du centre d'opérations du Service Desk ou des enseignes dans les lieux publics. Ne l'utilisez pas pour des applications où l'utilisateur connecté peut créer ou manipuler des données, car celui-ci peut ne pas être l'exécutant actuel de l'application.
    OptionsShow

    • Show Main Toolbar : En mode Exécution, indique si la barre de titre de l'application est affichée (case cochée) ou non (case non cochée).
    • Show App List (Note : Uniquement lorsque la propriété Show Main Toolbar est active) : En mode Exécution, indique si l'icône EVApps - Execution - List Applications icon.png (liste des applications auxquelles l'utilisateur a accès) est affichée (case cochée) ou non (case non cochée).
    Propriétés Représentation en mode Exécution
    • Show Main Toolbar : cochée
    • Show App List : cochée
    Properties title bar - Show all.png
    • Show Main Toolbar : cochée
    • Show App List : non cochée
    Properties title bar - Show main toolbar On - Show app list Off.png
    • Show Main Toolbar : non cochée
    • Show App List : cochée ou non cochée
    Properties title bar - Show nothing.png
  • Choose a public User : Utilisateur ayant un profil Public associé à l'application.
    • Lorsqu'un utilisateur est sélectionné, il devient possible de définir des pages publiques (informations accessibles à tous les utilisateurs) et des pages privées (informations nécessitant de se connecter) - Open url.png voir Gestion du mode Public
    • Apps - Delete icon.png désassocie l'utilisateur de l'application : celle-ci repasse automatiquement en mode Privé.
  • Help Link : URL de la page d'aide associée à l'application.
    • Cliquez sur Black Right arrow icon.png et saisissez l'URL.
    • En mode Exécution, l'icône ev sas - Help icon.png s'affiche dans la barre de titre de l'application.
  • Exposed Properties : Accès aux propriétés exposées   - Open url.png voir Description
    • Il s'agit des paramètres pouvant être passés dans l'URL de l'application afin d'appliquer un filtre / vue, ou d'accéder directement à certains enregistrements.
    • Note : Le QR Code ne tient pas compte de ces propriétés, afin d'être valide en permanence.

Apps - Drop-down list Pages.png : Liste des pages de l'application. 

  • Sélectionnez l'une d'entre elles pour afficher son contenu dans le volet Conception
  • Pour afficher les propriétés, sélectionnez la page via le volet Objets en cliquant sur Apps - Manage pages icon.png.
     

EVApps - GUI - Share icon.png : Permet de partager l'application en distribuant son URL de lancement, le QR Code ou un fichier d'export. Note : Pour exécuter l'application via l'URL, les identifiants de connexion à la plate-forme sont requis.
       EVApps - GUI - Share Apps.png

  • Export : Exporte l'application sous la forme d'un fichier compressé (format .tar.gz).
    • Un lien est automatiquement généré : cliquez dessus pour sauvegarder le fichier.
    • L'export peut également se faire depuis la galerie.
    • L'application exportée peut ensuite être importée via la galerie.
              Example documentation icon FR.png  Export depuis un environnement de test  ==>  Import dans l'environnement de production
       
  • Exposed Properties : Accès aux propriétés exposées  - Open url.png voir Description
    • Il s'agit des paramètres pouvant être passés dans l'URL de l'application afin d'appliquer un filtre / vue, ou d'accéder directement à certains enregistrements.
    • Note : Le QR Code ne tient pas compte de ces propriétés, afin d'être valide en permanence.
       

EVApps - GUI - Save icon.png : Sauvegarde l'application.


EVApps - GUI - History icon.png : Ouvre l'historique des versions de l'application -  Open url.png  voir Gestion des versions
         EVApps - GUI - History.png

  • Add Backup: Crée un point de restauration.
    • Saisissez une description explicite pour repérer facilement les changements effectués pour cette version.
    • Cliquez ensuite sur Apps - Plus icon.png.
  • Available Backups : Liste des versions disponibles pour l'application.
    • (1) Points de restauration créés manuellement 
    • (2) Sauvegardes manuelles créées via EVApps - GUI - Save icon.png
    • (3) Sauvegardes automatiques créées à l'ouverture de l'éditeur graphique

      EVApps - GUI - History icon.png : Restaure la version pour revenir à un état antérieur de l'application.
      Apps - Delete icon.png : Supprime la version de l'historique. Cliquez sur Delete all pour supprimer toutes les versions.
       

EVApps - GUI - Connector icon.png : Accès aux connecteurs utilisés par l'application (configuration des paramètres de connexion aux datasources de l'application).

  • Note : Les connecteurs peuvent également être définis au niveau de la galerie. Ils sont alors disponibles pour l'ensemble des applications.
     

Apps - GUI - Desktop view icon.png et Apps - GUI - Mobile view icon.png : Permet de gérer l'affichage des widgets sur des supports de petite taille. Note : Le mode actif est représenté par une icône bleue.

  • Apps - GUI - Desktop view icon.png : Mode Desktop : Tous les widgets sont affichés, sauf ceux s'affichant uniquement sur un écran de petite taille (widgets avec la propriété Hide on Small Devices inactive).
  • Apps - GUI - Mobile view icon.png : Mode Mobile : Seuls les widgets définis pour les écrans de petite taille sont affichés (widgets avec la propriété On Small Devices Only active).
     

EVApps - GUI - Conception mode icon.png et EVApps - GUI - Wysiwig mode icon.png : Sur le volet Conception, bascule entre l'affichage en mode Conception (les barres d'outils sont visibles au niveau de chaque ligne et chaque widget) et l'affichage en mode Wysiwyg (toutes les barres d'outils sont masquées). Note : Le mode actif est représenté par une icône bleue.

Affichage en mode Conception   EVApps - GUI - Conception mode icon.png Affichage en mode Wysiwyg   EVApps - GUI - Wysiwig mode icon.png
Apps - GUI - Conception mode.png Apps - GUI - Wysiwyg mode.png

EVApps - GUI - Responsive mode icon.png : Accès au mode Responsive, permettant de surcharger les propriétés par défaut de chaque widget en fonction du type de device sur lequel l'application est exécutée (Smartphone, Tablette, Écran d’ordinateur, Écran d’ordinateur haute définition, Écran de téléviseur mural haut de gamme)  - Open url.png voir Description

  • L'éditeur graphique affiche une nouvelle barre d'outils.
  • Cliquez ensuite sur Apps - Responsive mode - Back to GUI icon.png pour retourner sur l'éditeur graphique en mode standard.
     

EVApps - GUI - Execute icon.png : Exécute l'application dans un nouvel onglet du navigateur Internet.

AuthenticationZone

Apps - Authentication zone.png : Zone d'authentification de l'utilisateur connecté. 

  • Apps - Logout icon.png : Ferme la plate-forme.
  • Clic sur la photo ou le nom : Ouvre la fenêtre d'informations personnelles de l'utilisateur.
             EVApps - Gallery - User Profile.png

voir Détail des propriétés

Name, Email : Nom et e-mail de l'utilisateur connecté. Pour associer une photo, cliquez sur Apps - Upload icon.png.

Customer : Compte de la plate-forme Product name - ev sas.png à laquelle est connecté l'utilisateur.

Current Password : Mot de passe actuel de l'utilisateur connecté. Pour le modifier, renseignez le champ New puis confirmez la saisie dans le champ Confirm new Password.

System Message : Langue utilisée pour l'affichage des messages d’erreurs et des messages système.

Les propriétés ci-dessous sont héritées de la plate-forme utilisée par l'utilisateur connecté (sous Windows : Panneau de configuration > Paramètres Région et langue) et peuvent être surchargées.
  • Date format : Format appliqué aux dates.
  • Time format : Format appliqué aux heures.
  • Thousands separator : Séparateur des milliers.
  • Decimals separator : Séparateur décimal.

Manage my External Accounts (Note : Uniquement pour les utilisateur ayant accès à des services en mode d'authentification OAuth 2.0 avec leurs propres comptes) : Permet à l'utilisateur connecté de gérer ses comptes d'accès personnels aux services accessibles en mode d'authentification OAuth 2.0.

EVApps - Gallery - User Profile - Manage external resources.png

  • Service : Nom du service (ou produits tiers).
  • Visibility : Indique si l'authentification est disponible uniquement pour l'utilisateur connecté (option Private) ou pour l'ensemble des utilisateurs ayant accès au service via une application Product name - ev sas.png (option Public).
  • Account : Compte associé au service.
  • Apps - Delete icon.png : Supprime les informations d'authentification du service sélectionné.
    • Cliquez sur Remove all pour supprimer les informations de l'ensemble des services.
    • Lorsque les informations supprimées sont utilisées dans une application, les utilisateurs doivent s'identifier à nouveau comme s'ils n'étaient pas enregistrés.

Note : Les services paramétrés au niveau des connecteurs sont accessibles via le compte paramétré au niveau du connecteur.

Example documentation icon FR.png   Connexion au service Tweeter :
  • Tweets de la société ==> l'utilisateur a automatiquement accès aux fils d’actualité de la société via le compte paramétré au niveau du connecteur - ce compte n'apparaît pas dans la liste
  • Tweets personnels ==> l'utilisateur doit saisir ses propres identifiants - ce compte apparaît dans la liste

 

Le volet Objets

Le volet Objets permet de gérer les objets de l'application : pages, datasources, widgets.

Apps - Manage pages icon.png Pages : Accès à la liste des pages de l'application.

  • Cliquez sur Apps - Edit icon.png pour ouvrir l'inspecteur de propriétés (accès aux propriétés graphiques de la page) et afficher le contenu de la page sur le volet Conception.
  • Les outils permettent de :
    • Apps - Add icon.png créer une nouvelle page ;
    • Box checked.png afficher / masquer les pages en mode Exécution ;
    • gérer des pages publiques Apps - Private page icon.png / privées Apps - Public page icon.png - Open url.png voir Gestion du mode Public ;
    • Wheel icon.png supprimer et dupliquer les pages via le menu contextuel ;
    • Apps - Order objects icon.png ordonner les pages.
               EVApps - GUI - Manage Pages.png
       

Apps - Add widget icon.png Add Widgets : Création des widgets de la page sélectionnée, à partir des types de widgets définis dans la bibliothèque.
         Open url.png voir procédure Comment ajouter un widget dans une application

  • Les outils permettent de :
    • Apps - Search icon.png rechercher et filtrer les types de widgets / types de Custom widgets à partir de leur nom ;
    • ev sas - Help icon.png ouvrir la page d'aide contextuelle au type de widget.
               Apps - Types widgets.png
       

Apps - Manage widgets icon.png Widgets : Accès à la liste des widgets / Custom widgets de la page sélectionnée, classés par catégorie.

  • Cliquez sur le nom d'un widget pour ouvrir l'inspecteur de propriété et visualiser le contenu sur le volet Conception.
  • Chaque widget est précédé de l'icône identifiant son type.
  • Les outils permettent de :
    • Apps - Search icon.png rechercher et filtrer les widgets / Custom widgets à partir de leur nom ;
    • Apps - Duplicate icon.png dupliquer les widgets : ceux-ci sont placés sur le volet Conception, en dessous du widget source ;
    • Apps - Delete icon.png supprimer les widgets de la bibliothèque de la page.
               EVApps - GUI - Manage Widgets.png
       

Apps - Add datasource icon.png Add Data Sources : Création des datasources de l'application, à partir des types de datasources définis dans la bibliothèque.

  • Les outils permettent de :
    • ev sas - Help icon.png ouvrir la page d'aide La bibliothèque des datasources ;
    • Apps - Search icon.png rechercher et filtrer les types de datasources à partir de leur nom.
               Apps - Types datasources.png
       

Apps - Manage datasources icon.png Data Sources : Accès à la liste des datasources de l'application, classés par catégorie.

  • Cliquez sur le nom d'un datasource pour ouvrir l'inspecteur de propriétés.
  • Chaque datasource est précédé de l'icône identifiant son type.
  • Les datasources pointant sur un alias sont inscrits en gras.
  • Les outils permettent de :
    • Apps - Search icon.png rechercher et filtrer les datasources à partir de leur nom ;
    • Utilization counter icon.png visualiser le nombre de fois où le datasource est utilisé dans l'application et d'afficher la liste des widgets en survolant le compteur ;
    • Apps - Duplicate icon.png dupliquer les datasources. Note : Sauf pour les datasources composites ;
    • Apps - Delete icon.png supprimer les datasources de la bibliothèque de l'application.
               EVApps - GUI - Manage Datasources.png

 

Le volet Conception

Le volet Conception définit l'espace de travail sur lequel sont positionnés les widgets de l'application. Il reflète automatiquement chaque modification des propriétés des objets (page, datasource, widget).
         GUI - Design panel - Overview.png
 

  • L'espace est découpé en lignes, chacune fractionnée virtuellement en 12 colonnes maximum de taille égale.
            EVApps - widget Layout - Virtual Screen.png
  • Les emplacements sont créés via des widgets de la catégorie Layout.
  • Suivant la taille du support graphique (moniteurs d'ordinateur, smartphones, tablettes, TV, ...), un widget peut occuper la totalité des 12 colonnes (pleine ligne) ou plusieurs widgets peuvent être affichés sur la même ligne.
     

Principes d'utilisation

  • L'emplacement des widgets peut être visualisé en les survolant avec la souris.
    • Des pointillés verts délimitent les objets contenus sur une ligne/colonne.
    • Un cadre vert délimite un objet.

Best Practice icon.png  Si la délimitation de la zone n'apparaît pas correctement, réduisez le niveau de zoom du navigateur.

Ligne Colonne Widget
EVApps - GUI - Toolbar Object Row.png EVApps - GUI - Toolbar Object Custom.png EVApps - GUI - Toolbar Object Widget.png
  • Chaque widget peut être déplacé.
    • Survolez l'objet pour faire apparaître le curseur Cursor move icon.png.
    • Cliquez-glissez l'objet vers le nouvel emplacement. Note : Les emplacements disponibles sont affichés en vert, avec la mention Drop a Layout Widget Here.
               EVApps - GUI - Toolbar Object Move.png
       
  • La hauteur d'un widget peut être modifiée.
    • Positionnez le curseur sur le bas de l'objet pour faire apparaître le curseur EVApps - GUI - Dimension icon.png.
    • Cliquez et redimensionnez l'objet vers le haut ou vers le bas.
               EVApps - GUI - Toolbar Object Height.png

Best Practice icon.png  Pour appliquer exactement la même hauteur à un ensemble d'objets, renseignez la propriété Theme > Widget Height de chacun d'entre eux.

 

  • Chaque ligne/colonne/widget possède un menu contextuel permettant d'effectuer différentes actions.
    • Survolez la barre de l'objet avec la souris.
    • Cliquez sur Wheel icon.png.
               GUI - Design panel - Contextual menu.png
       

Description des options du menu contextuel

  • Apps - Duplicate 2 icon.png Create Custom Widget : Crée un nouveau Custom widget à partir des objets contenus dans la ligne/colonne sélectionnée  - Open url.png voir Procédure
     
  • Apps - Delete icon.png Delete Row / Apps - Delete icon.png Delete Column : Supprime la ligne/colonne sélectionnée.
    • Tous les widgets situés sur la ligne/colonne sont supprimés du volet Conception.
    • Ils restent disponibles dans la bibliothèque des widgets de l'application.
       
  • Apps - Duplicate icon.png Copy widget : Duplique le widget sélectionné.
    • Le même nom est appliqué, avec la mention (Copy).
               Apps - Duplicate widget.png
    • Le nouveau widget est placé sur le volet Conception, en dessous du widget source.
    • Il est directement ouvert en mode Édition.
       
  • Apps - Delete icon.png Remove widget : Supprime le widget sélectionné du volet Conception.
    • Le widget reste disponible dans la bibliothèque des widgets de l'application.
       
  • Apps - Stack on small icon.png Stack on small (mode d'affichage par défaut) : Positionne automatiquement les widgets en fonction du type de device (mobile, tablette, écran d'ordinateur, ...).
    • Les widgets sont automatiquement placés en ligne, puis placés les uns sous les autres en-deça d'une certaine largeur de l'écran.
       
  • Apps - Single row on small icon.png Single row on small : Force le placement des widgets sur une seule ligne.
    • Les widgets restent solidaires, quelle que soit la largeur de l'écran du support.
       
option Stack on small   Apps - Stack on small icon.png option Single row on small   Apps - Single row on small icon.png

Affichage sur un PC

Apps - GUI - Stack on small - Desktop.png

Affichage sur un PC

Apps - GUI - Single row on small.png

Affichage sur un smartphone (Android, iPhone)

Apps - GUI - Stack on small - Mobile.png

Affichage sur un smartphone (Android, iPhone)

Apps - GUI - Single row on small.png

 

L'inspecteur de propriétés

L'inspecteur de propriété permet de configurer chaque objet utilisé par l'application : page, datasource, widget. Le volet Conception reflète automatiquement chaque modification des propriétés.

  • Les propriétés sont contextuelles à chaque type d'objet.
  • Elles sont regroupées par catégorie :
    • Catégorie Content : Propriétés minimum nécessaires pour que l'objet fonctionne.
    • Catégorie Data : Propriétés de paramétrage du datasource utilisé par le widget.
    • Catégories Chart et Chart Label -/- Legend : Propriétés relatives à la présentation graphique des widgets Dashboards (légende, libellés et couleur des axes, …).
    • Catégorie Theme : Propriétés graphiques relatives à un widget ou une page (bordure, couleur du fond, couleur du texte, ...). Note : Les propriétés sont héritées des propriétés définies au niveau supérieur. Chaque objet peut ensuite être surchargé dans un contexte particulier -  Open url.png  voir Principe de l'héritage
       

   Example documentation icon FR.png  Inspecteur de propriétés pour un widget
         GUI - Inspector properties - Widget.png

Accès suivant le type d'objet

  • Page : Clic sur Apps - Manage pages icon.png Pages dans le volet Objets, puis Apps - Edit icon.png en regard de la page
     
  • Datasource :
    • Clic sur Apps - Manage datasources icon.png Data Sources dans le volet Objet, puis clic sur le nom du datasource
      ou
    • depuis un widget lié à un datasource : Clic sur Apps - Edit icon.png en regard du champ Content > Datasource
       
  • Widget :
    • Clic sur le widget dans le volet Conception
      ou
    • Clic sur Apps - Manage widgets icon.png Widgets dans le volet Objets, puis clic sur le nom du widget
       

Outils accessibles depuis les propriétés des widgets

Procédures

Comment utiliser l'éditeur graphique

Étape 1 : Ouverture de l'éditeur graphique

1. Allez sur la galerie.

2. Cliquez sur Apps - Application properties icon.png dans la barre d'outils de l'application.
  

Étape 2 : Ajout et configuration des datasources de l'application

1. Cliquez sur Apps - Add datasource icon.png Add Data Source dans le volet Objets.

2. Sélectionnez le type de data source.

3. Renommez le datasource.

4. Renseignez ses propriétés via l'inspecteur de propriétés.
Les modifications sont automatiquement enregistrées.

5. Ajoutez de la même façon tous les datasources de l'application.
 

Étape 3 : Ajout et configuration des widgets de l'application

Best Practice icon.png  Créez un point de restauration via EVApps - GUI - History icon.png avant d'effectuer toute modification des propriétés ou de la mise en page des widgets. Cela vous permet de revenir à une version antérieure si nécessaire -  Open url.png  voir Gestion des versions

1. Définissez les emplacements des objets de l'application via des widgets de type Layout.

  • Cliquez sur Apps - Add widget icon.png Add Widget dans le volet Objets.
  • Cliquez-glissez l'un des widgets de la catégorie Layout Apps - Widget - Layout 12 icon.png, Apps - Widget - Layout 6 icon.png, Apps - Widget - Layout 4 icon.png, Apps - Widget - Layout 3 icon.png, Apps - Widget - Layout 2 icon.png vers le volet Conception.
    Note : Les emplacements disponibles sont affichés en vert, avec la mention Drop a Layout Widget Here.
             GUI - Procedure - Add widget 1.png

2. Positionnez et configurez les widgets utilisés par la page courante.

  • Cliquez sur Apps - Add widget icon.png Add Widget dans le volet Objets.
  • Cliquez-glissez le type de widget / Custom widgets vers l'un des emplacements précédemment définis dans le volet Conception.
             GUI - Procedure - Add widget 2.png  ==>  GUI - Procedure - Add widget 3.png
  • Renseignez les propriétés de chaque widget via l'inspecteur de propriétés.
    Les modifications sont automatiquement enregistrées et affichées dans le volet Conception.

3. Ajoutez les autres pages de l'application.

  • Cliquez sur Apps - Add icon.png.

   ou

  • Dupliquez une page existante via Wheel icon.png > option Apps - Duplicate 2 icon.png Duplicate.

4. Ajoutez et configurez tous les widgets de la nouvelle page.
 

Étape 4 : Mise en page de l'application

1. Affichez la page souhaitée via la liste déroulante Apps - Drop-down list Pages.png.

2. Sélectionnez le widget à modifier.

  • Cliquez sur le widget dans le volet Conception.

   ou

  • Cliquez sur Apps - Manage widgets icon.png Widgets dans le volet Objets.
  • Cliquez sur le libellé du widget.

3. Modifiez ses propriétés via l'inspecteur de propriétés.
Le volet Conception est automatiquement réactualisé.

4. Ajustez la hauteur du widget.

  • Renseignez la propriété Theme > Widget Height.

   ou

  • Positionnez le curseur sur le bas de l'emplacement du widget dans le volet Conception.
  • Glissez la barre grise vers le bas ou vers le haut.
             GUI - Procedure - Change height.png
     

5. Déplacez le widget sur la page.

  • Survolez le widget à déplacer dans le volet Conception.
    Le curseur se transforme en Cursor move icon.png.
             GUI - Procedure - Move widget 1.png
  • Cliquez-glissez l'objet vers l'emplacement souhaité.
             GUI - Procedure - Move widget 2.png  ==>  GUI - Procedure - Move widget 3.png
     

Suppression d'un widget

  • Cliquez sur Apps - Manage widgets icon.png Widgets dans le volet Objets.
  • Cliquez sur Apps - Delete icon.png en regard du widget.

   ou

  • Survolez le widget dans le volet Conception.
  • Cliquez sur Wheel icon.png > option Apps - Delete icon.png Remove widget.
             GUI - Procedure - Delete widget.png
     

Suppression d'une colonne
Attention : Tous les widgets positionnés dans la colonne sont supprimés.

  • Survolez la colonne dans le volet Conception.
  • Cliquez sur Wheel icon.png > option Apps - Delete icon.png Delete Column.
              GUI - Procedure - Delete column.png
      

Étape 5 (optionnelle) : Gestion des pages publiques / privées de l'application

   Open url.png voir Gestion du mode Public

1. Associez un utilisateur ayant le profil Public à l'application via Apps - Application properties icon.png > Choose a public User.

2. Cliquez sur Apps - Manage pages icon.png dans le volet Objets.
La liste des pages de l'application est affichée.

3. Indiquez le type d'accès de chaque page.
    Note : La page d'accueil est toujours publique.

  • Cliquez sur Apps - Public page icon.png pour rendre une page privée.
  • Cliquez sur Apps - Private page icon.png pour la rendre publique.

Les modifications sont automatiquement enregistrées.
 

Étape 5 : Test de l'application

# 1. Sélectionnez le type de device sur lequel l'application doit être testée.

  • Apps - GUI - Desktop view icon.png : Affichage sur un poste de travail
  • Apps - GUI - Mobile view icon.png : Affichage sur un mobile
     

2. Exécutez l'application via EVApps - GUI - Execute icon.png.
L'application est ouverte dans un nouvel onglet de votre navigateur Internet.

3. Testez le bon affichage des objets et le bon fonctionnement de la navigation.
 

Aperçu en mode Wysiwyg dans le volet Conception

  • Basculez en mode Wysiwyg via EVApps - GUI - Wysiwig mode icon.png.
    Toutes les barres d'outils des objets sont masquées.
  • Revenez en mode Conception via EVApps - GUI - Conception mode icon.png

Comment créer une application

        Open url.png voir  Best Practice icon.png Règles de création d'applications

Étape 1 : Création de la nouvelle application

1. Sélectionnez la méthode de création de votre nouvelle application :

  • Soit créez une nouvelle application :
  • Soit utilisez l'une des applications existantes comme modèle (Note : Uniquement si vous avez le profil App Creator) :
    • cliquez sur Apps - Duplicate icon.png dans la barre d'outils de l'application modèle ;
      • L'éditeur graphique est ouvert.
      • Tous les objets de l'application modèle sont recopiés.
    • (optionnel) renommez la nouvelle application via Apps - Application properties icon.png.

2. Utilisez l'éditeur graphique pour créer, positionner et définir tous les objets de l'application  - Open url.png voir Procédure

     (optionnel suivant le contenu de votre application)

   Open url.png voir :

  • Bibliothèque des datasources : tous les moyens d'accès aux sources de données (bases, fichiers, sites internet, produits tiers)
  • Bibliothèque des widgets / Custom widgets : tous les composants graphiques permettant d'afficher les données et de définir l'aspect visuel de l'application
     

Étape 2 : Test de l'application

1. Cliquez sur EVApps - GUI - Execute icon.png.
L'application est ouverte dans un nouvel onglet de votre navigateur Internet.

2. Testez le bon affichage des objets et le bon fonctionnement de la navigation.

Étape 3 : Définition des droits d'accès à l'application

1. Revenez sur la galerie via EVApps - GUI - Close Application icon.png.
Note : L'application est automatiquement sauvegardée.

2. Cliquez sur Apps - Rights - Administer icon.png dans la barre d'outils de l'application.

3. Donnez les droits d'accès aux utilisateurs / équipes souhaités.

  • Cochez les utilisateurs / équipes souhaités.
    Note : Si vous sélectionnez une équipe, les droits s'appliquent à l'ensemble des utilisateurs de celle-ci.
  • Cochez les droits d'accès à attribuer.
    UserApplicationsRights
    • Apps - Rights - Administer icon.png Admin : Droits d'administration sur l'application, sans possibilité de la modifier ni de l'exécuter.
    • Apps - Rights - Edit icon.png Edit : Droits d'édition (accès à l'éditeur graphique).
    • Apps - Rights - Execute icon.png Execute : Droits d'exécution de l'application, sans possibilité de la modifier.
  • Cliquez sur OK.
     

Étape 4 : Diffusion de la nouvelle application aux utilisateurs

1. Créez un raccourci vers la nouvelle application via Apps - Gallery - Create Shortcut icon.png Create Shortcut dans la barre d'outils de la galerie.
Note : Vous devez avoir le profil App Center Manager.
Le raccourci est affiché en haut de la galerie, repérable avec l'icône Apps - Shortcut icon.png.

2. Cliquez sur Apps - Gallery - Edit application icon.png dans la barre d'outils du raccourci.

3. Copiez le QR Code ou l'URL affichés dans la zone Share application URL.

4. Distribuez l'accès aux utilisateurs souhaités.

Tags:
Modifié par Utilisateur inconnu le 2019/04/02 15:40
Créé par Administrator XWiki le 2014/09/02 11:33

Raccourcis

L'actualité mensuelle
Newsletter

Qu'est-ce qui a changé récemment ?
Service Engine
Service Apps

Quelques pages au hasard
Discussions
Service Pipeline
Gestion des licences EasyVista
Quick Dashboard

Powered by XWiki ©, EasyVista 2019