Exercice 1.4 : Création de pages permettant de créer et de mettre à jour les informations utilisateur

Avant de commencer, vous devez terminer l'Exercice 1.3 : Développement de la page UserAdmin.

En fonction du flux de l'application que vous avez défini dans le diagramme Web, vous devez utiliser des pages UserAdmin distinctes pour créer les informations utilisateur (UserAdminCreate.jsp) et mettre à jour les informations utilisateur existantes (UserAdminUpdate.jsp).

Création de la page UserAdminCreate.jsp

Dans cette partie de l'exercice, vous allez créer, à l'aide d'un bean session, l'accès aux données de la page UserAdminCreate qui permet à l'administrateur de créer de nouveaux enregistrements utilisateur. Etant donné qu'un ID utilisateur est nécessaire à la création de nouveaux enregistrements utilisateur, cette page intègre également de la logique de validation. Vous ajouterez en outre un bouton Annuler pour permettre aux utilisateurs de mettre fin à ce processus.

  1. Revenez à l'éditeur de diagramme Web et cliquez deux fois sur la page UserAdminCreate.jsp.
  2. Cliquez sur Fin dans l'assistant de création.

    Le fichier vide s'affiche dans la zone d'édition.

  3. Supprimez le texte par défaut Placez le contenu ici.
  4. Faites glisser l'objet Bean session EJB du tiroir Données de la palette vers le fichier.
  5. Lorsque l'assistant Bean session s'ouvre, sélectionnez ejb/UserFacade et cliquez sur Suivant.
  6. Sélectionnez l'interface create(RegistrationData data), qui sera utilisée pour la zone de saisie sur la page de portlet.
  7. Cliquez sur Suivant.
  8. La page Formulaire d'entrée permet de définir le formulaire d'entrée qui créera de nouvelles données dans la base de données. Cliquez sur Aucune pour désélectionner toutes les zones et pouvoir sélectionner, organiser et configurer individuellement les zones appropriées du formulaire d'entrée à utiliser sur la page de portlet. Cochez ensuite les cases correspondant aux zones suivantes :
  9. A l'aide des flèches dirigées vers le haut et vers le bas, placez les zones de données sélectionnées dans l'ordre indiqué précédemment.
  10. Sélectionnez et remplacez la valeur Libellé de la zone data.userid par ID utilisateur :.
  11. Cliquez sur le bouton Options et saisissez Créer dans la zone Libellé. Cliquez sur OK.
  12. Cliquez sur Fin pour générer le formulaire d'entrée sur la page UserAdminCreate.jsp. L'interface utilisateur prend l'aspect suivant :
    UserAdminCreate.jsp avec une table de données
  13. Cliquez sur le bouton Créer de la page.
  14. Ouvrez la vue Propriétés si elle n'est pas déjà active et cliquez sur le bouton Ajouter une règle (vous devrez peut-être faire défiler la vue vers la droite).
    Propriété Ajouter une règle pour un bouton de commande.
  15. Dans la boîte de dialogue Ajout d'une règle de navigation, sélectionnez UserAdminView.jsp dans la boîte à liste Page.
  16. Sélectionnez le bouton d'option Le résultat intitulé et entrez view.
  17. Cliquez sur OK.
  18. Cliquez sur l'onglet Edition rapide. Cliquez dans la zone d'édition de cette vue et entrez "view" dans la chaîne return :
    	return "view";

Ajout de la logique de validation

Etant donné que la saisie d'un ID utilisateur est nécessaire sur cette page, vous devez ajouter un processus de validation permettant de vérifier l'ID spécifié.

  1. Sélectionnez le composant d'entrée ID utilisateur :.
  2. Ouvrez la vue Propriétés.
  3. Sélectionnez l'onglet Validation.
  4. Cochez la case Valeur requise.
  5. Sauvegardez UserAdminCreate.jsp.

Il n'est pas nécessaire d'écrire un des codes nécessaires à l'exécution de cette partie de l'application. La totalité de la logique de référence EJB et du code permettant d'associer l'appel et les résultats à l'interface utilisateur est générée.

Ajout de la logique d'annulation

Vous devez en outre ajouter un bouton Annuler, ainsi que la technique de navigation appropriée vers la page de recherche :

  1. Faites glisser un élément Commande - Bouton à partir du tiroir Composants Faces de la palette et déposez-le à côté du bouton Créer.
  2. Ouvrez la vue Propriétés si elle n'est pas déjà active.
  3. Cliquez sur l'onglet Options d'affichage dans l'ensemble de propriétés, saisissez Annuler dans la zone Libellé du bouton et appuyez sur Entrée.
  4. Cliquez sur l'onglet Edition rapide. Cliquez dans la zone d'édition de cette vue et entrez "view" dans la chaîne return :
    	return "view";
  5. Sauvegardez le fichier. La page UserAdminCreate.jsp prend désormais l'aspect suivant :
    UserAdminCreate.jsp

Création de la page UserAdminUpdate.jsp

Dans cette partie de l'exercice, vous allez créer, à l'aide d'un JavaBean, l'accès aux données permettant la mise à jour des informations utilisateur dans la page UserAdminUpdate. Vous ajouterez en outre un bouton Annuler pour permettre aux utilisateurs de mettre fin à ce processus, ainsi que du code supplémentaire permettant d'obtenir les enregistrements existants à mettre à jour via cette page.

  1. Revenez à l'éditeur de diagramme Web et cliquez deux fois sur la page UserAdminUpdate.jsp.
  2. Cliquez sur Fin dans l'assistant de création.

    Le fichier vide s'affiche dans la zone d'édition.

  3. Supprimez le texte par défaut Placez le contenu ici.
  4. Faites glisser l'objet Bean session EJB du tiroir Données de la palette vers le fichier.
  5. Lorsque l'assistant Bean session s'ouvre, sélectionnez ejb/UserFacade et cliquez sur Suivant.
  6. Sélectionnez l'interface update(RegistrationData data), qui sera utilisée pour la zone de saisie sur la page de portlet.
  7. Cliquez sur Suivant.
  8. La page Formulaire d'entrée permet de définir le formulaire d'entrée qui mettre à jour les données dans la base de données. Cliquez sur Aucune pour désélectionner toutes les zones et pouvoir sélectionner, organiser et configurer individuellement les zones d'entrée appropriées à utiliser sur la page de portlet. Cochez ensuite les cases correspondant aux zones suivantes :
  9. A l'aide des flèches dirigées vers le haut et vers le bas, placez les zones de données sélectionnées dans l'ordre indiqué précédemment.
  10. Sélectionnez et remplacez la valeur Libellé de la zone data.userid par ID utilisateur :.
  11. Sélectionnez Zone de sortie dans la liste des types de commande associée à data.userid, pour éviter de devoir modifier l'ID lors de la mise à jour d'autres informations dans le portlet.
  12. Cliquez sur le bouton Options et saisissez Mettre à jour dans la zone Libellé. Cliquez sur OK.
  13. Cliquez sur Fin pour générer le formulaire d'entrée sur la page UserAdminUpdate.jsp. L'interface utilisateur prend l'aspect suivant :
    UserAdminUpdate.jsp avec une table de données
  14. Cliquez sur le bouton Mettre à jour de la page.
  15. Ouvrez la vue Propriétés si elle n'est pas déjà active et cliquez sur le bouton Ajouter une règle (vous devrez peut-être faire défiler la vue vers la droite).
  16. Dans la boîte de dialogue Ajout d'une règle de navigation, sélectionnez UserAdminView.jsp dans la boîte à liste Page.
  17. Sélectionnez le bouton d'option Le résultat intitulé et entrez view.
  18. Cliquez sur OK.
  19. Cliquez sur l'onglet Edition rapide. Cliquez dans la zone d'édition de cette vue et entrez "view" dans la chaîne return :
    	return "view";

Il n'est pas nécessaire d'écrire un des codes nécessaires à l'exécution de cette partie de l'application. La totalité de la logique de référence EJB et du code permettant d'associer l'appel et les résultats à l'interface utilisateur est générée.

Ajout de la logique d'annulation

Vous devez en outre ajouter un bouton Annuler, ainsi que la technique de navigation appropriée vers la page de recherche :

  1. Faites glisser un élément Commande - Bouton à partir du tiroir Composants Faces de la palette et déposez-le à côté du bouton Mettre à jour.
  2. Ouvrez la vue Propriétés si elle n'est pas déjà active.
  3. Cliquez sur l'onglet Options d'affichage dans l'ensemble de propriétés, saisissez Annuler dans la zone Libellé du bouton et appuyez sur Entrée.
  4. Cliquez sur l'onglet Edition rapide. Cliquez dans la zone d'édition de cette vue et entrez "view" dans la chaîne return :
    	return "view";
  5. Sauvegardez le fichier. La page UserAdminUpdate.jsp prend désormais l'aspect suivant :
    UserAdminUpdate.jsp

Ajout de code supplémentaire pour la mise à jour des enregistrements existants

La logique de mise à jour ajoutée dans cette partie de l'exercice permet à l'application d'obtenir les enregistrements existants pour qu'un utilisateur puisse les mettre à jour via cette page. Pour renseigner le formulaire avec les données pertinentes, initialisez le bean parameter à l'aide d'une méthode fournie par UserFacade, findById().

  1. Sélectionnez Editer le code de page dans le menu en incrustation de UserAdminUpdate.jsp. Le code de page est le fichier Java contenant la logique sous-jacente de UserAdminUpdate.jsp. Insérez le code suivant (indiqué en gras) :
    public UserFacadeLocalUpdateParamBean getUserFacadeLocalUpdateParamBean() {
      if (userFacadeLocalUpdateParamBean == null) {
         userFacadeLocalUpdateParamBean = new UserFacadeLocalUpdateParamBean();
         Integer userid = (Integer)getSessionScope().get("userid");
         try {
         userFacadeLocalUpdateParamBean.setData(getUserFacadeLocal()
                                                 .findById(userid));
         } catch (Exception e) {
             logException(e);
         }
     }
     return userFacadeLocalUpdateParamBean;
    }
    
  2. Sauvegardez et fermez UserAdminUpdate.java.

Ajout de liens pour la navigation

Enfin, pour terminer le portlet UserAdmin, vous devez ajouter des liens pour permettre la navigation à partir de la page principale (UserAdminView.jsp) vers les pages détaillées (UserAdminCreate.jsp et UserAdminUpdate.jsp). Pour ajouter ces liens, procédez comme indiqué ci-après.

  1. Revenez au fichier du diagramme Web terminé pour le consulter :
    Diagramme Web réalisé
    Chacun des noeuds de la page Web a été réalisé et les liens du bouton Commande sont en place.
  2. Ouvrez UserAdminView.jsp.
  3. Faites glisser un composant Lien à partir du tiroir Composants Faces de la palette et déposez-le à côté de la table de données dans le fichier.
  4. Saisissez /UserAdminCreate.jsp dans la zone URL, et Créer dans la zone Libellé. Cliquez sur OK.
  5. Faites glisser un composant Commande - Hyperlien à partir du tiroir Composants Faces de la palette et déposez-le dans la zone intitulée {userid} dans la table de données.
  6. Ouvrez la vue Propriétés si elle n'est pas déjà active et cliquez sur le bouton Ajouter une règle (vous devrez peut-être faire défiler la vue vers la droite).
  7. Dans la boîte de dialogue Ajout d'une règle de navigation, sélectionnez UserAdminUpdate.jsp dans la boîte à liste Page.
  8. Sélectionnez le bouton d'option Le résultat intitulé et entrez update.
  9. Cliquez sur OK.
  10. Sélectionnez l'onglet Paramètre dans la vue Propriétés.
  11. Cliquez sur le bouton Ajouter un paramètre.
  12. Saisissez userid dans la zone Nom.
  13. Cliquez sur la cellule dans la zone Valeur, puis sur l'icône Parcourir pour ouvrir la boîte de dialogue de sélection d'un objet de données de page. Dans cette boîte de dialogue, développez userFacadeLocal > findByName(java.lang.String) > userFacadeLocalFindByNameResultBean et sélectionnez userid (java.lang.Integer).

    Boîte de dialogue de sélection d'un objet de données de page
  14. Cliquez sur OK.

Vous devez ensuite ajouter le code permettant de stocker le paramètre dans la portée de la session, de telle sorte que la page de mise à jour puisse se servir de l'ID utilisateur pour renseigner son formulaire d'entrée avec les informations utilisateur.

  1. Cliquez sur l'onglet Edition rapide. Cliquez dans la zone d'édition pour créer un modèle vide correspondant au code de l'action associé au bouton Mettre à jour et saisissez le code suivant :
    String userid = (String)getRequestParam().get("userid");
    getSessionScope().put("userid", new Integer(userid));
    return "update";
    
  2. Sauvegardez et fermez le fichier.

Exécution du portlet UserAdmin

Pour vérifier que les pages du portlet UserAdmin fonctionnent comme prévu jusqu'à ce stade, vous devez exécuter le fichier JSP sur le navigateur interne fourni avec Rational Developer. Pour ce faire, procédez comme indiqué ci-après.

  1. Sélectionnez le projet AuctionPortlet dans l'explorateur de projets, puis Exécuter > Exécuter sur le serveur dans le menu en incrustation associé.
  2. A ce stade, vous devez probablement spécifier l'environnement de test WebSphere Portal v5.0 comme serveur cible. Etant donné que vous avez déjà défini l'environnement de test WebSphere Portal v5.0, sélectionnez-le et cliquez sur Fin dans l'assistant Sélection d'un serveur.
  3. Le fichier s'affiche dans le navigateur. Il contient les zones d'entrée, des liens et la disposition qui apparaissent sur un site de portail.
  4. Entrez % dans la zone Nom et cliquez sur le bouton Rechercher pour extraire les utilisateurs de la base de données.

    Exécution des portlets nouvellement créés

Si vous cliquez sur le lien Créer ou si vous sélectionnez un utilisateur dans la table de données, les pages UserAdminCreate et UserAdminUpdate s'affichent, respectivement. Si vous indiquez des valeurs dans l'une de ces deux pages et que vous cliquez sur le bouton Créer ou Mettre à jour, les ajouts et les mises à jour sont acceptés. Les données mises à jour doivent immédiatement se refléter dans la page UserAdminView. Si le nom recherché correspond à un nom d'utilisateur que vous avez créé (vous pouvez, par exemple, utiliser le caractère générique % pour extraire tous les utilisateurs), le nouvel utilisateur doit s'afficher lorsque vous revenez en arrière à partir de la page de création.

Avant de passer à l'exercice suivant, arrêtez le serveur de l'environnement de test. Il suffit de le sélectionner dans la vue Serveurs et de cliquer sur le bouton de la barre d'outils Arrêter le serveur Arrêter le serveur.

A présent, vous êtes prêt à commencer l'Exercice 1.5 : Ajout de portlets de recherche de listes de sites de ventes aux enchères et d'affichage des détails associés.

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