Organize Flex code into separate files, create custom components, create custom class and use validators to validate form elements.
I modified the previous Flex example app to implement the following:
- Separated out related code into different physical files.
- Created the src/components folder to hold reusable UI components in their respective .mxml files.
- Created a new Class called Movie (file name Movie.as) in a package named dto. This class will hold the values of our grid properties. We will load the XML into instances of this class and collect them in a ArrayCollection.
- Finally we use some validators in our form to validate that both movie name and rating are entered. Unless entered (as valid) the Add Movie button will NOT be enabled.
To create a reusable component right click on the src folder in Flex Builder and create a new Flex Component. Put the code in there(minus the mx:Application) and voila you have a reusable component.When you read the code notice how parameters are defined in the component files and then passed in from the root SecondFlexApp.mxml file.
Here is the new version of the SecondFlexApp.mxml file…
|
1 |
<?xml version="1.0"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:comp="components.*" initialize="initApp()"> <mx:Script> <![CDATA[ import dto.Movie; import mx.controls.Alert; import mx.collections.ArrayCollection; [Bindable] public var movieList:ArrayCollection; public var moviexml:XML = <movies> <movie> <name>Angels & Demons</name> <rating>1</rating> </movie> <movie> <name>Ice Age 3</name> <rating>2</rating> </movie> <movie> <name>Transformers: Revenge of the Fallen</name> <rating>3</rating> </movie> </movies>; public function initApp():void { movieList = new ArrayCollection(); for each (var movie:XML in moviexml.movie) { var mv:Movie = new Movie(); mv.name = movie.name; mv.rating = movie.rating; movieList.addItem(mv); } movieGrid.initApp(); } ]]> </mx:Script> <mx:VBox width="50%"> <mx:Label color="blue" text="Movies I have seen..."/> <comp:MovieGrid id="movieGrid" movieList="{movieList}" width="100%"/> <comp:addmovieform movieList="{movieGrid.movieList}"/> </mx:VBox> </mx:Application> |
- The new xmlns:comp namespace which refers to the components folder (components.* allows us to refer to all components in the src/components folder.
- We pass in references to values in the mx:VBox such as in comp:MovieGrid we pass in the movieXML parameter into the component.
- The mx:VBoxis a layout container that places components vertically (there is an mx:HBox too if you want).
- In the initApp method I iterate through the XML , create Movie instances and add them to the movieList ArrayCollection.
The Movie class is:
|
1 |
package dto { public class Movie { public var name:String; public var rating:Number; public function Movie() { } }} |
The complete Flex Archive can be downloaded here secondflexapp.zip
The running app with validation ON looks like this…
