Übung 1.5: Portlets hinzufügen, die Listen auf der Auktionssite suchen und Einzelangaben zu den Listen bereitstellen

Bevor Sie anfangen, müssen Sie die Übung 1.4: Seiten zum Erstellen und Aktualisieren von Benutzerinformationen erstellen ausführen.

In dieser Übung erstellen Sie weitere Portlets, die Kooperationsverhalten bereitstellen. Dabei senden Sie Daten per Click-to-Action von einem Quellenportlet an ein Zielportlet. Das Quellenportlet (ListingSearch) greift über eine Session-Bean auf Daten des Elements Auction zu. Zunächst werden mit dem Portlet ListingSearch spezielle Listen lokalisiert. Danach zeigt das Zielportlet ListingDetail genauere Informationen zu den bei einem Suchvorgang gefundenen Elementen an. In jedem Fall müssen Sie zunächst das Portlet erstellen.

Portlet ListingSearch erstellen

Führen Sie folgende Schritte aus, um das Portlet ListingSearch zu erstellen:

  1. Erweitern Sie im Projekt-Explorer den Ordner Dynamische Webprojekte und suchen Sie den Projektordner AuctionPortlet. Klicken Sie mit der rechten Maustaste auf den Projektordner und wählen Sie Neu > Portlet aus.
  2. Ändern Sie auf der ersten Seite des Assistenten für neue Portlets das Standardnamenspräfix in ListingSearch.
  3. Wählen Sie den Radioknopf Faces-Portlet aus.
  4. Klicken Sie auf Weiter.
  5. Wählen Sie AuctionPortlet application in der Dropdown-Liste Anwendungsname aus.
  6. Geben Sie Listing Search im Feld Portlettitel ein.
  7. Klicken Sie auf Fertig stellen.

ListingSearchView.jsp wird im Bearbeitungsteilfenster geöffnet.

Datentabelle zur Portletseite ListingSearch hinzufügen

Führen Sie nach dem Öffnen der Datei ListingSearchView.jsp in Page Designer folgende Schritte aus, um Session-Bean-Daten als Datenquelle für die Seite ListingSearch hinzuzufügen:

  1. Löschen Sie den Standardtext Inhalt hier platzieren.
  2. Ziehen Sie das Objekt EJB-Session-Bean vom Drawer Daten der Palette auf die Datei.
  3. Wenn der Assistent Session-Bean geöffnet wird, klicken Sie auf die Schaltfläche Neuer EJB-Verweis.
  4. Erweitern Sie die Ordner AuctionPortletEAR und AuctionEJB50 und wählen Sie ListingFacade aus, um den Enterprise-Bean-Verweis zu erstellen. Klicken Sie auf Fertig stellen.
  5. Klicken Sie im Assistent Session-Bean auf Weiter.
  6. Wählen Sie die Schnittstelle findByTitle(String title) aus, die als Eingabefeld auf der Portletseite verwendet wird, und klicken Sie auf Weiter.
  7. Beachten Sie, dass das Titelfeld ausgewählt ist. Klicken Sie auf Optionen.
  8. Geben Sie Find im Feld Kennsatz ein. Klicken Sie auf OK.
  9. Klicken Sie auf Weiter. Nun müsste die Seite Ergebnisformular des Assistenten geöffnet werden. Auf dieser Seite definieren Sie die Datentabelle, die die Daten aus der Datenbank abruft und anzeigt.
  10. Klicken Sie auf Kein, um alle Spalten abzuwählen und die geeigneten Spalten für die Datentabelle, die auf der Portletseite verwendet werden soll, individuell auszuwählen, zu organisieren und zu konfigurieren. Aktivieren Sie anschließend die Markierungsfelder für folgende Spalten:
  11. Verwenden Sie die Schaltflächen mit dem Auf- bzw. Abwärtspfeil, um die ausgewählten Datenspalten in der im obigen Schritt angegebenen Reihenfolge anzuordnen.
  12. Wählen Sie die Option Kennsatz der Spalte itemid aus und ändern Sie den Wert in Item ID.
  13. Klicken Sie auf Fertig stellen, um die Standardbenutzeroberfläche für die Seite UserAdminView.jsp zu generieren. Die Benutzeroberfläche sieht in etwa wie folgt aus:
    ListingSearchView.jsp
  14. Speichern Sie die Datei.

Java-Seitencode zur Seite UserAdmin hinzufügen

In diesem Teil der Übung fügen Sie Java-Seitencode hinzu, um Folgendes zu erreichen:

  • Den Parameter title im Sitzungsbereich speichern, um ihn für künftige Aktualisierungen des Portletinhalts wiederverwenden zu können
  • Den Parameter, der im Eingabefeld Title angezeigt werden soll, mit dem im Sitzungsbereich gespeicherten Parameter initialisieren
  • Die Ergebnisdaten mit Hilfe des im Sitzungsbereich gespeicherten Parameters title initialisieren
  • Sie können die EJB-Referenzlogik sowie den Code zum Binden des Aufrufs und der Ergebnisse an die Benutzeroberfläche wie folgt hinzufügen:

    1. Wählen Sie in Page Designer im Kontextmenü die Option Seitencode bearbeiten aus.
    2. Fügen Sie in doListingFacadeLocalFindByTitleAction() den folgenden in Fettdruck gekennzeichneten Code ein:
      public String doListingFacadeLocalFindByTitleAction() {
          String title = getListingFacadeLocalFindByTitleParamBean().getTitle();
          getSessionScope().put("title", title);
          try {
              listingFacadeLocalFindByTitleResultBean = 
              	getListingFacadeLocal().findByTitle(title);
          } catch (Exception e) {
              logException(e);
          }
          return null;
      }
      
    3. Fügen Sie in getListingFacadeLocalFindByTitleParamBean() den folgenden in Fettdruck gekennzeichneten Code ein:
      public ListingFacadeLocalFindByTitleParamBean 
      	getListingFacadeLocalFindByTitleParamBean() {
          if (listingFacadeLocalFindByTitleParamBean == null) {
              listingFacadeLocalFindByTitleParamBean = 
              	new ListingFacadeLocalFindByTitleParamBean();
              String title = (String)getSessionScope().get("title");
              listingFacadeLocalFindByTitleParamBean.setTitle(title);
          }
          return listingFacadeLocalFindByTitleParamBean;
      }
      
    4. Fügen Sie in getListingFacadeLocalFindByTitleResultBean() den folgenden in Fettdruck gekennzeichneten Code ein:
      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. Speichern Sie ListingSearchView.java.

    Portlet ListingDetail erstellen

    Führen Sie folgende Schritte aus, um das Portlet ListingDetail zu erstellen:

    1. Erweitern Sie im Projekt-Explorer den Ordner Dynamische Webprojekte und suchen Sie den Projektordner AuctionPortlet. Klicken Sie mit der rechten Maustaste auf den Projektordner und wählen Sie Neu > Portlet aus.
    2. Ändern Sie auf der ersten Seite des Assistenten für neue Portlets das Standardnamenspräfix in ListingDetail.
    3. Wählen Sie den Radioknopf Faces-Portlet aus.
    4. Klicken Sie auf Weiter.
    5. Wählen Sie AuctionPortlet application in der Dropdown-Liste Anwendungsname aus.
    6. Geben Sie Listing Detail im Feld Portlettitel ein.
    7. Klicken Sie auf Fertig stellen.

    Die Datei ListingDetailView.jsp wird im Bearbeitungsteilfenster geöffnet.

    Datenformular zur Portletseite ListingDetail hinzufügen

    Führen Sie nach dem Öffnen der Datei ListingDetailView.jsp in Page Designer folgende Schritte aus, um Session-Bean-Daten als Datenquelle für die Seite ListingDetail hinzuzufügen:

    1. Löschen Sie den Standardtext Inhalt hier platzieren.
    2. Ziehen Sie das Objekt EJB-Session-Bean vom Drawer Daten der Palette auf die Datei.
    3. Wenn der Assistent Session-Bean geöffnet wird, wählen Sie ejb/ListingFacade aus und klicken Sie auf Weiter.
    4. Wählen Sie die Schnittstelle findById(Integer itemid) aus, die als Eingabefeld auf der Portletseite verwendet wird.
    5. Klicken Sie auf Weiter.
    6. Beachten Sie, dass das Titelfeld ausgewählt ist. Wählen Sie die Option Kennsatz im Feld itemid aus und ändern Sie den Wert in Item ID.
    7. Klicken Sie auf Optionen.
    8. Geben Sie Find im Feld Kennsatz ein. Klicken Sie auf OK.
    9. Klicken Sie auf Weiter. Nun müsste die Seite Ergebnisformular des Assistenten geöffnet werden. Auf dieser Seite definieren Sie das Datenformular, das die Daten aus der Datenbank abruft und anzeigt.
    10. Klicken Sie auf Kein, um alle Felder abzuwählen und die geeigneten Felder für die Datentabelle, die auf der Portletseite verwendet werden soll, individuell auszuwählen, zu organisieren und zu konfigurieren. Aktivieren Sie anschließend die Markierungsfelder für folgende Felder:
    11. Verwenden Sie die Schaltflächen mit dem Auf- bzw. Abwärtspfeil, um die ausgewählten Datenfelder in der im obigen Schritt angegebenen Reihenfolge anzuordnen.
    12. Klicken Sie auf Fertig stellen, um die Benutzeroberfläche für die Seite ListingDetailView.jsp zu generieren. Die Benutzeroberfläche sieht in etwa wie folgt aus:
      ListingDetailView.jsp
    13. Speichern Sie die Datei.

    Java-Seitencode zur Seite UserAdmin hinzufügen

    In diesem Teil der Übung fügen Sie Java-Seitencode hinzu, um Folgendes zu erreichen:

  • Den Parameter itemid im Sitzungsbereich speichern, um ihn für künftige Aktualisierungen des Portletinhalts wiederverwenden zu können
  • Den Parameter, der im Eingabefeld Item ID angezeigt werden soll, mit dem im Sitzungsbereich gespeicherten Parameter initialisieren
  • Die Ergebnisdaten mit Hilfe des im Sitzungsbereich gespeicherten Parameters itemid initialisieren
  • Sie können die EJB-Referenzlogik sowie den Code zum Binden des Aufrufs und der Ergebnisse an die Benutzeroberfläche wie folgt hinzufügen:

    1. Wählen Sie in Page Designer im Kontextmenü die Option Seitencode bearbeiten aus.
    2. Fügen Sie in doListingFacadeLocalFindByIdAction() den folgenden in Fettdruck gekennzeichneten Code ein:
      public String doListingFacadeLocalFindByIdAction() {
          Integer itemid = getListingFacadeLocalFindByIdParamBean().getItemid();
          getSessionScope().put("itemid", itemid);
          try {
              listingFacadeLocalFindByIdResultBean = 
              	getListingFacadeLocal().findById(itemid);
          } catch (Exception e) {
              logException(e);
          }
          return null;
      }
      
    3. Fügen Sie in getListingFacadeLocalFindByIdParamBean() den folgenden in Fettdruck gekennzeichneten Code ein:
      public ListingFacadeLocalFindByIdParamBean 
      	getListingFacadeLocalFindByIdParamBean() {
          if (listingFacadeLocalFindByIdParamBean == null) {
              listingFacadeLocalFindByIdParamBean = 
              	new ListingFacadeLocalFindByIdParamBean();
              Integer itemid = (Integer)getSessionScope().get("itemid");
              listingFacadeLocalFindByIdParamBean.setItemid(itemid);
          }
          return listingFacadeLocalFindByIdParamBean;
      }
      
    4. Fügen Sie in getListingFacadeLocalFindByIdResultBean() den folgenden in Fettdruck gekennzeichneten Code ein:
      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. Speichern Sie ListingDetailView.java.

    Kooperationsverbindung zum Portlet ListingSearch hinzufügen

    Der Ausdruck Kooperationsportlet beschreibt die Fähigkeit von Portlets auf einer Seite, miteinander durch den Austausch von Informationen zu interagieren. Ein oder mehrere Portlets auf einer Portalseite können automatisch auf Änderungen eines Quellenportlets reagieren, die durch eine Aktion oder ein Ereignis innerhalb des Quellenportlets ausgelöst wurden. Die Portlets, an die das Ereignis gerichtet ist, können reagieren, so dass der Benutzer in anderen Portlets auf der Seite keine wiederkehrenden Änderungen oder Aktionen auszuführen braucht. Das Verfahren zur Implementierung des Kooperationsverhaltens wird als Click-to-Action-Ereignis bezeichnet.

    Ein Click-to-Action-Ereignis wird über ein Symbol im Quellenportlet gestartet. Das Symbol öffnet ein Kontextmenü mit einer Liste der Ziele der Aktion. Nachdem der Benutzer ein bestimmtes Ziel ausgewählt hat, überträgt der Merkmalbroker die Daten mit der entsprechenden Portletaktion an das Ziel. Das Click-to-Action-Verfahren gibt dem Benutzer die Möglichkeit, Daten mit einem einfachen Klick von einem Quellenportlet an ein oder mehrere Zielportlets zu übertragen. Dies bewirkt, dass das Ziel auf die Aktion reagiert und eine neue Sicht mit den Ergebnissen anzeigt.

    Führen Sie folgende Schritte aus, um Kooperationsverhalten zwischen den Portlets ListingSearch und ListingDetail einzurichten:

    1. Öffnen Sie ListingSearchView.jsp in Page Designer. (Erweitern Sie im Projekt-Explorer die Ordner AuctionPortlet und WebContent und doppelklicken Sie auf die Datei.)
    2. Ziehen Sie ein Objekt Click-to-Action-Ausgabemerkmal aus dem Drawer der Palette Portlet und legen Sie es im Ausgabefeld der Datentabelle mit der Bezeichnung {itemid} ab.

      Hinweis: Stellen Sie sicher, dass Sie das Objekt Click-to-Action Output Property auf das Ausgabefeld (und nicht davor und nicht dahinter) fallen lassen. Das Ausgabefeld muss uin einem Rechteck hervorgehoben sein und sieht in etwa wie folgt aus:
      Eine Ausgabeeigenschaft auf einem Ausgabefeld fallen lassen.
      (Möglicherweise müssen Sie das Diaolgfeld verschieben, um die Ausgabefeldauswahlmöglichkeit zu sehen.)

    3. Geben Sie im Dialog Click-to-Action-Ausgabemerkmal folgende Werte ein: Speichern Sie die Datei.
    4. Um zu überprüfen, dass der korrekte Click-to-Action-Code hinzugefügt wurde, öffnen Sie die Quellensicht, und stellen Sie sicher, dass der folgende Code in der Datei enthalten ist:
      <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>
      
      Beachten Sie das hervorgehobene Attribut value. Dieses Attrubut fehlt, wenn die Ausgabeeigenschaft nicht korrekt auf der Seite hinzugefügt wurde.

    Mit diesen Schritten wird ListingSearch als Quellenportlet gekennzeichnet. Nun müssen Sie ListingDetail als Zielportlet aktivieren:

    1. Erweitern Sie AuctionPortlet > Portletimplementierungsdeskriptor im Projekt-Explorer. Wählen Sie Kooperativ > Kooperatives Ziel aktivieren im Kontextmenü des Portlets ListingDetail aus.
    2. Geben Sie im Dialog Kooperatives Ziel aktivieren im Feld Datentyp die Zeichenfolge itemid ein.
    3. Klicken Sie neben dem Feld Aktion auf die Schaltfläche Durchsuchen und wählen Sie /ListingDetailView.jsp > form1 > button1 aus. Klicken Sie auf OK.
    4. Geben Sie im Dialog Kooperatives Ziel aktivieren im Feld Kennsatz die Zeichenfolge Show Detail ein. Klicken Sie auf OK.

    Kehren Sie im Projekt-Explorer in den Ordner Portletimplementierungsdeskriptor zurück und prüfen Sie, ob die Click-to-Action-Quelle korrekt gekennzeichnet wurde. Die Symbole für das Quellenportlet (ListingSearch) und das Zielportlet (ListingDetails) müssten in etwa wie folgt aussehen:
    Click-to-Action-Portlets

    Kooperationsverhalten in den Listing-Portlets testen

    Zur Prüfung der ordnungsgemäßen Funktionsweise der Portlets ListingSearch und ListingDetail sollten Sie sie in der Testumgebung ausführen.

    Gehen Sie wie folgt vor, um die Portlets auszuführen:

    1. Wählen Sie im Projekt-Explorer das Projekt AuctionPortlet und in dessen Kontextmenü die Optionen Ausführen > Auf Server ausführen aus.
    2. Da Sie die WebSphere Portal V5.1-Testumgebung bereits definiert haben, wählen Sie sie aus und klicken Sie im Assistenten für die Serverauswahl auf Fertig stellen.
    3. Die Portlets werden im Browser angezeigt. Hier können Sie die Eingabefelder, Schaltflächen und das Layout so sehen wie ein Benutzer auf einer Portalsite.
    4. Geben Sie im Portlet 'ListingSearch' das Platzhalterzeichen % ein, um alle Elemente aufzulisten, und klicken Sie auf die Schaltfläche Suchen. In der Tabelle unter der Schaltfläche Übergeben werden die Elemente der Auktion aufgeführt, die mit dem Suchbegriff übereinstimmen.
    5. Klicken Sie auf das Symbol 'Click-to-Action' Symbol 'Click-to-Action' in der Spalte Element-ID, um die Listen-ID an das Portlet ListingDetail zu senden. Im Portlet ListingDetail werden detaillierte Informationen über das Element angezeigt, das bei der Suche gefunden wurde.

    Stoppen Sie den Testumgebungsserver, bevor Sie mit der nächsten Übung fortfahren. Wählen Sie dazu den Testumgebungsserver einfach in der Sicht 'Server' aus und klicken Sie in der Funktionsleiste auf die Schaltfläche Server stoppen Server stoppen.

    Nun sind Sie bereit für die Übung 2.1: Neues Portal zur Anzeige der Portletanwendung erstellen.

    Feedback
    (C) Copyright IBM Corporation 2000, 2005. Alle Rechte vorbehalten.