Widget Sliding Page


Apps - Widget - Sliding Page icon.png Ce type de widget appartient à la catégorie Basic de la bibliothèque des widgets. Il permet d'insérer un diaporama faisant défiler une suite de diapositives, chacune appelant une page de l'application. 

  • Un ensemble de propriétés permet de configurer le comportement du diaporama en mode Exécution (défilement automatique, mode d'affichage de la navigation, …).

Remarques

 Open url.png  voir Remarques générales sur les widgets

  • La navigation s'effectue uniquement au travers des pages de l'application. Vous ne pouvez pas insérer dans le diaporama des pages d'une autre application ou des pages Html.
  • L'ordre de la liste Slides Page définit l'ordre d'apparition des pages dans le diaporama.

Attention

  • Si vous désactivez le défilement automatique du diaporama (option Timer), affichez les flèches de navigation Previous Apps - Previous icon.png / Next Apps - Next icon.png (option Navigation Arrows). Sinon, l'utilisateur ne pourra pas actionner le diaporama.

Best Practice big icon.pngBonnes pratiques

  • Pour insérer dans le diaporama du texte, des images, des pages Html ou des pages d'une autre application, utilisez le widget Sliding Panel qui donne accès à l'éditeur de texte.
  • Pour insérer dans le diaporama uniquement des images, utilisez le widget Sliding Image.

Exemple

Affichage d'un diaporama à partir de 3 pages de l'application affichant la météo de 3 villes : New York ; Paris ; Moscou
         EVApps - widget Sliding Page - Example.png

Liste des propriétés

Content

Slides Page : Liste des diapositives constituant le diaporama. Cliquez sur [ ADD PAGE ] pour en ajouter une nouvelle. Note : La liste contient toutes les pages de l'application ne faisant pas encore partie du diaporama -  Open url.png  voir Procédure

Setup

Animation : Permet de définir l'effet de transition entre les diapositives du diaporama : soit application d'un effet estompé (option Fade), soit aucun effet (option Slide).

Timer Speed : Vitesse de défilement du diaporama, exprimée en millisecondes, permettant de définir la durée d'affichage de chaque diapositive.

Pause On Hover : Lorsque le diaporama est pointé par la souris, indique si celui-ci s'arrête automatiquement (case cochée) ou non (case non cochée).

Resume On Mouseout : Lorsque le diaporama n'est plus pointé par la souris, indique si celui-ci redémarre automatiquement (case cochée) ou non (case non cochée).

Next On Click : Indique si le défilement entre les diapositives peut s'effectuer en cliquant sur le diaporama, sans attendre que la durée d'affichage éventuellement définie via l'option Timer Speed soit écoulée (case cochée) ou non (case non cochée).

Animation Speed (Note : À renseigner lorsque l'effet de transition entre les diapositives est Fade) : Durée mise par le système pour afficher entièrement chaque diapositive, exprimé en millisecondes.

Stack on Small : Indique si les diapositives sont empilées les unes sous les autres, de façon statique (case cochée - utilisez cette option pour un affichage sur un support graphique de petite résolution, tel un smartphone) ou si elles défilent horizontalement sur le diaporama (case non cochée). Note : Cette option est prise en compte pour un support graphique dont la hauteur est inférieure ou égale à 40 em (l'unité em est relative à la taille de la police).

Case cochée Case non cochée
Apps - widgets Sliding - Stack on Small On.png Apps - widgets Sliding - Stack on Small Off.png

Navigation Arrows : Indique si les flèches de navigation Previous Apps - Previous icon.png / Next Apps - Next icon.png sont affichées sur les côtés du diaporama (case cochée) ou sont masquées (case non cochée).

Case cochée Case non cochée
Apps - widgets Sliding - Navigation Arrows On.png Apps - widgets Sliding - Navigation Arrows Off.png

Slide Number : Indique si la numérotation des diapositives est visible (case cochée) ou masquée (case non cochée) sur le diaporama. Notes : Le numéro d'ordre de la diapositive apparaît en haut à gauche du diaporama, suivi du nombre total de diapositives. Si l'ordonnancement des diapositives est modifié dans le diaporama, le numéro d'ordre de chaque diapositive est automatiquement modifié.

Slide Number Text : Texte affiché entre le numéro d'ordre de la diapositive courante et le nombre total de diapositives.
         Example documentation icon FR.png  Slide Number Text : sur un total de ==> texte affiché sur le diaporama pour la diapositive n° 2 : 2 sur un total de 3

Bullets : Indique si des pastilles Apps - widget Sliding - Bullets icon.png sont affichées sous le diaporama, chacune représentant une diapositive et permettant d'accéder directement à celle-ci (case cochée), ou non (case non cochée).

Case cochée Case non cochée
Apps - widgets Sliding - Bullets On.png Apps - widgets Sliding - Bullets Off.png

Circular : Indique si le diaporama tourne en boucle (case cochée) ou s'arrête après la dernière diapositive (case non cochée).

Timer : Indique si le diaporama peut s'exécuter en mode automatique (case cochée) ou non (case non cochée). Notes : Lorsque le timer est actif, la barre de progression (montrant le temps restant d'affichage de la diapositive) et les boutons Pause Apps - Pause icon.png / Reprise Apps - Play icon.png sont affichés en haut à droite du diaporama.
 

Color Of The Ui Elements : Couleur de la pastille de défilement des images inactives.

Color Of The Ui Elements (active) : Couleur de la pastille de défilement de l'image active et couleur des flèches de navigation Previous Apps - Previous icon.png / Next Apps - Next icon.png.
         Example documentation icon FR.png  Apps - widgets Sliding - Color Ui elements.png

Theme

   Open url.png  voir Description des propriétés

 

Procédure : Comment créer un diaporama

1. Cliquez sur [ ADD PAGE ] ; dans la liste déroulante Slides Page, sélectionnez la page correspondant à la première diapositive du diaporama.

2. De la même façon, définissez les autres pages du diaporama, dans l'ordre souhaité d'apparition des diapositives.

  • Pour modifier l'ordre des pages, cliquez-glissez la diapositive souhaitée vers sa nouvelle position via Apps - Order objects icon.png.
  • Pour supprimer une diapositive du diaporama, cliquez sur Apps - Delete icon.png.
  • Pour modifier le contenu d'une des pages, cliquez sur Apps - Edit icon.png : celle-ci est automatiquement affichée dans le volet Conception.

3. Définissez les paramètres du diaporama via la section Setup.

4. Passez en mode Exécution EVApps - GUI - Execute icon.png pour visualiser le diaporama tel qu'il apparaîtra à l'utilisateur.

Tags:
Modifié par Utilisateur inconnu le 2017/09/15 16:53
Créé par Administrator XWiki le 2014/11/12 20:41

Raccourcis

L'actualité mensuelle
•  Newsletter

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

Glossaire

Powered by XWiki ©, EasyVista 2020