Bouwen van gebruiksvriendelijke APEX-applicaties
10 jul 2012 - Sergei Martens

Verschenen in OGh Visie voorjaar 2012
Dit artikel is een weergave van de presentatie die Sergei Martens over het bouwen van een gebruiksvriendelijke APEX applicatie heeft gehouden tijdens de OGh APEX-dag 2012.
Bouwen van gebruiksvriendelijke APEX-applicaties

Bouwen van gebruiksvriendelijke
APEX-applicaties

 

Een van de uitdagingen tijdens de bouw van een webapplicatie is het bepalen van de gewenste user interface. Vaak blijken de templates die standaard door APEX worden meegeleverd niet te voldoen aan de hoge eisen die in deze tijd door gebruikers worden gesteld. Vooral door de populariteit van websites als Facebook en de introductie van Apps op iPhone, Blackberry en Android, verwachten gebruikers dat applicaties toegankelijk en eenvoudig te gebruiken zijn. Dit betekent dat het simpelweg bouwen van formulieren en overzichten op basis van tabellen niet meer voldoet en men grondig na moet denken over een goede gebruikersinterface. Dit artikel beschrijft hoe het JavaScript framework Ext JS kan worden ingezet om in APEX gebruiksvriendelijke desktop-achtige applicaties te realiseren.

 

 

Door Sergei Martens

 

 

 

Wat is Ext JS

Ext JS staat voor ‘Extended JavaScript’ en is een JavaScript-framework dat sterk te vergelijken valt met het geïntegreerde framework JQuery waar APEX standaard gebruik van maakt. Zo kent Ext JS ook een groot aantal die het mogelijk maken om de HTML in een webpagina te lezen en aan te passen (DOM-manipulatie). Een van de belangrijkste verschillen tussen JQuery en Ext JS is dat door de makers van Ext JS ook erg veel energie is gestoken om een zeer gebruiksvriendelijke (en moderne) gebruikersinterface standaard mee te leveren.

Onderstaand een overzicht van de belangrijkste verschillen tussen JQuery en Ext JS.

 

JQuery

Ext JS

Redelijk eenvoudig

Iets complexer

Gratis

Afhankelijk van het gebruik, zijn licenties nodig.

Weinig user interface. Extra componenten zijn wel vaak andere als plugin beschikbaar.

Complete user interface

Lijkt minder client-server

Lijkt client-server

Goede DOM-manipulatie

Beste DOM-manipulatie

Standaard aanwezig in APEX

Zelf toevoegen aan APEX

Framework voor toevoegen van functionaliteiten aan een webpagina.

Framework voor het bouwen van applicaties.

 

 

Gebruik van Plug-ins

JQuery-fetisjisten zullen voor wat betreft GUI-componenten al snel als argument aandragen dat vrijwel alle soorten GUI-componenten als plugin op JQuery beschikbaar zijn op het internet. Vaak ook gratis. Alhoewel het fenomeen plugins het ontwikkelen van applicaties vaak sneller en eenvoudiger maakt, zijn ze vaak ook de achilleshiel van de applicaties. Naar mijn mening geldt dit ook voor de plugins die vanaf versie 4.0 in APEX geladen kunnen worden.

De grootste uitdaging van het gebruik van plugins is het feit dat deze vaak voor eenmalig gebruik door een ontwikkelaar gerealiseerd zijn. Hierdoor is het vaak onbekend wat de stabiliteit en veiligheid van de software is die je inzet. Daarnaast wordt er in veel gevallen geen onderhoud op de plugin geleverd. Het gebruiken van een framework waarbij alle GUI-componenten standaard zijn opgenomen, waarbij alle componenten uitvoerig zijn getest en waar ook nog eens onderhoud en support op wordt geleverd, is daarom een groot voordeel!

 

Voorbeelden van Ext JS

Een van de beste manieren om Ext JS beter te leren kennen is natuurlijk door de website van de leverancier ‘Sencha’ te bezoeken en daar naar de voorbeelden te kijken: http://www.sencha.com/

Toch zou ik geïnteresseerden ook willen aanraden om ook bezoek te brengen bij de volgende twee websites:

Saki’s Ext examples page - Op deze website is een uitgebreide collectie van voorbeelden beschikbaar van GUI-componenten die door middel van Ext JS gebruikt kunnen worden: http://examples.extjs.eu/

Mark’s Playpen - Op deze website wordt een demonstratie gegeven van een APEX-applicatie die gebouwd is door middel van Ext JS. De applicatie gebaseerd op het boek ‘Oracle Application Express 4.0 with Ext JS’, geschreven door Mark Lancaster. Een echte aanrader voor iedereen die aan de slag wil gaan met Ext JS. De inhoud van dit artikel is vooral gebaseerd op de inhoud van dit boek. http://apex.oracle.com/pls/otn/f?p=200801:101:0

 

 
 Kijkend naar bovenstaande schermafdruk, vallen direct al een aantal zaken op die typerend zijn voor een Ext JS applicatie:
  1. De applicatie is verdeeld over twee panelen: een linker panel waarin de gebruiker verschillende pagina’s kan opvragen en een rechter panel waar de gebruiker zijn opgevraagde informatie getoond krijgt.
  2. De grafische interface (de kleuren, de knoppen, tabbladen, etc. ) doet erg denken aan een desktopapplicatie.
  3. Niet te zien in deze schermafdruk, maar wel bij een bezoek aan de website, is dat bij het kiezen van een item in het linker panel alleen het rechter panel ververst wordt. Dit in tegenstelling tot ‘standaard’ APEX-gedrag, waarbij iedere schermvernieuwing gedaan wordt door middel van een Post naar de webserver en het inladen van een volledig nieuwe pagina.

 

Ja, ik wil…

Mensen die op basis van bovenstaande direct aan de slag willen gaan met Ext JS in APEX, moet ik helaas teleurstellen. Er is op dit moment nog geen complete template-applicatie beschikbaar die kant-en-klaar in een APEX-omgeving kan worden ingelezen. De enige manier is eigenlijk om de benodigde GUI-componenten uit Ext JS te selecteren en deze zelf naar APEX over te brengen. De echt ongeduldigen onder ons zouden ervoor kunnen kiezen om direct met de templates uit het boek ‘Oracle Application Express 4.0 with Ext JS’ aan de slag te gaan. Bij dit boek wordt een voorbeeld-applicatie meegeleverd, die eventueel gebruikt kan worden als template-applicatie.

Ik kies er zelf liever voor om mijn toolset handmatig op te bouwen, zodat ik weet hoe de verschillende componenten precies in elkaar steken en ik makkelijker kan ingrijpen op standaard functionaliteiten. In mijn queeste naar Ext JS, heb ik er daarom voor gekozen om (natuurlijk) het boek aan te schaffen, mezelf te onderwijzen en handmatig de verschillende onderdelen in een eigen template-applicatie te bouwen.

 

Er gaan op moment van schrijven erg spannende geluiden over een eventuele hosted APEX-omgeving die op termijn beschikbaar komt en die standaard Ext JS als framework geïntegreerd heeft. Meer hierover is te lezen op: http://blog.theapexfreelancer.com/

 

 

Stap 1 - Installatie in een APEX-omgeving

We gaan gemakshalve even uit van een APEX-omgeving die draait in een Windows-omgeving en die gebruikt maakt van de APEX Listener. We gaan in dit artikel gebruik maken van Ext JS versie 3.4. Er is op dit moment al wel een versie 4.0 beschikbaar. Maar om aan te blijven sluiten bij het boek ‘Oracle Application Express 4.0 with Ext JS’, leek het verstandig om niet de allernieuwste versie te gebruiken. Als eerste dient het Ext JS framework te worden gedownload. Dit kan van de Sencha website, door naar de volgende URL te navigeren: http://www.sencha.com/products/extjs3/download/

Omdat we niet meer gebruik gaan maken van de standaard images die worden meegeleverd, is het verstandig om de i-map in APEX een andere locatie te geven. We maken hiervoor een aparte map aan, genaamd UX (user extension), kopiëren hier de volledige i-map van APEX naar toe en plaatsen de extjs map ook in deze UX-map.

Door de i-map een eigen locatie te geven, lopen we in de toekomst niet het gevaar dat de i-map per ongeluk wordt overschreven als we naar een nieuwe versie van APEX gaan upgraden.

 

 


Vervolgens moeten we in APEX nog aangeven dat er een alternatieve image-map wordt gebruikt. Dit kan worden gedaan door dit tijdens het starten van de APEX Listener op te geven.

 

Stap 2 - Opzetten van een sandbox-omgeving

Voordat we Ext JS componenten kunnen gaan overzetten naar APEX, zullen we eerst vanuit een statische HTML-pagina onze componenten creëren en testen. Dit doen we vanuit een aparte omgeving waarin we naar hartenlust kunnen experimenteren, zonder de APEX-omgeving in de weg te zitten.

Maak hiervoor een nieuwe map ‘ExtJsSandbox’ en kopieer hierin de gedownloade Ext JS-map. Maak vervolgens ook een map ‘MijnStatischePaginas’ aan waarin we straks onze prototypes gaan maken.

 

 

 

 

 

Stap 3 - Onze eerste (statische) Ext JS pagina

We hebben nu alle voorbereiding en gedaan om echt aan de slag te gaan. Als eerste maken we een lege HTML-pagina waarin alle componenten van Ext JS zijn geladen. Maak hiervoor in de map ‘MijnStatischePaginas’ het bestand ‘1_empty_file.HTML’ met onderstaande inhoud:

 

 
 
 
 Deze pagina verdient enige uitleg.

<link rel=‘stylesheet’ type=‘text/css’ href=‘../extjs/resources/css/ext-all.css’ />

Dit is een verwijzing naar de CSS die door Sencha is gemaakt om Ext JS het gewenste ‘uiterlijk’ te geven.

<script type=‘text/JavaScript’ src=‘../extjs/adapter/ext/ext-base.js’></script>

Dit JavaScript-bestand vormt een adapterlaag voor basis-functionaliteiten zoals DOM-manipulatie, eventhandling etc. In de eerste versies van Ext JS kon hiervoor een externe library worden ingezet, bijvoorbeeld JQuery. Vanaf versie 1.1 hanteert Sencha hiervoor een eigen bibliotheek.

<script type=‘text/JavaScript’ src=‘../extjs/ext-all.js’></script>

Dit JavaScript-bestand bevat de logica voor alle Ext JS componenten.

Probeer deze pagina vervolgens te draaien in Firefox. Als je gebruikt maakt van Notepad++, kan dit eenvoudig door te kiezen voor uitvoeren -> Launch in Firefox. Het resultaat van deze actie zal een lege pagina zijn, maar waar al wel voorbereidingen getroffen zijn om met Ext JS aan de slag te gaan. Voor de zekerheid kan je nog even controleren dat alle verwijzingen goed zijn opgenomen in de pagina. Doe hiervoor: rechtermuisklik -> Paginabron bekijken. Controleer nu of alle verwijzingen gevonden konden worden door hierop met de muis te klikken. Als het goed is, wordt bij iedere link door de browser een stukje code gevonden.

 

Stap 4 - Een korte demo; het maken van een formulier

Om de gewenste componenten te kunnen creëren, maak ik gebruik van de Firefox add-on ‘Firebug’, die gratis kan worden gedownload: https://addons.mozilla.org/nl/firefox/addon/firebug/. Deze add-on maakt het mogelijk om HTML-pagina’s eenvoudig te inspecteren en real-time aan te passen.

Open het bestand ‘1_empty_file.HTML’ opnieuw, nadat deze add-on is geïnstalleerd. Kies vervolgens voor F12. Het controlepaneel van Firebug wordt nu geopend. Klik met de muis op ‘Console’ en kopieer vervolgens onderstaande code in de console:

 

new Ext.FormPanel({

      renderTo: document.body,

      frame: true,

      title: 'Ons eerste Ext JS Formulier',

      width: 250,

      items: [{

            xtype: 'textfield',

            fieldLabel: 'Voornaam',

            name: 'voornaam'

    },{

            xtype: 'textfield',

            fieldLabel: 'Achternaam',

            name: 'achternaam'

    },{

            xtype: 'datefield',

            fieldLabel: 'Geboortedatum',

            name: 'geboortedatum'

    }]

});

 

Kies nu voor draaien en als het goed is wordt je eerste formulier getoond in de HTML-pagina!

 

 

 
 
 Stap 5.0 - Maken van een Ext JS - Viewport

Voordat we formulieren etc. kunnen gaan overbrengen naar APEX, moeten we eerst een page-template maken. Een page-template in Ext JS bestaat uit een Viewport met verschillende inklapbare regions. We maken hiervoor op basis van ‘1_empty_file.HTML’ een nieuwe statische HTML-pagina ‘2_Viewport.HTML’. In deze pagina zetten we de volgende code in de body:

 

   <body>

      <div id=‘app-north-panel’>#REGION_POSITION_01#</div>

      <div id=‘app-west-panel’>#REGION_POSITION_02#</div>

      <div id=‘app-center-panel’>#BOX_BODY#</div>

      <div id=‘app-east-panel’>#REGION_POSITION_03#</div>

      <div id=‘app-south-panel’>#REGION_POSITION_04#</div>

   </body>

 

Vervolgens kunnen we de Viewport maken door onderstaande code in de JavaScript console van Firebug uit te voeren.

 

new Ext.Viewport({

        layout: 'border',

        defaults: {

            animCollapse: false,

            autoScroll: true

        },

        items: [{

            applyTo: 'app-north-panel',

            autoHeight: true,

            autoScroll: false,

            region: 'north',

            style: {padding: '0 5px'},

            xtype: 'box'

        }, {

            contentEl: 'app-south-panel',

            autoScroll: false,

            height: 30,

            region: 'south',

            style: {padding: '0 5px'},

            xtype: 'box'

        }, {

            contentEl: 'app-west-panel',

            collapseMode: 'mini',

            collapsible: true,

            margins: '0 0 0 5',

            maxSize: 500,

            minSize: 100,

            region: 'west',

            split: true,

            title: 'Navigation',

            width: 275

        }, {

            contentEl: 'app-center-panel',

            region: 'center',

            title: document.title,

            xtype: 'panel'

        }, {

            contentEl: 'app-east-panel',

            collapseMode: 'mini',

            collapsible: true,

            margins: '0 5 0 0',

            maxSize: 500,

            minSize: 100,

            region: 'east',

            split: true,

            title: 'Actions',

            width: 275

        }]

    });

 

In een volgend artikel zal verder worden ingaan op de syntax van Ext JS. Kort gezegd wordt met bovenstaande de opdracht gegeven om een panel te creëren met 5 items. Aan ieder item worden verschillende eigenschappen meegegeven, volgens een JSON-notatie.

 

 


 

 

Stap 6 - Overzetten van de Viewport naar APEX

Nu we weten welke HTML en JavaScript er nodig is om een Viewport te creëren, kunnen we de deze overbrengen naar APEX. We maken hiervoor een nieuwe applicatie in APEX op basis van Thema 4. Dit thema heeft namelijk voor ieder object een template en kan worden gezien als een starters-thema op basis waarvan we een eigen thema kunnen gaan maken.

Zorg ervoor dat de applicatie je aanmaakt een lege pagina bevat en is uitgerust zonder Tabs.

Maak vervolgens een kopie van de page-template ‘No Tabs - Right Sidebar (optional / table-based)‘ en noem deze ‘EXTJS No Tabs with Sidebar‘. Zet de template van page 1 naar de zojuist gemaakte template.

 


 

Geef de nieuwe template vervolgens de inhoud van onze HTML-pagina uit de sandbox:

 

HEADER: