In this topic we will be learning the following
- Creating a simple Flex application
- Displaying images
- Laying out Flex application with containers
- Using Panel container
- Using controlBar container
- Adding user interface controls
- 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
- XML document type definition(namespace)
- Opening and closing <mx:Application> component tag set
Before creating an application, we need to specifying namespace
- We need to use xmlns:mx attribute for the namespace, which defines the collection of legal MXML tags
- 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>
<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.
- 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
- Additionally the layout property defaults to your last selection when building an application or component from the appropriate dialog box
Adding UI Controls
- UI controls are used to display user interface type components in an application like Text, text input, buttons, images, combo boxes etc
- UI controls are added in between the application tag set or another container component
Component properties can be specified in two ways
- As an attribute of the XML tag
<mx:Label text=:Hello Flexers!” />
- As nested tags or nodes
<mx:Label>
<mx:text>Hello Flexers!</mx:text>
</mx:Label>
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
- 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 of displaying images
- Load them dynamically at runtime
- Embed them in SWF file
There are 3 ways of specifying image source
- Via source property of an Image control ; this will load image dynamically at runtime. Example <mx:Image source=”xyg.png”>
- 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
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
- Image is available immediately, as 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
Laying out Flex application with containers
- A Container defines the rectangular region of the drawing surface of adobe flash player
- Within a container, you can define the components ( both controls and containers ) that you want to appear within the container
- Components defined within a container are called children of the container
- 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
- 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
There are two types of Box containers available to layout your pages
- Vertical box (VBox)
- Horizontal box (HBox)
VBox
The VBox layout allows you to display controls vertically, as in the image below
<mx:VBox>
<mx:Label text=”label in a VBox” />
<mx:Button label=”Click me” />
<mx:Label text=”another label” />
</mx:VBox>
HBox
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
- Defaults its width and height properties to value that accommodate all children, but will not be larger than allowed by its parent container
- Truncates content that is too large and implements scroll bar as appropriate
- Has layout property, like the Application container which can take values absolute, vertical (default) and horizontal
- Has default padding values of 0 pixels which can be modified
- The size of any content placed within a container is relative to that container, not the main Application area.
- 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
#1 by Ross on July 22, 2010 - 9:47 am
Hi, this section was indeed fruitful. Would be good to see some more examples related as well. Also, i would like to see you having topics around the use of having multiple windows in the same parent window or having it as a separate tab. (Recently, I came across the flexmdi and flexlib library and also the use of super-panel). not sure, what exactly makes difference between all these 3.