�ݺ�ߣ

Ext JS
Bouwen van gebruiksvriendelijke Apex-
applicaties
Een van de uitdagingen tijdens de bouw van een web-applicatie 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 makkelijk te
gebruiken zijn. Dit betekent dat het simpelweg bouwen van formulieren en overzichten op basis van tabellen niet
meer voldoet en men uitvoerig na moet denken over een goede gebruikersinterface.
Dit artikel beschrijft hoe het Javascriptframework Ext JS kan worden ingezet om in Apex gebruiksvriendelijke
desktop-achtige applicaties te realiseren.
Door Sergei Martens / SMART4apex
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
functies die het mogelijk maakt om de html in een web-pagina 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) gebruikers-interace 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 web-pagina.
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 het 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 plug-in 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
Één 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-componeneten 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 haar 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, wordt bij het kiezen van een
item in het linker panel alleen het rechter panel ververst. 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 ongeduldige onder ons, zouden er voor 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 zodat 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 van 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 naartoe 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=/slideshow/artikel-ogh-apex-ext-js-20120529v-sm11/32871357/"../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, b.v. 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; 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 javascriptconsole 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
}]
});
We zullen in een volgend artikel verder 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:
BODY

FOOTER
We hebben nu het begin van een page-template gemaakt, die gebaseerd is op Ext JS.
De template die we hebben gemaakt is slechts het begin van een volledige page-template. Zo ontbreekt in deze
template nog een implementatie voor het bijvoorbeeld tonen van (fout)meldingen, etc en zouden we in een
volwaardige template de javascript willen opnemen in een apart bestand. Bovenstaande voorbeeld geeft echter
wel een goede weergave op welke manier het Ext JS javascript-framework geïmplementeerd kan worden in Apex.
Onderstaande schermafdruk geeft het resultaat van pagina 1 als deze wordt gedraaid vanuit de Apex-builder:

Slotwoord
In dit artikel hebben we een korte introductie gegeven van Ext JS en hoe we dit kunnen implementeren in een
Apex-omgeving. We hebben hiervoor de eerste stappen gedaan voor het creëren van een page template op basis
van de Ext Js - Viewport. Veel spannender is het natuurlijk om nu andere GUI-componenten te gaan
implementeren. De stappen die hiervoor doorlopen moeten worden, zijn echter niet wezenlijk anders dan die van
de Viewport. In een volgend artikel zullen we dieper ingaan op de syntax van Ext JS en zullen we de befaamde
Grid-component gaan implementeren.
Over de auteur
Sergei Martens is vanaf 1998 werkzaam als Oracle professional. Begonnen als ontwikkelaar in Oracle Forms &
Designer, heeft hij daarna enkele jaren als hoofd-ontwikkelstraat teams van ontwikkelaars aangestuurd en
diverse grote ICT- projecten gerealiseerd. In 2005 heeft hij als medevennoot Stadsbeheer B.V. opgericht, waar
hij als technisch directeur verantwoordelijk was voor de ontwikkeling van het softwarepakket SBA. Sinds 2008
werkt hij bij diverse opdrachtgevers als onafhankelijke Oracle professional in de gebieden Forms, Designer,
PL/SQL en APEX. Daarnaast heeft hij voor diverse overheden verschillende grote implementatie-projecten
gedaan. Sinds 2012 is hij de oprichter van een Apex-gilde: http://www.smart4apex.nl.

�ݺ�ߣ

Artikel APEX & Ext JS

More Related Content

Artikel APEX & Ext JS