Widget Sliding Panel
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
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
/ Next
(option Navigation Arrows). Sinon, l'utilisateur ne pourra pas actionner le diaporama.
Bonnes 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
Liste des propriétés
Content
Slides : Liste des diapositives constituant le diaporama. Cliquez sur [ ADD SLIDE ] pour en ajouter une nouvelle - 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 |
---|---|
![]() |
![]() |
Navigation Arrows : Indique si les flèches de navigation Previous / Next
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 |
---|---|
![]() |
![]() |
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.
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 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 |
---|---|
![]() |
![]() |
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 / Reprise
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 / Next
.
Theme
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 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
.
- Pour supprimer une diapositive du diaporama, cliquez sur
.
3. Définissez les paramètres du diaporama via la section Setup.
4. Passez en mode Exécution 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 en regard de l'application souhaitée.
2. Dans la barre d'outils de l'éditeur graphique, cliquez sur .
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
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.