artikel apex & ext js

13
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 Complete user-interface

Upload: sergei-martens

Post on 10-May-2015

82 views

Category:

Technology


3 download

DESCRIPTION

Building user friendly applications in APEX with Ext Js

TRANSCRIPT

Page 1: Artikel APEX & Ext JS

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 JSRedelijk eenvoudig Iets complexerGratis 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-serverGoede DOM-manipulatie Beste DOM-manipulatieStandaard aanwezig in APEX Zelf toevoegen aan APEXFramework voor toevoegen van functionaliteiten aan een web-pagina.

Framework voor het bouwen van applicaties.

Gebruik van Plug-ins

Page 2: Artikel APEX & Ext JS

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 pageOp 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 PlaypenOp 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

Page 3: Artikel APEX & Ext JS

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

Page 4: Artikel APEX & Ext JS

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-omgevingWe 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.

Page 5: Artikel APEX & Ext JS

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-omgevingVoordat 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.

De gedownloade map Ext JS

Kopie van de map images

Map voor onze prototypes

De gedownloade map Ext JS

Page 6: Artikel APEX & Ext JS

Stap 3; Onze eerste (statische) Ext JS paginaWe 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, 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

Page 7: Artikel APEX & Ext JS

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 formulierOm 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!

Page 8: Artikel APEX & Ext JS

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',

Page 9: Artikel APEX & Ext JS

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.

Page 10: Artikel APEX & Ext JS

Stap 6; overzetten van de Viewport naar ApexNu 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.

Page 11: Artikel APEX & Ext JS

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

HEADER:

BODY

Page 12: Artikel APEX & Ext JS

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:

Page 13: Artikel APEX & Ext JS

SlotwoordIn 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 auteurSergei 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 .