Introduction to the Flex Framework

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

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.

Introduction to the Flex Framework

Recommandé

Recommandé

Contenu connexe

Similaire à Introduction to the Flex Framework

Similaire à Introduction to the Flex Framework (20)

Dernier

Dernier (20)

Introduction to the Flex Framework