Trouver un bon exemple est toujours délicat. Il doit rester simple tout en permettant de passer tous les cas d'utilisation en revue.

J'ai choisi de coder un exemple pas très original d'outil de chat. L'application affiche une liste de contact. Nous pouvons envoyer un message et ajouter un nouveau contact.

L'enchaînement des écrans de l'application finale est le suivant :
La page est constituée de trois zones :

• La liste des contacts
• Un menu avec les deux actions disponibles : ajouter un contact et envoyer un message
• Une zone dont le contenu dépend de l'action en cours
  • Par défaut, une zone de lecture des détails du contact
  • Lors de l'envoi d'un message, une zone de saisie du message
  • Lors de l'ajout d'un contact, les champs pour le définir

Nous allons profiter de ces enchaînements pour améliorer progressivement notre utilisation de MVC avec AJAX.Il y a trois cas d'utilisation qui sont représentatifs d'une interface à page unique :

• La saisie d'un nouveau message.
  Elle nous oblige à mettre à jour une zone de l'interface. Cette zone est indépendante de l'affichage initial.
• Le retour à l'écran de départ après l'envoi d'un message.
  Encore une fois, une seule zone est à actualiser, mais c'est une sous partie de la page de départ.
• Le retour à l'écran de départ après l'ajout d'un contact.
  Cette fois-ci, deux zones à la fois doivent être renouvelées. La liste des contacts et la zone de détails font apparaître le nouveau contact.

Nous verrons ces scénarios dans les prochaines étapes de l'article puis nous terminerons en consolidant le travail réalisé pour le rendre réutilisable.