Das Universal Theme in APEX 5.0

03.
August
2015
Veröffentlicht von: Lisa Klimesch

Das Corporate-Design Ihrer Firma wurde überarbeitet, einige Farbnuancen variiert, das Erscheinungsbild des Internetauftritts minimalisiert - und selbstverständlich soll sich nun auch das Layout aller produktiven APEX Applikationen am neuen Design orientieren. Was in früheren APEX-Versionen einem entwicklungstechnischen Super-GAU gleichkam und nur durch akribische Modifizier-Bemühungen zu bewerkstelligen war, lässt sich in der seit April 2015 veröffentlichten APEX-Version 5.0 äußerst schnell und elegant bewerkstelligen.

Theme Roller

Ein zentrales Feature des Universal Themes ist der Theme Roller, den wir über die Entwickler-Toolbar unserer APEX-Applikation aufrufen. Er bietet die Möglichkeit, das Universal Theme zur Laufzeit zu verändern – im großen Stil anhand des Color Wheels, in kleineren Schritten auf Komponentenebene (von Global-Colors bis hin zu einzelnen Buttons oder Regionen-Elementen) oder durch die Einbindung eigener CSS. Je nach Bedarf können hier beispielsweise die Farbauswahl angepasst, der Rahmen-Radius eingestellt oder verschiedene Layouts gesetzt werden. Der Color Contrast Check (nach WCAG 2.0) liefert dabei zusätzliche Auskunft darüber, ob der Kontrast der gewählten Textfarbe gegenüber dem Hintergrund ausreichend ist oder eine potentielle Barriere für die zukünftigen Nutzer darstellen könnte.

 

 

 

 

Theme Styles

Gefällt das aktuell zusammengestellte Design? Falls nicht, kann es mit einem Klick auf den Reset-Button verworfen werden. Falls doch, kann es als Theme Style gespeichert sowie als „Current Theme Style“ eingestellt werden. Pro Applikation können beliebig viele Theme Styles definiert und gespeichert werden – der End-Benutzer sieht jedoch immer nur das als „Current Theme Style“ gesetzte Style-Set.

Template Options

Template Options gehören ebenfalls zu den wichtigen Features des Universal Themes. Für jeden Komponententyp (z. B. Seiten, Regionen, Formulare, Buttons, etc.) stehen uns verschiedene Templates zu Verfügung. Und für jedes dieser Templates eines Komponententyps wiederum mehrere Template Options.

Diese bieten unkomplizierte und gleichzeitig vielfältige Anpassungsmöglichkeiten für einzelne Seitenelemente, ohne dass wir dabei ein komplett neues Template erstellen müssen. Wir wählen hier lediglich aus vordefinierten Optionen aus und aktivieren diese für die entsprechende Seitenkomponente. Jede Template Option gehört dabei einer Gruppe an, die zahlreiche Bereiche wie Header und Item-, Label- oder auch Animations-Eigenschaften abdeckt. 

Beispiele

So lässt sich beispielsweise der Rahmen einer Region ausblenden und deren Überschrift verstecken: Im Page Designer finden wir unter der Rubrik Appearance im Property Editor (rechter Bereich) die verschiedenen Einstellungsmöglichkeiten zu Templates und Template Options.


Per Klick auf Template Options gelangen wir in die Optionen-Ansicht und können dort nun in der Gruppe Header die Option Hidden bzw. in der Gruppe Style das Remove Border auswählen.

Genauso können wir zum Beispiel mehrere Regionen zu einer animierten Slide-Show zusammenstellen, die anhand eines Timers alle fünf Sekunden eine andere Region anzeigt. Hierfür legen wir eine Region mit mehreren Subregionen an und gehen im Property Editor wieder zum Menüpunkt Appearance. Dort selektieren wir für unsere Region das Template Carousel Container und aus den Template Options die Animation Spin sowie den Timer 5 Seconds.

Technische Details

Aus technischer Sicht ist jede Template Option mit einer CSS Klasse verknüpft, die – sobald die Wahl auf sie fällt – in den HTML Code der entsprechenden Region eingelesen wird. Dieses Vorgehen unterstützt eine übersichtliche Strukturierung von CSS Eigenschaften. Insgesamt bietet APEX 5.0 vier verschiedene Ebenen, auf denen CSS Anpassungen vorgenommen werden können: Seite, Applikation, User-Interface sowie Theme.

Subscription

Sowohl das Universal Theme als auch einzelne Templates und Template Options einer APEX-Anwendung befinden sich grundsätzlich im „Read Only“-Modus und können nicht bearbeitet werden. Grund dafür ist deren Subscription und Synchronisierung mit dem Master-Theme in der APEX-Engine. Auf diese Weise werden zukünftige Änderungen, APEX-Versionen oder Patch-sets automatisch über das Master-Theme auf alle abonnierten Applikationen übertragen.

Eine Aufhebung dieser Theme Subscription – und damit des „Read Only“-Modus – ist prinzipiell möglich (über Shared Components/Themes/Universal Theme/Theme Subscription/Unsubscribe), wenn auch nicht empfehlenswert, da das Abonnement nicht zuletzt auch Konsistenz durch alle Applikationen hindurch gewährleistet.

Wer mit den bestehenden Templates nicht zufrieden ist, kann einzelne Templates des Universal Themes kopieren, diese nach Bedarf definieren und so das Universal Theme erweitern. Hierfür kann unter Shared Components / Templates nach dem gewünschten Komponententyp gesucht werden und das ausgewählte Template anhand des Copy-Buttons kopiert werden. Die neu erstellte Template-Kopie sowie deren Template Options können nun bearbeitet werden.

Seit dem 15. Juli 2015 steht übrigens das erste Patch-set APEX 5.0.1 mit der Patch-Nummer 21364820 zum Download zur Verfügung, das größtenteils Bugfixes, aber auch ein neues Feature mit sich bringt: Den Chart Typ D3 Collapsible Tree.

Weitere Erklärungen, Tipps und Tricks zum Universal Theme sowie weiteren neuen Features von APEX 5.0 erhalten Sie in unseren APEX-Opens internal link in current windowSchulungen (Grundlagen / Fortschritt / Neuerungen in APEX 5.1)! Schauen Sie doch einfach mal vorbei! 

APEX APEX Theme

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.