Using the <mx:Model> Tag with a Creation Complete Event The <mx:Model> tag enables you to store data in ActionScript client-side objects, separating your data structure from the actual user interface controls. The <mx:Model> tag works by including XML structures within the tag. You can either declare properties as child tags or specify an external XML file. This XML is compiled into your application as generic ActionScript objects, which can then be used for data binding. This is most useful for embedding data in an application that will not change; for example, a list of states used to populate a ComboBox control. Because the <mx:Model> tag embeds data into the application during compilation, it can also be useful for offline applications that do not have network access at run time. There are disadvantages to the <mx:Model> tag: the properties of the object created by the <mx:Model> tag are untyped, which means that the compiler cannot predetermine if the property will hold string or numeric data. This can result in poor performance and severely limits error trapping. The <mx:Model> tag in this lesson is simply serving as a substitute for server-side data, which you will work with extensively in the next lesson. Using an ActionScript class for client-side data structures, which you will learn later in this lesson, solves the problems associated with the <mx:Model> tag. An event is a type of communication that occurs between objects. Often, events are driven by user actions such as clicking a button. Other times these actions, such as a screen being revealed, are driven by the system. The creationComplete event is a system event, dispatched by the components of Flex framework after elements have been created, drawn on the screen, and are ready for use. Every component in the framework broadcasts this event; for example, an <mx:Button> tag would broadcast this event once all components of the button, such as any icon or label, are drawn and ready. The <mx:Application> tag also broadcasts this event, but only after all components in the application are ready. In this task, you will first specify an external XML model for your <mx:Model> tag. You will then use the creationComplete event to call a method, or function that will eventually build individual value objects using a custom ActionScript class. 1. | In Flex Builder 2, open the EComm.mxml file you worked with in the last lesson. If you didn't complete the previous lesson, you can open EComm.mxml from Lesson05/start and save it in your FlexGrocer directory
| 2. | Remove the child nodes from the <mx:Model> tag and specify the source attribute of the <mx:Model> tag as "assets/inventory.xml", as follows:
<mx:Model source="assets/inventory.xml"/>
Instead of defining your data model inline, as you did before, you can specify an external XML file as the source for your <mx:Model> tag. In this case, the inventory.xml file looks as follows:
<groceries> <catID>1</catID> <prodName>Milk</prodName> <unitID>2</unitID> <cost>1.20</cost> <listPrice>1.99</listPrice> <description>Direct from California where cows are happiest</description> <isOrganic>true</isOrganic> <isLowFat>true</isLowFat> <imageName>dairy_milk.jpg</imageName> </groceries>
The <mx:Model> tag will automatically parse this XML into a native ActionScript data structure; in this case, an object. In Lesson 6, "Using Remote XML Data with Controls," you will learn about more complex data structures.
| 3. | On the <mx:Application> tag, handle the creationComplete event, as follows:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="prodHandler()">
The creationComplete event, when it is on the <mx:Application> tag, is dispatched, or fired, only after all the children of that tag have been created, which means it is executed just before the application on the screen is shown to the user. It is useful because it means that everything in the entire application is ready for use. The prodHandler() function called here will reside in a script block.
| | | 4. | Pass to the prodHandler() the data structure created by the <mx:Model> tag, as follows:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="prodHandler(groceryInventory)">
The id of your <mx:Model> tag is groceryInventory. The <mx:Model> tag automatically created a simple ActionScript object from the XML file and can be used for data binding.
| 5. | Add an <mx:Script> block immediately after the existing <mx:Model> tag. Note that a CDATA tag is automatically added for you by Flex Builder. At the top of the script block, define a new function with the name of prodHandler(). Be sure to specify the parameter it receives as an object with the name of the Items.
<mx:Script> <![CDATA[ private function prodHandler(theItems:Object):void { } ]]> </mx:Script>
This function is called an event handler, which is simply a function that is invoked when an event occurs. You have specified that this function is private, which means it can be accessed only from inside of the class, that it will take a single parameter, of type Object, and it will not return anything because you have specified void as the return type.
| 6. | Inside the prodHandler() function, add two TRace statements that will display the name and the price of the items being passed to it.
private function prodHandler(theItems:Object):void { trace (theItems.prodName); trace (theItems.cost); }
| 7. | Click the debug tool to compile the application.
This will display the results of your trace statements in the console. You should see the product name and the product price displayed in the console. You will need to minimize the browser that pops open and choose Window > Console if the console is not open.
|
 |
