Flex is an open source framework for building rich Internet applications using MXML and ActionScript. It includes various UI components like containers, controls, and charting components. Flex applications are compiled from MXML and ActionScript files into SWF files that run in Flash Player. MXML provides a declarative way to define the user interface while ActionScript is used for logic and interactivity. Flex supports data binding, styling with CSS, skinning, states, effects and transitions to create rich and dynamic applications.

1. Introduction to Flex
Parambir Singh

2. 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

3. How Flex Works

4. 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.

5. 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:

6. 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’)” />

7. 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}” />

8. 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

9. 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

10. 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)

11. 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.

12. 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.

13. 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);

14. 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.

15. 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

16. 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>

17. 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.

18. 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>

19. 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.

20. Thank You!