Building a Detail View
In this exercise, you will use a rollover event to display a detailed state of the application. You will explore different simple controls to display text and review how application states work.
- Be sure that you are still in Source view in Flash Builder. Near the top of the file, locate the <s:states> block, which contains definitions for the State1 and cartView states. Add a new state definition named expanded.
<s:State name="expanded"/>
You will define this third state for the application to show details of a product.
- Switch to Design view, set the state selector to expanded, and drag a VGroup from the Layout folder of the Components view into the application. (To position this correctly, you should
drag the VGroup into the gray area below the existing white background.) In the Properties view, verify that the In state’s
value is expanded, the X value is 200, and the Width value is 100 percent. Remove the Y and Height values so that the fields
are blank.
This new VGroup needs to be a child of the main application. Sometimes, positioning items correctly can be difficult in Design view, so switch to Source view and ensure the VGroup is positioned correctly. It should be just above the closing </s:Application> tag, so the end of the file reads like this:
</s:VGroup> </s:HGroup> <s:VGroup includeIn="expanded" width="100%" x="200"> </s:VGroup> </s:Application>
- Switch back to Design view. Ensure that the expanded state is selected in the States view. Drag an instance of the RichText
control from the Controls folder of the Components view into the new VGroup you created in the previous step.
The RichText control enables you to display multiple lines of text, which you will need when you display the product description that will ultimately come from an XML file. You will use data binding in the next section to make this RichText control functional. For now, you are just setting up the layout.
- Drag an instance of the Label control from the Components view to the bottom part of the VGroup container you created. Populate
the text property with the words Certified Organic.
Later on, you will modify the visible property of this component so the contents of the text property are displayed only when a grocery item is certified organic.
- Drag another instance of the Label control from the Components view to the bottom part of the VGroup container you created.
Populate the text property with the words Low Fat.
Later, you will set the visible property of this label to true if the grocery item is low fat, or false if it is not.
- Switch back to Source view. Notice that Flash Builder has added the RichText and the two Label controls you added in Design
view.
Note that all the code created in Design view is displayed in Source view.
- Locate the <s:RichText> tag in the expanded state and set the width property to 50%.
<s:RichText text="RichText" width="50%"/>
- Find the <s:Image> tag that is displaying the milk image. Add a mouseOver event to the tag that will change the currentState to expanded. Remove the includeIn attribute.
<s:Image scaleMode="letterbox" source="@Embed('assets/dairy_milk.jpg')" mouseOver="this.currentState='expanded'"/>
mouseOver simply means that when the user rolls the mouse anywhere over the dairy_milk.jpg Image tag, the ActionScript will execute. In this ActionScript, you are referring to the expanded state, which you created earlier in this lesson.
If you had left the includeIn attribute in the image tag, the milk image would appear only in the initial state of State1. Therefore, when you mouse over the image and switch it to the expanded state, the milk bottle image will disappear. By removing the includeIn attribute, you are instructing the application to allow this image to be used in all states.
- In the same <s:Image> tag, add a mouseOut event that will change the currentState back to the initial State1 state.
<s:Image scaleMode="letterbox" source="@Embed('assets/dairy_milk.jpg')" mouseOver="this.currentState='expanded'" mouseOut="this.currentState='State1'"/>
When the user moves the mouse away from the dairy_milk.jpg image, the detailed state no longer displays, and by default the application displays only the images and labels for the control, which is expressed with an empty string.
- Save and run the application.
When you roll the cursor over the milk bottle image, you see the RichText and Label controls you created in the expanded state.