» direct naar zoek en menu

Tijdschrift voor webwerkers » Artikel #135

Flex ontwikkelen - maar dan open source op windows

In 2004 kwam Adobe (toen nog Macromedia) met de eerste versie van de Flex-ontwikkelomgeving. Flex is gebaseerd op Flash en wordt gebruikt om Rich Internet Applications (RIA’s) te ontwikkelen. Een groot voordeel van Flex is dat het de mogelijkheden van Flash dichter bij Software ontwikkelaars brengt. Heel kort gezegd is Flash er voor Designers (visueel ingesteld, timeline) en Flex voor ontwikkelaars (zoveel mogelijk in ActionScript afhandelen, geen timeline).

Versie 3.0 van ActionScript is ondertussen een volwassen object georienteerde programmeer-taal geworden die uitnodigt om vormgeving en code veel strikter gescheiden te houden. Het wordt, om kort te zijn, veel leuker voor softwareontwikkelaars om met Flash te werken.

Adobe lanceerde Flex Builder om Flex-applicaties mee te ontwikkelen. Het is echter ook mogelijk om los van Flex Builder Flex-applicaties en ActionScript 3.0-applicaties te bouwen. Eén van de initiatieven op dit gebied is het FlashDevelop-project waar dit artikel ook over zal gaan.

Over Adobe Flex

Versie 2 van Flex zag in juni 2006 het licht. Een groot verschil met versie 1.0 is de gratis Software Development Kit die bestaat uit een componentbibliotheek, ontwikkeltalen en een compiler. Ook werden de nieuwe versie van ActionScript (3.0) en een nieuwe ActionScript Virtual Machine (AVM2) geïntroduceerd.

Een Flex-applicatie wordt gebouwd met behulp van twee talen. De Multimedia eXtensible Markup Language (MXML) wordt gebruikt om de gebruikersinterface op te maken en databindings te configureren. De scriptingtaal ActionScript zorgt voor de onderliggende logica.

MXML

Zoals vermeld wordt MXML voornamelijk gebruikt om de gebruikersinterface op te maken. Een eenvoudig MXML bestand ziet er zo uit:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
 <mx:Panel title="Titel van de applicatie">
  <mx:Label text="Voorbeeldapplicatie" />
 </mx:Panel>
</mx:Application>

Het resultaat na compilatie:

schermafdruk van applicatie

Een MXML bestand bevat altijd een mx:Application-tag die als root container fungeert. Andere typen containers kunnen hierin genest worden, zoals mx:Panel in het voorbeeld. Voorbeelden van andere componenten zijn buttons, tabbladen, grids, textboxes en menu’s.

ActionScript 3.0

ActionScript 3.0 is wel heel ver verwijderd van de oorspronkelijke timeline-codering van versie 1. Adobe trekt hier rigoureus de objectgeoriënteerde lijn van versie 2 door. Bijna alle code wordt nu volledig binnen classes opgebouwd, de classes zelf worden verplicht binnen packages geordend.

De standaardopzet van een class ziet er als volgt uit:

package {
 //import, bijvoorbeeld:
 import flash.display.Sprite
 public class Naam extends Sprite {
  //constructor:
  public function Naam() {
		
  }
 }
}

Ook het rendermodel voor Action Script 3.0 en Flash Player 9.0 verschilt radicaal van eerdere versies. Hierdoor zal Flash 9 aanzienlijk sneller draaien dan de vroegere versies en is er een stevig fundament voor toekomstige ontwikkelingen gelegd.

FlashDevelop configureren voor Flex

FlashDevelop is een gratis open source scripteditor. Het is een eenvoudig en helder programma. Het project is nog jong, dus er is nog niet veel over geschreven. Daar proberen we hier ook iets aan te doen.

De site flashdevelop.org linkt meteen naar het forum door, en dat geeft meteen aan waar het bij FlashDevelop om draait: om een groep erg enthousiaste mensen die losjes samenwerken. Alle informatie over het project zul je dan ook uit het forum moeten halen, er is geen uitgebreide documentatie te downloaden. Het was voor ons echter geen probleem om alle benodigde informatie bijeen te krijgen.

De benodigde software installeren

De software die nodig is om zelf een Flex-IDE samen te stellen bestaat uit de volgende pakketten:

FlashDevelop configureren

Om FlashDevelop als Flex-ontwikkelomgeving te kunnen gebruiken moeten de volgende stappen worden doorlopen:

  1. Om code-hints in MXML-bestanden te krijgen moet het bestand Flex2_MXML_definition.zip in de map 'FlashDevelop/Data/' uitgepakt worden.
  2. Voor ActionScript 3 code-hinting moeten deze classes gedownload worden. Deze bestanden hoeven niet in de FlashDevelop-installatiemap gezet te worden, maar kunnen op elke plek staan. Voeg het pad naar deze bestanden toe aan de globale classpath van FlashDevelop (Tools > Global Classpaths).
  3. Download de projecttemplates voor Flex en ActionScript 3 projecten en zet ze in de map “FlashDevelop/Data/ProjectTemplates/
  4. Open de 'build.properties'-bestanden in 'FlashDevelop/Data/ProjectTemplates/05 AS3 Project' en 'FlashDevelop/Data/ProjectTemplates/06 Flex 2 Project'. Verander de 'flex2.dir'-property en voer de locatie van de Flex SDK in.
  5. Voeg een 'Ant Build' button toe aan de FlashDevelop toolbar door het bestand 'FlashDevelop/Settings/ToolBar.xml' te openen en het volgende stuk XML-code toe te voegen: <button label="ANT Build" click="PluginCommand" image="54" tag="Run;SaveAll;ant" shortcut="CtrlF7" />
  6. Start FlashDevelop en ga naar 'Tools > Program Settings' en pas de 'ASCompletion.Flex2SDK.Path'-property zodat deze verwijst naar de locatie van de Flex SDK.

Voorbeeld MXML project

Open FlashDevelop en ga naar Project > New Project. Kies 'Flex 2 Project' in het 'New Project'-scherm. Dit zorgt ervoor dat een standaard projectstructuur wordt aangemaakt.

In de 'src' map staat nu het bestand 'App.mxml'. Dit bestand kunnen we gaan gebruiken om de user interface op te bouwen. Open dit bestand en zet de volgende code er in:

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
 <mx:Panel title="Titel van de applicatie">
  <mx:Label text="Voorbeeldapplicatie" />
 </mx:Panel>
</mx:Application>

Een druk op de 'ANT build' knop heeft het volgende resultaat:

schermafdruk van applicatie

Vervolgens wil je natuurlijk ook ActionScript aan de applicatie toevoegen. Dat doe je binnen de mx:script-tags:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
 <mx:Script>
  <![CDATA[
    Private function doeIets() {
    
    }
   ]]>

  </mx:Script>
 <mx:Button label="button" click="doeIets()"/>
</mx:Application>

Of door een verwijzing naar een extern actionscript-file:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

 <mx:Script source="externbestand.as"/>
 <mx:Button label="button" click="functieUitExternbestand()"/>
</mx:Application>

Voorbeeld ActionScript 3 project

Open FlashDevelop en ga naar Project > New Project. Kies 'AS3 Project' in het 'New Project'-scherm. Dit zorgt ervoor dat een standaard projectstructuur wordt aangemaakt.

In een standaard ActionScript 3 project moet de 'App.as'-klasse in de src-directory staan en niet in een package. Overige klassen mogen wel in een packagestructuur staan. Er moet wel het een en ander aangepast worden om dit goed te laten werken. Met de standaard configuratie treedt namelijk een fout op doordat de MXML-compiler de packagestructuur niet herkent. Het gaat hier om een bug in de compiler, die veroorzaakt wordt door het gebruik van een uppercase drive letter ('C:/'). Om deze bug te omzeilen moet een kleine aanpassing gedaan worden aan de 'build.properties' en 'build.xml' projectbestanden.

In 'build.config' moet de property 'source.dir' verwijzen naar het pad waar de ActionScript-classes staan, bijvoorbeeld 'd:/dev/FlexProjects/AS3Demo2/src'. Vervolgens moeten de volgende command line argumenten aangepast worden in het bestand build.xml:

<arg line="-source-path='C:/Program Files/FlashDevelop/Library'" />

moet worden:

<arg line="-source-path='${source.dir}'" />

en…

<arg line="'${basedir}/${source.dir}/${source.file}'" />

moet worden:

<arg line="'${source.dir}/${source.file}'" />

Zet de volgende code in 'App.as':

package nl.naarvoren.AS3Demo {
 import flash.display.Sprite;
 import flash.display.Shape;
 public class App extends Sprite {
  public function App() {
   /**
    * Teken een vierkant
    */
   var myShape:Shape = new Shape();
   myShape.graphics.lineStyle(0.1, 0x990000);
   myShape.graphics.beginFill(0xff0000);
   myShape.graphics.drawRect(0, 0, 100, 100);
   myShape.x = 150;
   myShape.y = 150;
   /**
    * Voeg het object toe aan de displaylist
    */
   this.addChild(myShape);
  }
 }
}

Het bestand kan nu gecompileerd worden door Ctrl+F7 in te drukken. Als alles goed gegaan is, verschijnt er nu een rood vierkant op het scherm.

Meer weten?

Auteur

Joost Verweij & Dennis Ippel

werken bij Evident Interactive in Utrecht.

Joost begon als frontend engineer en is tegenwoordig Interaction Designer. Hij werkte het laatste half jaar o.a. aan de nieuwe Libelle site. Daarnaast is hij tekenaar, liedjesschrijver en schilder met tijdgebrek.

De specialiteit van Dennis ligt op het gebied van (X)HTML, JavaScript, CSS en het correcte gebruik daarvan. Daarnaast werkt hij vaak met Flash en Flex en houdt zijn bevindingen bij op rozengain.com

Publicatiedatum: 06 februari 2007

Let op

Naar Voren is op 18 juli 2010 gestopt met publiceren. De artikelen staan als een soort archief online. Het kan dus zijn dat de informatie verouderd is en dat er inmiddels veel betere of makkelijkere manieren zijn om je doel te bereiken.

Copyright © 2002-2012 » NAAR VOREN en de auteurs