Wie man APEX-Anwendungen für mobile Endgeräte erstellt, wurde bereits in zwei Community Tipps von Peter Raganitsch beschrieben. Bis einschließlich APEX 4.1 muss man hier aber recht viel selbst machen: So muss man jQuery Mobile herunterladen, einbinden und die "mobilen" Seitentemplates selbst gestalten.

Mit APEX 4.2 wird das alles viel einfacher, denn APEX 4.2 bringt die Unterstützung für "mobile APEX-Anwendungen" direkt mit. jQuery Mobile ist bereits eingebunden und es liegen fertige Templates für eine Anwendung vor. In diesem Tipp erfahren Sie, wie Sie eine APEX-Anwendung für mobile Endgeräte mit APEX 4.2 erstellen. Vorab schon soviel: jeder APEX-Entwickler kann das!

Erstellen Sie zum Ausprobieren eine einfache Anwendung mit einem Bericht, einem Formular und einem Diagramm auf Basis der wohlbekannten Tabelle EMP. Schon dabei werden Sie von APEX darauf hingewiesen, dass es nun mehr als Desktop-Anwendungen gibt (Abbildung 1).

Abbildung 1: Auswahl eines "User Interface" beim Erstellen einer Anwendung: "Desktop" oder "Mobile"?

Ab APEX 4.2 ist eine APEX-Anwendung mit einem oder mehreren User Interfaces ausgestattet. Jede Seite wird einem User Interface zugeordnet - daraus leitet sich das Theme und daraus wiederum das Seitentemplate ab. So wird es möglich, dass verschiedene Seiten einer Anwendung verschiedene Themes verwenden. Der praktische Nutzen ist, dass die Desktop- und die "mobile" Version einer Anwendung in ein und derselben APEX-Anwendung gehalten werden kann - es ist nicht zwingend nötig, separate Anwendungen zu erstellen. Erstellen Sie also eine Desktop-Anwendung mit einem Bericht, einem Formular und einem Diagramm, wie in den Abbildungen 2a bis 2c dargestellt.

Abbildung 2a, 2b, 2c: APEX-Anwendung für den Desktop

Nun geht es daran, den "mobilen" Part zu erstellen. Navigieren Sie dazu zu den Gemeinsamen Komponenten und dort rechts zur Anwendungsdefinition. Wählen Sie dann die Reiterkarte User Interfaces an (Abbildung 3).

Abbildung 3: User Interfaces einer APEX-Anwendung bearbeiten

Klicken Sie auf die Schaltfläche Add New User Interface, um der Anwendung eine weitere Benutzeroberfläche hinzuzufügen (Abbildung 4).

Abbildung 4: Neues User Interface hinzufügen

Wählen Sie im nächsten Dialog ein Theme aus und erstellen Sie das User Interface schließlich mit einem Klick auf die Schaltfläche Erstellen. Danach sehen die vorhandenen User Interfaces wie folgt aus.

Abbildung 5: Die Anwendung ist nun mit zwei Benutzeroberflächen ausgestattet

Allerdings nutzt das alleine noch nicht viel. Denn zu dem neuen User-Interface gibt es bislang noch keine Anwendungsseiten. Der nächste Schritt ist also, neue Anwendungsseiten für dieses User Interface zu erstellen - es ist nicht möglich, eine Anwendungsseite in mehreren User Interfaces zu nutzen. Fügen Sie der Anwendung also nun eine neue Seite hinzu (Abbildung 6).

Abbildung 6: Neue Seiten werden beim Erstellen einem User Interface zugewiesen

Bei Festlegung des Seitentyps wird gleichzeitig das User Interface, zu dem die Seite gehört, bestimmt. Je nach User Interface wechseln die verfügbaren Seitentypen - so macht eine "Map" für ein "mobiles" User Interface keinen Sinn, da die AnyChart Maps auf Flash basieren. Stellt man die Auswahlliste Show Unsupported unten auf Yes, so werden sie dennoch sichtbar. Wählen Sie das "mobile" User Interface aus, nehmen Sie als Seitentyp Report und klicken Sie auf Next.

Abbildung 7: Berichtstypen für ein "mobiles" User Interface

Bei der Auswahl des Berichtstyps bemerkt man den nächsten Effekt des ausgewählten User Interfaces: Sie bekommen den interaktiven Bericht nicht mehr, dafür aber den Berichtstyp List View angeboten. Der Grund ist auch hier, dass ein interaktiver Bericht auf einem mobilen Endgerät keinen Sinn macht. Wählen Sie List View aus und klicken Sie auf Next.

Im darauf folgenden Dialog legen Sie, wie immer, Seitenname, -nummer und die Regionsüberschrift fest. Danach hinterlegen Sie die Regionsquelle. Wie bei jedem Bericht ist es auch hier eine SQL-Abfrage (Abbildung 8).

Abbildung 8: SQL-Abfrage als Regionsquelle hinterlegen

Im danach folgenden Dialog können Sie die List View einrichten. In der Praxis sicherlich am häufigsten benötigt ist das Advanced Formatting, mit dem Sie mehr als nur eine Spalte in der List View anzeigen können. Hier können Sie HTML-Fragmente einsetzen, um die Darstellung der Informationen zu steuern. Achten Sie aber darauf, dass die Spaltennamen, zumindest im Early Adopter Release, mit der Substitition Syntax , also mit &SPALTENNAME. angegeben werden müssen. Auch ein Link Target können Sie jetzt schon setzen, denn auch auf dem mobilen Endgerät soll man den Datensatz bei Klick editieren können. Tragen Sie also unter Link Target einen Verweis auf die Seite 10 ein - in "klassischer APEX-Link-Manier". Nicht zuletzt macht sich gerade bei den Daten der Tabellen EMP und DEPT ein List Divider sehr gut: Klicken Sie Has List Divider an und wählen Sie DNAME als Divider Column aus.

f?p=&APP_ID.:10:&APP_SESSION.::&DEBUG.:RP,10:P10_EMPNO:&EMPNO.

Abbildung 9: Darstellung der List View konfigurieren

Klicken Sie dann auf Next und legen Sie die List View schließlich an. In einem normalen Browser (Firefox) sieht die Seite dann in etwa wie in Abbildung 10 aus.

Abbildung 10: Die neue mobile Ansicht: zunächst im Browser

Rufen Sie die Seite danach mal mit einem mobilen Gerät auf (Abbildung 11).

Abbildung 11: Die neue mobile Ansicht: nun mit einem mobilen Endgerät

Wenn Sie nun auf einen der Einträge klicken (oder tippen), dann wird das vorher hinterlegte Link Target angesprochen. Die darin festgelegte Seite 10 mit einem "mobilen" Formular exisiert aber noch nicht. Legen Sie also eine neue Seite 10 an, ordnen Sie sie dem User Interface jQuery mobile Smartphone zu und wählen Sie Form als Seitentyp aus. Erstellen Sie dann das Formular für eine Tabelle genauso, als ob Sie eine normale Anwendungsseite erstellen würden; der APEX-Assistent funktioniert genauso. Nehmen Sie als Primärschlüssel aber die EMPNO (und nicht die ROWID), da diese vom Link von der List View zum Formular bereits genutzt wird. Wenn Sie fertig sind, sieht das Formular auf einem mobilen Endgerät wie in Abbildung 12 aus.

Abbildung 12: Ein APEX-Formular auf einem mobilen Endgerät

Gerade bei Eingabefeldern hat ein mobiles User Interface noch eine Besonderheit. So können Sie bei einem Texteingabefeld noch den Typ angeben und zwischen Text, Email, Telefonnummer und URL wählen (Abbildung 13).

Abbildung 13: Besondere Eingabefelder für mobile Endgeräte

Auf dem mobilen Endgerät kann das dann so aussehen - Voraussetzung ist, dass das Gerät und sein Browser den HTML5-Standard unterstützen und entsprechend umsetzen.

Abbildung 14: Eingabefeld Telefonnummer auf einem mobilen Endgerät

Auswahllisten, Checkboxes oder Radiogroups werden analag zu herkömmlichen Anwendungen erstellt. APEX sorgt selbst für die richtige Darstellung auf dem mobilen Endgerät.

Abbildung 15: Auswahllisten, Checkboxes und Radiogroups auf mobilen Endgeräten

Als nächstes ist es an der Zeit, eine Navigationsseite einzurichten. Denn für Reiterkarten oder Breadcrumbs ist auf einem Smartphone normalerweise kein Platz. Erzeugen Sie also zunächst eine neue Liste mit Einträgen für die Seiten mit dem Bericht (der ListView) und dem Formular. Wenn Sie möchten, können Sie auch noch einen Eintrag für die Diagrammseite erstellen, die wir als nächstes bauen werden (Abbildung 16).

Abbildung 16: Erstellen einer Liste zur Navigation in der Anwendung

Allerdings soll das Formular geleert werden, wenn man über das Menü dorthin navigiert. Gehen Sie also zum Listeneintrag für die Seite mit dem Formular (hier ist das die Seite 10) und tragen Sie noch ein, dass der Cache für diese Seite gelöscht werden soll (Abbildung 17).

Abbildung 17: Beim Verzweigen auf die Seite 10 soll das Formular geleert werden

Danach erzeugen Sie eine neue, leere Seite für das "mobile" User Interface. Diese Seite erhält eine neue Region vom Typ Liste, der Sie die eben erzeugte Liste zuweisen. Im mobilen Gerät sieht das dann wie in Abbildung 18 aus.

Abbildung 18: Navigationsmenü für mobile Endgeräte

Als letztes fügen Sie Ihrer Anwendung ein Diagramm hinzu. Erzeugen Sie dazu "ganz normal" eine neue Seite und wählen Sie Diagramm als Typ aus. Ist die Seite einem "mobilen" User Interface zugeordnet, werden die Diagramme nicht als Flash-Diagramme, sondern mit HTML5-Technologie dargestellt. Daher stehen für mobile Anwendungen nicht alle in APEX bekannten Diagrammtypen zur Verfügung (Abbildung 19).

Abbildung 19: Diagrammtypen für "mobile" Anwendungen

Das Diagramm selbst wird "wie immer" erstellt. Wenn Sie fertig sind, sollte es auf dem mobilen Endgerät wie in Abbildung 20 aussehen.

Abbildung 20: 3D Pie Chart auf mobilen Endgeräten

Das Erstellen einer mobilen APEX-Anwendung funktioniert in APEX 4.2 tatsächlich genauso wie das Erstellen einer "klassischen" Anwendung. Im Gegensatz zur "manuellen" Methode muss man so gut wie keine Besonderheiten mehr beachten - man muss sich nicht mehr mit den Details von jQuery Mobile beschäftigen und auch keinen Aufwand für das Einbinden betreiben.

Natürlich ist die beschriebene Anwendung auf Basis der Tabelle EMP noch nicht "fertig". Es fehlen noch Header und Footer-Regionen, ein Logout-Button, eine automatische "Weiche", die je nach Browser auf die mobile Version oder die Desktopversion verzweigt und noch einiges mehr. Dazu wird ein weiterer Community Tipp erscheinen.

Zurück zur Community-Seite