• Shyamala Prayaga

learning-flex-fundamental – Part 4

In this topic we will be learning the following

  1. Creating a simple Flex application

  2. Displaying images

  3. Laying out Flex application with containers

  4. Using Panel container

  5. Using controlBar container

  6. Adding user interface controls

  7. Create data binding between components

Creating a simple Flex application

In any MXML file, Application is the default container tag, similarly like we have <HTML> in  html doc or <XML> in a xml doc. Skeleton of an MXML application file contains

  1. XML document type definition(namespace)

  2. Opening and closing <mx:Application> component tag set

Before creating an application, we need to specifying namespace

  1. We need to use xmlns:mx attribute for the namespace, which defines the collection of legal MXML tags

  2. We need to use the http://www.adobe.com/2006/mxml which 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&gt; <manifest>mxml-manifest.xml</manifest> </namespace>

Setting the layout property

An application tag need to have the layout property which defines what type of layout we need to create.

  1. If the layout property is not used in the Application tag, the default layout is vertical. The other layout properties are

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

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

Adding UI Controls

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

  2. UI controls are added in between the application tag set or another container component

Component properties can be specified in two ways

  1. As an attribute of the XML tag

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

  1. As nested tags or nodes


<mx:text>Hello Flexers!</mx:text>


Commenting you MXML code

Flex uses XML style comments which is similar to HTML comments

<! – – this is my comment – – >

Displaying images

To display images in flex, we use the Image control <mx:Image source=”xyg.png”>

Flex supports the following image types

  1. JPEG (non progressive)

  2. GIF (can be transparent)

  3. PNG (can be transparent)

  4. SWF

  5. SVG (can only be embedded at compile time)

Methods for displaying images

There are two ways of displaying  images

  1. Load them dynamically at runtime

  2. Embed them in SWF file

There are 3 ways of specifying image source

  1. Via source property of an Image control ; this will load image dynamically at runtime. Example <mx:Image source=”xyg.png”>

  2. Use Image load() method to add the images dynamically at runtime

  3. Embed them in the SWF at compile time using the @Embed directive; useful when you need instantaneous loading and offline application

Loading dynamically at runtime

Specify the image using the source attribute of the <mx:Image> control <mx:Image source=“myimage.jpg” />

Assign an id to the image to reference in ActionScript  <mx:Image source=“myimage.jpg” id=“imageID” />

Using the  Image load() method

The load() method of the Image class is used to dynamically switch the image. Example

<mx:Image source=“addis.jpg” id=“imageID” width=“250” height=“250” /> <mx:Button label=“Change pic” click=“imageID.load(‘flower.jpg’)” />

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

  1. Image is available immediately, as it is part of the SWF

  2. Very useful for creating application that are able to work offline

Cons of embedding images

  1. Adds to applications SWF size

  2. Slows down application initialization process

  3. Must recompile application every time image changes

  4. Cannot use in data binding calls

Laying out Flex application with containers

  1. A Container defines the rectangular region of the drawing surface of adobe flash player

  2. Within a container, you can define the components ( both controls and containers ) that you want to appear within the container

  3. Components defined within a container are called children of the container

  4. At the root of a Flex Application we have a single container, called the Application container, that represents the entire Flash Player drawing surface. This Application container holds all other containers and components

  5. A container has predefined rules to control the layout of its children, including sizing and positioning

How containers work

Containers use a set of layout rules to position components. The benefit of components are they keeps you from having to worry about positions and additionally allows resizing/re-positioning with browser window size

Box Containers

There are two types of Box containers available to layout your pages

  1. Vertical box (VBox)

  2. Horizontal box (HBox)


The VBox layout allows you to display controls vertically, as in the image below



The HBox layout enables you to lay out your controls horizontally, as in the following image

<mx:HBox> <mx:Label text=”label in a HBox” /> <mx:Button label=”Click me” /> <mx:Label text=”another label” /> </mx:HBox>

Canvas container

The Canvas container is a basic component that enables you to specify absolute position. You can use absolute positioning by specifying x and y properties of the components inside the container. Canvas containers can offer better performance, because client processing power does not have to be used in order to determine object placement

<mx:Canvas> <mx:Label x=“20” y=“10” /> <mx:Label x=“100” y=“10” /> </mx:Canvas>

Specifying positions in a Canvas container

As stated, you must specify the x and y properties of all the child components inside the container; the origin is the top-left corner of the canvas.This x/y positioning is only valid for components on the canvas, not for components inside child containers

Panel container

The Panel container wraps self-container application modules. It includes a panel title, a title bar, a status message and a content area for its children. It is represented in MXML with the Panel tag as follows <mx:Panel title=“Panel title” status=“Panel status”> </mx:Panel>

This is how a Panel container looks

Some Characteristics: of Panel are

  1. Defaults its width and height properties to value that accommodate all children, but will not be larger than allowed by its parent container

  2. Truncates content that is too large and implements scroll bar as appropriate

  3. Has layout property, like the Application container which can take values absolute, vertical (default) and horizontal

  4. Has default padding values of 0 pixels which can be modified

  5. The size of any content placed within a container is relative to that container, not the main Application area.

  6. If the child is sized larger than the parent container, then it will be resized down to fit into the parent container

back to tutorial part 1 | tutorial part 4 – Learning Flex fundamental Section 2


Recent Posts

See All
  • LinkedIn Social Icon
  • Twitter Social Icon

My name is Shyamala pronounced as shaa-ma-la. I am a UX evangelist turned product owner defining experiences and vision for autonomous digital assistants. 

I am a civil engineer by education, and before moving into user experience and product, I worked as an architect with a construction firm for 2 years. My passion for design and building great things for users pushed me into the UX speciality. I am a self-made UX designer with no formal educational background into UX, but my passion helped me enter and succeed in user experience.