Les pages des applications


Apps - Manage pages icon.png  Les pages permettent de découper une application en sous-applications, afin de regrouper des informations. 

  • Par défaut, les pages sont présentées automatiquement dans un bandeau en haut de l'application, sous la forme de boutons.
             Apps - Pages - Buttons Banner.png
  • Une page d'accueil est disponible sur chaque application, servant de point d'entrée.
  • Chaque page dispose de propriétés permettant de définir son apparence et l'aspect graphique des widgets.
     

Les pages peuvent être :

  • publiques : contenu accessible à tous les utilisateurs connaissant l'URL / raccourci de l'application, sans être connectés ;
  • privées : contenu accessible uniquement aux utilisateurs se connectant.

Exemple

   Open url.png voir Gestion du mode Public

ExamplePublicMode

Portail client avec des pages publiques et des pages privées

  • Page d'accueil du portail : page publique
             Apps - Example portal - not connected.png
    • Elle affiche des indicateurs de la société et donne accès au catalogue des services et à la base de connaissance.
    • Elle est accessible pour tout utilisateur et ne nécessite pas de connexion. 
    • L'utilisateur est identifié comme invité Guest.
    • Les données sont affichées à partir de la configuration du profil Public : quel que soit l'utilisateur qui se connecte, l'affichage des données est identique.
       
  • 2ème page du portail : page privée
             Apps - Example portal - connected.png
    • Elle affiche un tableau de bord avec une liste Mes incidents : l'utilisateur qui s'authentifie a accès à la liste de ses propres incidents.
    • L'utilisateur connecté est affiché dans la zone d'authentification Apps - Authentication zone.png.
    • Les données affichées utilisent la configuration de l'utilisateur connecté : sa langue, les dates/heures dans son fuseau horaire, les nombres/dates dans le format qu'il a défini.
       
  • 3ème page du portail : page privée
    • Elle permet de commander des services.
    • Les données affichées utilisent la configuration de l'utilisateur connecté.

Remarques

  • Interdépendance des objets entre les pages :
    • Les datasources sont disponibles pour l'ensemble des pages de l'application.
    • Les widgets sont indépendants entre chaque page de l'application. 
  • La page d'accueil :
    • Elle est toujours positionnée en haut de la liste des pages.
    • Elle ne peut pas être masquée.
    • En mode Exécution, elle est automatiquement affichée lorsqu'un utilisateur lance l'application.
  • Chaque page peut être masquée en mode Exécution (via une propriété), sauf la page d'accueil qui est toujours visible.
  • Gestion des pages publiques / privées  - Open url.png voir Gestion du mode Public
    • Un utilisateur ayant le profil Public doit être associé à l'application.
    • Par défaut, toutes les pages sont privées, sauf la page d'accueil qui est automatiquement déclarée publique et ne peut pas changer de mode.
    • Toute nouvelle page est par défaut déclarée privée.
    • Lorsqu'une page privée devient la page d'accueil de l'application, elle est automatiquement déclarée publique.

Attention

  • Lorsqu'une page est supprimée :
    • Tous les widgets définis sur celle-ci sont automatiquement supprimés. 
    • Tous les datasources utilisés sur la page restent disponibles dans la bibliothèque de l'application.

Bonnes pratiques

  • Pour créer un accès direct à une autre page de l'application, vous pouvez utiliser :
    • le widget Page (bouton de navigation pouvant être constitué de texte et d'images) ;
    • un lien hypertexte inséré depuis l'éditeur de texte.
  • Vous pouvez remplacer la présentation standard du bandeau par un widget Menu. Dans ce cas, masquez l'ensemble des pages.

exemple  Bandeau de l'application modèle IT Portal - le logo permet de revenir sur la page d'accueil

Apps - Pages - Buttons Banner with widget Menu.png

Description de l'écran

       EVApps - GUI - Manage Pages.png

Apps - Add icon.png : Ajoute une nouvelle page, en bas de la liste.

ev sas - Help icon.png : Ouvre la page d'aide contextuelle.

Box checked.png (Note : Sauf pour la page d'accueil) : Indique si la page est visible en mode Exécution (case cochée) ou masquée (case non cochée).

Apps - Edit icon.png : Affiche le contenu de la page sélectionnée dans le volet Conception et ouvre l'inspecteur de propriétés  - Open url.png voir Description des propriétés

Apps - Public page icon.png Apps - Private page icon.png (Note : Uniquement si un utilisateur Public est associé à l'application) : Indique s'il s'agit d'une page publique Apps - Public page icon.png ou privée Apps - Private page icon.png  - Open url.png voir Gestion du mode Public

Wheel icon.png : Ouvre un menu contextuel à la page.

  • Apps - Delete icon.png : Supprime la page sélectionnée.
  • Apps - Duplicate 2 icon.png : Duplique la page sélectionnée. Le même nom est appliqué, avec la mention (Copy).
     

Apps - Order objects icon.png : Modifie l'ordre des pages, via un cliquer-glisser.

Description des propriétés

       EVApps - GUI - Inspector Properties Page.png

Accès : Apps - Edit icon.png en regard d'une page

Menu

MenuProperties

Propriétés graphiques du menu affiché dans le bandeau en haut de l'application (présentation standard des pages sous forme de boutons)

Note : Si vous avez remplacé cette présentation par un widget Menu, allez sur la section Theme > Cell Style pour définir les propriétés graphiques des éléments de menu permettant d'accéder aux pages.

Présentation standard (boutons) Présentation via un widget Menu
Pages as buttons.png Pages as menu.png
Propriété Description Représentation
Element : Objet à formater (1) Application Title : Titre de l'application Menu - Elements.png
(2) Menu (Active) : Bouton actif
(3) Menu : Boutons inactifs
Propriétés graphiques de l'objet sélectionné
PageGeneralFormat
Font Family (Inherit) Police de caractères du texte de l'objet, sélectionnée via Select Font Graphic properties - General format.png
Size Taille de la police de caractères, qui peut être sélectionnée via la réglette ou saisie directement dans la zone
Alignment (Inherit) Alignement du texte de l'objet (Gauche / Centré / Droite / Justifié)
Style (Inherit) Attributs de caractères du texte de l'objet (Gras / Italique / Souligné)
Background Color (Inherit) Couleur de fond de l'objet
Text Color (Inherit) Couleur du texte affiché par l'objet

Note : Le formatage du texte défini via l'éditeur de texte est prioritaire sur cette couleur

Couleur de l'icône de déconnexion Apps - Logout icon.png

Logout Color (Inherit) (1) Icône inactive Menu - Logout icon off.png
Logout Color (hover) (Inherit) (2) Icône survolée avec la souris Menu - Logout icon on.png

Couleur du cadre délimitant les boutons

Active Menu Separator (Inherit) (1) Cadre du bouton actif Menu - Separator.png
Menu Separator (Inherit) (2) Cadre des boutons inactifs
ColorOnHover
Lorsque le titre de l'objet est survolé avec la souris
Background Color On Hover (Inherit) (1) Couleur de fond de l'objet Object on hover.png
Text Color On Hover (Inherit) (2) Couleur du texte de l'objet
EndMenuProperties

Page

Background Image

Image en fond d'écran de la page

Propriété Description Représentation
Background Image / Background Image (mobile)

Image de fond de la page sur un écran classique / sur un écran de petite taille (smartphone)

Page - Background image.png
Apps - Upload icon.png

Téléchargement de l'image

Background Image Properties Image - Repeat Size Position properties - Dropdown list.png

Cliquez sur la liste déroulante pour configurer l'affichage de l'image via différentes options.

Image - Repeat Size Position properties.png
Options d'affichage de l'image
BackgroundImageProperties

Repeat : Définit la façon dont l'image est répétée dans la zone dédiée à l'arrière-plan.

no-repeat repeat repeat-x repeat-y

Aucune répétition de l'image

Image - Repeat property - No Repeat.png

Répétition horizontalement et verticalement

Image - Repeat property - Repeat.png

Répétition horizontalement

Image - Repeat property - Repeat x.png

Répétition verticalement

Image - Repeat property - Repeat y.png

L'image est répétée autant de fois que nécessaire pour recouvrir la zone. La dernière image est rognée si nécessaire.

Size : Définit la taille de l'image.

Initial size Scale to fit Scale to cover

Taille originale

Image - Size property - Initial.png

Image agrandie pour s'ajuster à la hauteur de la zone dédiée à l'arrière-plan, tout en conservant ses proportions hauteur/largeur

Image - Size property - Scale to fit.png

Image agrandie en largeur et en hauteur pour recouvrir entièrement la zone dédiée à l'arrière-plan. Note : Une partie de l'image peut être masquée.

Image - Size property - Scale to cover.png

Position (H/V) : Définit la position de l'image dans la zone dédiée à l'arrière plan.

  • La première valeur indique le positionnement horizontal de l'image dans la zone : par rapport au bord gauche (left), au bord droit (right) ou au centre (center).
  • La seconde valeur indique le positionnement vertical de l'image dans la zone : par rapport au haut (top), au bas (bottom) ou au centre (center).
  • Si l'image est répétée sur toute la surface (Repeat = repeat), la propriété Position provoque simplement un décalage du motif.
PageProperties_WidthColor

Propriétés Width / Color

Largeur et couleur de la page

Propriété Description Représentation
Max Width (Inherit) Largeur maximale de la page

Couleur de la page

Inside Color (Inherit) (1)

Sur la partie centrale (= Largeur maximale de la page - propriété Max Width)

Page - Color inside outside.png
Outside Color (Inherit) (2)

Sur la partie extérieure

EndPageProperties_WidthColor

Header Page

Entête affiché à partir d'une page enfant

  • L'entête de page apparaît au premier plan du contenu de la page parente.
  • Une page (parente ou enfant) ne peut pas s’appeler elle-même.
  • La totalité de la page enfant est sélectionnée : il n’est pas possible de sélectionner une zone particulière de celle-ci.
  • Pour améliorer les performances, la page enfant n'est pas visible à partir de l'éditeur graphique, mais uniquement en mode Exécution.
     
Propriété Description Représentation
Display Header Page

Indique si une page enfant doit être affichée en haut de page (case cochée), ou non (case non cochée)

Header Page

Page enfant appelée par la page parent, qui va se positionner en haut de la page parent

Page - Header - Child page 1.png
Change Page When Scrolling

Indique si la page enfant peut être remplacée par une seconde page enfant lors du défilement de la page parent avec la souris (case cochée), ou non (case non cochée)

Page Displayed When Scrolling

Seconde page enfant à afficher lors du défilement de la page parent avec la souris et qui remplace la première page enfant

Page - Header - Child page 2.png
Scroll Distance

Distance de défilement à partir de laquelle la seconde page enfant remplace la première page enfant

Footer Page

Pied affiché à partir d'une page enfant

  • Le pied de page apparaît au premier plan du contenu de la page parente.
  • Une page (parente ou enfant) ne peut pas s’appeler elle-même.
  • La totalité de la page enfant est sélectionnée : il n’est pas possible de sélectionner une zone particulière de celle-ci.
  • Pour améliorer les performances, la page enfant n'est pas visible à partir de l'éditeur graphique, mais uniquement en mode Exécution.
     
Propriété Description Représentation
Display Footer Page

Indique si une page enfant doit être affichée en bas de page (case cochée), ou non (case non cochée)

Footer Page

Page enfant appelée par la page parent, qui va se positionner en bas de la page parent

Page - Footer - Child page.png

Background Page

Vidéo ou playlist (suite de vidéos) en fond d'écran de la page

  • Les vidéos bouclent automatiquement lorsqu'elles arrivent à la fin. Sur une playlist, la lecture reprend au début de la première vidéo lorsque la dernière vidéo est terminée.
  • Les vidéos prennent automatiquement toute la largeur et la hauteur de l'écran. La largeur et la hauteur s’ajustent en fonction de la taille de l’écran.
  • Les vidéos doivent obligatoirement avoir un ratio 16/9 pour éviter l'apparition de bordures noires.
     
Propriété Description Représentation
Display Background

Indique si une vidéo / playlist doit être affichée en fond d'écran (case cochée), ou non (case non cochée)

Page - Background page on.png
Is playlist

Indique si le fond d'écran est constituée d'une playlist (case cochée), ou d'une vidéo simple (case non cochée)

Base Url

Url de la vidéo ou de la playlist, via un lien YouTube

Position Fixe

Indique si la vidéo en cours de lecture doit rester fixe en fond d'écran lors du défilement de la page courante (case cochée), ou si elle doit suivre le défilement de la souris (case non cochée)

Position fixe Position standard
Page - Background page - Fixe position on.png Page - Background page - Fixe position off.png
Allow Border

Indique si une bordure doit être ajoutée à la vidéo en cours de lecture (case cochée), ou non (case non cochée). Le type de bordure peut être paramétré : style, couleur, taille.

Page - Background page allow border.png
Shadow Color (Inherit)

Affiche une couleur en filigrane sur la vidéo en cours

Page - Background page - Shadow color.png
Opacity (Inherit)

Degré d'opacité de la couleur affichée en filigrane, qui peut être sélectionné via la réglette ou saisie directement dans la zone. Plus le degré est important, plus la couleur est visible.

Widgets

Propriétés appliquées à tous les widgets présents sur la page

WidgetsGeneralProperties

Propriétés générales

Propriété Description Représentation
Element : Objet à formater Widget : Style pour le
Selection (Active) : Style pour
Selection (Secondary) : Style pour
Propriétés graphiques de l'objet sélectionné
PageGeneralFormat
Font Family (Inherit) Police de caractères du texte de l'objet, sélectionnée via Select Font Graphic properties - General format.png
Size Taille de la police de caractères, qui peut être sélectionnée via la réglette ou saisie directement dans la zone
Alignment (Inherit) Alignement du texte de l'objet (Gauche / Centré / Droite / Justifié)
Style (Inherit) Attributs de caractères du texte de l'objet (Gras / Italique / Souligné)
Background Color (Inherit) Couleur de fond de l'objet
Text Color (Inherit) Couleur du texte affiché par l'objet

Note : Le formatage du texte défini via l'éditeur de texte est prioritaire sur cette couleur

ColorOnHover
Lorsque le titre de l'objet est survolé avec la souris
Background Color On Hover (Inherit) (1) Couleur de fond de l'objet Object on hover.png
Text Color On Hover (Inherit) (2) Couleur du texte de l'objet
Widget Height Hauteur par défaut des widgets, en pixels Widget - Minimal maximal height.png
Widget Minimal Height Hauteur minimale des widgets, en pixels, au-dessous de laquelle le redimensionnement n'est plus autorisé
Widget Maximum Height Hauteur maximale des widgets, en pixels, au-dessus de laquelle le redimensionnement n'est plus autorisé
Enable Entry Animation Indique si une animation est présente sur les widgets (case cochée - l'animation est jouée à chaque ouverture de la page), ou si aucune animation n'est présente (case non cochée).

Open url.png voir procédure Comment définir une animation sur un widget

exemple   Afficher les widgets avec un effet de fondu à chaque ouverture de la page
EndWidgetsGeneralProperties

Header / Footer

HeaderFooter_CommonProperties

Propriétés de l'entête et du pied des widgets

(1)   section Header : Propriétés de l'entête du widget

(2)   section Footer : Propriétés du pied du widget

EVApps - widgets Properties - Theme - Header-Footer.png
Propriété Description Représentation
Height (Inherit) Hauteur de l'élément, en pixels
Propriétés graphiques de l'objet sélectionné
PageGeneralFormat
Font Family (Inherit) Police de caractères du texte de l'objet, sélectionnée via Select Font Graphic properties - General format.png
Size Taille de la police de caractères, qui peut être sélectionnée via la réglette ou saisie directement dans la zone
Alignment (Inherit) Alignement du texte de l'objet (Gauche / Centré / Droite / Justifié)
Style (Inherit) Attributs de caractères du texte de l'objet (Gras / Italique / Souligné)
Background Color (Inherit) Couleur de fond de l'objet
Text Color (Inherit) Couleur du texte affiché par l'objet

Note : Le formatage du texte défini via l'éditeur de texte est prioritaire sur cette couleur

Border

Border_CommonProperties

Propriétés pour le formatage des bordures du cadre délimitant le widget

Propriété Description Représentation
Style (Inherit) Style des bordures (pointillés, trait plein, trait double...)

EVApps - widgets Properties - Theme - Border style-color-size.png

Color (Inherit) Couleur de la bordure
Size (Inherit) Épaisseur de la bordure

Best Practice icon.png    Définissez les propriétés générales de toutes les bordures du cadre (1) puis affinez-les via les propriétés propres à chaque bordure (2) :

  • Top : bordure haute
  • Bottom : bordure basse
  • Left : bordure gauche
  • Right : bordure droite

Radius (Inherit) Arrondi appliqué aux angles de chaque coin du cadre, en pixels :
  • Top Corner Left : coin haut gauche
  • Top Corner Right : coin haut droit
  • Bottom Corner Left : coin bas gauche
  • Bottom Corner Right : coin bas droit
EVApps - widgets Properties - Theme - Border corner.png

Notes :

  • Saisissez la valeur 0 pour un angle droit (1)
  • Plus la valeur est élevée, plus l'angle est arrondi (2)

Box Shadow

BoxShadow_CommonProperties

Propriétés pour le formatage de l'ombre appliquée au cadre délimitant le widget

Note : Non applicable au type de widgets Breadcrumbs

Propriété Description Représentation
Horizontal Position Épaisseur de l'ombre partant de la gauche (valeur négative) ou de la droite (valeur positive) du cadre délimitant le widget
Vertical Position Épaisseur de l'ombre partant du haut (valeur négative) ou du bas (valeur positive) du cadre délimitant le widget
Blur Radial Intensité de l'effet de flou appliqué à l'ombre
Spread Distance Décalage de l'ombre par rapport au cadre délimitant le widget
Valeur négative (- 40 px) Valeur positive (40 px)

EVApps - widgets Properties - Theme - Spread Negative.png

EVApps - widgets Properties - Theme - Spread Positive.png

Color (Inherit) Couleur de l'ombre
Opacity Degré de transparence de l'ombre (plus la valeur est élevée, plus l'ombre est visible)

Exemples de paramétrage de l'ombre

Exemple Paramétrage Exemple Paramétrage
EVApps - widgets Properties - Theme - Shadow Example A.png
  • Horizontal Position = -5px
  • Vertical Position = -5px
EVApps - widgets Properties - Theme - Shadow Example B.png
  • Horizontal Position = -5px
  • Vertical Position = -5px
  • Blur Radial = 5px
EVApps - widgets Properties - Theme - Shadow Example C.png
  • Horizontal Position = -5px
  • Vertical Position = -5px
  • Blur Radial = 0px
  • Spread Distance = 5px
EVApps - widgets Properties - Theme - Shadow Example D.png
  • Horizontal Position = -5px
  • Vertical Position = -5px
  • Blur Radial = 5px
  • Spread Distance = 5px
EVApps - widgets Properties - Theme - Shadow Example E.png
  • Horizontal Position = 0px
  • Vertical Position = 0px
  • Blur Radial = 5px
  • Spread Distance = 0px
EVApps - widgets Properties - Theme - Shadow Example F.png
  • Horizontal Position = 0px
  • Vertical Position = 0px
  • Blur Radial = 5px
  • Spread Distance = 5px

Padding

Padding_CommonProperties

Marges du contenu du widget par rapport au cadre le délimitant

Propriété Description Représentation
Padding Top (Inherit) (1) Marge entre le bord supérieur du contenu et l'extrémité haute du cadre délimitant le widget EVApps - widgets Properties - Theme - Padding.png
Padding Bottom (Inherit) (2) Marge entre le bord inférieur du contenu et l'extrémité basse du cadre délimitant le widget
Padding Left (Inherit) (3) Marge entre le bord gauche du contenu et l'extrémité gauche du cadre délimitant le widget
Padding Right (Inherit) (4) Marge entre le bord droit du contenu et l'extrémité droite du cadre délimitant le widget

Margin

Margin_CommonProperties

Marges du widget par rapport à son emplacement (ligne / colonne)

Note : Non applicable au type de widgets Breadcrumbs

Propriété Description Représentation
Margin Top (Inherit) (1) Marge entre le bord supérieur de la ligne sur laquelle est positionné le widget et l'extrémité haute du cadre le délimitant EVApps - widgets Properties - Theme - Margin.png
Margin Bottom (Inherit) (2) Marge entre le bord inférieur de la ligne sur laquelle est positionné le widget et l'extrémité basse du cadre le délimitant
Margin Left (Inherit) (3) Marge entre le bord gauche de la colonne dans laquelle est positionné le widget et l'extrémité gauche du cadre le délimitant
Margin Right (Inherit) (4) Marge entre le bord droit de la colonne dans laquelle est positionné le widget et l'extrémité droite du cadre le délimitant

Fonts

Propriétés des balises Html des styles appliquées à tous les widgets présents sur la page

Propriété Description Représentation
Element : Objet à formater Body : Style pour le corps de texte
Normal {p} : Style Normal
Preformatted {pre} : Style pour le texte préformaté
Title 1 {H1} to Title 6 {H6} : 6 styles d'entête
Propriétés graphiques de l'objet sélectionné
PageGeneralFormat
Font Family (Inherit) Police de caractères du texte de l'objet, sélectionnée via Select Font Graphic properties - General format.png
Size Taille de la police de caractères, qui peut être sélectionnée via la réglette ou saisie directement dans la zone
Alignment (Inherit) Alignement du texte de l'objet (Gauche / Centré / Droite / Justifié)
Style (Inherit) Attributs de caractères du texte de l'objet (Gras / Italique / Souligné)
Background Color (Inherit) Couleur de fond de l'objet
Text Color (Inherit) Couleur du texte affiché par l'objet

Note : Le formatage du texte défini via l'éditeur de texte est prioritaire sur cette couleur

Procédures

Comment créer une page

Étape 1 : Ajout de la nouvelle page

1. Cliquez sur Apps - Manage pages icon.png dans le volet Objets.

2. Sélectionnez la méthode de création de votre nouvelle page :

  • Soit créez une nouvelle page via Apps - Add icon.png ;
  • Soit utilisez l'une des pages existantes comme modèle :
    • cliquez sur Wheel icon.png ;
    • cliquez sur l'option Apps - Duplicate 2 icon.png Duplicate du menu contextuel.
      Le même nom est appliqué, avec la mention (Copy).

La nouvelle page est ajoutée à la fin de la liste des pages et dans la liste déroulante Apps - Drop-down list Pages.png.

3. Renommez la page pour identifier rapidement son contenu.

Étape 2 : Saisie des propriétés de la nouvelle page

1. Cliquez sur Apps - Edit icon.png.

2. Définissez les propriétés graphiques de la page dans l'inspecteur de propriétés  - Open url.png voir Description des propriétés
Les modifications sont automatiquement prises en compte et affichées dans le volet Conception.

Étape 3 (optionnelle) : Modification de l'ordre de tri des pages

1. Cliquez-glissez la nouvelle page vers la position souhaitée via Apps - Order objects icon.png.
La liste déroulante Apps - Drop-down list Pages.png est automatiquement réordonnée.

Étape 4 (optionnelle) : Choix de la visibilité de la page en mode Exécution

1. Affichez, ou masquez, la page en mode Exécution en cochant, ou décochant, la case en regard de la page.

Étape 5 : Test de la configuration de la page

1. Exécuter l'application via EVApps - GUI - Execute icon.png.

Comment gérer les pages publiques / privées d'une application

Étape 1 : Association d'un utilisateur ayant un profil Public

1. Affichez les propriétés générales de l'application, via Apps - Application properties icon.png.

2. Sélectionnez l'utilisateur via la liste Choose a public User.

Étape 2 : Sélection du type d'accès à la page

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

2. Indiquez le type d'accès de la page.
Note : Vous ne pouvez pas modifier le type d'accès à la page d'accueil qui est toujours publique.

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

Les modifications sont automatiquement enregistrées.

Tags:
Modifié par Utilisateur inconnu le 2020/03/24 12:24
Créé par Administrator XWiki le 2014/09/02 11:36

Raccourcis

L'actualité mensuelle
•  Newsletter

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

Glossaire

Powered by XWiki ©, EasyVista 2020