Introduction to Flex          Parambir Singh
What is Flex?Free open source framework built for Flash Player consisting of MXML           XML Based declarative langua...
How Flex Works
Flex Compilation   Flex supports two compilers       mxmlc: To compile Flex applications       compc: To compile Flex c...
MXML v/s ActionScript   MXML:       <mx:Button id=“myButton” label=“I’m a button” />   ActionScript:       var myButto...
MXML   MXML is XML based declarative language   Can contain only one root node   Root node can be one of the following ...
Data Binding   Used to link one component property to some other component’s    property   When one property changes, th...
Containers   UI Elements to hold other containers or controls   Two categories of containers       Layout containers   ...
Layout Containers   Flex has many layout containers including       Canvas       Grid       HBox/VBox       HDividedB...
Flex Controls   Controls are User Interface components – button, list, checkbox,    radio button etc   Flex library cont...
Flex Controls   Buttons       Button, ButtonBar, LinkBar etc.   List       List, HorizontalList, TileList etc.   Tree...
Flex Controls   Data provider controls       Collection of objects (similar to array, more like ArrayList in Java)     ...
CSS Styling   Appearance of controls can be modified through style properties   Can also be styled using CSS       Both...
Skinning   Refers to changing the way a component looks by replacing the    assets that make up visual appearance.   Two...
States   A flex application can have different views (called states)   Application can transition from one state to anot...
States   There is always a “default state” or “base state” of the application   State changes are easy to define       ...
Effects   Flex framework includes many standard effects       Blur, Move, Fade, Dissolve, Glow etc.   Defining an effec...
Transitions   Transitions allow you to apply effects to state view changes.          <mx:Transition fromState=“*” toStat...
Charting Components   Not part of Flex SDK – Available with Flex Builder Professional   9 types of charts available    ...
Thank You!
Upcoming SlideShare
Loading in …5
×

Introduction to flex

350 views
315 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
350
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Introduction to flex

  1. 1. Introduction to Flex Parambir Singh
  2. 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. 3. How Flex Works
  4. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 20. Thank You!

×