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
Avant de commencer, vous devez terminer l'Exercice 1.4 : Création de pages permettant de
créer et de mettre à jour les informations utilisateur.
Dans cet exercice, vous allez créer des portlets
supplémentaires dotés d'un comportement coopératif, via le mécanisme
Click-to-Action qui permet d'envoyer des données d'un portlet source
à un portlet cible. Le portlet source (ListingSearch) utilise un bean
session pour accéder aux données de l'élément Vente aux
enchères. Après
avoir localisé les listes spécifiques à l'aide du portlet
ListingSearch, le portlet cible ListingDetail affiche les
informations détaillées relatives aux éléments localisés par une
recherche. Dans tous les cas, vous devez au préalable créer le
portlet.
Création du portlet ListingSearch
Pour créer le portlet ListingSearch, procédez comme indiqué c-après.
- Dans l'explorateur de projets, développez le dossier Projet
Web dynamique et localisez le dossier du projet AuctionPortlet. A
l'aide du bouton droit de la souris, cliquez sur le dossier du projet
et sélectionnez Nouveau > Portlet.
- Sur la page initiale de l'assistant Nouveau portlet, remplacez le
Préfixe du nom par défaut par ListingSearch.
- Sélectionnez le bouton d'option Portlet Faces.
- Cliquez sur Suivant.
- Sélectionnez l'application AuctionPortlet dans la
liste déroulante Nom d'application.
- Entrez Recherche de listes dans la zone Titre du
portlet.
- Cliquez sur Fin.
ListingSearchView.jsp s'ouvre dans le panneau d'édition.
Ajout d'une table de données sur la page de portlet ListingSearch
Le fichier ListingSearchView.jsp ouvert dans Page Designer,
suivez les étapes ci-après pour ajouter les données du bean session
en tant que source de données de la page ListingSearch.
- 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, cliquez sur le bouton
Nouvelle référence d'EJB.
- Développez les dossiers AuctionPortletEAR et AuctionEJB50, puis
sélectionnez ListingFacade pour créer la référence de
bean enterprise. Cliquez sur Fin.
- Cliquez sur Suivant dans l'assistant Bean session.
- Sélectionnez l'interface findByTitle(String title),
qui sera utilisée pour la zone d'entrée sur la page de portlet
et cliquez sur Suivant.
- La zone title est sélectionnée. Cliquez sur Options.
- Saisissez Recherche dans la zone Libellé. Cliquez sur OK.
- Cliquez sur Suivant. La page Formulaire Résultats de
l'assistant s'affiche. Cette page permet de définir la table des
données qui procédera à l'extraction et à l'affichage des données à
partir de la base de données.
- Cliquez sur Aucune pour désélectionner toutes les colonnes
et pouvoir sélectionner, organiser et configurer individuellement les
colonnes appropriées de la table de données de la page de portlet. Cochez ensuite les cases correspondant aux colonnes suivantes :
- A l'aide des flèches dirigées vers le haut et vers le bas, placez
les colonnes de données sélectionnées dans l'ordre indiqué
précédemment.
- Sélectionnez et remplacez la valeur Libellé de la colonne
itemid par ID élément.
- Cliquez sur Fin pour générer l'interface utilisateur par
défaut de la page UserAdminView.jsp. L'interface utilisateur prend
l'aspect suivant :

- Sauvegardez le fichier.
Ajout de code de page Java dans la page UserAdmin
Dans cette partie de l'exercice, vous allez ajouter du code de
page Java pour effectuer les actions suivantes :
stocker le paramètre title dans la portée de la
session pour qu'il puisse être réutilisé lors d'une éventuelle
régénération ultérieure du contenu du portlet,
initialiser le paramètre à afficher dans la zone de saisie
Titre avec le paramètre stocké dans la portée de la
session,
initialiser les données de résultat à l'aide du paramètre
title stocké dans la portée de la session.
Pour ajouter la logique et le code de référence d'EJB afin de lier
l'appel et les résultats à l'interface utilisateur, procédez comme
indiqué ci-après.
- Sélectionnez Editer le code de page dans le menu en
incrustation dans Page Designer.
- Saisissez le code en gras suivant dans
doListingFacadeLocalFindByTitleAction() :
public String doListingFacadeLocalFindByTitleAction() {
String title = getListingFacadeLocalFindByTitleParamBean().getTitle();
getSessionScope().put("title", title);
try {
listingFacadeLocalFindByTitleResultBean =
getListingFacadeLocal().findByTitle(title);
} catch (Exception e) {
logException(e);
}
return null;
}
- Saisissez le code en gras suivant dans
getListingFacadeLocalFindByTitleParamBean() :
public ListingFacadeLocalFindByTitleParamBean
getListingFacadeLocalFindByTitleParamBean() {
if (listingFacadeLocalFindByTitleParamBean == null) {
listingFacadeLocalFindByTitleParamBean =
new ListingFacadeLocalFindByTitleParamBean();
String title = (String)getSessionScope().get("title");
listingFacadeLocalFindByTitleParamBean.setTitle(title);
}
return listingFacadeLocalFindByTitleParamBean;
}
- Saisissez le code en gras suivant dans
getListingFacadeLocalFindByTitleResultBean() :
public ItemData[] getListingFacadeLocalFindByTitleResultBean() {
if (listingFacadeLocalFindByTitleResultBean == null) {
String title = (String)getSessionScope().get("title");
if (title != null) {
try {
listingFacadeLocalFindByTitleResultBean =
getListingFacadeLocal().findByTitle(title);
} catch (Exception e) {
logException(e);
}
}
}
return listingFacadeLocalFindByTitleResultBean;
}
- Sauvegardez ListingSearchView.java.
Création du portlet ListingDetail
Pour créer le portlet ListingDetail, procédez comme indiqué
c-après.
- Dans l'explorateur de projets, développez le dossier Projet
Web dynamique et localisez le dossier du projet AuctionPortlet. A
l'aide du bouton droit de la souris, cliquez sur le dossier du projet
et sélectionnez Nouveau > Portlet.
- Sur la page initiale de l'assistant Nouveau portlet, remplacez le
Préfixe du nom par défaut par ListingDetail.
- Sélectionnez le bouton d'option Portlet Faces.
- Cliquez sur Suivant.
- Sélectionnez l'application AuctionPortlet dans la
liste déroulante Nom d'application.
- Entrez Détail de la liste dans la zone Titre du
portlet.
- Cliquez sur Fin.
Le fichier ListingDetailView.jsp s'ouvre dans le panneau d'édition.
Ajout d'un formulaire de données sur la page de portlet ListingDetail
Le fichier ListingDetailView.jsp ouvert dans Page Designer, suivez
les étapes ci-après pour ajouter les données du bean session en tant
que source de données de la page ListingDetail.
- 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/ListingFacade et cliquez sur Suivant.
- Sélectionnez l'interface findById(Integer itemid),
qui sera utilisée pour la zone d'entrée sur la page de portlet.
- Cliquez sur Suivant.
- La zone itemid est sélectionnée. Sélectionnez et remplacez la
valeur Libellé de la zone itemid par ID élément :.
- Cliquez sur Options.
- Saisissez Recherche dans la zone Libellé. Cliquez sur OK.
- Cliquez sur Suivant. La page Formulaire Résultats de
l'assistant s'affiche. Cette page permet de définir le formulaire des
données qui procédera à l'extraction et à l'affichage des données à
partir de 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 de la table de données à utiliser sur la page de
portlet. Cochez ensuite les cases correspondant aux zones suivantes :
- 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.
- Cliquez sur Fin pour générer l'interface utilisateur
de la page ListingDetailView.jsp. L'interface utilisateur prend
l'aspect suivant :

- Sauvegardez le fichier.
Ajout de code de page Java dans la page UserAdmin
Dans cette partie de l'exercice, vous allez ajouter du code de
page Java pour effectuer les actions suivantes :
stocker le paramètre itemid dans la portée de la
session pour qu'il puisse être réutilisé lors d'une éventuelle
régénération ultérieure du contenu du portlet,
initialiser le paramètre à afficher dans la zone de saisie
ID élément avec le paramètre stocké dans la portée de la
session,
initialiser les données de résultat à l'aide du paramètre
itemid stocké dans la portée de la session.
Pour ajouter la logique et le code de référence d'EJB afin de lier
l'appel et les résultats à l'interface utilisateur, procédez comme
indiqué ci-après.
- Sélectionnez Editer le code de page dans le menu en
incrustation dans Page Designer.
- Saisissez le code en gras suivant dans
doListingFacadeLocalFindByIdAction() :
public String doListingFacadeLocalFindByIdAction() {
Integer itemid = getListingFacadeLocalFindByIdParamBean().getItemid();
getSessionScope().put("itemid", itemid);
try {
listingFacadeLocalFindByIdResultBean =
getListingFacadeLocal().findById(itemid);
} catch (Exception e) {
logException(e);
}
return null;
}
- Saisissez le code en gras suivant dans
getListingFacadeLocalFindByIdParamBean() :
public ListingFacadeLocalFindByIdParamBean
getListingFacadeLocalFindByIdParamBean() {
if (listingFacadeLocalFindByIdParamBean == null) {
listingFacadeLocalFindByIdParamBean =
new ListingFacadeLocalFindByIdParamBean();
Integer itemid = (Integer)getSessionScope().get("itemid");
listingFacadeLocalFindByIdParamBean.setItemid(itemid);
}
return listingFacadeLocalFindByIdParamBean;
}
- Saisissez le code en gras suivant dans
getListingFacadeLocalFindByIdResultBean() :
public ItemData getListingFacadeLocalFindByIdResultBean() {
if (listingFacadeLocalFindByIdResultBean == null) {
Integer itemid = (Integer)getSessionScope().get("itemid");
if (itemid != null) {
try {
listingFacadeLocalFindByIdResultBean =
getListingFacadeLocal().findById(itemid);
} catch (Exception e) {
logException(e);
}
}
}
return listingFacadeLocalFindByIdResultBean;
}
- Sauvegardez ListingDetailView.java.
Ajout de liaison coopérative au portlet ListingSearch
Le terme portlets coopératifs fait référence à la capacité
des portlets d'une page d'interagir les uns avec les autres en
partageant des informations. Un ou plusieurs portlets coopératifs
d'une page de portail peuvent automatiquement réagir aux
modifications d'un portlet source déclenchées par
une action ou un événement dans le portlet source. Les portlets
ciblés par l'événement peuvent réagir de telle sorte que les
utilisateurs ne soient pas obligés d'effectuer des modifications ou
des actions à répétition dans d'autres portlets de la page. Le
mécanisme permettant d'implémenter ce comportement coopératif
est appelé événement Click-to-Action.
Pour lancer un événement Click-to-Action, il suffit de cliquer sur
une icône sur le portlet source. Cette icône affiche un menu en
incrustation incluant la liste des cibles de l'action. L'utilisateur
sélectionne une cible spécifique, puis le courtier de propriétés
achemine les données à la cible sous la forme de l'action de portlet
correspondante. Grâce à la méthode d'acheminement Click-to-Action,
les utilisateurs peuvent transférer des données en un simple clic
d'un portlet source vers un ou plusieurs portlets cible.
La cible réagit à l'action et affiche une nouvelle vue avec les
résultats.
Pour configurer un comportement coopératif entre les portlets
ListingSearch et ListingDetail, procédez comme indiqué ci-après.
- Ouvrez ListingSearchView.jsp dans Page Designer (dans
l'explorateur de projets, développez les dossiers AuctionPortlet et
WebContent, puis cliquez deux fois sur le fichier).
- Faites glisser un objet Propriété de sortie
Click-to-Action du tiroir de la palette Portlet et
déposez-le sur la zone de sortie dans la table de données intitulée {itemid}.
Remarque : Veillez à déposer l'objet Propriété de sortie
Click-to-Action sur la zone de sortie et non avant ou après
celle-ci.
La zone de sortie doit être mise en évidence, figurer dans une boîte
rectangulaire et avoir l'aspect suivant :
.
(Il peut être nécessaire de déplacer la boîte de dialogue pour afficher la
sélection de la zone de sortie.)
- Dans la boîte de dialogue Insérer la propriété de sortie
Click-to-Action, indiquez les valeurs suivantes :
- saisissez itemid dans la zone Type de données ;
- sélectionnez ListingSearch portlet dans la liste
déroulante Portlet source, puis cliquez sur OK.
Sauvegardez le fichier.
- Pour vérifier que le code Click-to-Action correct a été ajouté, ouvrez
la vue Source et assurez-vous que le code suivant est inclus dans
le fichier :
<h:outputText id="text3"
value="#{varlistingFacadeLocalFindByTitleResultBean.itemid}"
styleClass="outputText">
<f:convertNumber />
</h:outputText>
<c2a:encodeProperty type="itemid"
namespace="http://auctionportlet" name="itemid"
value="#{varlistingFacadeLocalFindByTitleResultBean.itemid}">
</c2a:encodeProperty>
Notez l'attribut value mis en évidence.
Cet attribut fera défaut si la propriété de sortie n'a pas été ajoutée à
la page correctement.
ListingSearch a été identifié comme le portlet source. Vous
devez ensuite activer ListingDetail en tant que portlet cible.
- Développez AuctionPortlet > Descripteur de déploiement de
portlet dans l'explorateur de projets. Sélectionnez Coopératif
> Activer la cible dans le menu en incrustation du portlet
ListingDetail.
- Dans la boîte de dialogue Activation de la cible
coopérative, entrez itemid dans la zone Type de
données.
- Cliquez sur le bouton Parcourir situé en regard de la zone
Action et sélectionnez /ListingDetailView.jsp > form1 > button1. Cliquez sur OK.
- Dans la boîte de dialogue Activation de la cible
coopérative, entrez Afficher détails dans la zone
Libellé. Cliquez sur OK.
Pour vérifier que la source et la cible Click-to-Action sont correctement
identifiées, revenez au dossier Descripteur de déploiement de
portlet dans l'explorateur de projets. Les icônes représentant un
portlet source (ListingSearch) et un portlet cible (ListingDetails)
doivent prendre l'aspect suivant :

Test du comportement coopératif dans les portlets Listing
Pour vérifier que les portlets ListingSearch et
ListingDetail fonctionnent comme prévu, vous devez les exécuter dans
l'environnement de test.
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é.
- Les portlets s'affichent dans le navigateur. Vous pouvez
visualiser les zones d'entrée, les boutons et la disposition, tels
qu'un utilisateur les voit sur un site de portail.
- Dans le portlet ListingSearch, saisissez le caractère de
recherche générique % pour répertorier tous les
éléments, puis cliquez sur le bouton Rechercher. La table
située sous le bouton Soumettre affiche les éléments de
vente aux enchères correspondant à la chaîne de recherche.
- Cliquez sur l'icône Click-to-Action
dans la colonne ID élément pour envoyer
l'ID liste au portlet ListingDetail. Ce dernier affiche alors les
informations détaillées relatives à l'élément localisé par la
recherche.
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 2.1 : Création d'un portail pour l'affichage de
l'application de portlet.