Follow Us on Twitter

Verbeter de User Experience van APEX Applicaties

Gepubliceerd in

April 2015 - Alhoewel Oracle Application Express standaard met een aantal uitstekende templates geleverd wordt, waaronder een responsive/HTML5 template, is de vormgeving niet naar ieders smaak en niet voor alle toepassingen geschikt. Voor eenvoudige toepassingen en throw-away applicaties zijn ze meestal voldoende, maar hoe serieuzer de toepassing, hoe meer eisen er aan de user experience gesteld worden en dan is er visueel en functioneel meer nodig.

Gelukkig gedragen APEX webpagina's zich als gewone webpagina's en zijn de meeste bibliotheken en extra's eenvoudig te implementeren in een APEX applicatie. Wel moet de CSS- en javascriptcode op specifieke plekken in de APEX designer ingebouwd worden om goed te werken.

Dit Whitebook legt uit welke User interface opties er standaard in APEX aanwezig zijn, en hoe die benut kunnen worden. En het laat zien hoe externe libraries toegepast kunnen worden. APEX 5.0 is tijdens het schrijven van dit Whitebook uitgebracht. Hierin zijn veel taken die hier beschreven zijn een stuk eenvoudiger geworden. Dat alleen al is misschien een goede reden om een migratie te onderzoeken. Voorlopig zullen nog veel projecten het met een oudere versie moeten doen.

Ingebouwde opties en mogelijkheden

Templates en CSS

De standaardthema's van APEX zijn opgebouwd uit diverse templates voor verschillende paginatypes en pagina-elementen, en kunnen aangepast worden of vervangen door templates die beter aansluiten bij de bedrijfsstandaarden.

Een goede, consistente template bouwen met CSS is geen sinecure; vaak wordt dit overgelaten aan UX designers.

jQuery

jQuery is een uitgebreide open source JavaScript bibliotheek, bestaande uit een aantal modules. De belangrijkste zijn:

  • jQuery Core, het hart van jQuery die HTML documentmanipulatie, event handling, animaties en Ajax via een API beschikbaar stelt
  • jQuery UI is een geselecteerde verzameling user interface elementen, effecten, widgets en thema's bovenop jQuery Core.
  • jQuery Mobile, een HTML-5 gebaseerde extensie voor mobiele browsers.

Standaard worden jQuery 1.7.1, jQuery UI 1.8.22, and jQuery Mobile - 1.1.1 RC1 meegeleverd met Application Express. Van deze modules is jQuery UI het meest interessant binnen de scope van dit Whitebook. Niet alle features van jQuery UI zijn standaard geactiveerd in de templates. Standaard beschikbare jQuery UI plugins zijn, naast de Core module, bijvoorbeeld de Widget, Mouse, Draggable en Effects componenten.

Wil je toch graag andere jQuery UI componenten toevoegen, dan kan dat eenvoudig door de meegeleverde libraries aan de paginatemplate toe te voegen, bijvoorbeeld als volgt:

<link href="#IMAGE_PREFIX#libraries/jquery-ui/1.8.22/themes/base/minified/jquery.ui.tabs.min.css" rel="stylesheet" type="text/css" />
<script src="#IMAGE_PREFIX#libraries/jquery-ui/1.8.22/ui/minified/jquery.ui.tabs.min.js" type=”text/javascript”></script>

Natuurlijk is het ook mogelijk om jQuery zelf te downloaden en via de shared components in de applicatie te installeren. Bijkomend voordeel is dat je dan ook de meest recente versie hebt.

Een derde mogelijkheid, is om libraries van een CDN (content delivery network) te "includen". Dit heeft een aantal voordelen. Aangezien er meer sites zijn die dit doen, is de kans groot dat de bezoeker van je pagina al een lokale cache van de libraries gedownload heeft bij het bezoeken van een andere site. CDN's verzorgen ook vaak automatisch dat de content van de dichtstbijzijnde server gedownload wordt. Beide voordelen zorgen voor snellere laadtijden voor de bezoeker van de pagina. Daarnaast is de belasting van de eigen server lager. Een nadeel kan zijn dat je afhankelijk bent van een derde partij, met het bijkomende risico van haperende dienstverlening of mogelijk zelfs malware door een hack.

Voorbeelden

Het volgende voorbeeld maakt gebruik van de "sortable" interaction van jQuery. Dit is een voorbeeld van een component dat niet in de standaardset van APEX zit, en ik gebruik hier de jQuery libraries van jQuery.com. Afbeelding 1 toont de benodigde HTML header- en bodycode. Maak een nieuwe APEX applicatie met een lege pagina en een HTML region. Kopieer de inhoud van de header in de APEX paginadefinitie in de "HTML header", en de inhoud van de body in de "Region source".

Sortable demo

Start de applicatie, en het resultaat is al zichtbaar: een list met 7 items die met de muis naar inzicht te ordenen zijn.

Resultaat Sortable

Het wordt interessanter als we de items baseren op een databasetabel. Maak een nieuwe region aan van het type PL/SQL dynamic content met de volgende inhoud:

declare
  cursor c_sortval is 
    select id, value, sortorder
    from elementsorter 
    order by 3;
begin
  htp.p('<ul id="sortable">');

  for r_sortval in c_sortval
  loop
    htp.p ('<li class="ui-state-default ui-sortable-handle" id="item'
       ||r_sortval.sortorder
       ||'"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>'
       ||r_sortval.value||'</li>');
  end loop;
  htp.p('</ul>');
end;

De tabel elementsorter bevat 5 labels met een sorteervolgorde. Met een cursorloop wordt exact dezelfde itemlist gegenereerd als in de HTML region die we eerst hebben gemaakt. Maar wel met echte gegevens!

Plugins en libraries

Bootstrap

Bootstrap is de naam van een HTML, CSS en JavaScript front-end framework. Het is ontwikkeld door Twitter en als open source product op GitHub geplaatst.
Bootstrap bevat templates voor allerlei webpagina-elementen, zoals forms, buttons, modals, inputs en menu's. In versie 3 wordt sterk de nadruk gelegd op responsive design en mobile, waardoor webpagina's automatisch schalen naar het soort apparaat waarop ze getoond worden( mobile, tablet of desktop).

Bootstrap wordt op dezelfde wijze als jQuery beschikbaar gemaakt in de webapplicatie; link de CSS en javascript sources vanuit de paginaheader. Een snelle start is door het gebruiken van de eerder genoemde CDN's, zoals op deze manier:

<!-- compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<!-- compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

Let op: Bootstrap 3.0 vereist op dit moment minimaal jQuery v1.9. Apex 4.2 wordt met een oudere jQuery versie geleverd, dus het is verstandig zelf de laatste jQuery te downloaden en op de applicatieserver te plaatsen.

Iconen

Een goede set iconen is onmisbaar in een webapplicatie. Niet alleen zijn er voor veel taken universele, goed herkenbare iconen, ook besparen iconen ruimte en maken een webpagina overzichtelijker. Tegenwoordig worden steeds minder afbeeldingen en sprites gebruikt, ten gunste van de scalable vector icons (ook wel icon fonts genoemd). Dit is een fantastische verbetering ten op zichte van image icons, omdat ze perfect schaalbaar zijn en de kleur, achtergrond en grootte met CSS aanpasbaar zijn. Dit past binnen het idee van responsive design, waarbij afbeeldingen keurig schalen naar het type apparaat waarop ze getoond worden.

In APEX 5.0 wordt gebruik gemaakt van de scalable vector icons van Font Awesome. Gelukkig is het eenvoudig om die in 4.2 ook toe te passen. Voeg de Font Awesome CSS toe aan de paginatemplate of de CSS File URL van de pagina en Font Awesome is klaar om te gebruiken.

Font Awesome toevoegen

Font Awesome kan nu overal gebruikt worden. In tekst, op buttons en in combinatie met Bootstrap ook als onderdeel van input items. Voor het tonen wordt <i> tag en de naam en attributen van de afbeelding in de class gebruikt. Zie hieronder enkele voorbeelden.

Font Awesome resultaat

En dit is de HTML code die ik in de HTML region van een APEX pagina heb geplaatst:

<p>I use a <i class="fa fa-pencil fa-fw"></i> to write a <i class="fa fa-book fa-fw"></i></p>
<p>
 <i class="fa fa-cog fa-fw"></i>&nbsp; Settings</a>
</p>
<div class="btn-group">
  <a class="btn btn-default" href="#"><i class="fa fa-align-left fa-2x"></i></a>
  <a class="btn btn-default" href="#"><i class="fa fa-align-center fa-2x"></i></a>
  <a class="btn btn-default" href="#"><i class="fa fa-align-right fa-2x"></i></a>
  <a class="btn btn-default" href="#"><i class="fa fa-align-justify fa-3x"></i></a>
</div>
<p>
<div class="input-group margin-bottom-sm">
  <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
  <input class="form-control" type="text" placeholder="Email address">
</div>
</p>

Zie voor alle iconen de volgende pagina: http://fortawesome.github.io/Font-Awesome/icons/

Van de gebaande paden af

Alhoewel de templates die met APEX meegeleverd worden prima voldoen, sluiten ze maar zelden aan bij de geldende style guide. Ook wordt de kenmerkende APEX look & feel niet altijd gewaardeerd. Het kan daarom geen kwaad om de templates en de gebruikte UI elementen nog eens goed tegen het licht te houden. Een paar simpele opties zijn, om de APEX tabs te vervangen door UI lists, en bootstrap-CSS toe te passen op andere elementen, zoals buttons, checkboxen en tekstlabels.

Als je toch meer wil, is de volgende noodzakelijke stap het zelf maken van een APEX theme. Simpel gezegd zijn themes een logische verzameling templates, waarin vastgelegd is welke templates voor welke elementen gebruikt worden. Templates definiëren hoe een UI element er uit gaan zien. In APEX is het de plek waar de HTML en APEX substitutievariabelen samenkomen. Kijken we naar een eenvoudige button template, dan ziet die er zo uit:

<a href="#LINK#" class="btn btn-default">#LABEL#</a>

De HTML elementen zijn duidelijk herkenbaar: een hyperlink met een eigen CSS class. De link en label waardes bevatten substitution strings, die herkenbaar zijn door de hashes aan het begin en eind. Deze worden door APEX tijdens het renderen van de pagina vervangen. Als een ontwikkelaar een button maakt en deze template gebruikt, worden de LABEL en LINK tokens vervangen door de attribuutwaarden opgegeven in de buttonattributen.

In de templates wordt een hele lijst van dergelijke substitution strings gebruikt, die elk voor een deel van een pagina of pagina-element staan. In de APEX documentatie staat een overzicht van de ingebouwde variabelen.

Om een eigen theme te maken, begin met het kopieren van een bestaand theme. Voeg vervolgens alle te gebruiken libraries toe aan de pagina-templates; in ieder geval de jQuery en Bootstrap javascript- en CSS files aan de File URLs sectie in de page template. Daarmee zijn we er nog niet, want aangezien de stijl van elementen afgeleid wordt uit de CSS code, moeten de CSS classes aan alle pagina-elementen toegevoegd worden. Dat is veel werk. Een goede start kan zijn om de site van APEX-bootstrap te bezoeken en daar de gratis theme te downloaden. Hier is het meeste werk al gedaan! Het is zeker de moeite om de demo's op de site zelf alvast eens te bekijken.

Conclusie

Er zijn heel veel mogelijkheden om zowel de user layout als de user experience van een APEX applicatie volledig aan te passen aan de gestelde eisen. In principe is elke webpagina layout te maken, maar hoe meer deze afwijkt van de APEX standaardtemplates, hoe meer tijd gestoken moet worden in het maken van goede CSS classes.

Voor zover niet standaard aanwezig (zoals in APEX 5.0 het geval is), is het aan te bevelen om de Bootstrap en Font Awesome plugins te installeren, evenals de laatste versie van jQuery.

Er zijn vele andere libraries en extensies te vinden, zoals qTip2 (tooltips), Parsley (frontend form validation), Morris.js en FlotChart (grafieken). Probeer van te voren een keuze te maken uit de beschikbare extensies, en beperk het aantal tot een handvol. Zo blijft de user experience consistent, is de invloed op de paginaload beperkt en is het voor de ontwikkelaars nog overzichtelijk.

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.