Displaying Images
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 has the capability to load JPG, SVG, 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.
- Switch Flash Builder to Design view by clicking the Design View button.
- Be sure that the Components view is open. If 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 added.
- Be sure that the Flex Properties view is open. If not, choose Window > Flex Properties.
- Click the Source folder icon and navigate to the assets directory. Select the dairy_milk.jpg image and click Open.
- Click the Scale content drop-down menu and change the value to true.
- Switch back to Source view and notice that Flash Builder has added an <mx:Image> tag as well as the attributes you specified in the Flex Properties window.
- In the <mx:Image> tag that you added, add an @Embed directive to the Image control:
- Save, compile, and run the application.
If you didn’t complete the previous lesson, you can import the Lesson04/start files. Please refer to Appendix A for complete instructions on importing a project should you ever skip a lesson or if you ever have a code issue you cannot resolve.
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.
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 <mx:Image> tag or Image class in ActionScript.
The image you selected is displayed in Design view. The source property is also added to the MXML tag.
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 has the capability to set the width and height of images and can scale the image to fit the size of the Image control.
As you can see, it is easy to switch between Source view and Design view, and each one has its own advantages. Notice as you switch back to Source view, that the Image tag you were working on is now highlighted.
<mx:Image source=”@Embed(‘assets/dairy_milk.jpg’)” scaleContent=”true”/>
The @Embed directive causes the compiler to transcode and include the JPG in the SWF file at compile time. This technique has a couple of 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.
You should see that the Image and Label controls and button fit neatly into the layout container.