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.
- Revenez à l'éditeur de diagramme Web et cliquez deux fois sur la
page UserAdminCreate.jsp.
- Cliquez sur Fin dans l'assistant de création.
Le fichier vide s'affiche dans la zone d'édition.
- Supprimez le texte par défaut Placez le contenu ici.
- Faites glisser l'objet Bean session EJB du tiroir
Données de la palette vers le fichier.
- Lorsque l'assistant Bean session s'ouvre, sélectionnez
ejb/UserFacade et cliquez sur Suivant.
- Sélectionnez l'interface create(RegistrationData
data), qui sera utilisée pour la zone de saisie sur la page de
portlet.
- Cliquez sur Suivant.
- 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 :
- data.userid
- data.name
- data.email
- 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.
- Sélectionnez et remplacez la valeur Libellé de la zone
data.userid par ID utilisateur :.
- Cliquez sur le bouton Options et saisissez
Créer dans la zone Libellé. Cliquez sur OK.
- Cliquez sur Fin pour générer le formulaire d'entrée sur la
page UserAdminCreate.jsp. L'interface utilisateur prend l'aspect
suivant :

- Cliquez sur le bouton Créer de la page.
- 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).
.
- Dans la boîte de dialogue Ajout d'une règle de navigation,
sélectionnez UserAdminView.jsp dans la boîte à liste
Page.
- Sélectionnez le bouton d'option Le résultat intitulé et
entrez view.
- Cliquez sur OK.
- 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é.
- Sélectionnez le composant d'entrée ID utilisateur :.
- Ouvrez la vue Propriétés.
- Sélectionnez l'onglet Validation.
- Cochez la case Valeur requise.
- 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 :
- 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.
- Ouvrez la vue Propriétés si elle n'est pas déjà active.
- 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.
- 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";
- Sauvegardez le fichier. La page UserAdminCreate.jsp prend
désormais l'aspect suivant :

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.
- Revenez à l'éditeur de diagramme Web et cliquez deux fois sur la
page UserAdminUpdate.jsp.
- Cliquez sur Fin dans l'assistant de création.
Le fichier vide s'affiche dans la zone d'édition.
- Supprimez le texte par défaut Placez le contenu ici.
- Faites glisser l'objet Bean session EJB du tiroir
Données de la palette vers le fichier.
- Lorsque l'assistant Bean session s'ouvre, sélectionnez
ejb/UserFacade et cliquez sur Suivant.
- Sélectionnez l'interface update(RegistrationData
data), qui sera utilisée pour la zone de saisie sur la page de
portlet.
- Cliquez sur Suivant.
- 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 :
- data.userid
- data.name
- data.email
- 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.
- Sélectionnez et remplacez la valeur Libellé de la zone
data.userid par ID utilisateur :.
- 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.
- Cliquez sur le bouton Options et saisissez
Mettre à jour dans la zone Libellé. Cliquez sur OK.
- Cliquez sur Fin pour générer le formulaire d'entrée sur la
page UserAdminUpdate.jsp. L'interface utilisateur prend l'aspect
suivant :

- Cliquez sur le bouton Mettre à jour de la page.
- 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).
- Dans la boîte de dialogue Ajout d'une règle de navigation,
sélectionnez UserAdminView.jsp dans la boîte à liste
Page.
- Sélectionnez le bouton d'option Le résultat intitulé et
entrez view.
- Cliquez sur OK.
- 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 :
- 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.
- Ouvrez la vue Propriétés si elle n'est pas déjà active.
- 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.
- 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";
- Sauvegardez le fichier. La page UserAdminUpdate.jsp prend
désormais l'aspect suivant :

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().
- 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;
}
- 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.
- Revenez au fichier du diagramme Web terminé pour le consulter :

Chacun des noeuds de la page Web a été réalisé et les liens du bouton
Commande sont en place.
- Ouvrez UserAdminView.jsp.
- 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.
- Saisissez /UserAdminCreate.jsp dans la zone
URL, et Créer dans la zone Libellé. Cliquez sur OK.
- 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.
- 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).
- Dans la boîte de dialogue Ajout d'une règle de navigation,
sélectionnez UserAdminUpdate.jsp dans la boîte à liste
Page.
- Sélectionnez le bouton d'option Le résultat intitulé et
entrez update.
- Cliquez sur OK.
- Sélectionnez l'onglet Paramètre dans la vue
Propriétés.
- Cliquez sur le bouton Ajouter un paramètre.
- Saisissez userid dans la zone Nom.
- 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).

- 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.
- 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";
- 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.
- Sélectionnez le projet AuctionPortlet dans l'explorateur de
projets, puis Exécuter > Exécuter sur le serveur dans le
menu en incrustation associé.
- 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.
- 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.
- Entrez % dans la zone Nom et cliquez sur le bouton
Rechercher pour extraire les utilisateurs de la base de
données.

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
.
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.