Boîtes de dialogue : Différence entre versions
m |
(→Présentation) |
||
| (44 révisions intermédiaires par 2 utilisateurs non affichées) | |||
| Ligne 1 : | Ligne 1 : | ||
| + | [[File:Table4-6-modal-combobox.png|right|thumb|200px|modalWindow4 overview]] | ||
__TOC__ | __TOC__ | ||
=Présentation= | =Présentation= | ||
| − | L'objet de cette page est de présenter l'utilisation des | + | L'objet de cette page est de présenter l'utilisation des [[Wikipedia-fr:Boîte_de_dialogue|boîtes de dialogue]] de l'[[Présentation-d'OpenFlyers-4#Interface-dynamique|interface dynamique]] de la [[Accueil|version 4 d'OpenFlyers]]. |
=Définition= | =Définition= | ||
| − | Une '''fenêtre de dialogue''' est un composant d'[ | + | Une '''fenêtre de dialogue''' est un composant d'[[Wikipedia-fr:Interface_graphique|interface graphique]] se superposant au contenu de la page et dans le but de créer un dialogue avec l'utilisateur. |
=Objectifs= | =Objectifs= | ||
==Informer== | ==Informer== | ||
| − | La fenêtre de dialogue qui '''informe''' l'utilisateur comporte du texte simple. Celui-ci a pour but d'informer sur une fonctionnalité quelconque ou d'[[ | + | La fenêtre de dialogue qui '''informe''' l'utilisateur comporte du texte simple. Celui-ci a pour but d'informer sur une fonctionnalité quelconque ou d'[[Présentation générale des alertes|alerter]] l'utilisateur. |
==Obtenir une action== | ==Obtenir une action== | ||
| − | Certaines fenêtres | + | Certaines fenêtres modales visent à '''obtenir une action''' de l'utilisateur dans le but d''''interagir''' avec l'application. |
| − | = | + | =Aspect= |
| − | Une | + | Une fenêtre de dialogue se compose : |
| − | + | *D'une zone supérieure sur fond gris comportant le '''titre''' éventuel et des '''boutons'''. | |
| − | + | *D'une zone inférieure sur fond blanc comportant le '''contenu''' de la fenêtre. | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | * | + | |
[[File:Table4-6-modal-combobox.png]] | [[File:Table4-6-modal-combobox.png]] | ||
| + | =Utilisation= | ||
| + | |||
| + | ==Ouverture== | ||
| + | |||
| + | ===Consécutivement au chargement de page=== | ||
| + | Une fenêtre de dialogue s'ouvrant consécutivement au chargement d'une page sert à [[Présentation générale des alertes|alerter]] l'utilisateur. | ||
| + | |||
| + | ===Consécutivement à une une action=== | ||
| + | Une fenêtre de dialogue s'ouvrant consécutivement à une action de l'utilisateur requiert une [[#Interactions|interaction]] de celui-ci. | ||
| + | |||
| + | ==Interactions== | ||
| + | ===Types d'interactions=== | ||
| + | *Sélectionner un '''item unique''' | ||
| + | *Sélectionner '''plusieurs items''' | ||
| + | *Saisir un '''texte''' | ||
| + | *Modifier des '''paramètres multiples''' | ||
| + | |||
| + | ===Enregistrement=== | ||
| + | L''''enregistrement''' des choix effectués par l'utilisateur s'effectue de deux manières : | ||
| + | *'''Item unique :''' la sélection d'un des items proposés enregistre la modification. | ||
| + | *'''Plusieurs, items, texte, paramètres multiples :''' l'utilisateur complète des champs, choisit des items. Lorsqu'il a terminé ses modifications, il clique sur le '''bouton ok''' situé dans la zone supérieure de la fenêtre modale : [[File:Modal4-ok.png]]. | ||
| + | |||
| + | Lorsque l'action est enregistrée, la fenêtre se [[#Fermeture|ferme]]. | ||
| + | |||
| + | ==Fermeture== | ||
| + | *Soit la fenêtre consiste en une [[Présentation générale des alertes|alerte]] et aucun enregistrement n'est possible. | ||
| + | *Soit elle s'ouvre consécutivement à une action de l'utilisateur. Dans ce cas, il est possible d'enregistrer des données. | ||
| + | |||
| + | ===[[#Enregistrement|Avec enregistrement]]=== | ||
| + | |||
| + | ===Sans enregistrement=== | ||
| + | *Clic à l''''extérieur''' de la fenêtre. | ||
| + | *Clic sur le '''pictogramme fermer''' : [[File:Modal4-close.png]]. | ||
=Types de fenêtres de dialogues= | =Types de fenêtres de dialogues= | ||
==Fenêtre d'alerte== | ==Fenêtre d'alerte== | ||
*Une '''fenêtre d'alerte''' est une fenêtre d'information. | *Une '''fenêtre d'alerte''' est une fenêtre d'information. | ||
| − | *Des [[ | + | *Des [[Présentation générale des alertes|alertes]] apparaissent dans la zone de contenu. |
[[File:Modalwindow4-1-alert.png]] | [[File:Modalwindow4-1-alert.png]] | ||
| − | == | + | ==Texte long== |
| − | + | Saisir le contenu souhaité dans la '''zone de texte''', puis cliquer sur OK pour valider. | |
| − | ==Choix unique | + | [[File:Table4-5-modal-textarea.png]] |
| − | + | ||
| + | ==Choix unique== | ||
| + | Cliquer sur le choix souhaité dans la '''liste'''. Cliquer sur OK pour valider. | ||
| + | |||
| + | [[File:Table4-6-modal-combobox.png]] | ||
==Choix multiples== | ==Choix multiples== | ||
| − | + | *Une série de '''cases à cocher''' se présente. Cocher toutes les cases souhaitées et cliquer sur le '''bouton ok''' pour valider. | |
| + | *Au-dessus de l'ensemble des choix, une case à cocher globale permet de '''tout cocher/décocher''' en même temps. | ||
| + | |||
| + | [[File:Table4-7-modal-multicheckbox.png]] | ||
==Info-bulle== | ==Info-bulle== | ||
| Ligne 48 : | Ligne 85 : | ||
===Tableaux=== | ===Tableaux=== | ||
| − | Le [[# | + | Le [[Utilisation des tableaux#Options_de_ligne|pictogramme des options de ligne d'un tableau]] ouvre une info-bulle lorsqu'on le survole. |
===Planning de réservation=== | ===Planning de réservation=== | ||
| − | L'info-bulle du planning de réservation affiche les [[ | + | L'info-bulle du planning de réservation affiche les [[Utilisation du planning de réservation#Options_de_réservation|options d'une reservation]]. |
Version actuelle en date du 26 mars 2019 à 16:04
Sommaire
Présentation
L'objet de cette page est de présenter l'utilisation des boîtes de dialogue de l'interface dynamique de la version 4 d'OpenFlyers.
Définition
Une fenêtre de dialogue est un composant d'interface graphique se superposant au contenu de la page et dans le but de créer un dialogue avec l'utilisateur.
Objectifs
Informer
La fenêtre de dialogue qui informe l'utilisateur comporte du texte simple. Celui-ci a pour but d'informer sur une fonctionnalité quelconque ou d'alerter l'utilisateur.
Obtenir une action
Certaines fenêtres modales visent à obtenir une action de l'utilisateur dans le but d'interagir avec l'application.
Aspect
Une fenêtre de dialogue se compose :
- D'une zone supérieure sur fond gris comportant le titre éventuel et des boutons.
- D'une zone inférieure sur fond blanc comportant le contenu de la fenêtre.
Utilisation
Ouverture
Consécutivement au chargement de page
Une fenêtre de dialogue s'ouvrant consécutivement au chargement d'une page sert à alerter l'utilisateur.
Consécutivement à une une action
Une fenêtre de dialogue s'ouvrant consécutivement à une action de l'utilisateur requiert une interaction de celui-ci.
Interactions
Types d'interactions
- Sélectionner un item unique
- Sélectionner plusieurs items
- Saisir un texte
- Modifier des paramètres multiples
Enregistrement
L'enregistrement des choix effectués par l'utilisateur s'effectue de deux manières :
- Item unique : la sélection d'un des items proposés enregistre la modification.
- Plusieurs, items, texte, paramètres multiples : l'utilisateur complète des champs, choisit des items. Lorsqu'il a terminé ses modifications, il clique sur le bouton ok situé dans la zone supérieure de la fenêtre modale :
.
Lorsque l'action est enregistrée, la fenêtre se ferme.
Fermeture
- Soit la fenêtre consiste en une alerte et aucun enregistrement n'est possible.
- Soit elle s'ouvre consécutivement à une action de l'utilisateur. Dans ce cas, il est possible d'enregistrer des données.
Avec enregistrement
Sans enregistrement
- Clic à l'extérieur de la fenêtre.
- Clic sur le pictogramme fermer :
.
Types de fenêtres de dialogues
Fenêtre d'alerte
- Une fenêtre d'alerte est une fenêtre d'information.
- Des alertes apparaissent dans la zone de contenu.
Texte long
Saisir le contenu souhaité dans la zone de texte, puis cliquer sur OK pour valider.
Choix unique
Cliquer sur le choix souhaité dans la liste. Cliquer sur OK pour valider.
Choix multiples
- Une série de cases à cocher se présente. Cocher toutes les cases souhaitées et cliquer sur le bouton ok pour valider.
- Au-dessus de l'ensemble des choix, une case à cocher globale permet de tout cocher/décocher en même temps.
Info-bulle
Une info-bulle est une fenêtres de dialogue sur fond blanc présentant seulement une liste d'items cliquables. Elles ne possèdent pas de zone de titre ou de boutons.
Elles sont utilisées dans les contextes :
Tableaux
Le pictogramme des options de ligne d'un tableau ouvre une info-bulle lorsqu'on le survole.
Planning de réservation
L'info-bulle du planning de réservation affiche les options d'une reservation.
