Übung 1.2: Portletentwicklung vorbereiten und Anwendungsprozess definieren

Bevor Sie anfangen, müssen Sie die Übung 1.1: Erforderliche Ressourcen importieren ausführen.

In der vorigen Übung haben Sie das Projekt AuctionPortlet zur Aufnahme der Portlets erstellt, die in diesem Lerntext entwickelt werden. Bei der Vorbereitung auf das Erstellen der Benutzeroberfläche und das Hinzufügen von Daten zu bestimmten Faces-Portlets definieren Sie den Anwendungsprozess mit dem Webdiagrammeditor. Ein Webdiagramm ist nicht das einzige Verfahren zum Definieren des Anwendungsprozesses, aber es eignet sich besonders gut für die visuelle Entwicklung Faces-basierter Portletanwendungen.

Webdiagramm zur Festlegung des Anwendungsprozesses erstellen

Ein Webdiagramm ist eine Datei, mit deren Hilfe Sie den Prozess von Webanwendungen wie Portletanwendungen auf Faces- oder Struts-Basis visualisieren und ändern können. Der Webdiagrammeditor ist ein Bildschirmmaskeneditor zum Bearbeiten von Webdiagrammen. Das Hinzufügen von Knoten, Verbindungen und anderen Komponenten zu einem Webdiagramm wird generisch als Zeichnen des Diagramms bezeichnet.

Webdiagramme bestehen aus Knoten sowie aus Verbindungen zwischen diesen Knoten. Ein Knoten ist ein Symbol, das eine Ressource wie beispielsweise eine JSP-Seite des Portlets oder eine JavaTM-Bean darstellt. Wenn die Ressource vorhanden ist, wird der Knoten als realisiert bezeichnet. Ist die Ressource nicht vorhanden, wird der Knoten als nicht realisiert bezeichnet. Realisierte Knoten werden in Farbe und mit ihrem Namen in Fettdruck dargestellt. Nicht realisierte Knoten werden als abgeblendete Knoten dargestellt.

Sie fügen nun drei JSP-Knoten zu dem Webdiagramm hinzu. Einer davon wird als Hauptknoten angesehen, was die Navigation zu den beiden verknüpften Detailknoten ermöglicht.

  1. Bei der Erstellung des Portletprojekts Auktion hat der Assistent automatisch eine standardmäßige Webdiagrammdatei mit der Bezeichnung diagram.gph erstellt. Erweitern Sie im Projekt-Explorer die Ordner Dynamische Webprojekte und AuctionPortlet und doppelklicken Sie anschließend auf Webdiagramm.

    Die Datei wird im Bearbeitungsteilfenster geöffnet. Gleichzeitig werden dort Anweisungen zur Verwendung des Webdiagrammeditors angezeigt.
    Neues Webdiagramm

  2. Die aktive Sicht rechts im Arbeitsbereich ist eine Palette mit einer Reihe von Drawern. Darin befinden sich Objekte, die Sie auf dem Webdiagrammeditor ablegen können. Sie fügen der Datei UserAdmin.gph über die Palette Objekte des Typs Webseite hinzu. Die Palette hat ein "klebriges" Drag-and-Drop-Verhalten. Das bedeutet, dass Sie nach dem Klicken auf das Objekt in der Palette die Maustaste beim Ziehen nicht gedrückt halten müssen. Bewegen Sie den Cursor einfach auf das Webdiagramm und klicken Sie noch einmal, um das Objekt abzulegen.

    Zum Erstellen des ersten Knotens können Sie UserAdminView.jsp, die erste, mit dem Projekt AuctionPortlet erstellte JSP-Anzeigeseite, vom Projekt-Explorer zum Editor ziehen. Da diese Datei bereits erstellt wurde, wird sie als realisiertes Objekt angezeigt.

  3. Ziehen und übergeben Sie ein Objekt vom Typ Webseite an den Editor. Ändern Sie den Namen der Webseite in UserAdminCreate.jsp.
  4. Wiederholen Sie den oben beschriebenen Schritt zum Erstellen einer Webseite mit dem Namen UserAdminUpdate.jsp.

    Hinweis: Nun können Sie die Knoten ziehen, um ihre Position zu verändern.

  5. Anschließend erstellen Sie Verbindungen zwischen den Webseitenknoten, um den Datenfluss in den Portlets festzulegen:
    1. Wählen Sie im Kontextmenü von UserAdminView.jsp die Option Verbindung aus. Ziehen Sie die Verbindung von UserAdminView.jsp zum Knoten UserAdminCreate.jsp.
    2. Wählen Sie im Dialog Verbindung auswählen die Option Webseiten-Link aus und klicken Sie auf OK.
    3. Wählen Sie im Kontextmenü des Knotens UserAdminCreate.jsp die Option Verbindung aus und ziehen Sie die Verbindung zurück auf den Knoten UserAdminView.jsp.
    4. Wählen Sie im Dialog Verbindung auswählen die Option Faces-Verbindung aus und klicken Sie auf OK.
    5. Geben Sie über dem hervorgehobenen Eintrag <neu> den Namen view für die neue Verbindung ein.
    6. Wählen Sie im Kontextmenü von UserAdminView.jsp die Option Verbindung aus. Ziehen Sie die Verbindung von UserAdminView.jsp auf den Knoten UserAdminUpdate.jsp.
    7. Wählen Sie im Dialog Verbindung auswählen die Option Faces-Verbindung aus und klicken Sie auf OK.
    8. Geben Sie über dem hervorgehobenen Eintrag <neu> den Namen update für die neue Verbindung ein.
    9. Wählen Sie im Popup-Menü des Knotens UserAdminUpdate.jsp die Option Verbindung aus und ziehen Sie die Verbindung zurück zum Knoten UserAdminView.jsp.
    10. Wählen Sie im Dialog Verbindung auswählen die Option Faces-Verbindung aus und klicken Sie auf OK.
    11. Geben Sie über dem hervorgehobenen Eintrag <neu> den Namen view für die neue Verbindung ein.
    12. Speichern Sie das Webdiagramm.
    Das Diagramm sollte nun in etwa wie folgt aussehen:
    Entwurf des Webdiagramms

Die definierten Verknüpfungen bereiten die Portletseiten für die korrekten Verbindungen vor, so dass vom Benutzer veranlasste Daten ordnungsgemäß durch die Anwendung fließen. Wenn die Seite UserAdminView eine Aktion zur Benutzererstellung oder -aktualisierung anfordert, wird die entsprechende Maske geöffnet. Nachdem die erforderlichen Informationen von diesen Masken übergeben wurden, werden die neuen Benutzerinformationen für die Abfragefunktion des Portlets UserAdmin verfügbar.

Nun sind Sie bereit für die Übung 1.3: Seite UserAdmin entwickeln.

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