Wie hausgemacht

Inhaltsverzeichnis

Oracles Application Express (APEX) ist seit Jahren als Rapid Application Development (RAD) Tool zum Erstellen datenbankenbasierter Webanwendungen bekannt. Sein Fokus liegt auf der Ein- und Ausgabe von Daten sowie einfachem Reporting, etwa Listenauswertungen, Charts et cetera. Zum einen beinhaltet es ein deklaratives Baukastensystem mit einer Menge vorgefertigter Komponenten, zum anderen kann man Plug-ins einbinden oder selbst erstellen. Ein Markt von Plug-in-Anbietern hat sich bereits etabliert.

Mit der im Oktober 2012 erschienenen Version 4.2 kamen Funktionen für das Entwickeln mobiler Anwendungen hinzu. Denn auch bei Business-Anwendungen werden die Rufe nach mobilen Applikationen und dem Zugang zu wichtigen Geschäfts- und Kundendaten von unterwegs lauter. Aber nicht jeder Mitarbeiter verwendet das gleiche Smartphone; oft sind in Firmenlandschaften alle Hersteller und Preisklassen der Telefone vertreten. Eins aber haben sie alle gemeinsam: So ziemliche jedes aktuell verkaufte Smartphone verfügt über einen Internetzugang und einen Browser.

Das passt gut zu APEX, denn mit dieser Umgebung erzeugt man HTML-Seiten direkt aus der Oracle-Datenbank. Für das Erstellen von Smartphone-Oberflächen ist jQuery Mobile in APEX 4.2 integriert, und Entwickler erhalten Unterstützung durch zahlreiche Wizards.

Die Programmiersprache innerhalb von APEX ist SQL und PL/SQL, mit der sich ein Datenbankprogrammierer schnell einarbeiten kann. Da APEX in einer Oracle-Datenbank installiert ist, sollte sie als Hauptquelle der Anwendungsdaten fungieren. Über verschiedene Kanäle wie Database-Links, Webservices und externe Tabellen kann man auch andere Quellen anbinden.

Zurzeit liegt APEX in Version 4.2.2 vor. Für Version 5.0 nennen die Entwickler weitere mobile Features sowie neue Komponenten für den Desktop-Browser-Betrieb. Auf der öffentlichen Demo-Plattform kann man sich kostenfrei einen Workspace besorgen und testen, ohne eine lokale Installation vornehmen zu müssen.

Wie von APEX gewohnt, erstellt man mobile Anwendungen im sogenannten Application Builder. Dort ruft man mit dem Button Create den Anwendungs-Wizard auf. Wichtigste Einstellung darin ist das „User Interface“. Der Wert jQuery Mobile Smartphone optimiert die Anwendung für den mobilen Gebrauch (siehe Abbildung 1).

Vorgefertigte Ansichten

Auf den weiteren Seiten folgen allgemeine Einstellungen wie die zu Datumsformaten und Benutzer-Authentifizierung, die hier keine Rolle spielen. Ein Klick auf Create Application überspringt sie. Die Anwendung ist nun erstellt und lässt sich bereits (idealerweise auf einem Smartphone bzw. -simulator) ausführen. Man kann sich bei ihr anmelden und landet danach auf einer noch leeren Navigationsseite, die bereits eine Kopfleiste mit einem Home- und Logout-Button zeigt. Daraus entsteht später das Startmenü.

Zurück im Application Builder startet Create Page den Wizard zum Erstellen einer neuen Seite. Darin wählt man Form und danach Form on a Table with List View und vergibt den Seitennamen „Kunden“. Als Tabelle kommt DEMO_CUSTOMERS mit CUST_LAST_NAME als Anzeigespalte zum Einsatz. Alle anderen gewünschten Spalten wählt man durch Verschieben in die rechte Box. Für die restlichen Formularfelder akzeptiert man die Vorschlagswerte und schließt den Wizard mit Create ab.

Auf der so erstellten Seite 2 der Anwendung ist bereits ein funktionierender und durchsuchbarer Listview zu sehen (siehe Abbildung 2).

Das Prinzip ist klar und von anderen Smartphone-Anwendungen her bekannt: Man blättert sich durch Listen; das Aktivieren eines Elements führt zur nächsten Ebene. Im vorliegenden Fall ist dies ein Formular zum Bearbeiten der Kundendaten.

Aber zurück zur Liste und ihren Einstellungsmöglichkeiten: Im Application Builder öffnet man die Seite im Bearbeitungsmodus und wählt dort die Region „Kunden“. Am ersten Tab zeigt sich das vom Wizard erstellte SELECT-Statement, das man nun nach Belieben ändern und erweitern kann. Fürs Erste seien eine Sortierung und eine neue Spalte für den Anfangsbuchstaben des Nachnamens hinzugefügt. Das gesamte Statement sieht dann wie folgt aus:

select a.ROWID as "PK_ROWID",a.*,
       SUBSTR(a.CUST_LAST_NAME,1,1)
         as CUST_INITIAL
    from "#OWNER#"."DEMO_CUSTOMERS" a
    order by a.CUST_LAST_NAME

Apply Changes speichert die Änderung und öffnet die Region nochmals zur Bearbeitung, so man die Checkbox „Return to Page“ vor dem Speichern aktiviert hat. Ein Wechsel zum Tab Region Attributes enthüllt diverse Einstellungsmöglichkeiten, die sich auf die Darstellung der Liste auswirken.

Für einen ersten Test setzt man ein Häkchen bei Show List Divider und wählt die neue Spalte CUST_INITIAL als List Divider Column. Nach dem Speichern und Ausführen der Seite zeigt sich das Resultat: eine sortierte Liste mit alphabetischen Trennzeilen zwischen den jeweiligen Anfangsbuchstaben der Nachnamen (siehe Abbildung 3).

Der Listview bietet weitere deklarative Einstellungsmöglichkeiten. Wenn sie zur visuellen Gestaltung der Liste nicht ausreichen, kann man die Option Advanced Formatting aktivieren und ein HTML-Gerüst für eine Listenzeile definieren. Damit unterstützt APEX alle Listview-Optionen, die jQuery Mobile anbietet. Details der Gestaltungsmöglichkeiten enthält dessen Referenzdokumentation.

Erweiterte Formatierungen

Das Handling von Formularen ist in der mobilen Variante einfacher, als man das von APEX für den Desktop gewohnt ist, denn jQuery Mobile übernimmt die optimale Positionierung und Darstellung der Beschriftungen. Bietet der Bildschirm ausreichend Platz, steht das Label vor dem Feld, sonst springt es darüber. Das ist zumeist bei Smartphones im Hochkant-Modus zu sehen.

Eine wichtige Forderung bei mobilen Anwendungen ist die möglichst einfache Eingabe von Daten. Da die meisten Smartphones keine physische Tastatur mehr haben, kommt stattdessen eine virtuelle zum Einsatz. Allerdings kennen sie nicht nur ein Keyboard, sondern eine ganze Reihe spezieller Tastatur-Layouts, je nachdem, ob man Text, Zahlen, Telefonnummern, Mailadressen, URLs und so weiter eingeben will.

Damit das Smartphone die richtige Tastatur wählt, muss man bei jedem Feld bestimmen, welche Art von Daten es akzeptieren soll. Dies geschieht über die APEX-Einstellung des Subtype für das Formularfeld. Wie genau die Tastatur aussieht, hängt vom jeweiligen Endgerät und dem Betriebssystem ab. Durch die Einstellung des Feldtyps hat der mobile Browser jedenfalls die nötige Information und entscheidet selbst, was er damit macht.

Für Charts setzt APEX – wie bisher – auf die Anychart Library, diesmal in Version 6. Sie ergänzt die bisherigen Flash- um HTML5-Diagramme. Zwischen den beiden Formaten wählt man beim Erstellen des Chart, wobei APEX Flash als Präferenz interpretiert: Ist auf dem Client kein passender Player installiert, kommt HTML5 zum Einsatz. Als HTML5-Variante sind schon einige, aber leider noch nicht alle Chart-Typen implementiert, dies will Oracle mit APEX-Patchsets und der nächsten Version nachbessern.

Aus dem Application Builder erstellt man eine neue Seite vom Typ Chart mit dem Create Page Wizard, wählt eine 2D-Torte und gibt folgende Abfrage an:

SELECT NULL AS LINK
  , C.CUST_LAST_NAME   AS LABEL
  , SUM(O.ORDER_TOTAL) AS VALUE
  FROM DEMO_CUSTOMERS C, DEMO_ORDERS O
  WHERE O.CUSTOMER_ID = C.CUSTOMER_ID
  GROUP BY C.CUST_LAST_NAME 

Bei allen anderen Settings nimmt man die Default-Werte und bestätigt durch Create. Das erste Resultat dieses Chart auf einem Smartphone sieht noch etwas klein aus, ist aber durch Einstellungen der Chart-Region einfach anpassbar (siehe Abbildung 4).

Bisher fehlt das Startmenü auf Seite 1, die immer noch leer ist. Sie soll die Navigation für die bisher erstellten Seiten enthalten. Dazu wechselt man im Application Builder auf Seite 1 und von dort über das kleine Zahnrad-Symbol rechts oben auf die Shared Components. Im Bereich Navigation wählt man Lists und erstellt eine namens „Navigation“ mit Create. Sie soll statisch sein und zwei Einträge enthalten: „Listview“ mit der Target-Page 2 und „Chart“ mit der Target-Page 4. Auf der nächsten Wizard-Seite wählt man die Option Create list region on current page. „Page Template Body (3)“ legt die Region auf die Standardposition fest. Die Auswahl des Templates „List View“ bestimmt, dass die Liste als JQM Listview angezeigt wird. Bei erneutem Ausführen der Anwendung erscheint nun auf der ersten Seite ein Menü (siehe Abbildung 5).

Kommt eine neue Seite zur Anwendung hinzu, braucht man dafür nur noch einen neuen Listeneintrag hinzuzufügen, damit das Menü aktuell bleibt.

Auch für Kalender stellt Oracle eine mobile Version bereit. Sie beziehen ihre Daten aus einer Tabelle oder einem View und zeigen eine Monatsübersicht an. Tage mit Terminen oder Ereignissen sind mit einem blauen Punkt markiert. Ein Klick darauf zeigt die Details oder führt auf eine Seite zur Bearbeitung – je nach Kalendereinstellung.

Erweiterungen

Damit ist der Funktionsumfang der mobilen Unterstützung in APEX längst nicht ausgereizt; die bisher erwähnten Möglichkeiten entsprechen lediglich dem Lieferumfang. Wer keine Angst vor HTML hat, kann durch Bearbeiten von Templates noch mehr aus jQuery Mobile herausholen und die Anwendung visuell aufpeppen. Ein praktisches Werkzeug zum Anpassen der verwendeten Farben ist der Theme-Roller. Darin klickt man sich die Farben für die einzelnen Elemente wie Texte, Buttons, Hintergründe, Kopf- und Fußleisten zusammen und bekommt am Schluss eine CSS-Datei zum Download. Die installiert man auf dem APEX-Webserver und bindet sie in die Anwendung ein.

Eine weitere wichtige Möglichkeit, den Funktionsumfang von APEX – mobile wie Desktop – zu erweitern, sind Plug-ins. Auf den Plattformen im Internet gibt es sie teilweise kostenfrei. Ist ein Plug-in einmal in die Anwendung importiert, kann man es wie jede andere Komponente mit Wizards erstellen und anpassen. So finden sich alle Arten von Maps – etwa Google Maps, Oracle eLocation service oder OpenStreetMap – und Charts sowie mobile Date-Picker und andere Kostbarkeiten.

Peter Raganitsch

entwickelt seit 2008 Webanwendungen auf Basis von APEX.

Alle Links: www.ix.de/ix1310146

(ck)