Übung 1.7: Portalsite anpassen

Bevor Sie anfangen, müssen Sie die Übung 1.6: Neues Portal zur Anzeige der Portletanwendung erstellen ausführen.

Neues Thema erstellen

Während der Erstellung einer Portalanwendung können Sie in Portal Designer ein völlig neues Thema erstellen. Themen sind für die gesamte Darstellung und Funktionsweise (Look-and-Feel) Ihrer Portalanwendung verantwortlich und umfassen viele Elemente der Portalgestaltung, z. B. Bilder, Navigation, Symbolleisten und visuelle Effekte auf Seitenebene. Führen Sie folgende Schritte aus, um ein neues Thema für die in diesem Lerntext entwickelte Portalsite zu erstellen:

  1. Wählen Sie Datei > Neu > Thema in der Menüleiste aus.
  2. Geben Sie Auktion im Feld Titel ein.
  3. Blättern Sie zum Thema Unternehmensweit und wählen Sie es als Quellenthema aus. Es ist viel einfacher, ein neues Thema auf der Basis eines vorhandenen Themas zu erstellen, so dass Sie nicht alle erforderlichen Themenelemente neu erstellen müssen.
  4. Klicken Sie auf Weiter.
  5. Wählen Sie die Oberfläche Shadow in der Liste der verfügbaren Oberflächen aus und klicken Sie auf Als Standardoberfläche definieren, um Shadow als Standardoberfläche für das neue Thema Auktion festzulegen.

    Eine Oberfläche ist der Rahmen, der jedes Portlet innerhalb einer Portalseite umgibt. Im Gegensatz zu Themen, die für das gesamte Look-and-Feel des Portals gelten, sind Oberflächen auf das Look-and-Feel der jeweiligen Portlets beschränkt, die Sie in Ihre Portalanwendung einfügen. Standardmäßig ist nur eine begrenzte Auswahl an Oberflächen für die einzelnen Themen verfügbar.

  6. Klicken Sie auf Fertig stellen.
  7. Erweitern Sie in der Sicht Gliederung die Einträge Elemente > Themen und wählen Sie Auktion aus.
  8. Aktivieren Sie in der Eigenschaftensicht das Markierungsfeld Standard, um das neue Thema auf die Portalanwendung anzuwenden.

    Die Änderung wird sofort in die Portalkonfiguration übernommen.

  9. Speichern Sie die Portalkonfiguration.

In diesem Teil der Übung aktualisieren Sie mit Hilfe von CSS Designer und Page Designer die Formate, Themen und Oberflächen in der Portalanwendung Auktion.

Bannerbild des aktuellen Themas ändern

Führen Sie folgende Schritte aus, um das Bannerbild im Standardthema des Portals Auktion zu ersetzen:

  1. Importieren Sie zunächst ein neues Bannerbild in das Projekt:
    1. Wählen Sie in der Menüleiste Datei > Importieren aus. Der Dialog Importieren wird angezeigt.
    2. Klicken Sie im Bereich Importquelle auswählen auf Dateisystem.
    3. Klicken Sie auf Weiter.
    4. Klicken Sie neben dem Feld Import aus Verzeichnis auf Durchsuchen und navigieren Sie zu folgendem Verzeichnis: <installationsverzeichnis>/portal/eclipse/plugins/com.ibm.etools.portal.examples.application_versionsnummer/samples. Dabei steht <installationsverzeichnis> für das Installationsverzeichnis von Rational Developer.
    5. Wählen Sie auction.gif als Ziel des Importvorgangs aus.
    6. Klicken Sie neben dem Feld In Ordner auf Durchsuchen und geben Sie AuctionPortal/PortalContent/themes/html/Auction an.
    7. Klicken Sie auf Fertig stellen.

      Der Assistent importiert die Datei in Ihren Arbeitsbereich.

  2. Wählen Sie bei geöffneter Portalkonfigurationsdatei des Projekts AuctionPortal im Kontextmenü von Portal Designer die Option Darstellung bearbeiten aus. Die Datei Styles.css wird in CSS Designer geöffnet. Styles.css ist die Standardformatvorlage für das Standardthema in der Anwendung.

    CSS Designer stellt zwei Sichten der für CSS-Dateien definierten Formate bereit: die Voranzeige (links) mit visuellen Beispielen für die Darstellungsregeln bei der Anzeige einer Webressource in einem Browser, und die Quellensicht (rechts), die eine Textversion der CSS-Datei anzeigt. Sie können die Formate in jeder dieser Sichten bearbeiten.

  3. Blättern Sie in der Voranzeige auf das Symbol Banner-Hintergrund und wählen Sie es aus.
  4. Wählen Sie Stilregel bearbeiten [.wpsToolbarBannerBackground] im Kontextmenü aus.
  5. Klicken sie links im Dialog Darstellungseigenschaften festlegen auf die Eigenschaft Hintergrund.
  6. Geben Sie ../../auction.gif im Feld Image ein.
    Dialog 'Darstellungseigenschaften festlegen'
  7. Klicken Sie auf OK.
  8. Speichern Sie die CSS-Datei und schließen Sie CSS Designer. Beachten Sie, dass das neue Bannerbild auf die geöffnete Seite in Portal Designer angewendet wird.

Layout einer Symbolleiste im Headerbereich ändern

Sie können mit Page Designer Änderungen an einem Thema vornehmen, beispielsweise am Layout einer Symbolleiste im Headerbereich. Sie können das Layout (und Format) eines Themas und der zugehörigen Oberflächen bearbeiten. Die Änderungen werden in der Datei default.jsp des Themas, in der Datei control.jsp der jeweils zugeordneten Oberfläche und in anderen zugehörigen JSP-Dateien gespeichert, z. B. in PageBarInclude.jsp. Außerdem gelten alle Änderungen, die Sie in dem Editor vornehmen, für alle Verwendungen des entsprechenden Themas in Ihrer Portalanwendung.

  1. Wählen Sie bei geöffneter Portalkonfigurationsdatei des Projekts AuctionPortal im Kontextmenü von Portal Designer die Option Thema bearbeiten aus. Die Datei Default.jsp wird in Page Designer geöffnet.

    Page Designer bietet eine visuelle Darstellung des Themas und der zugeordneten Oberflächen.

  2. Wählen Sie den Symbolleistenbereich aus, wie in der Abbildung gezeigt:
    Page Designer Beachten Sie, dass die Registerkarte Voranzeige in Page Designer zur Wiedergabe von Portalthemen nicht unterstützt wird.
  3. In der Eigenschaftensicht sehen Sie, dass der Wert für jsp:directive.include ./ToolBarInclude.jsp lautet. Klicken Sie zum Ändern des Symbolleistencodes auf das Symbol Durchsuchen und erweitern Sie die Ordner PortalContent > themes > html. Wählen Sie anschließend einen der anderen Themenordner aus, beispielsweise den Ordner Engineering, und wählen Sie in diesem Verzeichnis die Datei ToolBarInclude.jsp. Nachdem Sie auf OK geklickt haben, wird die neue Symbolleiste auf der Seite Entwurf angezeigt.

    Manchmal ist es schwierig, einzelne Themenelemente auszuwählen. Suchen Sie in solchen Fällen die konkreten Elemente, die Sie aktualisieren wollen, in der Sicht Gliederung. Wenn Sie in der Sicht Gliederung einen Knoten wählen, wird die Auswahl sowohl im Editor als auch in der Eigenschaftensicht synchronisiert.

  4. Speichern Sie die JSP-Datei und schließen Sie Page Designer.

Nun sind Sie bereit für Modul 2: Mot der Portal-Anwendung weiter arbeiten.

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