Das Universal Theme in APEX 5.0

02.
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.

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.

Die Zauberworte lauten dabei: Universal Theme. Da dieses Theme nicht nur eine Voraussetzung für die Nutzung vieler neuer Features von APEX 5.0 (u. a. Modale Dialoge, Navigationslisten, Maximize Button) darstellt, sondern auch selbst einige spannende Möglichkeiten beinhaltet, widmen wir uns in diesem Tipp des Monats dieser neuen Applikations-GUI.

Das Universal Theme erlaubt ein individuelles, „out-of-the-box“ Layout-Design, das jederzeit, ohne großen Aufwand und ohne Kenntnisse in CSS, HTML5 oder JavaScript erstellt werden kann. Möglich wird dies durch beliebig modifizierbare Theme Styles sowie bereits vorgegebene, CSS-basierte Template Options, die dem Universal Theme zugewiesen werden. Da Theme Styles nicht auf Template-Ebene ansetzen, sondern mit CSS Klassen verbunden sind, wird der HTML Code des zugrundeliegenden Templates dabei nicht verändert. Die Anzahl der in einer Applikation verwendeten Templates lässt sich auf diese Weise deutlich reduzieren.

Responsive Design

Darüber hinaus zeichnet sich das Universal Theme durch sein Responsive Design aus: Jede Applikationsseite wird unabhängig von Display-Größe und Format des jeweiligen Endgeräts ordentlich angezeigt und ist voll funktionsfähig. Dies wird unter anderem durch das neue, flexible Grid System ermöglicht, das jede Seiten bzw. Seiten-Komponente (Region, Item) in zwölf gleich große Spalten unterteilt.

Bei kleineren Displays werden diese Spalten automatisch schmaler oder schieben sich ganz übereinander, um den Inhalt vollständig anzeigen zu können. Besonders bei der Migration von älteren Anwendungen zu APEX 5.0 (und dabei speziell im Fall von mehreren Items innerhalb einer Spalte) sollte das neue Grid Layout und die jeweils gesetzten Column Spans beachtet werden. Hier kann es zu Problemen bei der Darstellung der Seite kommen, wenn die maximale Spaltenanzahl von zwölf überschritten wird.

Tipp

Setzen Sie die Item Properties Column, Column Span und Label Column Span auf die jeweiligen Default-Einstellungen, um Probleme bei der Darstellung zu vermeiden!

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! 

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.