Ü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:
- 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.
- Ändern Sie auf der ersten Seite des Assistenten für neue Portlets das Standardnamenspräfix in ListingSearch.
- Wählen Sie den Radioknopf Faces-Portlet aus.
- Klicken Sie auf Weiter.
- Wählen Sie AuctionPortlet application in der Dropdown-Liste Anwendungsname aus.
- Geben Sie Listing Search im Feld Portlettitel ein.
- 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:
- Löschen Sie den Standardtext Inhalt hier platzieren.
- Ziehen Sie das Objekt EJB-Session-Bean vom Drawer Daten der Palette auf die Datei.
- Wenn der Assistent Session-Bean geöffnet wird, klicken Sie auf die Schaltfläche Neuer EJB-Verweis.
- 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.
- Klicken Sie im Assistent Session-Bean auf Weiter.
- Wählen Sie die Schnittstelle findByTitle(String title) aus, die als Eingabefeld auf der Portletseite
verwendet wird, und klicken Sie auf Weiter.
- Beachten Sie, dass das Titelfeld ausgewählt ist. Klicken Sie auf Optionen.
- Geben Sie Find im Feld Kennsatz ein. Klicken Sie auf OK.
- 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.
- 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:
- Verwenden Sie die Schaltflächen mit dem Auf- bzw. Abwärtspfeil, um die ausgewählten Datenspalten in der im obigen Schritt angegebenen Reihenfolge anzuordnen.
- Wählen Sie die Option Kennsatz der Spalte itemid aus und ändern Sie den Wert in Item ID.
- 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:

- 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:
- Wählen Sie in Page Designer im Kontextmenü die Option Seitencode bearbeiten aus.
- 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;
}
- 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;
}
- 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;
}
- Speichern Sie ListingSearchView.java.
Portlet ListingDetail erstellen
Führen Sie folgende Schritte aus, um das Portlet ListingDetail zu erstellen:
- 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.
- Ändern Sie auf der ersten Seite des Assistenten für neue Portlets das Standardnamenspräfix in ListingDetail.
- Wählen Sie den Radioknopf Faces-Portlet aus.
- Klicken Sie auf Weiter.
- Wählen Sie AuctionPortlet application in der Dropdown-Liste Anwendungsname aus.
- Geben Sie Listing Detail im Feld Portlettitel ein.
- 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:
- Löschen Sie den Standardtext Inhalt hier platzieren.
- Ziehen Sie das Objekt EJB-Session-Bean vom Drawer Daten der Palette auf die Datei.
- Wenn der Assistent Session-Bean geöffnet wird, wählen Sie ejb/ListingFacade aus und klicken Sie auf Weiter.
- Wählen Sie die Schnittstelle findById(Integer itemid) aus, die als Eingabefeld auf der Portletseite verwendet wird.
- Klicken Sie auf Weiter.
- 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.
- Klicken Sie auf Optionen.
- Geben Sie Find im Feld Kennsatz ein. Klicken Sie auf OK.
- 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.
- 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:
- Verwenden Sie die Schaltflächen mit dem Auf- bzw. Abwärtspfeil, um die ausgewählten Datenfelder in der im obigen Schritt angegebenen Reihenfolge anzuordnen.
- 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:

- 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:
- Wählen Sie in Page Designer im Kontextmenü die Option Seitencode bearbeiten aus.
- 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;
}
- 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;
}
- 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;
}
- 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:
- Öffnen Sie ListingSearchView.jsp in Page Designer. (Erweitern Sie im Projekt-Explorer die Ordner AuctionPortlet und WebContent und doppelklicken Sie auf die Datei.)
- 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:
.
(Möglicherweise müssen Sie das Diaolgfeld verschieben, um die Ausgabefeldauswahlmöglichkeit zu sehen.)
- Geben Sie im Dialog Click-to-Action-Ausgabemerkmal folgende Werte ein:
- Geben Sie itemid im Feld Datentyp ein.
- Wählen Sie das Portlet ListingSearch aus der Dropdown-Liste Quellenportlet aus und klicken Sie
auf OK.
Speichern Sie die Datei.
- 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:
- Erweitern Sie AuctionPortlet > Portletimplementierungsdeskriptor im Projekt-Explorer. Wählen Sie Kooperativ > Kooperatives Ziel aktivieren im Kontextmenü des Portlets ListingDetail aus.
- Geben Sie im Dialog Kooperatives Ziel aktivieren im Feld Datentyp die Zeichenfolge itemid ein.
- Klicken Sie neben dem Feld Aktion auf die Schaltfläche Durchsuchen und wählen Sie /ListingDetailView.jsp > form1 > button1 aus. Klicken Sie auf OK.
- 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:

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:
- Wählen Sie im Projekt-Explorer das Projekt AuctionPortlet und in dessen Kontextmenü die Optionen Ausführen > Auf Server ausführen aus.
- 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.
- 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.
- 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.
- Klicken Sie auf das 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
.
Nun sind Sie bereit für die Übung 2.1: Neues Portal zur Anzeige der Portletanwendung erstellen.