O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Introduction to flex

383 visualizações

Publicada em

Publicada em: Tecnologia
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

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!