Follow Us on Twitter

Mobiele applicaties met Oracle Apex en jQuery Mobile

Gepubliceerd in

Het is nog even wachten op APEX 4.2, dat volgens Oracle’s statement of direction ondersteuning voor mobiele applicaties bevat. De reden waarom dit nog niet in versie 4.1 verpakt zat is jQuery Mobile, dat zich tijdens de APEX 4.1 release nog in Betafase bevond. jQuery Mobile is een licht javascript-framework dat user interface-elementen en functies bevat voor de bouw van mobiele webapplicaties. En dat op een uniforme manier, zonder dat je al te veel rekening hoeft te houden met alle verschillende mobiele browsers.

Nu jQuery Mobile vrij recent eindelijk de 1.0-versie heeft gekregen is het dus wachten op de volgende release van APEX. Of toch niet? Dit Whitebook geeft inzicht in hoe nu al snel een mobiele applicatie te ontwikkelen met versie 4.1 van Apex.

Van desktop naar mobiel

Het gebruik van mobiele webapplicaties neemt de laatste tijd snel toe, mede gedreven door de toenemende technologische mogelijkheden van mobiele apparatuur. Camera’s, touchscreens en volwaardige webbrowsers op een telefoon zo groot als pakje speelkaarten zijn geen uitzondering meer. Met steeds meer ondersteuning van HTML5 door de mobiele webbrowsers hopen we snel op een eenduidige manier webapplicaties te kunnen ontwikkelen voor elk denkbaar mobiel platform.

HTML5Helaas herhaalt de geschiedenis zich weer. Waar we voor desktop webapplicaties vaak de gekste trucs moesten uithalen om de applicatie correct weer te geven op alle mogelijke platformen, lijken we deze strijd nu weer te moeten voeren. Pijnpunten zijn de onafgewerkte HTML5-standaard en daaraan gekoppeld de voortgang van de implementatie ervan in de verschillende renderers. Deze worden gebruikt in browsers zoals Webkit (Safari, Chrome, Android), Gecko (Mozilla produkten zoals Firefox) en  Trident (Internet Explorer, Windows Phone).
En zelfs wanneer een fabrikant zijn browser baseert op dezelfde renderer kunnen er verschillen zijn zoals nu ook weer pijnlijk duidelijk wordt. Waar bijvoorbeeld sommige visuele effecten op Apple’s IOS5 met hardware support getoond kunnen, zal dit niet zomaar werken op andere platformen.

Hetzelfde geldt voor het uitvragen en aansturen van hardware zoals de gyroscoop, acceleratiemeters en camera’s. Op dit moment is dat voor een pure webapplicatie nog niet mogelijk zonder deze te verpakken in een platformafhankelijke  App. Dit kan met behulp van tools als PhoneGap, dat een aantal javascript API’s beschikbaar stelt die gebruikt kunnen worden vanuit de webpagina, zoals het uitvragen van de huidige lokatie.

jQuery Mobile

Als oplossing voor de verschillen tussen de mobiele browsers is er jQuery Mobile. Dit framework is afhankelijk van jQuery, dat sinds release 4.0 van Apex standaard beschikbaar is. Het is dus een logische keuze om jQuery Mobile te integreren met Apex, hoewel niets je tegenhoudt om andere frameworks als SenchaTouch of JQTouch te gebruiken.

jQuery mobile stelt een aantal componenten en functies ter beschikking, die geoptimaliseerd zijn voor mobiel gebruik.
De werking is vrij simpel. Door HTML-elementen te voorzien van speciale attributen zorgt het framework ervoor dat deze omgetoverd worden in een toegankelijke, touch-enabled mobiele versies.

Praktijk: de integratie met APEX

In de basis is jQuery mobile erg geschikt voor integratie met Apex. Met behulp van de user-interface templates kunnen we de benodigde markup genereren, waarna het jQuery Mobile framework omzet naar de juiste layout en componenten.
Allereerst moeten we in APEX support voor mobiele applicaties inschakelen. Deze feature, die gepland staat voor APEX 4.2, kunnen we gelukkig nu al gebruiken door het volgende uit te voeren in SQL*PLUS als user SYS:

exec apex_040100.wwv_flow_platform.set_preference('MOBILE_DEVELOPMENT_ENABLED','Y') ;

Het resultaat van deze handeling is dat op een aantal plaatsen in de APEX Builder gewisseld kan worden tussen mobiel en desktop. Met name in de page templates is dit van belang. Als een page template voor mobiel gebouwd wordt, zorgt dit er voor dat formulierelementen niet meer omsloten worden door HTML tabellen om de layout goed te krijgen. We kunnen dus nu schone HTML output genereren, waarbij we  meer  controle hebben over de layout.

Mobiel page template
Fig. 1 Page mode voor mobiele templates

Een tweede effect is dat links van de APEX toolbar die onder in beeld verschijnt wanneer de applicatie opgestart wordt vanuit de APEX Builder een extra attribuut meekrijgen:

rel=”external”

Dit is van belang omdat jQuery Mobile de URL’s van links volgt en de inhoud ervan via AJAX-calls ophaalt en toont in het huidige browserwindow, voorafgegaan door een nette laadindicator. Het toevoegen van dit attribuut zorgt voor een directe link naar de URL.

Volgens Marc Sewtz, de development manager van APEX, zal een mobiel template er straks ook voor gaan zorgen dat de javascripts voor het jQuery Mobile framework automatisch  meegenomen worden en scripts en stylesheets voor desktop applicaties worden weggelaten.
We moeten dit nu zelf doen door jQuery Mobile te downloaden en bijvoorbeeld te plaatsen in de standaardlocatie voor statische content van Apex (bijvoorbeeld virtuele directory /i/).

Vervolgens maken we een nieuw mobiel template aan waarin een referentie naar het framework komt en we de basis layout beschrijven. De definitie is als volgt:

Header:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
     #HEAD#
<title>#TITLE#</title>
<link rel="stylesheet" href="#IMAGE_PREFIX#/jqmobile/jquery.mobile-1.0.min.css" />
<script src="#IMAGE_PREFIX#/jqmobile/jquery.mobile-1.0.min.js"></script>
</head>
<body #ONLOAD#>
#FORM_OPEN#

Body:

<div data-role="page" id="#TITLE#">
  <div data-role="header" data-theme="b" data-position="fixed">
    #REGION_POSITION_01#
  </div>
  <div data-role="content">
    #BOX_BODY#
  </div>
  <div data-role="footer" data-theme="c" data-position="fixed">
    #REGION_POSITION_08#
  </div>
</div>

Footer:

  #FORM_CLOSE#
  </body>
</html>

Als we bovenstaande opbouw ontleden zien we dat gebruik gemaakt wordt van DIV-tags met daarin “data-role” attributen. Deze beschrijven een functioneel doel binnen de uiteindelijke webpagina. Zo herkennen we data-role=”page” dat een enkele mobiele pagina beschrijft. Het mooie is dat er hiervan meerdere kunnen bestaan in de markup. Dit heeft als doel dat tussen deze pagina’s genavigeerd kan worden zonder dat de browser nog een pageload  of AJAX-call hoeft te doen, wat de snelheidsbeleving uiteraard ten goede komt. Bovenstaande zou dus nog compacter gemaakt kunnen worden als gebruik wordt gemaakt van geneste regions in APEX. Je zou dan meerdere “page” regions met bijbehorende content in een enkele APEX-pagina kunnen plaatsen.

De header en footer hebben nog extra attributen. Data-theme bepaalt de kleurstelling en data-position=”fixed” zorgt ervoor dat de header en footer op een vaste positie blijven staan in het scherm.

Nu we onze pagina template gebouwd hebben kunnen we onze applicatie verder uitbouwen door het plaatsen van componenten in een pagina.

Mobiele applicatie
Fig. 2 Mobiele pagina met navigatie en back-button met CSS3 transitie in een webkit-browser (Safari).

Buttons kunnen we gemakkelijk toevoegen door de volgende template te gebruiken:

<a id="#BUTTON_ID#" href="#LINK#" data-role="button" data-inline="true" #BUTTON_ATTRIBUTES#>#LABEL#</a>

Ook hier zorgt de data-role attribuut ervoor dat een simpele link wordt omgezet naar een button.
Indien gewenst kunnen aan een geplaatste buttons extra attributen gezet worden zoals het data-theme en data-icon attribuut, (http://jquerymobile.com/test/docs/buttons/buttons-icons.html) om het uiterlijk van de button van een kleurstelling en een ikoon te voorzien.

Een aandachtpunt is wel dat er vooralsnog geen gebruik gemaakt kan worden van button-items die tussen formulierelementen staan. Tijdens het bouwen van een applicatie bleken deze button types de HTML-markup te verstoren.

Lijsten vormen de basis voor navigatie binnen de applicatie. We kunnen hier dankbaar gebruik maken van de mogelijkheden die hiervoor reeds in APEX aanwezig zijn. Zo is de navigatiebalk in figuur 2 gebaseerd op een simple list-template:

Before rows:

<div data-role="navbar">
<ul>

List template current:

<li>
  <a href="#LINK#" rel="external" class="ui-btn-active" data-icon="#IMAGE#" data-iconpos="#IMAGE_ATTR#">#TEXT_ESC_SC#</a>
</li>

List template non-current:

<li>
  <a href="#LINK#" rel="external" data-icon="#IMAGE#" data-iconpos="#IMAGE_ATTR#">#TEXT_ESC_SC#</a>
</li>

After rows:

</ul>
</div>

Bij het creëren van een lijst met dit template kunnen vervolgens declaratief de verschillende attributen gezet worden zoals een link naar de doelpagina en ikoon, waarna deze door de APEX-engine gesubstitueerd worden.

Hetzelfde kun je doen voor een APEX-rapport waardoor je gemakkelijk via een SQL-query de juiste data op het scherm tovert. Je kunt hiervoor gebruik maken van custom templates, waarbij elke kolom van de query een aparte verschijningsvorm kent. De plaats van elke kolom moet dan apart benoemd worden in het template.
Hou er rekening mee dat de plaats beperkt is op mobiele devices als smartphones. Er is een mogelijkheid tot het opdelen van een rij van een rapport in meerdere kolommen door gebruik te maken van grids. Deze dien je te definieren in het report template:

Row template:

<li><a href="#4#">
<div class="ui-grid-b">
    <div class="ui-block-a">#1#</div>
    <div class="ui-block-b">#2#</div>
    <div class="ui-block-c">#3#</div>
</div>
</a></li>

Before rows:

<ul data-role="listview" data-theme="g" data-inset="true" data-filter="true">

After rows:

</ul>

Dit template is gemaakt voor queries die 4 kolommen selecteren, bijvoorbeeld:

SELECT medwerker_id
     , naam
     , datum
     , 'f?p=200:2:&SESSION.::::P2_MEDWERKER_ID:' || medewerker_id link
  FROM medewerkers

 
Fig. 3 Multi column listview met een custom report template

Door het data-role=”listview” attribuut wordt een nette lijst getoond, data-inset=”true” zorgt voor de afgeronde kanten. De 3 kolommen worden verkregen door een div-tag met class ui-grid-{x} waarbij a=2 kolommen b=3 kolommen etc.
De reden dat kolom 4 buiten het grid gedefinieerd staat is dat we de link willen laten reageren op input op de hele rij.

Het attribuut data-filter=”true” genereert automatisch een zoekveld boven de lijst waarmee de resultaten beperkt kunnen worden.

Voor het maken van formulieren hoeven we op zich niets speciaals te doen. invulvelden worden netjes omgezet, het zijn slechts die elementen waarvoor we HTML5 moeten gebruiken om jQuery Mobile zijn werk te laten doen die een probleem zijn. Zo is er bijvoorbeeld een mooie range slider die reageert op de volgende markup:

<input type="range" value="10" min="0" max="50"  />

Het type-attribuut kunnen we vanuit APEX niet declaratief opgeven, dus er moet hiervoor nu nog een item-plugin gemaakt worden.

Conclusie

jQuery Mobile lijkt de beste kandidaat voor het ontwikkelen van mobiele webapplicaties in combinatie met APEX. Simpele HTML  bepaalt de structuur en inhoud van een pagina, waarna jQuery Mobile deze HTML opwaardeert tot een touch-enabled en aantrekkelijke user interface. Dit in tegenstelling tot andere frameworks als SenchaTouch, waarbij de componenten voor user-interface voornamelijk via javascripts gecreëerd dienen te worden.
Daarnaast zorgt jQuery Mobile ook voor degradatie van de verschillende user-interface componenten indien de mogelijkheden van de gebruikte webbrowser beperkt zijn.

Ondanks dat nu al snel een mobiele webapplicatie gemaakt kan worden met APEX en jQuery Mobile zijn er nog wel een paar zaken die opgelost moeten worden om volledige controle te krijgen over de HTML die de APEX-engine genereert. Zo geneert het radio-button item tussen de verschillende opties nog een ongewenste break-tag die de conversie naar een mobiele versie verstoort. Daarnaast is het nu niet mogelijk om een attribuut op de fieldset-tag van formulier-items te zetten waardoor de layout van de mobiele pagina niet helemaal goed te sturen valt. Een ander punt is dat nieuwe HTML5 input typen nog niet standaard aanwezig zijn in APEX. Bijvoorbeeld het numerieke input type dat, indien de browser het ook ondersteunt, het virtuele toetsenbord aanpast en de input valideert.

Dit alles is natuurlijk nu op te lossen door met wat javascript de HTML te manipuleren voordat jQuery Mobile de omzetting naar mobiele componenten uitvoert. Uiteraard kan er teruggevallen worden op het schrijven van eigen region- of item-plugins, waardoor je uiteraard zelf de volledige controle hebt over de output.

Met het bereiken van de release status van jQuery Mobile is de verwachting dan ook dat APEX 4.2 out of the box ondersteuning gaat bieden voor mobiele applicaties. Dit in de vorm van nieuwe wizards, item types en templates die HTML5 output genereren. Nog onduidelijk is of er een oplossing komt voor grafieken, nu de SVG-varianten niet langer beschikbaar zijn. Flash is duidelijk aan het eind van zijn latijn en de HTML5 canvas-tag is nog zeker niet in elke browser ondersteund. Een mogelijke tussenoplossing hiervoor zou jQPlot kunnen zijn, een jQuery plugin voor het maken van grafieken op basis van javascript.
In de tussentijd hoeven we uiteraard niet stil te zitten. Met de mogelijkheden van APEX 4.1 en jQuery Mobile zijn we nu al in staat om degelijke mobiele webapplicaties te bouwen.

Referenties

Waardering:
 

Reacties

Nieuwe reactie inzenden

De inhoud van dit veld is privé en zal niet openbaar worden gemaakt.

Meer informatie over formaatmogelijkheden

CAPTCHA
Deze vraag is om te testen of u een persoon bent en om spam te voorkomen
Image CAPTCHA
Enter the characters shown in the image.