You have a simple display of the grocery products generated by selecting a category. You will now write code to implement a state that shows detailed product information on a user event.
1. | Return to GroceryDetail.mxml.
|
2. | At the bottom of the <mx:Script> block, insert a private function named toggleState(), data typed as void. The function should accept a parameter named state data typed as String. In the function, insert an if..else statement and for the condition check to see whether the parameter state is equal to closed. If the condition is true, set the currentState equal to the empty string, which is the base state. If the condition is false, set the currentState equal to expanded:
private function toggleState(state:String):void{ if(state == "closed"){ this.currentState = ""; } else { this.currentState = "expanded"; } }
As you can see from the code, you will create a state named expanded, which shows details of the product. This function will be used to switch the state between the normal view and the product details view based on user interaction.
|
3. | Surround the Image, two Labels, and the Button in an <mx:Canvas> tag block.
You are nesting this <mx:Canvas> tag inside the root tag Canvas to control the mouse events.
|
4. | In the new <mx:Canvas> tag, add a mouseOver event that calls the toggleState() function passing the String open.
mouseOver="toggleState('open')"
When the user does a mouseOver of product information, the details will be displayed by showing the expanded state.
|
5. | In the new <mx:Canvas> tag, add a mouseOut event that calls the toggleState() function passing the String closed.
mouseOut="toggleState('closed')"
When the user does a mouseOut of product information, the details will disappear.
|
| |
6. | Above the start of the Canvas block you just inserted (not the base tag), insert an <mx:states> block. Set up the basic infrastructure for the state by nesting an <mx:State> block inside the <mx:states> block, set the name property equal to expanded. Then, nested inside of the <mx:State> block, add an <mx:AddChild> block. Finally, nested in the <mx:AddChild> block, add a VBox container with the width set to 100% and the x property set to 200.
<mx:states> <mx:State name="expanded"> <mx:AddChild> <mx:VBox width="100%" x="200"> </mx:VBox> </mx:AddChild> </mx:State> </mx:states>
As you remember from Lesson 3, "Laying Out the Interface," this is the basic structure for using a VBox in a state.
|
7. | In the VBox, insert an <mx:Text> tag. Assign the following properties the associated values to display the product description:
text: {groceryItem.description} width: 50% <mx:Text text="{groceryItem.description}" width="50%"/>
|
8. | Below the <mx:Text> tag, insert an <mx:Label> tag. Assign the following properties the associated values:
text: Certified Organic visible: {groceryItem.isOrganic} <mx:Label text="Certified Organic" visible="{groceryItem.isOrganic}"/>
You use the Boolean value of isOrganic to determine whether the Label should be displayed or not. This way the Label will be displayed only when a product is organic.
|
9. | Insert another <mx:Label> to display if the product is low fat. Position this Label at x, y values 100, 60.
<mx:Label text="Low Fat" x="100" y="60" visible="{groceryItem.isLowFat}"/>
|
10. | In the Add To Cart button, set the visible property to false.
Initially, you want the Button to not be visible because it will be part of the product details.
|
| |
11. | Just below the closing <mx:AddChild> tag and just above the closing <mx:State> tag, use an <mx:SetProperty> tag to have the Add To Cart Button's visible property set to TRue. You set the target by binding the Button's instance name of add.
</mx:AddChild> <mx:SetProperty target="{add}" name="visible" value="true"/> </mx:State>
This will make the Button visible when the expanded state is active.
|
12. | Run the EComm.mxml application file and test the product details functionality.
When you move the mouse pointer over existing product information, you should see more product details. The text "Certified Organic" and "Low Fat" should appear only for certain products, and no extra space should be left if they are not organic or low fat.
|
