Übung 2.2: Portalsite anpassen

Bevor Sie anfangen, müssen Sie die Übung 2.1: 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:
    Portalkonfiguration mit neuem Thema

  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. Da unterschiedliche Rational-Produkte auch unterschiedliche Installationszielpositionen verwenden, müssen Sie die Benutzeroberfläche des Produkts verlassen, um das Plug-in mit den neuen Bannerbild zu suchen. Verwenden Sie ein Tool zur Dateisuche, um den Plug-in-Ordner com.ibm.etools.portal.examples.application_6.0.0 unter dem Produktinstallationspfad auf Ihrem lokalen Dateisystem zu suchen.
    5. Kehren Sie zum Importassistenten zurück und klicken Sie auf die Schaltfläche Durchsuchen neben dem Feld Import aus Verzeichnis. Navigieren Sie zum folgenden Verzeichnis:
      x:\com.ibm.etools.portal.examples.application_6.0.0\samples
      wobei x: der Pfad ist, der das Plug-in com.ibm.etools.portal.examples.application_6.0.0 auf Ihrem Computer enthält.
    6. Wählen Sie auction.gif als Importziel aus und klicken Sie auf OK.
    7. Klicken Sie neben dem Feld In Ordner auf Durchsuchen und geben Sie AuctionPortal/PortalContent/themes/html/Auction an.
    8. 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.

    Neues Banner

  9. Speichern Sie die Portalkonfigurationsdatei und schließen Sie sie.

Sie können mit Page Designer zahlreiche Änderungen an einem Thema vornehmen, beispielsweise am Layout einer Funktionsleiste im Kopfzeilenbereich. Sie können das Layout (und Format) eines Themas und der zugehörigen Oberflächen bearbeiten. Ä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. Außerdem gelten alle Änderungen, die Sie in dem Editor vornehmen, für alle Verwendungen des entsprechenden Themas in Ihrer Portalanwendung.

Nun sind Sie bereit für die Übung 2.3: Portalanwendung in der WebSphere Portal-Testumgebung ausführen.

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