Le mode Responsive des applications


Version Service Manager : Oxygène et supérieures

Une application Responsive est une application dont le contenu s'adapte automatiquement à la taille du device sur lequel elle est exécutée (mobile, tablette, ordinateur, ...). Au lieu de créer autant d'applications que de types de device (engendrant des coûts importants de création et de maintenance), cela permet de concevoir une interface unique auto-adaptable, et sans dupliquer aucun objet.

Dans Service Apps, le mode Responsive permet de gérer 5 types de device : S = Smartphone, M = Tablette, L = Écran d’ordinateur, XL = Écran d’ordinateur haute définition, XXL = Écran de téléviseur mural haut de gamme.

  • L'application est créée via l'éditeur graphique pour le mode L = Écran d’ordinateur.
  • Les autres modes  (S, M, XL, XXL) héritent automatiquement des propriétés du mode L  - Open url.png voir Principes de l'héritage et des surcharges
  • En passant en mode Responsive sur l'éditeur graphique, chaque mode peut être configuré différemment :
    • surcharge des propriétés par défaut de chaque widget ;
    • affichage / masquage de chaque widget.

Principes de l'héritage et des surcharges

  • Chaque propriété de widget est gérée de manière individuelle. 
  • Par défaut, chaque mode S, M, XL, XXL reprend les propriétés du mode standard L. Toutes les modifications apportées à un widget dans un autre mode s’appliquent dans ce mode ; elles remplacent alors les propriétés par défaut.
  • Les valeurs sont héritées en partant du mode central L vers les extrémités.
    • Les propriétés par défaut en mode L s'appliquent à tous les modes, à moins qu'elles ne soient surchargées dans chacun des autres modes.
    • Une propriété mise en place en mode M s’applique également en mode S, à moins qu’elle ne soit surchargée en mode S.
    • Une propriété mise en place en mode XL s’applique également en mode XXL, à moins qu’elle ne soit surchargée en mode XXL.

                   Apps - Responsive mode - Inherit principle.png

Exemple

  • Éditeur graphique standard ==>  Création de l'application Tableau de bord des incidents pour le type de device L (Écran d’ordinateur)
    • Pied de page : affiché
    • Palette de couleurs des différents graphiques : Default 
  • Les autres types de device (S, M, XL, XXL) héritent de ces 2 propriétés.
  • Passage dans l'éditeur graphique en mode Responsive ==> Surcharge pour certains types de device
    • Pied de page : masqué pour le mode M (Tablette). Par héritage, le pied de page est également masqué pour le mode S, mais reste affiché pour les autres modes XL et XXL
    • Palette de couleurs des graphiques pour le mode XXL (Écran de téléviseur mural haut de gamme) : Vert. Les autres modes S, M, XL conservent la valeur Default

Remarques

  • Les actions de déplacement, redimensionnement et suppression des widgets ne sont pas possibles. Elles s'effectuent uniquement via l'éditeur graphique standard, pour le mode L.

Spécificités des versions 2016 et antérieures

  • Le mode Responsive est géré widget par widget, au travers des 2 propriétés Hide on Small Devices et On Small Devices Only (section Theme > Propriétés générales)  - Open url.png voir Description
  • Dans la barre d'outils standard de l'éditeur graphique, les icônes Apps - GUI - Desktop view icon.png et Apps - GUI - Mobile view icon.png permettent de masquer/visualiser les widgets à afficher sur des supports de petite taille.

Description de l'éditeur graphique en mode Responsive

Accès : Dans l'éditeur graphique, EVApps - GUI - Responsive mode icon.png dans la barre d'outils

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

La barre d'outils

        Apps - Responsive mode - Toolbar.png

Apps - Responsive mode - Back to GUI icon.png : Ferme l'éditeur graphique en mode Responsive et revient sur l'éditeur en mode standard.

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

  • Sélectionnez l'une d'entre elles pour la visualiser 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 - Save icon.png : Sauvegarde l'application. La version est ajoutée dans l'historique  - Open url.png  voir Gestion des versions

Apps - Responsive mode - Drop-down list Devices by mode.png : Liste des devices disponibles pour chacun des modes.
         Apps - Responsive mode - Devices by mode.png

  • Filtrez les devices par mode via la barre Apps - Responsive mode - Device types bar.png.
  • Cliquez sur l'option All pour afficher tous les devices supportés par l'ensemble des modes.
  • Les icônes affichées en regard de chaque device indique les différentes configurations disponibles.
             exemple   Apps - Responsive mode - Example - Device configurations.png

    Pour le device MacBook Pro 2016 13'', 2 configurations peuvent être réalisées  :

    • Configuration XL en mode Portrait
    • Configuration M en mode Paysage
     

Apps - Responsive mode - Pixels resolution.png (Note : Uniquement pour un device Generic) : Modifie la résolution en pixels de la page visualisée sur le volet Conception.


Apps - Responsive mode - Switch portrait landscape icon.png : Bascule entre le mode d'affichage Portrait et le mode d'affichage Paysage.

Affichage en mode Portrait   Apps - Responsive mode - Portrait icon.png Affichage en mode Paysage   Apps - Responsive mode - Landscape icon.png
Apps - Responsive mode - Portrait display.png Apps - Responsive mode - Landscape display.png


Apps - Responsive mode - Minimize maximize display icon.png : Bascule entre l'affichage standard (affichage des ascenseurs pour visualiser le contenu de la page non visible) et l'affichage en mode Page (ajustement automatique afin que tout le contenu de la page soit visible sur le volet Conception).

Affichage standard   Apps - Responsive mode - Minimize display icon.png Affichage en mode Page   Apps - Responsive mode - Maximize display icon.png
Apps - Responsive mode - Minimize display mode.png Apps - Responsive mode - Maximize display mode.png

Apps - Responsive mode - Objects list icon.png : Ouvre la fenêtre de configuration de la visibilité de chaque widget de l'application pour chacun des types de device.

  • Cliquez sur Open eye icon.png pour masquer ou sur Close eye icon.png pour afficher le widget sur l'un des types de support.
  • Filtrez les widgets affichés/masqués par mode via la barre Apps - Responsive mode - Device types bar.png.
             Apps - Responsive mode - Objects list.png
     

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

En mode Responsive, le volet Objets permet d'accéder uniquement aux widgets de l'application.

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

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

 

L'inspecteur de propriétés

En mode Responsive, l'inspecteur de propriété permet de configurer chaque widget utilisé par l'application pour un type de device donné. Le volet Conception reflète automatiquement chaque modification des propriétés.

Outils propres au mode Responsive

  • Apps - Responsive mode - Inherit principle - Behavior by mode icon.png : Au survol de l'icône, affiche les valeurs de la propriété pour chaque type de device, avec les principes d'héritage.
             Apps - Responsive mode - Inherit value - Example.png
    • (1) Haut du pictogramme L : Mode configuré et valeur de la propriété
    • (2) Bas du pictogramme L : Modes héritant de la valeur du mode configuré
               Apps - Responsive mode - Inherit value.png

exemple   Couleur de la palette du widget graphique 

  • Palette Default du mode standard L : héritée par les modes XL et XXL
  • Palette Green modifiée pour le mode M et héritée par le mode S
  • Apps - Responsive mode - Inherit principle - Return to standard value icon.png (Note : Uniquement lorsque la propriété a été surchargée dans un mode) : Permet de revenir à la valeur du mode standard L.

exemple   Revenir à la couleur standard de la palette du widget graphique
         Apps - Responsive mode - Clear specific value.png

 

Le volet Conception

En mode Responsive, le volet Conception permet uniquement de visualiser les widgets pour le type de device sélectionné. 

Les actions de déplacement, redimensionnement, suppression ne sont pas possibles.

Procédure : Comment utiliser le mode Responsive

Étape 1 : Ouverture de l'éditeur graphique en mode Responsive

1. Allez sur la galerie.

2. Cliquez sur Apps - Application properties icon.png dans la barre d'outils de l'application.
L'éditeur graphique est ouvert en mode standard (type de device L).

2. Cliquez sur EVApps - GUI - Responsive mode icon.png.
L'éditeur graphique est ouvert en mode Responsive. La barre d'outils est modifiée.
        Apps - Responsive mode - Toolbar.png
 

Étape 2 : Sélection du type de device

1. Ouvrez la liste des devices Apps - Responsive mode - Drop-down list Devices by mode.png.
         Apps - Responsive mode - Select device.png

2. Cliquez sur le type de device dans la barre Apps - Responsive mode - Device types bar.png.
Tous les devices définis pour ce mode sont affichés.

3. Cliquez sur le device à configurer.

ou

Sélectionnez le mode Generic si vous ne trouvez pas le device souhaité dans la liste déroulante.

 

Étape 3 : Sélection du widget à surcharger

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

2. Cliquez sur Apps - Manage widgets icon.png Widgets dans le volet Objets.
Le volet Objets affiche tous les widgets de l'application.

3. Cliquez sur le libellé du widget à configurer.
L'inspecteur de propriétés affiche les informations du widget sélectionné.
 

Étape 4 : Surcharge du widget pour le type de device sélectionné

1. Vérifiez la valeur actuelle de la propriété à configurer en survolant l'icône Apps - Responsive mode - Inherit principle - Behavior by mode icon.png placée à droite.
Les valeurs pour chaque mode sont affichées, avec les principes d'héritage.
         Apps - Responsive mode - Procedure - Inherit standard value.png

2. Renseignez la valeur pour le type de device sélectionné.
Le volet Conception est réactualisé.

3. Effectuez les mêmes actions pour chaque propriété à modifier pour le type de device.

Retour à la valeur du mode standard L

  • Cliquez sur Apps - Responsive mode - Inherit principle - Return to standard value icon.png en regard de la propriété.
             Apps - Responsive mode - Procedure - Return to standard value.png
     

Étape 5 : Configuration de la visibilité des widgets par type de device

1. Cliquez sur Apps - Responsive mode - Objects list icon.png.
La liste de tous les widgets de l'application est affichée.
         Apps - Responsive mode - Procedure - Objects list.png

2. Cliquez sur Open eye icon.png pour masquer un widget pour l'un des types de device.
L'icône est remplacée par Close eye icon.png.

3. Cliquez sur Close eye icon.png pour afficher un widget pour l'un des types de device.
L'icône est remplacée par Open eye icon.png.

4. Cliquez sur OK.
Le volet Conception est réactualisé. Les widgets sont affichés / masqués pour le type de device sélectionné.
 

Étape 6 (optionnelle) : Affinage de l'aperçu dans le volet Conception

1. Cliquez sur Apps - Responsive mode - Switch portrait landscape icon.png pour basculer entre le mode d'affichage Portrait et le mode d'affichage Paysage  - Open url.png voir Exemple

2. Uniquement si vous avez sélectionné un device Generic, définissez la résolution en pixels via Apps - Responsive mode - Pixels resolution.png.

3. Cliquez sur Apps - Responsive mode - Minimize maximize display icon.png pour basculer entre l'affichage standard du volet Conception (contenu non visible affiché via les ascenseurs) et l'affichage en mode Page (ajustement automatique pour visualiser tout le contenu)  - Open url.png voir Exemple
 

Étape 7 : Retour sur l'éditeur graphique en mode standard

1. Cliquez sur Apps - Responsive mode - Back to GUI icon.png.

  • Tous les widgets sont réaffichés pour le mode standard L.
  • La barre d'outils est modifiée.
            EVApps - GUI - Toolbar.png
Tags:
Modifié par Christine Daussac le 2020/04/08 11:57
Créé par Administrator XWiki le 2019/04/01 20:04

Raccourcis

L'actualité mensuelle
•  Newsletter

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

Glossaire

Powered by XWiki ©, EasyVista 2020