Introduction to flex
Upcoming SlideShare
Loading in...5
×
 

Introduction to flex

on

  • 405 views

 

Statistics

Views

Total Views
405
Views on SlideShare
396
Embed Views
9

Actions

Likes
0
Downloads
1
Comments
0

1 Embed 9

http://www.linkedin.com 9

Accessibility

Categories

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.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
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:  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!