In this exercise, you will display images of grocery products. To do this, you must use the Image control to load images dynamically. The Image control can load JPG, GIF, SWF, and PNG files at runtime. If you are developing an offline application that will not access the Internet, you can use the @Embed directive to include the Image control in the completed SWF file.
- Open the FlexGrocer.mxml file that you created in the previous lesson.
If you didn’t complete the previous lesson, you can import the Lesson04/start files. Please refer to the appendix for complete instructions on importing a project should you skip a lesson or if you have a code issue you cannot resolve.
- Switch Flash Builder to Design view by clicking the Design View button.
- Be sure that the Components view is open. If it’s not, choose Window > Components.
- Select the Image control from the Controls folder and drag the control between the Milk and 1.99 Label controls you already
When you drag the Image control from the Components view to the container, Flash Builder automatically adds the MXML to place the Image control on the screen and positions it where you drop it.
- Be sure that the Flex Properties view is open. If it’s not, choose Window > Properties.
The Flex Properties view shows important attributes of the selected component—in this case, the Image control. You can see the Source property, which specifies the path to the Image file. The ID of the Image control references the instance created from the <s:Image> tag or Image class in ActionScript.
- Click the Source folder icon and navigate to the assets directory. Select the dairy_milk.jpg image and click Open.
The image you selected is displayed in Design view. The source property is also added to the MXML tag.
- Click the Scale Mode drop-down menu and change the value to letterbox.
In an ideal world, all the images that you use in the application would be a perfect size, but this is not always the case. Flex can scale the images in two ways. You can choose letterbox to keep the aspect ratio of the original images correct even as their size is adjusted, or you can choose stretch to distort the images to make them fit into any given width and height.
- Switch back to Source view and notice that Flash Builder has added an <s:Image> tag as well as the attributes you specified in the Flex Properties window.
As you can see, it is easy to switch between Source view and Design view, and each one has its advantages. Notice as you switch back to Source view that the Image tag you were working on is now highlighted.
- In the <s:Image> tag that you added, insert an @Embed directive to the Image control.
<s:Image includeIn="State1" scaleMode="letterbox" source="@Embed('assets/dairy_milk.jpg')"/>
The @Embed directive causes the compiler to transcode and include the JPG in the SWF file at compile time. This technique has a couple advantages over the default of loading the image at runtime. First, the image is loaded at the start of the application, so the user doesn’t have to wait for the image to load before displaying when it is needed. Also, this technique can be useful if you are building offline applications that do not need to access the Internet because the appropriate images are included in the SWF file and will be correctly displayed when needed. Remember, though, that using this technique greatly increases the size of your SWF file.
- Save, compile, and run the application.
You should see that the Image and Label controls and button fit neatly into the layout container.