Tutorial part 4 – Displaying Images

In this part we will learn the following:

• Creating a simple Flex application
• Displaying images

Creating a simple Flex application

Application is the default container tag. Skeleton of an MXML application file contains

• XML document type definition
• Opening and closing component tag set

Specifying namespace

• use xmlns:mx attribute for the namespace, which defines the collection of legal MXML tags
• http://www.adobe.com/2006/mxml is the uniform resource identifier which associates a prefix (in this case mx) with a manifest file as follows

<namespace>
<url>http://www.adobe.com/2006/mxml</url>
<manifest>mxml-manifest.xml</manifest>
</namespace><namespace> <url>http://www.adobe.com/2006/mxml</url> <manifest>mxml-manifest.xml</manifest>
</namespace>

• Flex-config.mxml is located in installdirectory\Adobe\Flex Builder 3\sdks\3.0.0\frameworks\flex-config.xml

<strong>Setting the layout property</strong>

The layout property defaults to your last selection when building an application or component from the appropriate dialog box

The following are 3 layout property.

• absolute: Visual elements must have specific x, y values or constraints for positioning
• horizontal: Visual elements presented horizontally
• vertical: Visual elements presented vertically

If the layout property is not used in the Application tag, the default layout is vertical

Adding UI Controls

UI Controls are used to display user interface type components like Text, text input, buttons, images, combo boxes etc in an application

All UI tags are add between the application tag set or another container component

Example of the Label control to display a single line of text

<mx:Label text=“Hello Flexers!” />

Specifying components properties

Component properties can be specified in two ways

• As an attribute of the XML tag

<mx:Label text=“Hello” />

• As nested tags or nodes

<mx:Label>
<mx:text> Hello</mx:text>
</mx:Label>

Commenting you MXML code

Flex uses XML style comments which is similar to HTML comments

<! – - this is my comment – - >

<strong>Displaying images</strong>

The following type of images can be used in flex.

• JPEG (non progressive)
• GIF (can be transparent)
• PNG (can be transparent)
• SWF
• SVG (can only be embedded at compile time)

Methods for displaying images

There are two ways to display images in flex.

• Load them dynamically at runtime
• Embed them in SWF file

We can Specify image source in three ways

• Via source property of an Image control ; will load image dynamically at runtime
• Use Image load() method to add the images dynamically at runtime
• Embed them in the SWF at compile time using the @Embed directive; useful when you need instantaneous loading and offline application

Displaying images Examples

1) Loading dynamically at runtime

• Specify the image using the source attribute of the control
• Image is loaded at runtime

<mx:Image source=“myimage.jpg” />

• Assign an id to the image to reference in ActionScript

<mx:Image source=“myimage.jpg” id=“imageID” />

2) Using the load() method

Dynamically switch out the image using the load() method of the Image class as mentioned below

<mx:Image source=“addis.jpg” id=“imageID” width=“250” height=“250” />

<mx:Button label=“Change pic” click=“imageID.load(‘flower.jpg’)” />

3) Embedding images at compile time

You can embed images at compile time for instantaneous loading
To embed, use the @Embed directive when specifying the image source

<mx:Image source=@Embed(‘../images/myImage.jpg’)” />

Pros of embedding image

• Image is available immediately, it is part of the SWF
• Very useful for creating application that are able to work offline

Cons of embedding images

• Adds to applications SWF size
• Slows down application initialization process
• Must recompile application every time image changes
• Cannot use in data binding calls

Part 5: Laying out Flex application with containers