Détails de l'exemple Faces Client

Présentation des exemples

L'exemple de portefeuille imite une application de gestion de portefeuilles Web. L'objectif visé est de permettre aux utilisateurs de visualiser tous leurs portefeuilles, de les consulter, de les afficher et d'obtenir leur mise à jour régulière en fonction des cours indiqués sur la page par un service Web. Les utilisateurs pourront également changer les quantités d'actions inscrites pour effectuer des analyses.

L'exemple hello world démontre les performances de la structure Faces Client en présentant une configuration MVC (Model View Controller) sur une page contenant un modèle très simple et utilisant deux zones d'entrée comme contrôles.

Documentation de l'application de portefeuille

L'exemple de portefeuille imite une application de gestion de portefeuilles Web. Le modèle de cette application a un objet racine qui comporte un ensemble d'utilisateurs et un ensemble d'actions. Il comporte également une référence à une action fictive pour envoyer et recevoir des données à partir de web-services dans l'exemple. Ce modèle comprend également des utilisateurs. Chacun d'entre eux peut disposer de plusieurs portefeuilles ou n'en avoir aucun. Chaque portefeuille peut se trouver à plusieurs emplacements ou nulle part. Chaque emplacement désigne une action.

Description de la configuration des différentes options de la page.

La page comporte deux panneaux à onglets. Le premier comporte trois panneaux. Le panneau Arborescence affiche une arborescence des utilisateurs connectés à la racine. La liste des portefeuilles de chaque utilisateur est également affichée. Le panneau Grille de données affiche une grille associée aux emplacements d'un portefeuille sélectionné. Le panneau complet affiche l'arborescence et la grille de données côte à côte avec la même configuration que dans les panneaux Arborescence et Grille de données.
Le second panneau à onglets comporte deux panneaux. Le panneau Graphique comporte une option graphique associée aux emplacements d'un portefeuille sélectionné. L'axe X affiche une liste des symboles des actions et l'axe Y affiche le prix correspondant et la quantité de chaque action. Le panneau des services Web comporte des zones de texte d'entrée et de sortie associées aux propriétés de l'action fictive temporaire. Le bouton figurant sur ce panneau permet d'appeler un service Web d'action.

Récapitulatif des interactions entre les options

Chaque option est indépendamment mappée vers le modèle. Ainsi, les modifications apportées aux données de modèle seront répercutées dans l'option. Outre ces liaisons implicites, il existe des liaisons explicites entre les options. Lorsque vous mettez en évidence un portefeuille dans la vue Arborescence, la grille de données et le graphique sont mis à jour en conséquence et regénérés afin d'afficher les emplacements dans le portefeuille. Nous créons ce type de système d'événements entre l'arborescence du panneau Arborescence et la grille du panneau Grille de données, ainsi qu'entre l'arborescence du panneau complet et la grille de données du même panneau et le graphique du panneau Graphique. Le deuxième type d'événement créé a lieu entre la grille de données du panneau complet et l'objet de l'action fictive. Lorsqu'une ligne de la grille de données est mise en évidence, toutes les zones de l'action de cet emplacement sont copiées dans les zones correspondantes de l'action fictive. Par conséquent, les résultats des zones de sortie et d'entrée du panneau des services Web sont regénérés.

Afin d'appeler le service Web boursier pour obtenir le cours de l'action d'un symbole particulier, cliquez, dans le panneau des services Web, sur le bouton d'extraction des informations. Les valeurs affichées par les options du formulaire du panneau des services Web sont mises à jour avec les valeurs reçues du service Web boursier.

Vous pouvez aussi changer les quantités d'actions dans la grille de données du panneau complet. Toute modification apportée à la quantité d'actions mettra à jour automatiquement le graphique et la colonne des gains et des pertes. Vous pouvez aussi synchroniser les modifications apportées aux données du côté client avec le bean côté serveur en cliquant sur le bouton Fin dans le panneau complet.

Documentation de l'application Hello World

Une classe simple appelée Hello, qui contient un attribut text de type String, est disponible pour cette application côté serveur. Côté client, nous avons exporté ce même modèle dans JavaScript. Dans le navigateur, deux zones de texte d'entrée sont disponibles. Ces dernières doivent être associées à l'attribut text de l'objet Hello. Lors de la mise à jour de la valeur de l'option, cette action modifie la zone de texte de l'objet Hello. Par conséquent, la valeur est propagée à l'autre option sans passage par le serveur.

Tentez de modifier la valeur de la chaîne dans la première zone de texte d'entrée en "Hello World!!!". L'option déclenche un événement qui met à jour le modèle de données sous-jacent (côté client). Si vous sortez du contexte de la première zone de texte (cliquez hors de la zone ou accédez à la seconde zone de texte), la valeur de la deuxième zone de texte sera "Hello World!!!" car elle est également associée au même attribut du même objet, comme la première option.