L'éditeur de thème des applications


Apps - Theme editor overview.png

L'éditeur de thème permet de concevoir des chartes graphiques d'applications au travers de thèmes.

  • Chaque thème peut être associé à un ensemble d'applications et permet de définir les propriétés graphiques des objets (pages, widgets) qu'elles utilisent : couleurs de l'arrière-plan et du texte, taille et style des polices, caractéristiques des entêtes / pieds de pages / bordures, ... 
  • Dès qu'une modification est apportée à une propriété d'un thème, elle est automatiquement reportée sur toutes les applications liées à ce thème (pour l'ensemble des propriétés non surchargées dans l'application).
  • L'apparence graphique de chaque thème peut être prévisualisée sur l'ensemble des applications de la galerie.
     

Les propriétés graphiques d'un thème peuvent être définies à 2 niveaux :

Exemple

Le thème Oxygène est appliqué à certains modèles Service Apps : toutes les applications installées à partir de l'un de ces modèles ont ainsi la même apparence graphique (Change Manager, Mobile Suppport Tech, ...).

Remarques

  • Seuls les utilisateurs disposant des droits de création de thème (profil Theme Designer) peuvent accéder à l'éditeur de thème  - Open url.png voir Gestion des accès
  • Seul un thème publié (thème public) peut être utilisé dans une application  - Open url.png voir Procédure 
  • La majorité des propriétés graphiques sont suivies d'une case à cocher Inherit, permettant de gérer l'héritage / la surcharge des propriétés  - Open url.png voir Principe de l'héritage
  • L'application sélectionnée pour prévisualiser le thème n'est pas modifiée.
  • L'éditeur de thème ne permet pas d'agir sur les propriétés des images.
  • Un thème peut être exporté depuis l'éditeur de thème. L'import se fait depuis la galerie.

Attention

  • Le comportement des propriétés peut varier selon les navigateurs.


PropertiesInherit

Principe de l'héritage et des surcharges des propriétés graphiques

  • Les valeurs par défaut des propriétés d'un thème sont celles définies dans la feuille de style standard livrée à l'installation de Service Apps (feuille de style CSS de Foundation).
  • Les valeurs des propriétés héritées sont les valeurs définies au niveau supérieur, suivant la hiérarchie ci-dessous.
EVApps - Graphic Properties - Inherit.png

(1)     Recherche d'une configuration particulière appliquée au widget dans l'application

(2)     À défaut, recherche d'une configuration particulière appliquée au type de widget dans le thème lié à l'application

(3)     À défaut, recherche d'une configuration particulière appliquée à l'ensemble des widgets dans la page de l'application

(4)     À défaut, recherche d'une configuration particulière appliquée à l'ensemble des widgets du thème lié à l'application

(5)     À défaut, configuration de la feuille de styles standard de Service Apps (feuille CSS de Foundation)

  • La majorité des propriétés sont suivies d'une case à cocher Inherit, permettant de gérer l'héritage / la surcharge.
Héritage (case cochée) Surcharge (case non cochée)

La valeur de la propriété est héritée du niveau supérieur.

Properties Inherit - Inherit property.png

La valeur de la propriété est surchargée dans un contexte particulier, qui remplace la valeur héritée du niveau supérieur.

Properties- Inherit - Specific context property.png

  • Le nom de la propriété est affiché dans un bandeau gris.
  • Le nom de la propriété est affiché dans un bandeau bleu.
  • La provenance (thème, page, …) et la valeur de la propriété héritée sont affichées en survolant la case à cocher (plusieurs informations peuvent être affichées dans le cas de surcharges en cascade - ex. : surcharge du thème puis de la page).

exemple   Une application comprend un tableau de bord Incidents dont tous les widgets héritent des couleurs définies pour le thème. Le titre du widget Major Incidents est mis en évidence à la fois en surchargeant la couleur de fond et celle du texte.
         EVApps - Graphic Properties - Example Inherit 1.png

Description de l'éditeur de thème

Accès : Dans la barre d'outils de la galerie, clic sur Apps - Gallery - Theme design icon.png

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

La barre d'outils

     EVApps - Theme Editor - Toolbar.png

EVApps - GUI - Close Application icon.png : Ferme l'éditeur de thème et revient sur la galerie.


Apps - Application properties icon.png : Affiche les propriétés générales du thème.
         EVApps - Theme Editor - Properties.png

voir Détail des propriétés

  • Name : Nom du thème.
  • Based On (Note : Uniquement lors de la création d'un nouveau thème) : Nom du thème servant de modèle.
    • La liste de thèmes est fournie par EasyVista. Vous ne pouvez pas en ajouter.
  • Published : Indique si le thème est public et peut être utilisé dans l'ensemble des applications (option Published Padlock open icon.png) ou s'il est accessible uniquement par son créateur (option Private Padlock close icon.png - thème en cours de conception).
  • Category : Catégorie dans laquelle est sauvegardé le thème. Pour en ajouter une nouvelle, cliquez sur [ + ].
  • Icon : Icône associée au thème, sélectionnée soit dans la bibliothèque d'images via Wheel icon.png, soit en saisissant son adresse URL.
  • Icon Color : Couleur de l'icône associée au thème.
  • Tableau des utilisateurs : Liste des utilisateurs ayant le profil Theme Designer.
    • Cochez la case Apps - Theme designer Profile.png pour donner l'accès en édition au thème courant.
Best Practice icon.png Pour rechercher rapidement les utilisateurs, utilisez la zone de filtre au-dessus du tableau.

EVApps - GUI - Save icon.png : Sauvegarde le thème.
 

Preview On : Liste des applications de la galerie.

  • Sélectionnez l'une d'entre elles pour visualiser l'apparence graphique des objets en appliquant le thème.
  • Lorsque l'application comprend plusieurs pages, sélectionnez celle souhaitée via la liste déroulante accolée.
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

Apps - Current theme icon.png Current Theme : Affichage du thème courant.
 

Apps - Manage themes icon.png Themes : Accès à la liste des thèmes, classés par catégorie.

  • Cliquez sur le nom d'un thème pour ouvrir l'inspecteur de propriétés et afficher la mise en page des objets dans le volet Visualisation.
  • Chaque thème est précédé de son icône sélectionnée via les propriétés générales.
             Apps - Theme Editor - Manage Themes.png
  • Chaque thème possède un menu contextuel affiché en survolant le libellé avec la souris puis en cliquant sur v.
    • Download icon.png Export theme : Exporter le thème sous la forme d'un fichier compressé (format .tar.gz). Note : L'import s'effectue via la galerie.
    • Apps - Edit icon.png Edit theme (ou clic sur le libellé du thème) : Modifier le thème via l'inspecteur de propriétés. Note : Un message est affiché si le thème est utilisé dans une application.
    • Apps - Delete icon.png Delete theme : Supprimer le thème. Note : Un message est affiché si le thème est utilisé dans une application.
       

Apps - Add theme icon.png Add Theme : Création d'un nouveau thème  - Open url.png voir Procédure

 

Le volet Visualisation

Le volet Visualisation permet de visualiser les effets du thème sur la page sélectionnée du modèle, pour chaque type de widget.

  • Lorsqu'une propriété graphique est modifiée sur l'un des widgets du modèle, elle est automatiquement reportée sur tous les widgets du même type utilisant le thème.

 

L'inspecteur de propriétés

L'inspecteur de propriétés permet de définir les propriétés graphiques de chaque objet utilisé par le modèle : page et type de widget.

  • Les propriétés sont contextuelles à chaque type d'objet.
  • Elles sont regroupées par catégorie.
  • Le volet Visualisation reflète automatiquement chaque modification des propriétés.
     

   Example documentation icon FR.png  Inspecteur de propriétés pour un widget
         EVApps - Theme Editor - Inspector Properties Widget type.png

Accès suivant le type d'objet

Outils accessibles depuis les propriétés des widgets

  • Le Color Picker : Apps - Color Picker icon Off.png sur une propriété Color
  • La réinitialisation d'une propriété à sa valeur par défaut : Reset properties icon.png

Procédures

Comment créer un thème

Étape 1 : Création du nouveau thème

1. Cliquez sur Apps - Gallery - Theme design icon.png Theme Design dans la barre d'outils de la galerie.

2. Cliquez sur Apps - Add theme icon.png Add Theme dans le volet Objets.

3. Renseignez les propriétés générales du thème.

     (optionnel) 

  • Sélectionnez le thème devant servir de modèle, dans la liste Based On.
  • Sélectionnez la catégorie dans laquelle doit être classé le nouveau thème. Cliquez sur [ + ] pour en créer une nouvelle.
  • Sélectionnez l'icône associée au thème, dans la bibliothèque d'images via Wheel icon.png, ou saisissez son URL dans la zone Icon. S'il s'agit d'une image au format .svg, sélectionnez sa couleur de fond via la zone Icon Color.

5. Cliquez sur OK.

  • Le nom du nouveau thème est affiché dans la barre d'outils de l'éditeur.
  • Si vous avez sélectionné un modèle, toutes les propriétés de celui-ci sont recopiées sur le nouveau thème.
  • Le nouveau thème est ajouté dans la bibliothèque des thèmes (accessible via Apps - Manage themes icon.png Themes dans le volet Objets), sous la catégorie renseignée. Le libellé est précédé de l'icône sélectionnée.

Étape 2 : Sélection de l'application pour la prévisualisation du thème

1. Sélectionnez l'application via la liste Preview on de la barre d'outils.

2. (optionnel) Sélectionnez la page de l'application.
Le volet Visualisation est automatiquement réactualisé.
 

Étape 3 : Définition des propriétés du thème

1. Cliquez, en haut de l'inspecteur de propriétés, sur l'onglet correspondant aux propriétés à configurer.

  • onglet Application : propriétés s'appliquant à toutes les pages des applications liées au thème.
  • onglet Widget : propriétés s'appliquant à tous les widgets d'un type donné, dans l'ensemble des applications liées au thème.

         Theme Editor - Tabs inspector properties.png

2. Allez sur chaque section souhaitée dans l'inspecteur de propriétés.

3. Modifiez les propriétés.
Le volet Visualisation reflète automatiquement les changements.
 

Étape 4 : Retour sur la galerie

1. Fermez l'éditeur de thème via EVApps - GUI - Close Application icon.png dans la barre d'outils.

Modification d'un thème

  • Cliquez sur Apps - Manage themes icon.png Themes dans le volet Objets.
  • Cliquez sur le thème souhaité.
    Note : Un message est affiché si le thème est déjà utilisé par une application.
    Le volet Visualisation affiche la mise en page des différents objets configurés.
  • Effectuez les changements souhaités via l'inspecteur de propriétés.
    Les changements sont automatiquement reportés sur toutes les applications utilisant le thème.
     

Suppression d'un thème

  • Cliquez sur Apps - Manage themes icon.png Themes dans le volet Objets.
  • Survolez avec la souris le libellé du thème puis cliquez sur v.
    Le menu contextuel est affiché.
  • Cliquez sur Apps - Delete icon.png Delete theme.

Comment associer un thème à une application

Étape 1 : Publication du thème

1. Cliquez sur Apps - Gallery - Theme design icon.png Theme Design dans la barre d'outils de la galerie.

2. Cliquez sur Apps - Manage themes icon.png Themes dans le volet Objets.

3. Cliquez sur le thème souhaité.
Le volet Visualisation affiche la mise en page des différents objets configurés.

4. Affichez les propriétés générales du thème, via Apps - Application properties icon.png dans la barre d'outils.
Note : Un message est affiché si le thème est déjà utilisé par une application.

5. Cochez la case Published.

6. Cliquez sur OK.
Le thème devient disponible dans la bibliothèque des thèmes et peut être utilisé par l'ensemble des applications.
 

Étape 2 : Association du thème à une application

1. Fermez l'éditeur de thème via EVApps - GUI - Close Application icon.png dans la barre d'outils.
Vous revenez sur la galerie.

2. Affichez les propriétés générales de l'application via Apps - Application properties icon.png dans la barre d'outils de l'application.

3. Sélectionnez le thème rendu public, dans la liste Theme.

4. Cliquez sur OK.
Tous les objets de l'application prennent la mise en forme définie dans le thème.

5. Effectuez les mêmes actions pour toutes les applications à associer au thème.

Tags:
Modifié par Utilisateur inconnu le 2020/03/24 12:22
Créé par Administrator XWiki le 2016/01/20 18:22

Raccourcis

L'actualité mensuelle
•  Newsletter

Tous les changements
•  Service Manager
•  Service Apps
•  Self Help
•  Service Bots

Glossaire

Powered by XWiki ©, EasyVista 2021