Introduction to flex
-
Upload
parambir-singh -
Category
Technology
-
view
297 -
download
0
Transcript of 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!