Egal von welchem Hersteller, Smartphones und Tablet-PCs sind heute in aller Munde und auch in aller Hände. Nichts liegt da näher, als Oracle APEX Anwendungen auch für Smartphones zu optimieren.

Was bedeutet dies aber, worauf muss Rücksicht genommen werden?

Was ist der Unterschied zwischen APEX "normal" und APEX auf einem Smartphone (oder anderem mobilen Endgerät)?

Die gute Nachricht: moderne Smartphones haben sehr gute und leistungsfähige Browser, die zu einem großen Teil auch bereits HTML5 unterstützen.
Insofern sind auf einem Smartphone-Browser oft mehr Dinge möglich, als der durchschnittliche Desktop-Browser kann.

Auf einem Smartphone will man also einerseits auf den kleineren Bildschirm Rücksicht nehmen, andererseits will man die besonderen Fähigkeiten eines mobilen Endgeräts nutzen können. Das wären z.B. die Wisch-Gesten und andere Touch-Events.

Es gibt viele verschiedene Smartphones mit unterschiedlich stark ausgeprägten Fähigkeiten, dies es doch recht schwierig machen, sich auf ein bestimmtes Set an Funktionen zu einigen. Daher haben sich in den letzen Jahren einige "mobile Web Frameworks" gebildet, die versuchen, eine einheitliche Programmierschnittstelle anzubieten, und sich selbst um die Vielfalt der Endgeräte kümmern. Zum Beispiel jqTouch, Sencha Touch, jQuery mobile oder dhtmlx touch, um nur einige zu nennen.

Nach einigen Tests fiel die Entscheidung auf jQuery mobile, da dieses Framework am besten zum Aufbau und zur Funktionsweise von Oracle APEX passt und auch die größte Anzahl an Endgeräten unterstützt. Mit dem Einsatz von jQuery mobile greifen wir schon den kommenden Versionen von Oracle APEX vor, wo das Thema "mobile" von Haus aus unterstützt werden soll (eben auch mit jQuery mobile).

Für die Umsetzung unserer mobilen APEX Applikation hilft uns der Theme- und Template Mechanismus von APEX schon ein grosses Stück weiter, den Rest machen wir mit ein paar einfachen Plugins. Also alles mit Bordmitteln von APEX, es ist keine weitere "Zauberei" von Nöten.

Zum Einstieg erstmal ein paar Screenshots (Eine Online-Demo steht ebenfalls bereit).

Login und Hauptmenü einer APEX-Anwendung am iPhone

Report und Formular einer APEX-Anwendung am iPhone

Nun die Schritt-für-Schritt Anleitung, wie die oben gezeigte Applikation erstellt wurde. Ich gehe dabei davon aus, dass sie bereits Erfahrung mit der Entwicklung normaler APEX Anwendungen haben und zeige hier nur die Unterschiede zu mobilen Anwendungen.

1. Applikation erstellen
2. Neues Page Template anlegen
3. Neues Region Template anlegen
4. Neues List Template anlegen
5. Neues Report Template anlegen

Applikation erstellen

Zuerst legen wir eine neue Applikation mit einem beliebigen Theme an, jedoch ohne Tabs (Karteireiter). In unserer Applikation erstellen wir eine Startseite mit einer normalen Liste (Hauptmenü) und zwei weitere Seiten mit einem Report und einem Formular. Im obigen Beispiel habe ich für Report und Formular die Tabelle DEMO_CUSTOMERS verwendet, diese wird mit der APEX Sample Application mitinstalliert.

Abbildung 1: Die Seiten der erstellten Applikation

• Die Seite 10 (Customers) enthält einen klassischen Bericht mit folgender SQL-Abfrage.

  SELECT 
    'f?p='||:APP_ID||':11:'||:APP_SESSION||'::::P11_CUSTOMER_ID:'||CUSTOMER_ID AS LINK,
    cust_last_name || ', ' || cust_first_name                                  AS TITLE,
    CUST_STREET_ADDRESS1 || decode(CUST_STREET_ADDRESS2, null, null, ', ' || CUST_STREET_ADDRESS2) AS BOLD_TEXT,
    cust_city ||', '|| cust_state ||', '|| cust_postal_code                    AS PLAIN_TEXT
  from demo_customers
  ORDER BY CUST_LAST_NAME, CUST_FIRST_NAME
  

• Die Seite 11 (Customer) enthält ein normales APEX-Formular auf die Tabelle DEMO_CUSTOMERS . Arbeiten Sie den Formular-Assistenten "standardmäßig" durch.
• Die Seite 1 enthält eine Region vom Typ Liste. Erstellen Sie also zunächst in den Gemeinsamen Komponenten eine neue Liste ( Main Menu) mit einem Eintrag, der auf Seite 10 verzweigt. Danach erstellen Sie die Seite 1 mit einer Region vom Typ Liste, welche besagte Liste verwendet.

Die Applikation ist jetzt natürlich schon lauffähig, wird allerdings noch nicht speziell für mobile Endgeräte aufbereitet. D.h. momentan ist es eine ganz gewöhnliche APEX Anwendung.

Zurück zum Anfang des Artikels

Page Template erstellen

Der richtige Rahmen für unsere mobile Anwendung wird mit dem Page Template erzeugt. Darin legen wir nicht nur fest, dass wir jQuery mobile verwenden, sondern definieren auch die passende HTML5-Struktur, wie in der jQuery mobile Dokumentation beschrieben. Dazu kopieren wir eins der bestehenden Page Templates und tauschen folgende Bereiche aus:

<!DOCTYPE html>
<html lang="&BROWSER_LANGUAGE." xmlns="http://www.w3.org/1999/xhtml"
                                xmlns:htmldb="http://htmldb.oracle.com" xmlns:apex="http://apex.oracle.com">
<head>
  <title>#TITLE#</title>
  <link rel="icon" href="#IMAGE_PREFIX#favicon.ico" type="image/x-icon">
  <link rel="shortcut icon" href="#IMAGE_PREFIX#favicon.ico" type="image/x-icon">
  #HEAD#
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body #ONLOAD#>
  <div  data-role="page">
    #FORM_OPEN#

Page Template Header

      <div data-role="header" data-backbtn="false">
        <h1>#TITLE#</h1>
        #NAVIGATION_BAR#
      </div><!-- /header -->
      <div id="messages">#SUCCESS_MESSAGE##NOTIFICATION_MESSAGE##GLOBAL_NOTIFICATION#</div>
      <div data-role="content">
        <ul data-role="listview">
          #REGION_POSITION_01#
          #REGION_POSITION_02#
          #REGION_POSITION_03#
          #REGION_POSITION_04#
          #REGION_POSITION_05#
          #REGION_POSITION_06#
          #REGION_POSITION_07#
        </ul>
        #BOX_BODY#
      </div><!-- /content -->

Page Template Body

      <div data-role="footer">
        <h4>#REGION_POSITION_08#</h4>
      </div><!-- /footer -->

    #FORM_CLOSE#
  </div>
</body>
</html>

Page Template Footer

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

Page Template Navigation Bar Entry

Das fertige Seiten-Template nun abspeichern und als neues Default Template in der Theme-Definition eintragen.
Wenn wir die Anwendung nun laufen lassen, sehen wir bereits ein teilweise angepasstes Layout.

Abbildung 2: Anwendungslayout nach Austausch den Seitentemplates

Zurück zum Anfang des Artikels

Region Template erstellen

Nach dem Seiten-Template erstellen wir nun auch ein neues leeres Region Template und setzen die folgende Definition ein:

<div id="#REGION_STATIC_ID#" #REGION_ATTRIBUTES#>
  <h2>#TITLE#</h2>
  <div data-role="controlgroup" data-type="horizontal">#CLOSE##PREVIOUS##NEXT##DELETE##EDIT##CHANGE##CREATE#
                                                       #CREATE2##EXPAND##COPY##HELP#</div>
  <div>
    #BODY#
  </div>
</div>

Region Template Definition

Das neue Region Template in der Theme-Definition wieder als Default eintragen und die bestehenden Regionen auf das neue Template umstellen. Damit ist nun das Aussehen des Regionstitel und der Regionsschaltflächen auf das mobile Layout umgestellt.

Zurück zum Anfang des Artikels

List Template erstellen

Auf unserer Startseite wollen wir das Hauptmenü als Liste darstellen. Damit das auf mobilen Endgeräten richtig aussieht benötigen wir hier auch ein eigenes Listen Template. Erstellen Sie also ein neues mit folgender Definition und stellen Sie danach die Listenregion auf Seite 1 auf das neue Template um.

<ul data-role="listview" data-inset="true">

List Template Before Rows

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

List Template Current

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

List Template Noncurrent

</ul>

List Template After Rows

Mit dem neuen Template sieht das Hauptmenü schon viel hübscher aus.

Zurück zum Anfang des Artikels

Report Template erstellen

Auf so einem mobilen Endgerät kann unterschiedlich viel oder wenig Platz sein, darauf muss man vor allem bei der Berichtsdarstellung achten. Wir wählen anstelle eines klassischen Report-Layouts mit Spalten und Zeilen eine detaillierte Listenansicht und achten darauf, dass die Haupt-Informationen immer dargestellt werden und die weniger wichtigen Informationen bei Platzmangel begrenzt dargestellt werden können.

Dazu erstellen wir nun ein Benannte-Spalten-Template (Report Row Template) mit vorgegebenen Spalten.

<li>
  <a href="#LINK#" rel="external">
    <h3>#TITLE#</h3>
    <p><strong>#BOLD_TEXT#</strong></p>
    <p>#PLAIN_TEXT#</p>
  </a>
</li>

Report Template Row Template 1

<ul data-role="listview">

Report Template Before Rows

</ul>

Report Template After Rows

Dieses Report Template geht nun davon aus, dass die Berichtsabfrage die Spalten LINK, TITLE, BOLD_TEXT und PLAIN_TEXT geliefert werden. Welche Inhalte hinter diesen Spalten stecken, liegt ganz bei Ihnen. Sie können dieses Template also durchaus auch für andere Reports verwenden. Die Berichtsseite sieht anschließend schon so aus, wie man es von einem mobilen Endgerät her kennt. Die Schaltflächen und Felder zur Suche im Bericht entfernen Sie am besten. Man erkennt schon, "wo es hingeht" ...

Abbildung 3: Berichtslayout nach Austausch der Regions- und Berichtstemplates

Zurück zum Anfang des Artikels

Mit diesen ersten, einfachen Mitteln haben Sie schon die Grundlagen für erfolgreiche mobile Applikationen mit Oracle APEX in der Hand. Natürlich gibt es ab hier noch viele Dinge zu beachten und zu verbessern, dazu gerne mehr in einer weiteren Folge. Was erreichbar ist, zeigt diese Demo-Anwendung - das macht doch schonmal Lust auf den nächsten Tipp - in der Zwischenzeit können Sie sich schon mit Ihrer ersten mobilen Applikation vertraut machen.

Zurück zur Community-Seite