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.

  1. 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.
  2. Sur la page initiale de l'assistant Nouveau portlet, remplacez le Préfixe du nom par défaut par ListingSearch.
  3. Sélectionnez le bouton d'option Portlet Faces.
  4. Cliquez sur Suivant.
  5. Sélectionnez l'application AuctionPortlet dans la liste déroulante Nom d'application.
  6. Entrez Recherche de listes dans la zone Titre du portlet.
  7. 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.

  1. Supprimez le texte par défaut Placez le contenu ici.
  2. Faites glisser l'objet Bean session EJB du tiroir Données de la palette vers le fichier.
  3. Lorsque l'assistant Bean session s'ouvre, cliquez sur le bouton Nouvelle référence d'EJB.
  4. Développez les dossiers AuctionPortletEAR et AuctionEJB50, puis sélectionnez ListingFacade pour créer la référence de bean enterprise. Cliquez sur Fin.
  5. Cliquez sur Suivant dans l'assistant Bean session.
  6. 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.
  7. La zone title est sélectionnée. Cliquez sur Options.
  8. Saisissez Recherche dans la zone Libellé. Cliquez sur OK.
  9. 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.
  10. 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 :
  11. 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.
  12. Sélectionnez et remplacez la valeur Libellé de la colonne itemid par ID élément.
  13. 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 :
    ListingSearchView.jsp
  14. 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.

    1. Sélectionnez Editer le code de page dans le menu en incrustation dans Page Designer.
    2. 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;
      }
      
    3. 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;
      }
      
    4. 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;
      }
      
    5. Sauvegardez ListingSearchView.java.

    Création du portlet ListingDetail

    Pour créer le portlet ListingDetail, procédez comme indiqué c-après.

    1. 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.
    2. Sur la page initiale de l'assistant Nouveau portlet, remplacez le Préfixe du nom par défaut par ListingDetail.
    3. Sélectionnez le bouton d'option Portlet Faces.
    4. Cliquez sur Suivant.
    5. Sélectionnez l'application AuctionPortlet dans la liste déroulante Nom d'application.
    6. Entrez Détail de la liste dans la zone Titre du portlet.
    7. 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.

    1. Supprimez le texte par défaut Placez le contenu ici.
    2. Faites glisser l'objet Bean session EJB du tiroir Données de la palette vers le fichier.
    3. Lorsque l'assistant Bean session s'ouvre, sélectionnez ejb/ListingFacade et cliquez sur Suivant.
    4. Sélectionnez l'interface findById(Integer itemid), qui sera utilisée pour la zone d'entrée sur la page de portlet.
    5. Cliquez sur Suivant.
    6. La zone itemid est sélectionnée. Sélectionnez et remplacez la valeur Libellé de la zone itemid par ID élément :.
    7. Cliquez sur Options.
    8. Saisissez Recherche dans la zone Libellé. Cliquez sur OK.
    9. 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.
    10. 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 :
    11. 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.
    12. Cliquez sur Fin pour générer l'interface utilisateur de la page ListingDetailView.jsp. L'interface utilisateur prend l'aspect suivant :
      ListingDetailView.jsp
    13. 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.

    1. Sélectionnez Editer le code de page dans le menu en incrustation dans Page Designer.
    2. 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;
      }
      
    3. 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;
      }
      
    4. 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;
      }
      
    5. 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.

    1. 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).
    2. 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 à amener 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 dans une boîte rectangulaire, comme dans l'illustration suivante :
      Amener un objet Propriété de sortie sur une zone de sortie.
      (Il peut être nécessaire de déplacer la boîte de dialogue pour afficher la zone de sortie sélectionnée.)

    3. Dans la boîte de dialogue Insérer la propriété de sortie Click-to-Action, indiquez les valeurs suivantes : Sauvegardez le fichier.
    4. Pour vérifier que le code Click-to-Action approprié 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>
      
      Faites attention à l'attribut valeur mis en évidence. Cet attribut est manquant si l'objet Propriété de sortie n'a pas été ajouté correctement à la page.

    ListingSearch a été identifié comme le portlet source. Vous devez ensuite activer ListingDetail en tant que portlet cible.

    1. 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.
    2. Dans la boîte de dialogue Activation de la cible coopérative, entrez itemid dans la zone Type de données.
    3. Cliquez sur le bouton Parcourir situé en regard de la zone Action et sélectionnez /ListingDetailView.jsp > form1 > button1. Cliquez sur OK.
    4. 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 :
    Portlets Click-to-Action

    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.

    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. Etant donné que vous avez déjà défini l'environnement de test WebSphere Portal version 5.1, sélectionnez-le et cliquez sur Fin dans l'assistant Sélection d'un serveur.
    3. 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.
    4. 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.
    5. Cliquez sur l'icône Click-to-Action 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 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.

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