Hoe flex is Flex?

 
04 september 2008

“O, Flash!” hoor ik meestal als ik zeg dat ik bezig ben met een project in Adobe Flex. Vaak wordt namelijk ‘Flash’ verstaan als je het over programmeren hebt en je het woord ‘Flex’ laat vallen. Toch heeft Flex erg veel met Flash te maken, want een (web)applicatie die je in Flex bouwt heeft een .swf-bestand als uitvoer, en dat kennen we allemaal als een Shockwave Flash-bestand. “Aha, van die ‘Skip Intro’-websites zeker.” hoor ik je denken. Nope. Je oordeelt te snel.

Tot een paar maanden geleden had ikzelf ook nog nooit van Flex gehoord. Het is een framework waarmee je erg snel een webapplicatie in elkaar kunt zetten, als je je een klein beetje hebt verdiept in ActionScript en XML. Met het – op Eclipse gebaseerde – Adobe® Flex® Builder™ 3 (60-dagen-trial) start je een nieuw project, je sleept wat labels en buttons op je canvas, bouwt het project en zet je .swf op een server. Daarna zal elke browser met Flash jouw verse website laten zien zoals je dat hebt bedoeld. Gedaan dus met het checken van de browser van de user, en daar de CSS op aan te moeten passen.

XML

Op ActionScript-klasses na is elk Flex-bronbestand een XML-bestand (.mxml). Daarbinnen vind je objecten als <mx:Button id=”btnSaveItems” width=”100%” click=”saveItems();”/> die de weergave van je site bepalen. Ook vind je er meestal een scriptblok, waar je ActionScript-functies in kwijt kunt om acties af te handelen. Deze manier van coderen lokt helaas uit dat je onoverzichtelijke code krijgt. Je moet zelf het overzicht bewaren door je bestanden op te splitsen. Hoedanook, F3 (bekend van Eclipse) en Control-F zijn je vrienden.

Meer dan een webpagina

Een simpele pagina zet je snel in elkaar, zoals gezegd. Maar als je meer wilt, dan zijn er wat haken en ogen om rekening mee te houden. Zo is Flex volledig op events gebaseerd. Het is zo asynchroon als een satellietverbinding tussen Philip Freriks en een correspondent in Tibet. Nee, asynchroner nog, eigenlijk. Je kunt niet zomaar een databaseaanroep doen en met de gegevens aan de gang. Je moet wachten op het ResultEvent dat je aanroep opgooit, en pas daarna kun je verder. Dat is wel anders dan je gewend bent.

Ook zitten alle objecten in een grote pool. Elk object wordt slechts eenmaal geïnitieerd. Sterker nog, alle objecten worden geïnitieerd zodra je .swf-bestand wordt behandeld door je Flashplayer.

In zekere zin zijn functies zelf ook objecten die je kunt doorgeven. Een private-functie kun je dus doorgeven aan een object dat normaal gesproken geen toegang zou hebben tot die functie. Zo liggen de Runtime Errors natuurlijk op de loer, want de functie ‘private function getMyEvent(eventId:int, eventName:String=null) : Event’ kun je als ‘getMyEventFunction:Function’ doorgeven aan een object dat daarop getMyEventFunction(name) probeert aan te roepen. De signatuur van een functie geef je namelijk niet door.

Je hebt toegang tot objecten (zoals Button) door middel van het id van dat object: ‘btnSaveItem.enabled = false’. Dat kun je vanuit een functie, maar ook vanuit een ander object gebruiken: ‘<mx:CheckBox change=”btnSaveItem.enabled=false”/>’. Makkelijk, maar o zo gevaarlijk natuurlijk. Whatever happened to loose coupling?

Events kunnen bubblen. Niet dat ze in de Stairway los staan te gaan, maar event bubbling wil zeggen dat het event, dat door een object wordt gegooid eerst wordt aangeboden aan het directe parentobject van de eventgooier, daarna aan de parent daarvan, tot aan de application toe. Je kunt events ook op een andere manier aan de verschillende listeners aanbieden, door use_capture op true te zetten (default is false). Dan worden de eventlisteners eerst in omgekeerde volgorde aangeboden. En als bubbling op true staat (dat is default), dan worden de listeners vervolgens weer langsgelopen vanaf het object dat het event gooide.

Dat moest je vast twee keer lezen. Wat hieraan belangrijk is, dat eventuele listeners die je zou willen gebruiken wél een van de parents moeten zijn van het eventgooiende object. Anders moet je truken toepassen door een eventlistener in een van de parents in te bouwen, die toegang heeft tot het object waaraan je zou willen doorgeven dat er iets is gebeurd.

Flex Builder

Flex Builder is dus gebaseerd op Eclipse. Dat maakt het makkelijk om ermee om te gaan als je al wat ervaring met Eclipse hebt, maar zelfs ook als je alleen nog Visual Studio hebt gebruikt. Het is erg makkelijk om objecten te plaatsen en de instellingen daarvan te wijzigen zonder een letter code te hoeven zien. Al zul je vaak naar de code grijpen om te begrijpen wat er precies gebeurt. Je bent programmeur of je bent het niet.

Flex Builder doet ‘onder water’ vrijwel wat je verwacht. Als je een attribuut weghaalt in de wysiwyg-modus, dan wordt het ook in de code weggehaald, en niet genulld of zoiets naars. Wat Flex Builder echter zou verbeteren is een vaste volgorde voor de attributen van een object. Nu kun je het volgende voorbeeld nog wel eens tegenkomen: <mx:Button height=”22″ x=”0″ click=”saveItems();” label=”Save Items” y=”100″ enabled=”true” id=”btnSaveItems” visible=”false” top=”40″/>. Wat mij betreft staat het id altijd vooraan, en zijn stijl-, actie- en plaatsattributen gegroepeerd. Maar je bent er zelf bij, denk ik dan maar.

Browsers en RIA’s

Omdat flashbestanden op de clientmachine zelf draaien, reageert een Flex-webpagina voor een gebruiker snel. Dataverkeer van en naar de server kun je asynchroon op de achtergrond laten lopen, terwijl de gebruiker vrolijk doorleest en -klikt. Maar je kunt niet alleen webpagina’s maken, je kunt ook RIA’s (Rich Internet Applications) maken. Deze applicaties draaien zelfstandig op de clientmachine (Adobe AIR) en ze hebben geen browser nodig. Hiermee heb ik geen ervaring, dus ik stel voor dat je even cuilt op RIA.

Om een lang verhaal niet nog langer te maken

Dus hoe flex Flex is? Flex is erg flex zo lang je (web)applicatie niet al te groot hoeft te zijn. Flex is namelijk zo flex dat alles wat je ooit leerde over loose coupling steevast gromt als een waakhond, omdat het zo ontzettend uitnodigt om objecten direct aan te spreken. Gevaarlijk zijn de kleine applicaties die groeien. Bescherming is er: het wachtwoord is ‘refactoring’.

Flex is wat mij betreft zeker de moeite waard om eens uit te proberen, als je op een makkelijke en vaak mooie manier een website wilt bouwen. Of gewoon voor de hobby, omdat het kan.

Alhoewel Adobe Flex Builder na 60 dagen nogal kostbaar wordt, is de SDK vrij te verkrijgen.

Als je meer informatie zoekt, dan kun je me mailen. Of je klikt even hier, hier of hier.

Veel plezier, Simon


Werken met ?
Kijk dan bij onze mogelijkheden voor starters en/of ervaren IT'ers.


Categorieën: Development, Overige talen en platformen

Tags: , , , , , ,


Reacties (3)

  • Jasper Potze schreef:

    Interesant stukje Simon, dat loose coupling probleem zijn wij ook een paar keer tegen aan gelopen maar daar kun je wel wat dingen aan doen. Wij maken gebruik van ‘ Mate ‘. En iets wat ‘document based development’ heet.

    http://code.google.com/p/mate-examples/wiki/DocumentBasedExampleIntro

    Verder kun je door eventmaps te gebruiken ervoor zorgen dat je de voorkant (views) en hun view models (directe view logica) loskoppelt van de controller (manager) en deze is dan de enige die een model (logica) mag aanspreken. Je inject via die event map dingen, en handled events. Maar lees het maar es dat is beter dan mijn uitleg.

    Gr, Jasper

    Geplaatst op 11 december 2008 om 17:49 Permalink

  • Michel Jansen schreef:

    >Alhoewel Adobe Flex Builder na 60 dagen nogal kostbaar wordt, is de SDK vrij te verkrijgen.

    Tip: gebruik hiervoor sprouts (http://www.projectsprouts.org/). Dat is een gratis, open source framework voor actionscript en flex development.

    Mijn ervaringen hiermee heb ik op http://micheljansen.org/blog/entry/499 beschikbaar gemaakt :)

    Geplaatst op 27 november 2008 om 16:43 Permalink

  • “Oi, alles flex” hoor ik nu enkele collega’s denken :)
    Maar interessante post Simon, dat Flex ga ik zeker eens uitproberen!

    Geplaatst op 09 september 2008 om 22:22 Permalink