APEX und CSS

01.
Dezember
2009
Veröffentlicht von: Markus Dötsch

Die in den APEX-Versionen mitgelieferten Themes sind zwar gut und schön. Oft möchte man aber doch seine Corporate-Identity auch in seine APEX-Applikation integrieren. Bevor man sich jetzt aber auf die Themes und die darin enthaltenen HTML-Templates stürzt, sollte man sich Gedanken über den Einsatz von CSS (Cascading Style Sheets) machen. Hierbei ist die Idee von der Trennung von Inhalt und Layout zu beachten.

Die in den APEX-Versionen mitgelieferten Themes sind zwar gut und schön. Oft möchte man aber doch seine Corporate-Identity auch in seine APEX-Applikation integrieren.

Bevor man sich jetzt aber auf die Themes und die darin enthaltenen HTML-Templates stürzt, sollte man sich Gedanken über den Einsatz von CSS (Cascading Style Sheets) machen. Hierbei ist die Idee von der Trennung von Inhalt und Layout zu beachten. Gerade mit APEX lassen sich schnell Applikationen entwickeln, die mit den Anforderungen der Fachabteilungen mitwachsen können. Damit man sich nicht bei jeder Änderung an den APEX-Objekten mit HTML-Code und Layout-Problemen rumärgern muss, macht es Sinn sich in die CSS-Thematik einzuarbeiten.

Dabei ist der Mehraufwand eigentlich sehr übersichtlich. Im Grunde geht es darum nicht jedem HTML-Element seine eigenen CSS-Eigenschaften mit auf den Weg zu geben, sondern den Elementen Klassen und IDs zu verpassen und diesen Objekten dann über eine externe Datei die Layout-Eigenschaften zuzuordnen. Dieser "Umweg" erscheint zuerst umständlich, ermöglicht aber während der Entwicklung und auch bei späteren Erweiterungen eine wesentlich bessere Übersichtlichkeit.


Die CSS-Dateien von APEX

APEX selbst bringt auch externe CSS-Dateien mit, in denen globale und für das gewählte Theme spezifische Eigenschaften beschrieben sind.

Das allgemeine APEX Stylesheet:

<link rel="stylesheet" href="/i/css/apex_3_1.css" type="text/css" />

Das spezielle Stylesheet zum ausgewählten Theme:

<link rel="stylesheet" href="/i/themes/theme_15/theme_3_1.css" type="text/css" />

Beide Dateien werden im Head-Bereich der HTML-Seiten geladen. Im HTML-Header Bereich der APEX-Seiten kann die Ausgabe und damit die Verarbeitung dieser beiden CSS-Dateien auch verhindert werden.

Wenn in der Dropdown "Include Standard CSS and JavaScript" Nein ausgewählt wird, werden die Dateien nicht mehr verarbeitet. In der Regel lässt man die Standard-CSS-Dateien aber weiter zu und ergänzt seine eigene CSS-Datei.


Eigene CSS-Datei auf einzelnen Seiten

Um nur bestimmte Seiten mit CSS zu ergänzen kann man auf der APEX-Seite im HTML-Header-Bereich einen Link auf seine Datei einfügen.

<link rel="stylesheet" href="/mein_pfad/meine_css_datei.css" type="text/css" />

Shared Components -> Files

Als Pfad für die CSS-Datei ist jede Stelle erlaubt, auf die APEX oder der Webserver Zugriff hat. Je nach verwendetem Webserver (EPG, Apache, usw.) kann die Datei im /i/-Verzeichnis oder anderen Verzeichnissen liegen.

Es ist auch möglich die Datei als Cascading Style Sheet (CSS) in den Shared Components hochzuladen und dann über die Pfad-Variable #WORKSPACE_IMAGES# zu referenzieren.

<link rel="stylesheet" href="#WORKSPACE_IMAGES#meinecssdatei.css" type="text/css" />


Eigene CSS-Datei auf allen Seiten

Um die eigene CSS-Datei nicht auf jeder einzelnen Seite hinzufügen zu müssen, lässt sich der Link am besten im verwendeten APEX-Template eintragen. Dazu muss man sich den Aufbau der APEX-Applikation, dem verwendeten Theme und den darin enthaltenen Templates vor Augen halten.

Einer APEX-Applikation ist ein Theme zugeordnet.

Die Themes bestehen aus mehreren HTML-Templates.

Die Templates bestehen aus HTML-Code.

Es gilt also nun die richtige Template-Datei aus dem verwendeten Theme zu finden und zu erweitern. Aber vorher noch ein bisschen Theorie.

Wenn eine neue Applikation erstellt wird, oder man den Aufwand nicht scheut jeder Seite der APEX-Applikation ein neues Template zuzuweisen, macht es Sinn ein komplettes Theme zu kopieren und für die späteren Änderungen zu verwenden. Oder wenigstens das gewünschte Template zu kopieren und dieses auf allen Seiten einzurichten.


Komplettes Theme kopieren

Über Shared Components den Link auf Themes auswählen. Das zu kopierende Theme muss der Applikation bereits zugeordnet sein. Wenn das noch nicht erfolgt ist, kann der Applikation über den Create-Button ein weiteres Theme hinzugefügt werden. Im Wizard From the Repository auswählen und ein Theme auswählen.

Auf der Seite Shared Components -> Themes kann aus dem rechten Tasks-Menü der Wizard Copy-Theme ausgewählt werden um ein Theme zu kopieren. Hier muss das zu kopierende Theme ausgewählt werden und eine Nummer für das neue Theme angegeben werden. Als neue Nummer sollte eine Zahl über 100 gewählt werden, da Werte unter 100 für Oracle reserviert sind.


Einzelnes Template kopieren

Über die Seite Shared Components -> Templates können alle Templates angezeigt werden, die dem gewählten Theme zugeordnet sind. Über das Icon in der rechten Spalte Copy kann ein einzelnes Template kopiert werden. Im Wizard wird nur der neue Name des Templates abgefragt. Danach ist das kopierte Template in der Liste.


Auswahl des richtigen Templates

Jetzt geht es darum das von den APEX-Seiten benutzte Template ausfindig zu machen, zu bearbeiten oder auszutauschen. Es ist möglich, dass auf der Seite unter Edit Page im Bereich Display Attributes in der Dropdown Page Template das benutzte Template direkt angegeben ist. Es kann aber auch Use Application Level Default Template ausgewählt sein. Dann muss man unter Shared Component -> Templates nachsehen, welches Template das Default-Template ist.

Dazu kann man sich auf der Seite Shared Components -> Templates unter dem Type Page die Seite heraussuchen, die in der Spalte Default einen Haken aufweist.


Bearbeiten des Templates

Mit einem Klick aus der Liste auf der Seite Shared Components -> Templates auf den Namen des Templates gelangt man zur Ansicht des HTML-Codes, der in dem Template enthalten ist.

Im Bereich Definition kann in der Textarea für Header der Link auf die eigene CSS-Datei ergänzt werden.

<html lang="&BROWSER_LANGUAGE.">
<head>
<title>#TITLE#</title>
<link rel="stylesheet" href="#IMAGE_PREFIX#themes/theme_6/theme_3_1.css" type="text/css" />
<link rel="stylesheet" href="/mein_pfad/meine_css_datei.css" type="text/css" />
#HEAD#
</head>
<body #ONLOAD#>#FORM_OPEN#


Der Link muss zwischen dem öffnenden <head> und schließenden </head> HTML-Tag für den Head der Webseite integriert werden.

Auch hier gilt für den Pfad auf die CSS-Datei das selbe, wie unter dem Punkt Eigene CSS-Datei auf einzelnen Seiten beschrieben.


Aufbau eines modernen CSS-Layouts

In einem tabellenbasierten (veralteten) Web-Design sind Content und Layout nicht getrennt. Auch die APEX-Themes sind noch so organisiert. Dies ist nach dem Ausschalten der CSS-Styles ersichtlich.

Die Anordnung der Elemente bleibt soweit gleich. Auch Teile des Layouts bleiben erhalten.

Bei einem modernen CSS-Layout werden alle Elemente untereinander und unformatiert ausgegeben, wenn die CSS-Datei entfernt wird.

Alle Elemente untereinander? Was zuerst wie ein Nachteil klingt, wird bei näherer Betrachtung zum Vorteil. Durch eine einfache Änderung der CSS-Datei wird aus altem Layout ein neues Design. Ohne auch nur eine Zeile HTML-Code zu verändern.

Als Basis eines modernen CSS-Designs werden die Positionen von Elementen (Header, Footer, Content-Bereich, usw.) nicht über HTML-Tabellen sondern über Div-Bereiche definiert. In der dazugehörigen HTML-Datei werden den Div-Bereichen dafür IDs oder Klassen zugeordnet.

Die genaue Position und das Aussehen dieser Bereiche wird über die zentrale CSS-Datei gesteuert. Alle Layout-Änderungen werden dann nur an einer einzigen Stelle gepflegt. Dadurch ergibt sich eine wesentlich bessere Wartbarkeit der Webseite.

Aus einer einfachen HTML-Datei ...

... wird mit ein bisschen CSS eine layoutete HTML Seite.


Modernes CSS-Design und APEX

Für ein modernes CSS-Design in APEX müssen folgende Regeln beachtet werden:

  • Anpassen der verwendeten Themes an das CSS-Design
  • Einbinden einer zentralen CSS-Datei
  • Vermeidung von spezifischen CSS-Formatierungen an einzelnen Stellen wie in Reports oder in anderen APEX-Elementen

Anstatt:

<p style="background-color: red;">

Besser:

<p class="roterAbsatz">

Und in der CSS-Datei:

.roterAbsatz{background-color: red;}


Verknüpfung von HTML und CSS

Um eine CSS-Anweisung einem HTML-Befehl zuzuweisen sind folgende Möglichkeiten gegeben:


Variante 1

Über eine ID – Diese muss einmalig im gesamten HTML-Dokument sein.

CSS-Datei:

#name {background-color: red;}

HTML-Datei:

<div id="name">

Die Raute (#) vor dem Namen in der CSS-Datei gibt an, dass es sich um eine ID handelt.


Variante 2

Über eine Klasse (class)  – Diese kann mehrmals im Dokument verwendet werden.

CSS-Datei:

.name {background-color: red;}

HTML-Datei:

<div class="name">

Der Punkt vor dem Namen in der CSS-Datei gibt an, dass es sich um eine Klasse handelt.


Variante 3

Über den Namen (Tag) des HTML-Befehls.

CSS-Datei:

h1 {background-color: red;}

HTML-Datei:

<h1>Meine Überschrift</h1>

Hier gilt die CSS-Anweisung für jede Überschrift der ersten Ordnung (h1) des gesamten HTML-Dokuments.


Aufbau der CSS Anweisungen

Der grundsätzliche Aufbau einer CSS-Anweisung besteht aus den folgenden Elementen:

Selektor { Eigenschaft: Wert; }

Der Selektor ist der Name eines HTML-Befehls oder ein frei gewählter Name für ein Element. Bei der Wahl des Namens sollte auf die Namenskonventionen geachtet werden. Sonst kann es zu Fehlern kommen, bei denen eine CSS-Anweisung von einem bestimmten Browser nicht interpretiert wird.

Die Eigenschaft ist das Schlüsselwort des Elementes, das verändert werden soll. Der Wert setzt sich aus Zahlen, Schlüsselwörtern oder Strings zusammen:

Beispiele:

background-color: red;
font-family: 'Courier New', serif;
border-width: 1px;

Grundsätzlich muss sehr auf die Syntax geachtet werden. Die Klammern, Doppelpunkte und Strichpunkte müssen an den richtigen Positionen angegeben werden.

#name {background-color: red;}

Eine einzeilige Darstellung ist genauso erlaubt wie beliebig viele Leerzeichen, Tabs und Zeilenumbrüche.

#name

             background-color:    red;
}

Das Thema CSS bietet weitaus mehr, als in diesem Beitrag angeschnitten wurde. Weitere Informationen zu diesem interessanten Thema erhalten Sie in unseren Opens internal link in current windowAPEX-Schulungen oder Sie sprechen mit unseren Opens internal link in current windowConsulting-Mitarbeitern.

Jede Menge Know-how für Sie!

In unserer Know-How Datenbank finden Sie mehr als 300 ausführliche Beiträge zu den Oracle-Themen wie DBA, SQL, PL/SQL, APEX und vielem mehr.
Hier erhalten Sie Antworten auf Ihre Fragen.