> Tech > Onglets

Onglets

Tech - Par iTPro - Publié le 24 juin 2010
email

La relation parent-enfant entre des tables est présente dans la plupart des SGBD. Et dans notre exemple d’application, il existe une relation parent-enfant entre les menus et les rubriques de menus. Un nombre quelconque de rubriques de menus peut être attaché à un ou plusieurs menus. Utilisez les cadres à

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.

Téléchargez gratuitement cette ressource

Protection des Données : 10 Best Practices

Protection des Données : 10 Best Practices

Le TOP 10 des meilleures pratiques, processus et solutions de sécurité pour mettre en œuvre une protection efficace des données et limiter au maximum les répercutions d’une violation de données.

Tech - Par iTPro - Publié le 24 juin 2010