Setzen von Stylesheets für HTMLB und XHTMLB (SAP-Bibliothek - Web-Applikationen und Business Server Pages)

Setzen von Stylesheets für HTMLB und XHTMLB

Verwendung

Für das einheitliche Aussehen von BSP-Applikationen können Sie im Rahmen der BSP-Extensions HTMLB und XHTMLB Stylesheets, JavaScript-Dateien und Bilder verwenden, die im MIME-Repository abgelegt sind. Diese Stylesheets, JavaScript-Dateien und Bilder, liegen üblicherweise auf dem gleichen SAP Web Application Server. Der Standardpfad im MIME-Repository lautet: /sap/public/bsp/sap/public/bc/(x)htmlb. Unterhalb der Verzeichnisse htmlb und xhtmlb sind die *.css und *.js-Dateien abgelegt. Die *.gif-Dateien befinden sich in einem weiteren Unterverzeichnis.

Nun kann es vorkommen, dass in bestimmten Anwendungsfällen das standardmäßige Aussehen der HTMLB oder XHTMLB-Bibliotheken verändert werden soll. Beispielsweise ist dies notwendig, wenn die Corporate Identity eines Kunden genau abgebildet werden soll. In einem solchen Fall wird empfohlen, die Dateien aus dem MIME-Repository für die HTMLB und XHTMLB-Bibliotheken zu kopieren und zu modifizieren.

BSP-Laufzeit und HTMLB-Manager enthalten aus diesem Grund eine Infrastruktur für die Handhabung von Pfaden zu anderen Lokationen, von denen man Stylesheets, JavaScript-Dateien oder Bilder einbinden möchte.

Hinweis

Alternativ können Sie das Themen-Konzept des MIME-Repository verwenden, um bestimmte Dateien in einem anderen Thema zu ändern.
Weitere Informationen finden Sie unter Layout-Anpassungen an BSP-Applikationen.

Voraussetzungen

Sie befinden sich in einem System ab SAP Web AS 6.20 und haben mindestens Support Package 7 implementiert.

Funktionsumfang

Beispielsweise wird ein neues Verzeichnis \myRoot angelegt. Unterhalb dieses Verzeichnisses gibt es dann die Unterverzeichnisse \HTMLB und \XHTMLB mit ihren jeweiligen Dateien.

Hinweis

Sie müssen lediglich die *.css und *.gif-Dateien kopieren. Die *.js-Dateien werden immer von ihrer ursprünglichen Lokation geladen.

Die Beispiel-Verzeichnisstruktur sieht nun folgendermaßen aus:
  /myRoot/HTMLB/controls_*.css
  /myRoot/HTMLB/subdirectories/*
  /myRoot/XHTMLB/controls_*.css
  /myRoot/XHTMLB/subdirectories/*

Um nun die neuen Verzeichnisse für Ihre BSP-Extensions und dadurch in Ihren BSP-Applikationen einzusetzen, verwenden Sie den URL-Parameter sap-themeRoot.

Achtung

Achten Sie bei den Angaben der externen Pfade auf das "URL-Escaping". Üblicherweise wird z.B. der Doppelpunkt ( : ) als %3A und der Slash ( / ) als %2F kodiert.

Hier einige Beispiele mit dem "URL-Escaping" (%2F und %3A):

Beispiel

Beispiel für /myRoot auf dem gleichen Host:
http://host.domain.ext:port/sap/bc/bsp/sap/sbspext_htmlb/button.bsp?sap-themeRoot=%2FmyRoot

Beispiel für /myRoot auf einem anderen Host:
http://host.domain.ext:port/sap/bc/bsp/sap/sbspext_htmlb/button.bsp?sap-themeRoot=http%3A%2F%2Fanother.host.domain.ext%3Aport%2FmyRoot

Für den Fall, dass spezifische BSP-Anwendungen als öffentliche Anwendungen ablaufen und keinen Authentifizierungsschritt benötigen, könnten Sie folgendermaßen vorgehen: Wenn die kopierten Stylesheets wieder auf dem SAP Web AS abgelegt sind, können Sie einen externen Alias (siehe auch Anlegen eines ICF-Services) einrichten und dann auf die Stylesheets über diesen Alias zugreifen.

Zukünftig werden mehrere Themen im Rahmen von HTMLB/XHTMLB ausgeliefert. Diese zusätzlichen Themen werden in Unterverzeichnissen im MIME-Repository abgelegt.

Hinweis

Beachten Sie, dass in der HTMLB–Bibliothek die Dateien für das frühere Aussehen (klassisches Design) im Verzeichnis \HTMLB abgelegt sind und die Dateien für das neue Design (Design2002) im Verzeichnis \HTMLB\design2002 abgelegt sind. Für beide Varianten werden weitere zentral ausgelieferte Themen jeweils in Unterverzeichnissen abgelegt.

Beispiel

In diesem Beispiel nehmen wir an, dass das Thema "mono" zukünftig ausgeliefert wird. Dann sieht die Struktur im MIME-Repository folgendermaßen aus:

  /sap/public/bsp/sap/public/bc/htmlb/controls_*.css
  /sap/public/bsp/sap/public/bc/htmlb/mono/controls_*.css <-- anderes Thema
  /sap/public/bsp/sap/public/bc/htmlb/design2002/controls_*.css <-- neues Design
  /sap/public/bsp/sap/public/bc/htmlb/design2002/mono/controls_*.css <-- anderes Thema
  /sap/public/bsp/sap/public/bc/xhtmlb/controls_*.css
  /sap/public/bsp/sap/public/bc/xhtmlb/mono/controls_*.css <-- anderes Thema

Beachten Sie die folgenden Punkte:

Die XHTMLB–Bibliothek steht nur im neuen Design (Design2002) zur Verfügung

SAP geht davon aus, dass alle zentral ausgelieferten Themen gleichermaßen im neuen Design (Design2002) ausgeliefert werden.

Das gleiche sap-themeRoot kann für den Zugriff auf die im obigen Beispiel angegebenen alternativen Themen verwendet werden. Also verwenden Sie sap-themeRoot=name dazu, auf die verschiedensten Themen zuzugreifen, die für die HTMLB/XHTMLB-Bibliotheken ausgeliefert werden.

Beispiel

http://host.domain.ext:port/sap/bc/bsp/sap/sbspext_htmlb/button.bsp?sap-themeRoot=mono

In allen obigen Beispielen wird das neue sap-themeRoot in der URL als URI-Parameter kodiert (das URL-Mangling wird beim ersten Zugriff auf das SAP Web AS System durchgeführt).

Es gibt jedoch Fälle, in denen es paktisch wäre, das sap-themeRoot direkt im Programm zu setzen. Hierfür wurde das BSP-Element <htmlb:content> um das themeRoot-Attribut erweitert, das genau die oben erläuterte Semantik besitzt. Da jedoch während der Verarbeitung der BSP-Seite kein URL-Mangling durchgeführt wird, bedeutet dies, dass dieses Attribut nur dann auf der bestimmten Seite verwendet wird, auf der es auch gesetzt wurde. Wir empfehlen, dieses Attribut generell für alle Seiten zu setzen, wenn es eingesetzt werden soll.

Beispiel

<htmlb:content design="design2002" themeRoot="mono">