In der ersten Folge haben wir uns um das grundsätzliche Layout einer mobilen Applikation gekümmert. Mit dieser Ausgabe wollen wir uns um ein paar Feinheiten von mobilen Applikationen kümmern, wie z.B. die Navigation oder die Darstellung unterschiedlicher on-screen Keyboards bei Eingabefeldern.

Lassen sie uns zu Beginn erst mal den Seitenaufbau unserer mobilen Applikation betrachten:

Kopf- und Fußzeile einer APEX-Anwendung am iPhone

Fußzeile im Querformat

Seitenaufbau

Im linken oberen Bild sehen sie gut die Adresszeile des Browsers. Diese verschwindet automatisch aus dem Blickfeld, sobald die angezeigte Seite hoch genug ist, um den gesamten Bildschirm zu füllen. Der erste "Sichtbare Bereich" ist die Kopfzeile ihrer mobilen Applikation. In dem Page Template, das wir im ersten Artikel zu mobilen Anwendungen erstellt haben, wurde der Platzhalter #NAVIGATION_BAR# sowie der Seitentitel in die Kopfzeile gelegt. Um neben dem Logout-Button noch eine andere Schaltfläche in der Kopfzeile anzuzeigen, muss diese einfach in der Navigation Bar (Shared Components -> Navigation Bar) eingetragen werden. Diese Technik werden wir uns weiter unten für den Back-Button zu Nutze machen.

Nach der Kopfzeile folgt der normale Seitenbereich, der durch die auf der Seite definierten APEX Regionen bestimmt wird. In unserem Template liegen alle Platzhalter (außer Region Position 8) im Hauptbereich der Seite.

Am Ende der Seite folgt die Fußzeile, die durch das Page-Template mit dem Platzhalter #REGION_POSITION8# befüllt werden kann. Wie im Beispiel oben ersichtlich, kann in der Fußzeile beliebiger Inhalt platziert werden; also normaler Text, Links oder Buttons können sich den (begrenzten) Platz teilen. jQuery Mobile kümmert sich automatisch um die entsprechende Darstellung. Das einzige Manko hier ist, dass jQuery Mobile den verfügbaren Platz für die Fußzeile recht eng bemisst und viel Leerplatz links und rechts fordert. Deswegen ist in dem Beispiel oben am "Hochkant-Screenshot" der Button abgeschnitten.

Seitennavigation

Platzsparen ist bei Smartphones die oberste Devise, deswegen verzichten wir in mobilen APEX Anwendungen auf Breadcrumbs. Damit der Benutzer aber jederzeit auf die vorherige Seite zurückwechseln kann legen wir einen "Back"-Button in die Kopfzeile - das ist ein gewohntes Konzept, das jeder Smartphone-Benutzer auch aus anderen Smartphone-Anwendungen kennt.

Dazu erstellen wir einen neuen Eintrag im Navigation Bar:

Abbildung 1: Navigation Bar Einträge

Der Back-Button verzweigt nicht auf eine bestimmte Seite, sondern dynamisch auf die Seite, die im Application Item G_PREV_PAGE_ID gespeichert ist. Auf Seiten, wo wir keinen Back-Button wünschen, blenden wir ihn über Conditions einfach aus. Dies sind typischerweise die Login-Seite und die Startseite. Im Bild können sie auch sehen, dass für die beiden Einträge auch ein spezieller Inhalt für das HTML-Attribut alt vergeben wurde: Dies beeinflusst die Darstellung des Buttons in der Kopfzeile.

Damit der Button in der Kopfzeile richtig dargestellt wird, müssen wir im Page-Template noch folgende Erweiterung einbauen.

<a href="#LINK#" rel="external" #ALT#>#TEXT#</a>

Page Template Navigation Bar Entry

Jetzt nur nicht vergessen das Application Item G_PREV_PAGE_ID zu definieren und auf jeder Seite mit einer Computation (Static Assignment) zu befüllen. Dabei legen Sie zu jeder einzelnen Seite fest, welches die "vorherige Seite" sein soll. Dadurch lässt sich eine beliebige Verschachtelungstiefe der Seiten erzielen. Jede Seite gibt dabei an, welches die darüberliegende (vorherige) Seite ist.

Formularfelder optimieren

Formularfelder auf mobilen Browsern unterscheiden sich nicht von Formularfeldern im Desktop-Browser, jedoch wird durch die beschränkten Eingabemöglichkeiten ein anderes Problem aktuell: Auf Smartphones ohne eigene Tastatur wird zur Eingabe der Daten eine virtuelle Tastatur am Bildschirm eingeblendet. Die meisten dieser Browser unterstützen bereits HTML5 und können je nach Formularfeld-Typ eine andere Tastatur einblenden, damit die Eingabe so leicht wie möglich funktioniert.

Unterschiedliche Tastatur für Email und Zahlen am iPhone

Tastatur für Eingabe von Telefonnummer oder normalen Texten

Damit wir in unserer Oracle APEX Anwendung HTML5-taugliche Formularfelder anzeigen können müssen wir auf die Hilfe eines Plugins zurückgreifen, da HTML5 in APEX derzeit noch nicht von Haus aus unterstützt wird. Das Plugin können sie von www.apex-plugin.com kostenlos herunterladen. Nach dem Herunterladen importieren Sie es in den Shared Components und Plugins, danach können sie die Formularfelder umstellen um das Plugin zu verwenden.

Plugin Auswahl und Einstellungen

Labels für Formularelemente

Auf den obigen Screenshots ist gut ersichtlich, dass der Platz durch die Feldbeschriftung (Labels) eingeschränkt wird. jQuery Mobile versucht in Formularen, die Feldbeschriftung selbst anzuordnen, aufgrund der von APEX vorgegebenen Struktur (Beschriftung und Feld sind in einer HTML-Tabelle festgezurrt) ist dies derzeit aber nicht möglich. Mit APEX Version 4.1 wird Abhilfe geschaffen, dort wird es möglich sein, Formulare komplett ohne HTML-Tabellen zu erstellen. Damit wird man die Feldbeschriftung selbst und dynamisch anordnen können - und auch für mobile Anwendungen werden dann wesentlich individuellere Layouts möglich sein.

Bis die Version 4.1 freigegeben wird, können sich sich aber auch über eine fixe Labelpositionierung weiterhelfen. Dazu in den Item-Eigenschaften die Anzeige der Beschriftung auf darüber (above) stellen und das Label-Template auf Kein Template (none) stellen.

Beschriftung über dem Formularfeld

Mit diesen weiteren Tipps ist es ein Einfaches, benutzerfreundliche mobile Applikationen mit Oracle APEX zu erstellen.

Zurück zur Community-Seite