Home / Articles / Adobe Flex 4: Training from the Source, Volume 1 - Using Simple Controls

Adobe Flex 4: Training from the Source, Volume 1 - Using Simple Controls

Chapter Description

An important part of any application is the user interface, and Adobe Flex contains elements such as buttons, text fields, and radio buttons that make building interfaces easier. This lesson shows you how to add user interface elements to enable the customer to find more details about the grocery items and begin the checkout process.

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.

  1. 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.
  2. <s:State name=”expanded”/>

    You will define this third state for the application to show details of a product.

  3. 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 below the existing white area. In the Properties view, verify that the In states value is expanded, the X value is 200, and the Width value is 100 percent. Leave the Y and Height values blank.
  4. This new VGroup needs to be positioned as a child of the main application. If the VGroup in your Design view isn’t rendering like the one in the previous image, switch to Source view, and move the

    <s:VGroup includeIn=”expanded” width=”100%” x=”200”>

    to just above the closing </s:Application> tag, so the end of the file reads like this:

    	<s:VGroup includeIn=”expanded” width=”100%” x=”200”>
  5. Switch back to Design view. Ensure that the expanded state is selected in the States view and 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.
  6. 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.

  7. 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.
  8. The Label control allows you to display a single line of text. 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.

  9. 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.
  10. 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.

  11. Switch back to Source view. Notice that Flash Builder has added the RichText and two Label controls you added in Design view.
  12. Note that all the code created in Design view is displayed in Source view.

  13. Locate the <s:RichText> tag in the expanded state and set the width property to 50%.
  14. <s:RichText text=”Text” width=”50%”/>
  15. Find the <mx: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.
  16. <mx:Image source=”@Embed(‘assets/dairy_milk.jpg’)”
    	scaleContent=”true” 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 will create later in this lesson. You will modify this state so it displays more information about the item the user is interested in purchasing.

    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.

  17. In the same <mx:Image> tag, add a mouseOut event that will change the currentState back to the initial state State1.
  18. <mx:Image source=”@Embed(‘assets/dairy_milk.jpg’)” scaleContent=”true”

    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.

  19. 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.

4. Using Data Binding to Link a Data Structure to a Simple Control | Next Section Previous Section