Adobe Flex – Part 2

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 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…

  • 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:

The complete Flex Archive can be downloaded here

The running app with validation ON looks like this…