Exercice 1.2 : Préparation du développement de portlet et définition du flux de l'application

Avant de commencer, vous devez terminer l'Exercice 1.1 : Importation des ressources requises.

Dans l'exercice précédent, vous avez créé le projet AuctionPortlet destiné à contenir les portlets qui seront développés dans ce tutoriel. Avant de créer l'interface utilisateur et d'ajouter des données à des portlets Faces spécifiques, vous devez définir le flux de l'application à l'aide de l'éditeur de diagramme Web. Un diagramme Web permet de définir le flux de l'application, particulièrement dans le cadre du développement visuel d'applications de portlet Faces.

Création d'un diagramme Web pour la construction du flux de l'application

Un diagramme Web est un fichier qui vous aide à visualiser et à modifier le flux d'une application Web telle que Faces ou une collection de portlets Struts. L'éditeur de diagramme Web est un éditeur visuel permettant de modifier les diagrammes Web. Lorsque On désigne généralement par l'expression dessin du diagramme le fait d'ajouter des noeuds, des connexions et d'autres composants à un diagramme Web.

Un diagramme Web est constitué de noeuds et de connexions entre les noeuds. Un noeud est une icône qui représente une ressource telle qu'une page JSP de portlet ou un bean Java. Si la ressource existe, le noeud est appelé réalisé ; dans le cas contraire, le noeud est appelé non réalisé. Les noeuds réalisés s'affichent en couleur et leur nom apparaît en gras. Les noeuds non réalisés s'affichent sous forme d'icônes grises.

Vous allez ajouter trois noeuds JSP dans le diagramme Web. Le premier est considéré comme étant le noeud principal, qui permet d'accéder à deux noeuds de détails liés.

  1. Lors de la création du projet de portlet Vente aux enchères, l'assistant crée automatiquement un fichier de diagramme Web par défaut appelé diagram.gph. Dans l'explorateur de projets, développez les dossiers Projets Web dynamiques et AuctionPortlet, puis cliquez deux fois sur Diagramme Web.

    Le fichier s'affiche dans la sous-fenêtre d'édition ; il contient quelques instructions sur la procédure d'utilisation de l'éditeur de diagramme Web.
    Nouveau diagramme Web

  2. La vue active située à droite de l'espace de travail est une palette qui contient un certain nombre de tiroirs dont les objets peuvent être déposés dans le diagramme Web. Ajoutez des objets page Web au fichier UserAdmin.gph à partir de la palette. Cette dernière fournit un comportement glisser-déposer "fixe" ; en d'autres termes, une fois que vous cliquez sur l'objet de la palette, il n'est pas nécessaire de maintenir le bouton de la souris enfoncé lors de l'opération de déplacement. Il suffit de déplacer le curseur vers le diagramme Web et de cliquer de nouveau pour déposer l'objet.

    Pour créer le premier noeud, vous pouvez faire glisser UserAdminView.jsp, la page de la vue JSP initiale créée à l'aide du projet AuctionPortlet, à partir de l'explorateur de projets vers l'éditeur. Etant donné que ce fichier a déjà été créé, il s'affiche sous forme d'objet réalisé.

  3. Faites glisser un objet page Web et déposez-le dans l'éditeur. Remplacez le nom de la page Web par UserAdminCreate.jsp.
  4. Répétez l'étape précédente pour créer une page Web appelée UserAdminUpdate.jsp.

    Remarque : Vous pouvez faire glisser les noeuds pour les repositionner.

  5. Créez ensuite des connexions entre les noeuds de la page Web pour spécifier le flux des données dans les portlets :
    1. Sélectionnez Connexion dans le menu en incrustation de UserAdminView.jsp. A partir de UserAdminView.jsp, faites glisser la connexion vers le noeud UserAdminCreate.jsp.
    2. Sélectionnez Lien de page Web dans la boîte de dialogue Choix d'une connexion et cliquez sur OK.
    3. Sélectionnez Connexion dans le menu en incrustation du noeud UserAdminCreate.jsp et faites glisser la connexion vers le noeud UserAdminView.jsp.
    4. Sélectionnez Sortie Faces dans la boîte de dialogue Choix d'une connexion et cliquez sur OK.
    5. Entrez view à la place de <new> mis en évidence pour nommer la nouvelle connexion.
    6. Sélectionnez Connexion dans le menu en incrustation de UserAdminView.jsp. A partir de UserAdminView.jsp, faites glisser la connexion vers le noeud UserAdminUpdate.jsp.
    7. Sélectionnez Sortie Faces dans la boîte de dialogue Choix d'une connexion et cliquez sur OK.
    8. Entrez update à la place de <new> mis en évidence pour nommer la nouvelle connexion.
    9. Sélectionnez Connexion dans le menu en incrustation du noeud UserAdminUpdate.jsp et faites glisser la connexion vers le noeud UserAdminView.jsp.
    10. Sélectionnez Sortie Faces dans la boîte de dialogue Choix d'une connexion et cliquez sur OK.
    11. Entrez view à la place de <new> mis en évidence pour nommer la nouvelle connexion.
    12. Sauvegardez le diagramme Web.
    Le diagramme se présente désormais comme suit :
    Squelette du diagramme Web

Les liens définis indiqueront les liaisons appropriées dans les pages de portlet pour que les données saisies par l'utilisateur soient correctement acheminées dans l'application. Lorsque la page UserAdminView demande la création d'un utilisateur ou une mise à jour, le formulaire adapté s'affiche. Une fois les informations nécessaires soumises via ces formulaires, les nouvelles informations utilisateur sont mises à la disposition de la fonction de requête du portlet UserAdmin.

A présent, vous êtes prêt à commencer l'Exercice 1.3 : Développement de la page UserAdmin.

Conditions d'utilisation | Commentaires
(C) Copyright IBM Corporation 2000, 2005. All Rights Reserved.