Eigene Themes für mobile APEX-Anwendungen: jQuery Mobile ThemeRoller

Application Express Community

Wie man eine APEX-Anwendung für mobile Endgeräte erstellt - und wie einfach das ist, wurde bereits in einem Community-Tipp veröffentlicht.

Abbildung 1: Die APEX Sample Application in der mobilen Variante

Allerdings ist jede mobile APEX-Anwendung in diesen Blautönen gehalten; und genau das ist ja nicht immer gewünscht. Es stellt sich also die Frage, wie man das Look & Feel einer mobilen APEX-Anwendung verändern kann ... und die gute Nachricht ist: Das geht (wie immer bei APEX) ganz einfach.

Bekanntlich basieren mobile APEX-Anwendungen auf jQuery Mobile. Die Darstellung ist dabei weitgehend durch CSS-Stylesheets getrieben. Und das Ändern des Look & Feel geschieht in der Tat im wesentlichen durch Austauschen der CSS-Dateien. Aber es kommt noch besser: Man muss die CSS-Dateien gar nicht selbst anpassen; jQuery mobile stellt hierfür einen komfortablen Assistenten bereit: den jQuery Mobile ThemeRoller. Bei Aufruf von http://jquerymobile.com/themeroller/ sollten Sie eine Seite wie in Abbildung 2 sehen.

Abbildung 2: jQuery Mobile ThemeRoller

Nach einem Klick auf Get Rolling unten rechts geht es los. Verändern Sie das Look & Feel einfach, indem Sie die Farben aus der Palette oben auf die UI-Elemente ziehen. Alternativ können Sie auch auf der linken Seite direkte Veränderungen vornehmen. Die mit "A", "B" oder "C" benannten Layouts beziehen sich auf das jQuery Mobile-Attribut data-theme, welches APEX allen Elementen hinzufügt - und was Sie natürlich auch selbst machen können. Wenn Sie bspw. einen HTML-Link mit den Attributen data-role="button" data-theme="a" ausstatten, wo wird jQuery Mobile eine Schaltfläche wie im Beispiel "A" (links) darstellen.

Ändern Sie das Look & Feel nun nach Belieben um. Es könnte sich bspw. ein Aussehen wie in Abbildung 3 ergeben.

Abbildung 3: Ein mit jQuery Mobile ThemeRoller erstelltes Layout

Klicken Sie dann oben auf Download Theme ZIP File. Nachdem Sie dem Theme einen Namen gegeben haben, erhalten Sie ein ZIP-Archiv mit zwei enthaltenen CSS-Dateien.

Abbildung 4: Layout als ZIP Archiv herunterladen

Die eine Datei ist "minimiert" (die CSS-Syntax wurde also so kompakt wie möglich gestaltet), die andere ist leserlich und kann in einem Texteditor oder einem anderen Werkzeug weiterbearbeitet werden. Nun geht es daran, diese Dateien zur APEX-Anwendung zu bringen. Hier kann man nun zwei Fälle unterscheiden

Bereitstellung über den APEX-Webserver (Pfad /i/)
Upload als Statische Datei in den APEX Workspace

Wenn Sie auf apex.oracle.com oder einem anderen Server arbeiten, bei dem Sie "nur" Zugriff auf Ihren APEX-Workspace haben, lesen Sie bitte unter Upload als Statische Datei in den APEX Workspace weiter. Wenn Sie "Vollzugriff" auf Ihre APEX-Umgebung haben, kommen beide Varianten in Betracht.

Upload der CSS-Datei in dem Bereich "images" (/i/) des APEX-Webservers

Diese Variante erfordert Zugriff auf den APEX-Webserver oder DBA-Privilegien bei Verwendung des PL/SQL Embedded Gateway. Für letzteres gehen Sie wie folgt vor:

Laden Sie eine der beiden CSS-Dateien (nicht das ZIP-Archiv) zunächst bei den Gemeinsamen Komponenten als CSS-File hoch (Abbildung 5).

Abbildung 5: CSS-Datei in den Workspace laden

Anschließend öffnen Sie eine SQL*Plus oder SQL Developer Session als DBA und setzen Sie folgende Kommandos ab (Passen Sie vorher den Workspace-Namen MOBILE und den Dateinamen meinTheme.min.css an Ihre Umgebung an):

declare
  l_jqm_tr_css blob;
  l_success    boolean;
begin
  -- Workspace ID setzen, damit SELECT auf WWV_FLOW_FILES funktioniert
  apex_util.set_security_group_id(apex_util.find_security_group_id('MOBILE'));

  -- Hochgeladene CSS-Datei in den BLOB laden
  select blob_content into l_jqm_tr_css 
  from wwv_flow_files where filename = 'meinTheme.min.css';

  -- Und ins XDB Repository überführen
  l_success := dbms_xdb.createresource(
    abspath => '/images/libraries/jquery-mobile/1.2.0/mein.jqm.theme.0.1.min.css',
    data    => l_jqm_tr_css,
    csid    => nls_charset_id('AL32UTF8')
  );
end;
/

commit
/

Testen Sie anschließend, ob die CSS-Datei tatsächlich mit dem Browser unter folgender URL abrufen können.
```
http://{hostname}:{port}/i/libraries/jquery-mobile/1.2.0/mein.jqm.theme.0.1.min.css
```
Abbildung 6: Testen, ob die CSS-Datei richtig im XDB Repository bereitsteht
Navigieren Sie dann zum Seitentemplate Ihrer mobilen Anwendung - wenn Ihre Anwendung mehrere User Interfaces hat, suchen Sie die Templates des mobilen User Interface heraus. Passen Sie das Seitentemplate den Bereich des Seiten Headers, wie in Abbildung 7 dargestellt, an:
```
:

<link rel="stylesheet" type="text/css" 
      href="#IMAGE_PREFIX#libraries/jquery-mobile/1.2.0/mein.jqm.theme.0.1.min.css"/>

:
```
Abbildung 7: Das von ThemeRoller generierte CSS wird ins Seitentemplate integriert
Wenn Sie die mobilen Seiten danach nochmal starten, sollten Sie das neue Layout schon erkennen - achten Sie darauf, die Seite ggfs. mit [Shift] und Reload aufzufrischen, damit der Browser-Cache nicht dazwischenfunkt.

Abbildung 8: Das neue jQuery Mobile Layout ist aktiv

Wenn Sie anstelle des PL/SQL Embedded Gateway den Apache Webserver mit mod_plsql oder den APEX Listener verwenden, ist die Vorgehensweise ähnlich: die CSS-Datei muss hier in den richtigen Odner auf dem Server kopiert oder in die "i.war " auf dem Java-Container integriert werden.

Upload als Statische Datei in den APEX Workspace

Vielfach hat man als Entwickler jedoch keinen Zugriff auf den APEX-Webserver oder keine DBA-Privilegien bei Verwendung des PL/SQL Embedded Gateway. Aber auch in diesen Fällen lässt sich das neue Layout nutzen - es ist nur etwas Vorarbeit an der CSS-Datei nötig. Daher arbeiten Sie in diesem Fall auch am besten mit der nicht minimierten Datei.

Die generierte CSS-Datei enthält einige relative Referenzen zu Bilddateien - Abbildung 9 zeigt ein Beispiel.

Abbildung 9: Bildreferenzen in der generierten CSS-Datei

Wird das CSS nun bei den Gemeinsamen Komponenten als Workspace-Datei hochgeladen, so funktionieren diese Referenzen nicht mehr - sie müssen also vorher "absolut" gemacht werden - der Präfix "images/" muss durch /i/libraries/jquery-mobile/1.2.0/images/ ersetzt werden. Führen Sie dies mit einem Werkzeug Ihrer Wahl durch (mit "vi" lautet der Befehl :1,$s#images/#/i/libraries/jquery-mobile/1.2.0/images/#g).

Abbildung 10: Angepasste Bildreferenzen in der CSS-Datei

Laden Sie die Datei nun ganz normal als CSS-Datei in den Workspace hoch.

Abbildung 11: CSS-Datei in den Workspace hochladen ...

Navigieren Sie dann zum Seitentemplate Ihrer mobilen Anwendung - wenn Ihre Anwendung mehrere User Interfaces hat, suchen Sie die Templates des mobilen User Interface heraus. Passen Sie das Seitentemplate den Bereich des Seiten Headers, wie in Abbildung 12 dargestellt, an:

<!-- JQuery Mobile Theme hier -->
<link rel="stylesheet" type="text/css" href="#WORKSPACE_IMAGES#meinTheme.css"/>
<!-- ######################## -->

Abbildung 12: Das von ThemeRoller generierte CSS wird ins Seitentemplate integriert

Wenn Sie die mobilen Seiten danach nochmal starten, sollten Sie das neue Layout schon erkennen - achten Sie darauf, die Seite ggfs. mit [Shift] und Reload aufzufrischen, damit der Browser-Cache nicht dazwischenfunkt.

Abbildung 13: Das neue jQuery Mobile Layout ist aktiv

Auch für mobile Anwendungen können damit beliebige Layouts verwendet und die Anwendung so an die Styleguides des Unternehmen angepasst werden. Und mit dem jQuery Mobile ThemeRoller geht das sogar sehr schnell und einfach.

Zurück zur Community-Seite