Boîtes de dialogue: Difference between revisions
imported>Ltremblet mNo edit summary |
imported>Ltremblet m (→Ouverture) |
||
(16 intermediate revisions by 2 users not shown) | |||
Line 4: | Line 4: | ||
=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 l'utilisateur | ==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'[[Alert4|alerter]] l'utilisateur. | |||
==Obtenir une action de l'utilisateur | ==Obtenir une action== | ||
Certaines fenêtres modales visent à '''obtenir une action''' de l'utilisateur dans le but d''''interagir''' avec l'application. | |||
= | =Fonctionnement général= | ||
Une ''' | ==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. | |||
[[File:Table4-6-modal-combobox.png]] | |||
==Ouverture== | |||
Une fenêtre de dialogue s'ouvre consécutivement à une action ou au chargement d'une page. | |||
===Enregistrer une action=== | |||
Dans le cas des fenêtres visant à '''obtenir une action''', l'utilisateur modifie des données dans la zone de contenu de la fenêtre modale. | |||
L''''enregistrement''' s'effectue de deux manières : | |||
*'''Donnée unique :''' la sélection d'un des items proposés enregistre la modification. | |||
*'''Données multiples :''' l'utilisateur complète des champs, choisit des items. Lorsqu'il a terminé ses modifications, il clique sur le bouton vert ok situé dans la zone supérieure de la fenêtre modale. | |||
Lorsque l'action est enregistrée, la fenêtre se '''ferme'''. | |||
==Fermeture sans enregistrer== | |||
===Clic à l'extérieur=== | |||
Un '''clic à l'extérieur''' de la fenêtre ferme celle-ci. Ce clic '''annule''' la fenêtre. Dès lors, si l'utilisateur a commencé à effectuer une action à l'intérieur de la fenêtre, celle-ci '''n'est pas enregistrée'''. | |||
===Bouton fermer=== | |||
Le bouton '''fermer''' est représenté par une croix en haut à droite de la zone supérieure de la fenêtre. // Ajouter l'image // | |||
Un clic sur ce bouton ferme la fenêtre '''sans enregistrer''' d'action de l'utilisateur. Cela équivant à [[clic à l'extérieur]] de la fenêtre. | |||
===Fenêtre d'alerte | =Types de fenêtres de dialogues= | ||
==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 [[Alert4| | *Des [[Alert4|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. | |||
[[File:Table4-5-modal-textarea.png]] | |||
==Choix unique== | |||
Cliquer sur le choix souhaité dans la '''liste'''. La fenêtre se ferme automatiquement. | |||
[[File:Table4-6-modal-combobox.png]] | |||
==Choix multiples== | |||
*Une série de '''cases à cocher''' se présente. Cocher toutes les cases souhaitées et cliquer sur 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== | ||
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 | Elles sont utilisées dans les contextes : | ||
===Tableaux=== | ===Tableaux=== | ||
Le [[#Pictogramme_des_options_de_ligne|pictogramme des options de ligne]] ouvre une info-bulle lorsqu'on le survole. | Le [[#Pictogramme_des_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 [[Planning4#Options_de_r.C3.A9servation|options d'une reservation]]. |
Revision as of 11:59, 1 October 2014
Présentation
L'objet de cette page est de présenter l'utilisation des fenêtres de dialogue 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.
Fonctionnement général
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.
Ouverture
Une fenêtre de dialogue s'ouvre consécutivement à une action ou au chargement d'une page.
Enregistrer une action
Dans le cas des fenêtres visant à obtenir une action, l'utilisateur modifie des données dans la zone de contenu de la fenêtre modale.
L'enregistrement s'effectue de deux manières :
- Donnée unique : la sélection d'un des items proposés enregistre la modification.
- Données multiples : l'utilisateur complète des champs, choisit des items. Lorsqu'il a terminé ses modifications, il clique sur le bouton vert ok situé dans la zone supérieure de la fenêtre modale.
Lorsque l'action est enregistrée, la fenêtre se ferme.
Fermeture sans enregistrer
Clic à l'extérieur
Un clic à l'extérieur de la fenêtre ferme celle-ci. Ce clic annule la fenêtre. Dès lors, si l'utilisateur a commencé à effectuer une action à l'intérieur de la fenêtre, celle-ci n'est pas enregistrée.
Bouton fermer
Le bouton fermer est représenté par une croix en haut à droite de la zone supérieure de la fenêtre. // Ajouter l'image //
Un clic sur ce bouton ferme la fenêtre sans enregistrer d'action de l'utilisateur. Cela équivant à clic à l'extérieur de la fenêtre.
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. La fenêtre se ferme automatiquement.
Choix multiples
- Une série de cases à cocher se présente. Cocher toutes les cases souhaitées et cliquer sur 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.