CSS-Klassen für Web-Interfaces (altes Design) 

Definition

Cascading Stylesheets (CSS) dienen der einheitlichen Formatierung von HTML-Seiten und erleichtern die logische Trennung von Inhalt und äußerer Gestaltung. Cascading Stylesheets enthalten Klassen, deren Eigenschaften die Formatdefinition von HTML-Elementen bestimmen. SAP liefert für die Gestaltung der Business Server Pages, die vom Web Interface Builder generiert werden, vordefinierte Klassen aus, die nachfolgend beschrieben werden.

Verwendung

Wenn Sie über entsprechende Kenntnisse in den relevanten Technologien (CSS und HTML) verfügen, können Sie die in den CSS-Klassen enthaltenen Formatdefinitionen ändern und so die Gestaltung der vom Web Interface Builder generierten Business Server Pages Ihren Vorstellungen anpassen.

Sie können die Seiten so gestalten, dass Farbgebung und Schriftart den in Ihrem Unternehmen herrschenden Vorgaben für das Corporate Design entsprechen. Es sind aber auch andere Modifikationen denkbar, z.B. veränderte Abstände und Schriftgrößen, falls die generierten Web-Anwendungen auf Monitoren mit stark unterschiedlicher Auflösung verwendet werden sollen.

Die CSS-Klassen für Web-Interfaces sind in einem vordefinierten Stylesheet enthalten, das als Objekt im MIME-Repository ausgeliefert wird. Das vordefinierte Stylesheet selbst können Sie nicht verändern. Sie können aber einem im Web Interface Builder geöffneten Web-Interface eine Kopie dieses vordefinierten Stylesheets zuordnen und dann die in der Kopie enthaltenen Style-Klassen bearbeiten. Weitere Informationen finden Sie unter CSS-Klassen für Web-Interfaces modifizieren (altes Design).

Struktur

Das von SAP ausgelieferte Stylesheet enthält die nachfolgend aufgeführten Klassendefinitionen sowie Erweiterungen einzelner HTML-Tags.

Die in der Tabelle erwähnten SEM-BPS-Design-Varianten beziehen sich jeweils auf eines der beiden alten SEM-BPS-Designs.

Die verschiedenen Spalten haben folgende Bedeutung:

●     HTML-Tag: HTML-Tag, dessen Aussehen durch die angegebenen CSS-Klassen gegenüber dem HTML-Standard modifiziert wird

●     SAP-Klasse: Von SAP mit dem Web Application Server ausgelieferte zentrale CSS-Klasse. Wenn es keine abgeleitete BPS-Klasse gibt, wird diese Klasse in dem generierten Web-Interface verwendet; um den Stil Ihres Web-Interfaces zu ändern, können Sie diese Klasse anpassen.

●     Erweiterungen: Unterschied in Formatdefinitionen zwischen SAP- und BPS-Klasse.

●     Abgeleitete BPS-Klasse: Speziell für den Einsatz im Web Interface Builder ausgelieferte CSS-Klasse, die von der SAP-Klasse abgeleitet ist. Wenn es eine abgeleitete BPS-Klasse gibt, wird diese Klasse in dem generierten Web-Interface verwendet; um den Stil Ihres Web-Interfaces zu ändern, können Sie diese Klasse anpassen.

HTML-Tag	SAP-Klasse	Erweiterungen	Abgeleitete BPS-Klasse	Beschreibung
Allgemein
body	sapBdy			Dokument (body)
textarea	sapTedWhl			Dokument
a	sapBtnStd			Drucktaste (Internet Explorer)
Register­karten
td	sapTbsTabSel			Aktives Register
td	sapTbsTabBlk			Bereich zwischen Registern
td	sapTbsTab			Inaktives Register
a		text-decoration:none	bpsTbsLnk	Hyperlink auf inaktivem Register
table	sapTbsWhl			Tabelle (1x1) für ausgewähltes Element
Texte, Hyperlinks
span, a	sapTxtStd, sapTxtH1, sapTxtH2, sapTxtH3,			Text (span) bzw. Hyperlink (a)
span, a	sapTxtEmp, sapTxtLbl, sapTxtLblSml, sapTxtLeg, sapTxtRef			Text (span) bzw. Hyperlink (a)
span	sapLnk			Hyperlink (innerhalb von <a>)
Gruppen­felder
table	sapGrcWhl			Rahmentabelle (1x1)
table	sapGrpWhlBox			Innere Tabelle (2 Zeilen: Kopfbereich, Datenbereich)
table	sapGrpHdr			Kopfbereich (Tabelle, 1 Zeile)
td	sapGrpTtlBox			Tabellenzelle im Kopfbereich
div	sapGrpBdyBox			Gruppierungsbereich
Eingabe­layout (altes SEM-BPS- Design)
table	sapTbvStd		bpsLay	Tabelle für Eingabelayout
td	sapTbvHdrAlt		bpsLayHdrAlt	Kopfbereichzellen in Schlüsselspalten, Zellen für Fußnoten, leeres Layout, Layoutfehler
td	sapTbvHdrAlt	text-align: right	bpsLayHdrAltKfg	Kopfbereichzellen in Datenspalten
td	sapTbvHdrStd		bpsLayHdrStd	Kopfbereichzellen (Ausgabelayouts)
td	sapTbvCellStd	text-align: right	bpsLayCellStd	Datenbereichzellen (inkl. Summen), Kopfbereichzellen (Eingabelayouts)
Eingabe­layout (neues SEM-BPS-Design)
td			bpsLay2chaText	Kopfbereichzellen in Schlüsselspalten
td			bpsLay2stdItemCol	Kopfbereichzellen in Datenspalten
td			bpsLay2aggItemCol	Kopfbereichzellen in Datenspalten, Summenspalte
td			bpsLay2stdItem	Schlüsselspaltenzellen (auch in neuen Zeilen):  Standardkopfbereichzellen
td			bpsLay2aggItem	Schlüsselspaltenzellen (auch in neuen Zeilen):  Summenzellen
td			bpsLay2HLevel0, bpsLay2HLevel1, bpsLay2HLevel2, bpsLay2HLevel3	Schlüsselspaltenzellen (auch in neuen Zeilen):  Hierarchiezellen
td			bpsLay2stdData	Datenbereichzellen (auch in neuen Zeilen):  Standardzellen
td			bpsLay2stdDataOdd	Datenbereichzellen (auch in neuen Zeilen):  Farbänderungszellen
td			bpsLay2aggData	Datenbereichzellen (auch in neuen Zeilen):  Summenzellen
input	sapEdfTxtEnbl	text-align: right	bpsLayEdfKfg	Eingabe von Kennzahlwerten in Datenzellen
input	sapEdfTxtEnbl	background-color: #FFD8D8; text-align: right	bpsLayEdfKfgErr	Eingabefehler bei Kennzahlwerten
input	sapEdfTxtEnbl		bpsLayEdfChvl	Eingabe von Merkmalswerten in Schlüsselspalte
input	sapEdfTxtEnbl	background-color: #FFD8D8	bpsLayEdfChvlErr	Eingabefehler bei Merkmalswerten
select	sapDdlWhl		bpsLayDdl	Merkmalswertselek­tor
span	sapDdlTxt		bpsLayDdlTxt	Zeile in Dropdownbox
select	sapDdlWhl	background-color: #FFD8D8	bpsLayDdlErr	Eingabefehler im Merkmalswertselek­tor
Selektoren
select	sapDdlWhl		bpsSelDdl	Selektor
span	sapDdlTxt		bpsSelDdlTxt	Zeile in Dropdownbox
select	sapDdlWhl	background-color: #FFD8D8	bpsSelDdlErr	Eingabefehler im Merkmalswertselek­tor
input	sapEdfTxtEnbl	text-align: right	bpsSelEdf	Eingabefeld für Selektor
input	sapEdfTxtEnbl	background-color: #FFD8D8; text-align: right	bpsSelEdfErr	Eingabefehler im Selektor
table			bspSelGrp	Tabelle zur Aufnahme von Auswahlknöpfen
td			bspSelGrpTxt	Text zu Auswahlknöpfen
Selektor für Hierarchien
table	sapTreWhl			Hierarchie allgemein
div	sapTreNl1, sapTreNl2, sapTreNl3, sapTreNl4			Hierarchiestufen
div			bpsTreSel	Ausgewählter Eintrag
span	sapTreExpNc			Knoten (kein Symbol; nicht verwendet)
span	sapTreExpOp			Knoten (Symbol "aufgeklappt"; nicht verwendet)
span	sapTreExpClo			Knoten (Symbol "zugeklappt"; nicht verwendet)
span			bpsTreOpt	Text eines Hierarchieeintrags

Beachten Sie bei der Modifikation der Klassen folgendes:

·        Sie können die Wirkung einzelner kundeneigener Klassen vollständig ein- oder ausschalten, indem Sie die entsprechenden Klassen im Stylesheet in einen Kommentar ein- oder ausschließen.

·        Für Elemente, zu denen es eine abgeleitete BPS-Klasse gibt, sollten Sie die Modifikationen an dieser abgeleiteten Klasse vornehmen (und nicht an der übergeordneten SAP-Klasse).

·        Weitere Informationen über die Verwendung dieser Klassen finden Sie in dem HTML-Quelltext der Web-Seite.

·        Es ist nicht möglich, die CSS-Klassen, die das Web-Interface verwendet, zu ändern, ohne die generierte BSP-Anwendung zu modifizieren. Um den Stil zu modifizieren, verwenden Sie die oben genannten Standard-Klassen.