Widget Sliding Panel

Modifié le 28/05/2022 10:53

Apps - Widget - Sliding Panel 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 pouvant contenir du texte, des images, appeler une page Html, une page de l'application ou d'une autre application.... 

  • Le contenu du diaporama est défini via l'éditeur de texte.
  • 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

  • L'ordre de la liste Slides définit l'ordre d'apparition des diapositives 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 créer un diaporama uniquement à partir des pages de l'application, utilisez le widget Sliding Page.
  • Pour créer un diaporama uniquement à partir d'images, utilisez le widget Sliding Image.

Exemple

Affichage d'un diaporama comprenant 2 images et un lien hypertexte vers un site web
         EVApps - widget Sliding Panel - Example.png

Liste des propriétés

Content

Slides : Liste des diapositives constituant le diaporama. Cliquez sur [ ADD SLIDE ] pour en ajouter une nouvelle -  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édures

Comment créer un diaporama

1. Cliquez sur [ ADD SLIDE ] ; dans le cadre Add your content, saisissez directement le code Html correspondant à la page à insérer das le diaporama ou cliquez sur Apps - Edit icon.png pour ouvrir l'éditeur de texte.

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 de la liste Slides, 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.

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.

Comment récupérer l'URL de lancement d'une application

1. Sur la galerie, cliquez sur Apps - Application properties icon.png en regard de l'application souhaitée.

2. Dans la barre d'outils de l'éditeur graphique, cliquez sur EVApps - GUI - Share icon.png.
                   EVApps - GUI - Share Apps.png

3. Copiez l'URL de lancement de l'application.

4. Revenez sur votre application et collez l'URL :

  • soit dans la propriété URL d'un lien hypertexte inséré sur une propriété Label, Header/Footer, Html Code d'un widget (via Apps - Text Editor - Hyperlink icon.png sur l'éditeur de texte) ;
  • soit dans la propriété URL to Load du widget Button ;
  • soit dans la propriété Data > Select Link Type du widget Menu.

Tags :
Powered by XWiki © EasyVista 2022