Introduction to flex

Introduction to Flex

Parambir Singh

What is Flex?Free open source framework built for Flash Player consisting of MXML

XML Based declarative language to define UI Similar to HTML/XHTML

ActionScript 3 Flex Class Library

Containers Controls Charting Components

How Flex Works

Flex Compilation Flex supports two compilers

mxmlc: To compile Flex applications compc: To compile Flex components

The compiler first compiles MXML files to ActionScript (AS) classes. Each MXML tag corresponds to an AS class.

Then the generated AS files along with other (user defined) AS files are compiled to Flash byte code (SWF file).

The SWF file runs in Flash Player.

MXML v/s ActionScript MXML:

<mx:Button id=“myButton” label=“I’m a button” /> ActionScript:

var myButton:Button;myButton = new Button();myButton.label = “I’m a button”;addChild(myButton);

Output:

MXML MXML is XML based declarative language Can contain only one root node Root node can be one of the following

Application <mx:Application> Used to define Flex applications

Component Any component tag (except ‘Application’) e.g. <mx:Canvas>, <mx:Panel> Used to create custom components Similar to extending a class in Java or AS

Supports inline event handlers <mx:Button id=“myButton” click=“Alert(‘Hi’)” />

Data Binding Used to link one component property to some other component’s

property When one property changes, the other property is updated

automatically Example:

<mx:TextInput id=“input” /><mx:Text id=“output” text=“{input.text}” />

Containers UI Elements to hold other containers or controls Two categories of containers

Layout containers Used to lay out children according to some rules (horizontally/vertically/grid/tile

etc) Control sizing/positioning of their children

Navigation containers Control user movement/navigation among multiple child containers

Layout Containers Flex has many layout containers including

Canvas Grid HBox/VBox HDividedBox/VDividedBox

Canvas container uses absolute layout Explicitly set x,y position and size of children Supports constraints based layout

Other containers support automatic layout based on their type HBox/HDividedBox lays out children horizontally Grid lays out children in a grid

Support scroll bars

Flex Controls Controls are User Interface components – button, list, checkbox,

radio button etc Flex library contains more than 30 controls Many other open source/commercial controls are available Most controls have

MXML API for declaring control, its properties and events AS API for calling methods and setting properties at runtime Customizable appearance (styles/skinning)

Flex Controls Buttons

Button, ButtonBar, LinkBar etc. List

List, HorizontalList, TileList etc. Tree and Grid

Tree, DataGrid etc. Data Entry

Label, Text, TextInput, TextArea, RichTextEditor etc.

Other Alert, SWFLoader, ColorPicker, etc.

Flex Controls Data provider controls

Collection of objects (similar to array, more like ArrayList in Java) Provide layer of abstraction so multiple controls can use one data provider

(model/view) Examples

<mx:XML> <mx:ArrayCollection> <mx:XMLListCollection>

Both containers and controls can be extended to make custom containers/controls.

CSS Styling Appearance of controls can be modified through style properties Can also be styled using CSS

Both inline and external stylesheets supported Similar concept to HTML CSS. However Flex CSS doesn’t support all

HTML CSS options. Styling can be done at runtime using StyleManager class

StyleManager.getStyleDeclaration(“Button”).setStyle(“fontsize”, 24);

Skinning Refers to changing the way a component looks by replacing the

assets that make up visual appearance. Two ways to skin a component

Graphical Skinning – Use bitmap/vector graphics to change component appearance

Programmatic Skinning – Graphics are drawn using AS to change appearance of the component.

States A flex application can have different views (called states) Application can transition from one state to another During a change of state

Children can be added/removed Children can be repositioned Properties of children can be changed

States There is always a “default state” or “base state” of the application State changes are easy to define

<mx:State name=“Register”><mx:AddChild relativeTo=“{vBox}”> <mx:CheckBox id=“checkbox” label=“Sure?” /></mx:AddChild></mx:State>

Effects Flex framework includes many standard effects

Blur, Move, Fade, Dissolve, Glow etc. Defining an effect in MXML is pretty easy

<mx:Move id=“moveEffect” target=“{textInput1}” xFrom=“-100” />

Effects can be played using two ways: Manually through AS:

moveEffect.play(); Using triggers

<mx:TextInput id=“textInput1” creationCompleteEffect=“{moveEffect}” />

Flex components support many triggers E.g. creationCompleteEffect, focusInEffect, focusOutEffect, mouseDownEffect, mouseUpEffect etc.

Transitions Transitions allow you to apply effects to state view changes.

<mx:Transition fromState=“*” toState=“B”><mx:Rotate target=“{vBox}” angleFrom=“0” angleTo=“360” /></mx:Transition>

During a transition, effects can be applied in parallel or sequence to multiple targets

<mx:Transition fromState=“*” toState=“*”><mx:Parallel targets=“{[windowA, windowB, windowC]}”> <mx:Move/> <mx:Resize/></mx:Parallel></mx:Transition>

Charting Components Not part of Flex SDK – Available with Flex Builder Professional 9 types of charts available

Area, Bar, Column, Line, Pie etc. Can be extended to provide interactivity Can be styled/skinned to customize appearance Can have a variety of effects/transitions applied.

Thank You!