Onglets

onglets pour visualiser cette relation dans l’UI et simplifiez les choses en cachant les composantes non nécessaires pour la tâche courante. L’exemple emploie ce procédé à l’aide de l’onglet Items pour montrer toutes les rubriques qui appartiennent au menu actuellement sélectionné.

 Le même profil de conception peut être utilisé pour appliquer des rubriques dans des applications de facturation et autres. Les onglets ont la particularité de changer la couleur de fond quand la souris entre dans l’onglet et en sort. Un clic sur un onglet change sa couleur de fond et ses bordures pour qu’il apparaisse comme si l’onglet sélectionné s’était déplacé vers l’avant. Les cadres inline associés à chaque onglet cachent le contenu précédent tout en révélant le nouveau contenu associé à l’onglet. En cachant et en affichant les cadres inline, vous pouvez préserver l’état de chacun, tout en jouant avec les onglets sans nécessiter d’interaction avec le serveur.

L’avantage est double : temps de réponse rapide pour l’utilisateur et allègement de la charge du serveur. La zone au-dessus des onglets assure la continuité en montrant un résumé de l’enregistrement parent, qui est le menu actuellement sélectionné dans l’exemple. La zone résumé des onglets contient aussi deux flèches de navigation associées à l’onglet parent. Le comportement des flèches change selon que l’onglet parent ou enfant est sélectionné. Si c’est un onglet parent, le fait de cliquer sur une flèche de navigation déplace la barre de surbrillance dans la liste d’enregistrements vers l’avant ou vers l’arrière et fait apparaître l’enregistrement complet dans le cadre contenu.

Si c’est un onglet enfant, les mêmes actions se produisent de manière asynchrone dans le cadre caché en arrièreplan, mais comme il existe une relation parent-enfant, le contenu complet de l’onglet enfant se rafraîchit automatiquement, ce qui allège le procédé de visualisation et de maintenance des enregistrements enfants associés à une liste d’enregistrements parents sélectionnés (figure 2). Le modèle utilisé pour maintenir les enregistrements de menu est le même que pour maintenir les rubriques.