Flex basics

-> we can use two languages to write Flex applications: MXML and ActionScript.

-> MXML is an XML markup language that you use to lay out user interface components.

-> Like HTML, MXML provides tags that define user interfaces. MXML will seem very familiar if you have worked with HTML.

-> MXML is more structured than HTML, and it provides a much richer tag set.

-> One of the biggest differences between MXML and HTML is that MXML-defined applications are compiled into SWF files and rendered by Adobe® Flash® Player or Adobe® AIR™, which provides a richer and more dynamic user interface than page-based HTML applications.


Simple Flex Application :

<?xml version="1.0"?>
<!-- mxml\HellowWorld.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Panel title="My Application" 
        paddingTop="10" 
        paddingBottom="10"
        paddingLeft="10" 
        paddingRight="10"
    >
        <mx:Label text="Hello World!" fontWeight="bold" fontSize="24"/>
    </mx:Panel>
</mx:Application>


Why using UTF-8 in encoding format :

-> UTF-8 provides a unique number for every character in a file, and it is platform-, program-, and language-independent.


<mx:Application> tag :

-> It  represents a Application container.

-> A container is a user-interface component that contains other components and has built-in layout rules for positioning its child components.

-> By default, an Application container lays out its children vertically from top to bottom


The MXML properties :

-> We can configure initial state of an component using mxml properties. And We can change this properties using Actionscript at run time.


Relationship of MXML tags to Actionscript classes :

-> Adobe implemented Flex as an ActionScript class library. That class library contains components (containers and controls), manager classes, data-service classes, and classes for all other features.

-> MXML tags correspond to ActionScript classes or properties of classes. Flex parses MXML tags and compiles a SWF file that contains the corresponding ActionScript objects.

For example,

<mx:Button label="Submit"/>

-> When you declare a control using an MXML tag, you create an instance object of that class. This MXML statement creates a Button object, and initializes the label property of the Button object to the string "Submit".

Flex Basics

Flex basics:

Use of Name space in mxml :

1. To specify language version

2. To provide scope for mapping XML tag name to ActionScipt class name or CSS style tag to ActionScript class name

3. And provide details to compiler, where local sources located for custom component.


Name space :

1. Flex 2 and 3 -> MXML 2006  which contains language version and mapping for flex framework component

2. In Gumbo, new language features are added and updated to MXML 2009 [ xmlns:fx="http://ns.adobe.com/mxml/2009" ]

3. Components are described in their own namespaces,

    -> Flex 3 or MX components are in mxml library namespace. [ xmlns:mx="library://ns.adobe.com/flex/mx" ]

    -> New Gumbo spark components are in spark component name space. [ xmlns:s="library://ns.adobe.com/flex/spark" ]


For flex 3,

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://ns.adobe.com/mxml/2006">


For flex 4, Gumbo spark component,

<?xml verison="1.0" encoding="utf-8"?>

<s:Applicaiton xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx">


                                                                                - will continue in next post..

Flex Event life cycle

Flex Instantiation Life Cycle and Event Flow

DIGG IT!     Published Thursday, February 08, 2007 at 8:41 AM . Flex is an event driven programming model, everything (and I mean everything) happens due to an event. When developers first take a look at MXML it is often difficult to see the event flow or instantiation life cycle of an application given the XML markup. This is especially confusing to HTML and Flash developers because the development paradigm of Flex does not match what they are used to. HTML instantiates top to bottom where Flash executes across frames starting at Frame0. Flex is a bit different.

When I learned Flex, I struggled with understanding event flow and instantiation in MXML. I was puzzled because I really didn't understand what event would kick start the logic or when events would fire. The key is understanding the event basics and seeing the initialization and event flow for yourself.

So lets look at a simple application in MXML.

Sample Application

Sample Application Source



When this application runs it dumps the instantiation and event flow into the TextArea via a binding. This allows us to see all events within the application occur independent of component instantiation order. As you can see in the application output there is a consistent order of events when this application starts. Here is the basic output up to the applicationComplete event. (The EventFlow0 object is the Application tag of the base app. The times to the left are the from the execution clock of the Flash Player.)

167ms >> EventFlow0.preinitialize
183ms >> EventFlow0.outTextArea.initialize
187ms >> EventFlow0.HelloButton.initialize
188ms >> EventFlow0.GoodByeButton.initialize
189ms >> EventFlow0.ClearButton.initialize
189ms >> EventFlow0.initialize
243ms >> EventFlow0.outTextArea.creationComplete
243ms >> EventFlow0.HelloButton.creationComplete
243ms >> EventFlow0.GoodByeButton.creationComplete
244ms >> EventFlow0.ClearButton.creationComplete
244ms >> EventFlow0.creationComplete
246ms >> EventFlow0.applicationComplete

Once the applicationComplete event it triggered, the components fire events when mouseEvents are dispatched to the components individually.

1807ms >> EventFlow0.HelloButton.rollOver
2596ms >> EventFlow0.HelloButton.rollOut
2954ms >> EventFlow0.HelloButton.rollOver
3170ms >> EventFlow0.HelloButton.rollOut
3543ms >> EventFlow0.HelloButton.rollOver
4052ms >> EventFlow0.HelloButton.click > Hello!
4267ms >> EventFlow0.HelloButton.click > Hello!
4474ms >> EventFlow0.HelloButton.click > Hello!
4569ms >> EventFlow0.HelloButton.rollOut
4907ms >> EventFlow0.GoodByeButton.click > Goodbye!
5130ms >> EventFlow0.GoodByeButton.click > Goodbye!

There is also some great documentation on the instantiation life cycle located here. Understanding this instantiation process is very important for Flex development. The example posted contains view source so feel free to take a peek and play with the events yourself.

So now you know the instantiation life cycle and event flow! I will be covering DOM events and event flow next. Event do not just happen at the component but they flow across the displaylist in phases.