Introduction to flex
Upcoming SlideShare
Loading in...5

Introduction to flex






Total Views
Views on SlideShare
Embed Views



1 Embed 9 9



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Introduction to flex Introduction to flex Presentation Transcript

  • 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: ;  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!