Boîtes de dialogue: Difference between revisions

From Documentation de la solution web de gestion OpenFlyers
Jump to navigation Jump to search
imported>Ltremblet
imported>Ltremblet
Line 42: Line 42:
*'''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]].  
*'''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 [[ferme]].
Lorsque l'action est enregistrée, la fenêtre se [[#Fermeture|ferme]].


==Fermeture==
==Fermeture==

Revision as of 13:32, 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.

Table4 6 modal combobox.png

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 une fenêtre de dialogue

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 : Modal4 ok.png.

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

La fenêtre se ferme avec enregistrement dans les cas suivants :

  • Sélection d'un item unique
  • Sélection de plusieurs items, saisie d'un texte ou modifications de plusieurs paramètres et validation cliquant sur le bouton OK.

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.

Modalwindow4 1 alert.png

Texte long

Saisir le contenu souhaité dans la zone de texte, puis cliquer sur OK pour valider.

Table4 5 modal textarea.png

Choix unique

Cliquer sur le choix souhaité dans la liste. La fenêtre se ferme automatiquement.

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.

Table4 7 modal multicheckbox.png

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.