Christian Pfeil - New Media Blog

Inhalt

Adobe AIR

 Adobe AIR - RIAs für den Desktop entwickeln: Know-how für HTML/Ajax- und Flash/Flex-Entwickler

Suche

Persönlich

Meine Tweets

Archiv

Links

Social Web

RSS-Feeds

RSS-Feeds

© 2005-2013 by Christian Pfeil.

Mobile Applikationen mit Oracle Apex und jQuery Mobile erstellen

Mobile Applikationen mit Oracle Apex und jQuery Mobile erstellen

Mit Oracle Apex, jQuery Mobile und der Highcharts HTML 5 Chart Bibliothek lassen sich visuell ansprechende und performante mobile Anwedungen für iPad (iOS), Android, Windows Phone und Co. erstellen.

Für die Erstellung der mobilen Beispiel-Applikation sind/waren folgende Schritte notwendig:

  1. Integration des jQuery Mobile Frameworks in Oracle Apex
  2. Erstellung von Templates für mobile Endgeräte mit Codiqa
  3. Einbindung der Highcharts Chart Bibliothek in Oracle Apex

 

1. jQuery Mobile in Oracle Apex

Zunächst muss das jQuery Mobile Framework in Apex integriert werden. Dies geschieht sehr einfach über das Einbinden von zwei JavaScript Dateien und einer CSS Datei im Header des Standard Templates eines Apex Projektes. Der Einfachheit halber nutze ich die auf jQuery.com gehosteten Dateien. Wie das Einbinden funktioniert, kann hier nachgelesen werden.

2. Erstellung von mobilen Templates mit Oracle Apex

Mit Hilfe des Tools Codiga erstellt man in Kürze anspruchsvolle mobile Templates. Über das Tool lässt sich ein jQuery Mobile HTML Template exportieren, welches folgende Plattformen unterstützt: iOs, Android, Black Berry, bada, Windows Phone, palm webOS, symbian, MeeGo, Kindle fire sowie viele weitere Plattformen.

Codiqa

 Abb.: Mit Codiqa lassen sich Touch Oberflächen für mobile Engeräte innerhalb kürzester Zeit erstellen.

Die erstellten Templates können anschließend in Oracle Apex, als Report, Page oder Region Template hinterlegt und genutzt werden. Aus einer klassischen Liste in Oracle Apex wird im Handumdrehen eine visuell ansprechende Oberfläche die mit der Fingerspitze bedient werden kann.

 3. Einbindung der Highcharts Chart Bibliothek in Oracle Apex

Die Bibliothek von Highcharts ist ein auf JavaScript und HTML basierendes Framework das viele unterschiedliche Chart Typen (z.B. Donut, Scatter plot, Bar, Pie etc.) im Browser darstellen kann. Ein Blick in die Chart-Galerie lohnt sich.

Mobile Applikationen mit Oracle Apex und jQuery Mobile erstellen

Abb: Über ein Touch Event auf einen Listeneintrag werden die jeweiligen Charts mittels Ajax vom Server nachgeladen und in der Applikation angezeigt.

Der JavaScript Code, zur Anzeige eines einzelnen Charts, wird auf dem Server mittels PL/SQL generiert und per Ajax im Frontend zur Anzeige bereitgestellt. Die Applikation bleibt somit im Client sehr performant.

Die finale Apex Applikation auf dem iPad:

Mobile Applikationen mit Oracle Apex und jQuery Mobile erstellen

 Abb.: So sieht die fertige Applikation in Oracle Apex auf dem iPad aus.

Die Seitenübergänge der einzelen Oracle Apex Seiten werden mittels Transitions aus jQuery Mobile animiert überblendet und zuvor durch Ajax vorgeladen. Die jQuery Mobile Navigation im Header spiegelt die Tabs der Apex Anwendung wieder.

 Testlink zur mobilen Applikation: http://apex.oracle.com/pls/apex/f?p=33727