Recentelijk heb ik samen met een aantal andere Finalist-ontwikkelaars een introductiecursus gevolgd in de wondere wereld van Flex. In dit artikel wil ik toelichten wat Flex nu eigenlijk is en wat je met Flex kan.

Omdat ik na de cursus nog niet echt een goed beeld had van wat Flex nu precies omvat, heb ik even het internet afgestruind om de onderstaande vraag te kunnen beantwoorden.

Wat is Flex?

Flex is:

• …een manier om, net zoals met Flash, SWF-bestanden te kunnen maken die uitgevoerd kunnen worden door de Adobe Flash Player. De manier waarop je een SWF maakt, is het grote verschil tussen Flex en Flash.
• …voor ontwikkelaars, omdat Flex maakt gebruik van de ActionScript-taal. Deze taal is gebaseerd op dezelfde principes als bijvoorbeeld Java (objectgeörienteerd, classes, componenten) en daarom relatief eenvoudig om te leren voor ontwikkelaars die bekend zijn met een soortgelijke programmeertaal. Tevens maakt Flex gebruik van een eigen compiler en debugger.
• …voor het maken van applicaties. Om precies te zijn, voor het maken van Rich Internet Applications en niet zozeer voor het maken van websites. Een RIA is een webapplicatie specifiek ontworpen om dezelfde mogelijkheden en functies te bieden als een desktopapplicatie (hierbij kun je denken aan YouTube of Flickr).
• …een Application Framework, gemaakt door Adobe met ActionScript 3. Het Application Framework bestaat uit componenten en classes (API) waarmee je o.a. redelijk eenvoudig een GUI kunt neerzetten via een standaardstructuur door de gehele applicatie. Al deze componenten en classes stammen af van het Application Framework.

Hoe maak je een Flex applicatie?

Ten eerste, the free stuff:

• Flex SDK, wat bestaat uit de Flex-API’s en een standalone compiler die via de command-line aangroepen kan worden

Maar wat kost geld?

• De Flex Builder. Een op Eclipse (en dus voor veel ontwikkelaars bekend!) gebasseerde IDE die de Flex-SDK bevat en tools zoals een debugger en een grafische ontwerptool voor de GUI.
• LiveCycle Data Services. Simpel gezegd, deze software maakt het mogelijk om een Flexapplicatie te laten communiceren met andere services, zoals bijvoorbeeld een database of een serverapplicatie. Er is ook een uitgeklede open source variant beschikbaar, genaamd Blaze DS.

Van zowel de Flex Builder als LiveCycle Data Services is een 60-dagen trialversie beschikbaar (die we ook tijdens de cursus hebben gebruikt), zodat je de software eerst kan uitproberen voordat je je geld gaat uitgeven.

Om een Flexapplicatie te kunnen bouwen zal je gebruik moeten maken van de volgende 2 talen:

• MXML; een op XML gebaseerde taal om de visuele elementen van de applicatie mee te kunnen opmaken.
• ActionScript; een objectgeoriënteerde taal om de applicatielogica te kunnen schrijven.

Hieronder een overzicht van het geheel:

Tijdens de compilatie wordt de MXML-code gecompileerd naar ActionScript, die vervolgens weer wordt gecompileerd naar een binair SWF-bestand. De SWF file wordt op de server gezet en kan vervolgens door een client opgehaald worden (bijvoorbeeld een internetbrowser).

Hieronder een voorbeeld van een MXML-bestand:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    backgroundGradientColors="[0xFFFFFF, 0xAAAAAA]"
    horizontalAlign="left"
    verticalGap="15"
    horizontalGap="15">
 
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.rpc.events.ResultEvent;
 
            [Bindable]
            private var photoFeed:ArrayCollection;
 
            private function requestPhotos():void {
                photoService.cancel();
                var params:Object = new Object();
                params.format = 'rss_200_enc';
                params.tags = searchTerms.text;
                photoService.send(params);
            }
 
            private function photoHandler(event:ResultEvent):void {
                 photoFeed = event.result.rss.channel.item as ArrayCollection;
            }
         ]]>
    </mx:Script>
 
    <mx:HTTPService id="photoService"
        url="http://api.flickr.com/services/feeds/photos_public.gne"
        result="photoHandler(event)" />
 
	<mx:HBox>
		<mx:Label text="Flickr tags or search terms:" />
		<mx:TextInput id="searchTerms" />
		<mx:Button label="Search"
			click="requestPhotos()" />
	</mx:HBox>
 
	<mx:TileList width="100%" height="100%"
		dataProvider="{photoFeed}"
		itemRenderer="FlickrThumbnail">
	</mx:TileList>
 
</mx:Application>

Deze Flexapplicatie doet een aanroep naar een API gedefinieerd in de <mx:HTTPService> tag, op basis van een zoektem ingevoerd in de <mx:TextInput> tag. Vervolgens worden de zoekresultaten verwerkt in de photoHandler function (ActionScript), waarna het resulterende photoFeed-object wordt weergegeven door middel van de <mx:TileList> tag.

Uiteraard biedt Flex je de mogelijkheid om componenten op te maken zoals jij wilt. Standaard maakt een Flexapplicatie gebruik van de default skin, maar op bijvoorbeeld de website van Scalenine zijn vele custom skins beschikbaar!

Meer weten?

Als je meer wilt leren of weten over Flex, hieronder een aantal interessante en behulpzame links:

• learn.adobe.com
• flex.org
• fleksray.org
• scalenine.com
• flexpair.org