Widget Controller widget (Contrôleur de widgets)

Le widget Widget Controller (Contrôleur de widgets) est un conteneur permettant d’organiser d’autres widgets dans une barre d’outils. Vous pouvez orienter les widgets dans le contrôleur horizontalement ou verticalement. Vous pouvez contrôler le nombre de widgets pouvant être ouverts et le mode d’affichage des boutons de widget.

Exemple

Utilisez ce widget pour prendre en charge les exigences de conception d’application, telles que les suivantes :

• Vous voulez organiser des widgets dans un contrôleur de type barre d’outils.
• Vous voulez ajouter des widgets dans une carte en mode plein écran sans qu’ils occupent trop d’espace.
• Vous voulez que les utilisateurs puissent ouvrir un ou plusieurs widgets à la fois pour interagir avec une carte.

Remarques sur l’utilisation

Pour ajouter des widgets au contrôleur, cliquez sur le bouton Add widget (Ajouter un widget) et sélectionnez-en un dans la bibliothèque de widgets ou faites glisser un widget du panneau Insert widget (Insérer un widget) sur le contrôleur. Configurez les widgets ajoutés en cliquant dessus dans le contrôleur pour en ouvrir le panneau des paramètres. Faites glisser le coin inférieur du panneau du widget pour définir sa taille initiale.

Lorsque vous cliquez sur un widget dans le contrôleur pour ouvrir le volet correspondant lors de l’exécution, une ligne d’indicateur apparaît sous l’icône du widget pour indiquer que le widget est actif. Vous pouvez utiliser les boutons Expand (Développer) et Collapse (Réduire) pour modifier l’espace occupé par les volets sans les fermer complètement.

Cliquez sur le bouton Manage widgets (Gérer les widgets) pour afficher une liste de tous les widgets du contrôleur. Vous pouvez réorganiser les widgets, les supprimer ou les insérer dans un groupe.

Groupes

Vous pouvez créer un groupe dans le contrôleur en faisant glisser un widget par-dessus un autre widget dans le volet Manage widgets (Gérer les widgets). Les groupes sont en réalité des widgets Accordéon. Ils sont utiles car ils vous permettent d’insérer plusieurs widgets dans un seul volet du contrôleur. Un groupe dispose des mêmes paramètres qu’un widget Accordéon, la seule différence étant qu’il se nomme Group (Groupe) dans le contour de la page. Lorsque vous cliquez sur un groupe dans le contrôleur, ses widgets apparaissent dans un menu empilé verticalement avec des boutons de développement et de réduction.

Widgets sans volet

Les styles de disposition de certains widgets ne conviennent pas aux volets du contrôleur. Pour optimiser l’affichage, lorsque vous cliquez sur leur icône de contrôleur, ces widgets apparaissent comme ils le feraient normalement en dehors du contrôleur. En règle générale, les widgets avec des styles de disposition de type barre d’outils apparaissent en hors volet lorsque vous les ajoutez au contrôleur et choisissez ce style de disposition.

Le widget Boîte à outils 3D, le widget Dessiner, le widget Ma position, le widget Partager, le widget Balayer et le widget Chronologie sont des exemples de widgets apparaissant hors volet.

Paramètres

Le widget Widget Controller (Contrôleur de widgets) inclut les paramètres suivants :

• Direction : affichez les widgets verticalement ou horizontalement dans le contrôleur.
• Alignment (Alignement) : choisissez le mode d’alignement des widgets. Vous ne remarquez une différence entre ces options que si la largeur ou la hauteur du contrôleur est supérieure à la longueur totale des widgets.
  • Si vous affichez les widgets horizontalement, vous pouvez les aligner au centre, à gauche ou à droite du contrôleur.
  • Si vous affichez les widgets verticalement, vous pouvez les aligner au centre, en haut ou en bas du contrôleur.
• Behavior (Comportement) : définissez le nombre de widgets pouvant être ouverts à partir du contrôleur et les widgets qui s’ouvrent automatiquement au chargement de la page.
  • Single (Unique) : un seul widget peut être ouvert à la fois. L’ouverture d’un widget en ferme un autre.
  • Multiple (Multiple) : plusieurs widgets peuvent être ouverts et exécutés à la fois. Dans ce cas, vous pouvez afficher les widgets ouverts empilés ou côte à côte.

    Conseil :

    Pour tester ces options, cliquez sur Live view (Vue en temps réel) dans la barre d’outils du générateur.

  • Autorisez l’ouverture automatique d’un ou de plusieurs widgets au chargement de la page en les sélectionnant dans la liste des widgets.
  • Display type (Type d’affichage) : ce paramètre apparaît si vous choisissez Multiple (Multiples). Choisissez d’afficher les volets des widgets empilés les uns sur les autres ou à côté les uns des autres.
• Widget panel arrangement (Disposition du volet des widgets) : ce paramètre apparaît si vous choisissez Single (Unique). Choisissez l’emplacement des volets des widgets :
  • Floating (Flottant) : les volets de widget sont flottants à côté du contrôleur, ancré à l’icône de chaque widget.
  • Fixed (Fixé) – Fixez les volets de widget de sorte qu’ils apparaissent dans l’un des neuf poins d’ancrage de la zone d’affichage. Vous pouvez définir la largeur et la hauteur du volet en pixels (px) ou en pourcentage de la zone d’affichage (%). Vous pouvez également définir des décalages pour les axes x et y et ajouter une animation à exécuter lorsque les volets apparaissent.
    • Vous pouvez également définir la largeur et la hauteur du volet sur Stretch (Étirer). Si vous faites cela, le volet s’étire pour remplir la zone d’affichage selon les marges Top (Haut), Bottom (Bas), Left (Gauche) et Right (Droite), que vous pouvez définir en pixels (px) ou en pourcentage de la zone d’affichage (%).

  Remarque :

  Le paramètre Widget panel arrangement (Disposition des volets de widget) s’applique uniquement lorsque le widget est affiché sur des écrans de moyenne ou de grande taille. Sur les appareils possédant un écran de petite taille, les volets de widget apparaissent an bas de l’application.

  En savoir plus sur l’optimisation de la mise en page sur tous les appareils.

• Appearance (Apparence) : sélectionnez les widgets dans le contrôleur de widgets et personnalisez leurs icônes, leurs étiquettes ou leur style.
  • Icon (Icône) : utilisez un cercle ou un rectangle pour les icônes de widget.
  • Label (Étiquette) : affichez les noms des widgets sous forme d’étiquettes sous les icônes. Vous pouvez modifier ces étiquettes en modifiant le nom du widget dans les volets des paramètres ou sur le contour du générateur.
  • Indicator (Indicateur) : incluez les lignes d’indicateur qui indiquent les widgets actifs.
  • Tooltip (Info-bulle) : incluez un texte de survol pour les boutons.
  • Size (Taille) : modifiez la taille des icônes de widget.
  • Spacing (Espacement) : spécifiez l’espace entre les icônes de widget en pixels (px).
  • Overflown style (Style de débordement) : si les widgets sont trop nombreux pour entrer dans la longueur du contrôleur, vous avez deux possibilités pour afficher les widgets supplémentaires :
    • Arrows (Flèches) : ajoutez des flèches afin de parcourir tous les widgets du contrôleur.
    • Popup window (Fenêtre contextuelle) : ajoutez un bouton étiqueté More widgets (Autres widgets) à la fin du contrôleur. Lorsque l’utilisateur clique sur ce bouton, une fenêtre dans laquelle figurent les autres widgets apparaît.
• Advanced (Avancé) : choisissez la manière dont les boutons de la barre d’outils apparaissent pour les trois états : Default (Par défaut), Selected (Sélectionné) et Hover (Survol). Si vous activez les étiquettes, vous pouvez changer la couleur de police et mettre en forme le texte en gras, italique, barré ou souligné. Sous Icon style (Style d’icône), vous pouvez modifier la couleur d’icône et d’arrière-plan. Sous Shadow (Ombre), vous pouvez ajouter des ombres aux icônes en configurant des décalages x et y, un rayon de flou, un rayon de répartition et une couleur d’ombre.
  • Default (Par défaut) : l’état par défaut d’un bouton sans interaction utilisateur.
  • Selected (Sélectionné) : l’état pour un bouton que l’utilisateur sélectionne sur le contrôleur ou pour un widget ouvert.
  • Hover (Survol) : l’état pour un bouton vers l’utilisateur pointe sur le contrôleur.

  Remarque :

  Le thème que vous avez sélectionné affecte les couleurs par défaut dans les panneaux de configuration. Cliquez sur More (Plus) pour choisir une couleur personnalisée si vous souhaitez utiliser une couleur qui ne fait pas partie du thème de l’application.

Options d’interaction

Vous pouvez utiliser un widget Button (Bouton) pour ouvrir des widgets dans le contrôleur.

Pour ce faire, ajoutez un widget Bouton et un widget Contrôleur de widgets à votre application. Dans l’onglet Action des paramètres du widget Bouton, cliquez sur Add a trigger (Ajouter un déclencheur), puis sélectionnez le Button click trigger (Déclencheur clic d’un bouton). Sélectionnez le widget Contrôleur de widgets comme cible, sélectionnez l’action Open widget (Ouvrir le widget), puis choisissez des widgets du contrôleur dans le menu déroulant sous Action settings (Paramètres de l’action).

Vous pouvez également ouvrir des widgets dans le contrôleur à l’aide d’un widget prenant en charge le déclencheur Record selection changes (Modifications de sélection d’enregistrements). Vous pouvez par exemple déclencher l’ouverture d’un widget Table dans le contrôleur chaque fois que vous effectuez une nouvelle sélection avec un widget Map (Carte).

Pour ce faire, ajoutez le déclencheur Record selection changes (Modifications de sélection d’enregistrements) dans les paramètres du widget Map (Carte). Sélectionnez le widget Contrôleur de widgets comme cible, sélectionnez l’action Open widget (Ouvrir le widget) et sélectionnez le widget Table dans le menu déroulant sous Open widget (Ouvrir le widget). Vous êtes invité à définir les données de déclenchement. Il s’agit des données qui déclenchent l’action Messages. Vous pouvez sélectionner l’une des options suivantes :

• All data (Toutes les données) : ouvre le widget lorsque l’utilisateur sélectionne des entités à partir de l’une des sources de données connectées au widget source.
• Custom (Personnalisé) : utilise des couches spécifiques comme données du déclencheur. Les données du déclencheur personnalisées sont utiles si vous voulez seulement qu’une source de données spécifique déclenche l’action du message. Par exemple, si vous voulez qu’un widget Diagramme s’ouvre uniquement lorsque l’utilisateur sélectionne une ville sur la carte, vous pouvez sélectionner la couche des villes comme données de déclenchement.

Vous pouvez également choisir les widgets à ouvrir avec l’action Messages Open widget (Ouvrir le widget).