Adobe Flex is a framework/sdk provided by Adobe that allows us to build rich internet applications (RIA) using Flash as the underlying technology.
Web designers have been using Flash to design apps for the web for a longtime. But the approach to designing with Flash directly is not that conducive to mainstream application development. Thus Flex was created. Flex provides a programming platform which is more easily understood by application developers as compared to Flash. Flex uses two programming languages to achieve this.
MXML – is an XML based programming model to define your UI layout.
ActionScript – is an implementation of ECMAScript (javascript2.0)
While MXML is used to define the UI elements, ActionScript is used to put in the behavior logic. This allows us to separate UI vs controller code. Let us run through an example to get a quick intro. This example is a little more involved than a standard hello but simple nevertheless.
Applications coded in Flash or Flex are executed in the browser using the Flash Player. There is another runtime called the AIR which is used to execute the applications outside of the browser as standalone desktop applications. Which one you use will depend on your application needs. For this tutorial we will use the browser to run the applications.
What You Need to Install
Flex 3 downloads are available from http://www.adobe.com/products/flex/flexdownloads/.
You can download the Flex SDK free of charge. But then you would have to use the command line or some other editor to code the application. Instead I would strongly recommend you download the trial version of Flex Builder 3 Eclipse Plugin. If you have an existing eclipse setup then installing the plugin is the preferred way. After 30 days you have to buy this product. I personally feel that Adobe has priced the product too high for regular developers and I hope they provide a free version for development soon.
I also suggest going through the tutorial at http://www.adobe.com/devnet/flex/videotraining/. I found this very useful and strongly recommend it for folks new to Flex.
Whatis the App?
The application is your personal movie tracker. It shows a grid with a list of movies you have watched and what rating you gave them. You can delete movies from the Grid or add new movies to the grid using a simple form.
Creatinga Basic Project
Once the Flex Builder3 plugin has been installed open up the Flex Debugging perspective and you should see something like this:
Now create new Flex project and name it ‘FirstFlexApp’. This will create a project with the following structure:
- .actionScriptProperties, .flexProperties contain various Flex related configuration.
- .project is the Flex eclipse project configuration.
- By default Flex Builder created a FirstFlexApp.mxml file. This is what you will run to execute your application.
Even though we have MXML to code the UI layout, you must be aware that MXML is converted to ActionScript during compile time. So it is entirely possible to build your application using ONLY ActionScript. But it would make it much harder to do so. Our application MXML code starts with…
|
1 2 3 4 |
<?xmlversion="1.0"?> <mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"creationComplete="initApp()"> ... </mx:Application> |
The creationComplete hook is optional. We use it here to call afunction which will retrieve the current movie list (as XML) and thenpopulate the grid with the contents. creationComplete is invoked afterthe layout has been prepared and displayed. There is another hookcalled initialize which can be used instead. initialize calls afunction before the UI is displayed.
Next we add the initial XML data here as:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<mx:XMLList id="moviexml"> <movie> <name>Angels&Demons</name> <rating>1</rating> </movie> <movie> <name>Ice Age3</name> <rating>2</rating> </movie> <movie> <name>Transformers:Revenge of theFallen</name> <rating>3</rating> </movie> </mx:XMLList> |
mx – is the namespace used to identify the MXML elements. XMLLIst is an alias for a ActionScript class. Following that are various properties/methods that you want to configure for this class. In this case id is used to give a unique name to this instance of XMLList. Here we setup 3 movies. There are no remote calls in this tutorial to make things easier.
Next here is the rest of the UI layout:
|
1 |
<mx: Panel title="Movie List" height="100%" width="100%" paddingTop="10" paddingLeft="10" paddingRight="10"> <mx:Label width="100%" color="blue" text="Movies I have seen..."/> <mx: DataGrid id="movieGrid" width="50%" height="50%" rowCount="4" resizableColumns="true" editable="false" > <mx:columns> <mx: DataGridColumn dataField="name" headerText="Name"/> <mx: DataGridColumn dataField="rating" headerText="Rating" /> <mx: DataGridColumn width="40" sortable="false" fontWeight="bold"> <mx:itemRenderer > <mx:Component> // refer to full listing for code here </mx:Component> </mx:itemRenderer> </mx: DataGridColumn> </mx:columns> </mx: DataGrid> <mx: Panel width="359" height="170" layout="absolute"> <mx:Label x="10" y="10" text="Movie Name:"/> <mx:Label x="42" y="36" text="Rating:"/> <mx:TextInput x="96" y="8" id="fldMovieName"/> <mx:TextInput x="96" y="34" width="25" id="fldMovieRating" maxChars="1"/> <mx:Button x="69" y="76" label="Add Movie" click="addMovie()"/> </mx: Panel> </mx: Panel> |
We define a label and then a data grid to display the XML data. The mx
ataGridColumn is used to define the columns in this table. Our 3rd column is a special non-data column which will display an X symbol to delete a row. The code for that can be seen in the full listing at the end. You can also see the text form to enter new movies. The mx:Button uses its click property to connect the click event to the addMovie function.
Finally here is the ActionScript code to bind the grid to the XML data.
|
1 |
<mx:Script><![CDATA[ import mx.collections.XMLListCollection; import mx.controls.Alert; [Bindable] private var movieList:XMLListCollection; public function initApp():void { movieList = new XMLListCollection(moviexml); movieGrid.dataProvider = movieList; } private function addMovie():void { if ( fldMovieName.text == "" || fldMovieRating.text == "") { Alert.show("Enter valid values for movie and rating.","Alert"); } else { movieList.addItem( {fldMovieName.text} {fldMovieRating.text} ); } }]]></mx:Script> |
The sample above is quite self-explanatory. The initApp creates a XMLListCollection and references that to the movieGrid.dataProvider.
Run the eclipse application and here what you will see in the browser:
Click on firstflexapp.zip to download the complete Flex Project Archive. You can export a Flex Archive by right clicking on the browser and performing an Export to Flex Archive (a zip file).