mobile APEX Anwendungen farblich gestalten

Seit Oracle APEX Version 4.2 ist die Erstellung von mobilen Anwendungen kinderleicht geworden. Dank der Verwendung des mobilen Frameworks jQuery mobile funktionieren diese APEX Anwendungen auf allen modernen Smartphones.

Will man die erstellte Anwendung nun farblich anpassen, so geht das mit dem ThemeRoller von jQuery mobile wunderbar einfach.

Lesen sie dazu diesen Tipp von Carsten Czarski in der deutschsprachigen APEX Community. Carsten erklärt wie der ThemeRoller funktioniert und wie man die so erzeugten Layouts in die eigene Anwendung einbindet.

Damit man aber zu dem gewünschten Ergebnis kommt, ist es hilfreich zu wissen welche Layouts standardmäßig von den APEX mobile Templates verwendet werden.

Richtig: Layouts, plural. Es wird also nicht nur ein einziges Layout verwendet, sondern mehrere gleichzeitig. jQuery mobile (JQM) unterstützt nämlich sogenannte data-themes bzw. Swatches. Diese werden mit einem Buchstaben von a-z benannt und können auf jedem einzelnen Element angewandt werden.

Im Standard-Layout werden 5 Swatches ausgeliefert, diese sind von a-e benannt UND werden auch alle von APEX verwendet. Gleichzeitig.

Das bedeutet für sie, dass sie mit dem ThemeRoller auch alle fünf Swatches verändern müssen, damit dies in ihrer Applikation entsprechende Wirkung zeigt.

Grundsätzlich verwendet jQuery mobile, falls nicht anders angegeben, das data-theme a. Allerdings gibt es auch hier manche Unter-Elemente die ggf. mit c gestylt werden. Details dazu in der hervorragenden Dokumentation von JQM.

Um herauszufinden, welches data-theme von APEX für welches Element verwendet wird können wir die Suche im Application Builder verwenden.

Erstmal suchen wir nach „data-theme“, danach suchen wir den Begriff „ui-bar“ um all jene Stellen zu finden, wo direkt CSS-Klassen von JQM verwendet werden. Das Ergebnis sehen sie in diesen beiden Screenshots:

Nun wissen wir wo welche Swatches verwendet werden und können den ThemeRoller gezielt anwenden. Alternativ können sie auch das Template ändern und ein anderes data-theme definieren.

So steht der Kreativität nichts mehr im Wege !

Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.


Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.