Flex 3: Developing Rich InternetApplications
Adobe Flex WorkshopTopics•   Understanding course format•   Reviewing course outline
Understanding course formatThis course is divided many units, most of which presents new information andcontain demonstrat...
Reviewing course outlineThis course is separated into following modules:•   Understanding RIA•   Introduction to Flex 3•  ...
Rich Internet ApplicationIn this unit, you will understand what a Rich Internet application (RIA)is. You will understand t...
Rich Internet ApplicationObjectivesAfter completing this unit, you shall be able to:•   Rich Internet Application•   RIA t...
Rich Internet ApplicationTopicsIn this unit, you will learn the following:•   Understanding RIA•   Understanding the found...
Understanding RIA•   In 2002, Macromedia coined the term rich Internet application (RIA)•    Rich Internet Applications (R...
Concept of RichnessRichness in Data model•   Support of sophisticated data models: eg, XMLList, ArrayList•   Ability to se...
Concept of RichnessRichness in User Interface•   RIA offers a very rich set of user interface controls which can intellige...
Summary
Adobe Flex 3In this unit, you will understand what Adobe Flex is and how Adobe Flex andAdobe flash player help in construc...
Adobe Flex 3ObjectivesAfter completing this unit, you shall be able to:•   Explain the different technologies in Adobe Fle...
Adobe Flex 3TopicsIn this unit, you will learn the following:•   Understanding Adobe Flex•   Adobe Flex product line•   Fl...
Understanding Adobe Flex•   Adobe Flex is a RIA tool that enables us to develop RIA in a quick delivery    model resulting...
Where is Flex used
How Flex works
How flex works in the browser
Flex is…
Adobe Flex SDK•   Adobe Flex SDK included Flex framework and Flex compiler, enabling you    to Freely develop and deploy F...
Flex Architecture
Flex enables…
Flex makes you
Flex ResourcesFlex tutorialshttp://www.tutorom.com/courses/460/Adobe-Flex-2-tutorials-Flex-2-    programming-tutorials.htm...
Summary
Flex BuilderIn this unit, you will understand the Flex builder and its workbenches. You willlearn how Flex builder is used...
Flex BuilderObjectivesAfter completing this unit, you shall be able to:•   Understand the Flex builder and its workbenches...
Flex BuilderTopicsIn this unit, you will learn the following:•   Understanding Adobe flex builder•   Flex builder workbenc...
Understanding Adobe Flex Builder•   Adobe Flex Builder is eclipse based development tool enabling     – Intelligent coding...
Flex builder workbenches•   The term workbench refers to the flex builder development environment.•   The Flex builder wor...
Flex builder workbenchesUnderstanding Perspectives•   Perspectives includes combination of views and editors that are suit...
Flex builder workbenchesUnderstanding Editors•   An editor is the visual component in the workbench that is typically used...
Flex builder workbenchesUnderstanding Views•   A view supplies support tool when modifying a file in editor•   Navigator v...
Source and design mode selectors      perspectives                         views     editor
Creating a project and your firstapplicationTo begin development, you need to learn the following•   Create a Flex project...
Creating a project•   A project is a grouping of resources that make up a flex application•   When a project is created a ...
Select File > new > Flex project         Choose a project name and location
Specify output folder. The default is bin-debug folder
Choose project build paths
Using the main application file•   The main application file contains the <mx:Application> container set tag     – Each ap...
Running the application file•   Run the application by clicking the Run button. Run button is the green button on the    t...
Main.mxml    MXML                           ActionScriptClient withFlash player               Main.swf      SWF
Walkthrough 1: creating a mainapplication and running it
Summary
Learning Flex fundamentalIn this section, you will develop your first flex application and understand thebasic infrastruct...
Learning Flex fundamentalObjectivesAfter completing this unit, you shall be able to:•   Create a flex application (MXML fi...
Learning Flex fundamentalTopicsIn this unit, you will learn the following:•   Creating a simple Flex application•   Displa...
Creating a simple Flex application•   Application is the default container tag.•   Skeleton of an MXML application file co...
Creating a simple Flex applicationSpecifying namespace•   use xmlns:mx attribute for the namespace, which defines the coll...
Creating a simple Flex applicationSetting the layout property•   The layout property defaults to your last selection when ...
Creating a simple Flex applicationAdding UI Controls•   Used to display user interface type components in an application  ...
Creating a simple Flex applicationSpecifying components propertiesComponent properties can be specified in two ways• As an...
Creating a simple Flex applicationCommenting you MXML codeUse XML style comments which is similar to HTML comments<! - - t...
Walkthrough 2: creating your firstFlex application
Displaying images•   Use the Image control to incorporate•   JPEG (non progressive)•   GIF (can be transparent)•   PNG (ca...
Displaying imagesMethods for displaying images•   Two ways to display images     – Load them dynamically at runtime     – ...
Displaying imagesLoading dynamically at runtime•   Specify the image using the source attribute of the <mx:Image> control•...
Displaying images•   Using the load() method•   Dynamically switch out the image using the load() method of the Image    c...
Displaying imagesEmbedding images at compile time•   You can embed images at compile time for instantaneous loading•   To ...
Displaying imagesPros of embedding image•   Image is available immediately, it is part of the SWF•   Very useful for creat...
Walkthrough 3: Adding an image toan application
Laying out Flex application withcontainers•   A Container defines the rectangular region of the drawing surface of adobe  ...
Laying out Flex application withcontainersHow containers work•   Containers use a set of layout rules to position componen...
Application layout=“vertical”                          Image: Cafe Townsend banner HBox   VBox    Tile: Appetizers        ...
Laying out Flex application withcontainersBox ContainersThere are two types of Box containers available to layout your pag...
Laying out Flex application withcontainersVBoxThe VBox layout allows you to display controls vertically, as in the image b...
Laying out Flex application withcontainersHBoxThe HBox layout enables you to lay out your controls horizontally, as in the...
Laying out Flex application withcontainersCanvas container•   The Canvas container is a basic component that enables you t...
Laying out Flex application withcontainersSpecifying positions in a Canvas container•   As stated, you must specify the x ...
Walkthrough 4: Using basic layouts
Using Panel container•   The Panel container•   Wraps self-container application modules•   includes a panel title, a titl...
Using Panel container                        status     title
Using Panel containerUsing the Panel tag<mx:Panel title=“Panel title” status=“Panel status”>   …………</mx:Panel>Characterist...
Using Panel containerSizing container content•   The size of any content placed within a container is relative to that    ...
Panel width set to 600                         Text width set to 100%                         relative to PanelPanel width...
Walkthrough 5: separatingapplication modules into Panels
Using ControlBar containerThe ControlBar container• Holds components that can be shared by the other children in the Panel...
Using ControlBar container•   Has default padding value of 10 pixels•   Had horizontalAlign and VerticalAlign properties t...
Using ControlBar container             ControlBar
Walkthrough 6: using ControlBarcontainer
Adding user interface controls•   Controls are user interface components such as Button, TextArea,    ComboBox, TextInput•...
The following image shows several controls used in a Form container:A. Form container B. TextInput controls C. ComboBox co...
Adding user interface controls•   Text controls•   Menu based controls•   Data Driven controls
Alert            Displays a pop-up alertButton           Displays a variable-size button that can include a label, an     ...
HSlider/VSlider   Lets users select a value by moving a slider thumb                  between the end points of the slider...
RadioButton       Displays a group of RadioButton controls with a single clickGroup             event listener.RichTextEdi...
Creating data binding betweencomponents•   Data binding is the process of tying or binding data of one object to another• ...
Creating data binding betweencomponentsCreating Data binding•   Using curly braces syntax     – Assigns a property a dynam...
Creating data binding betweencomponents•   Using <mx:Binding> tag<mx:Label id=“labelOne” text=“Hello” /><mx:Label id=“labe...
Walkthrough 7: creating databinding
Summary
View StatesIn this section, you will learn to customize the look and feel of flex applications with styles, behaviors and ...
View StatesObjectivesAfter completing this unit, you shall be able to:•   Create view states using flex builders design mo...
View StatesTopicsIn this unit, you will learn the following:•   Understanding view states•   Controlling view states•   Re...
Understanding view states•   A view state defines a particular view of a component•   View state define distinct presentat...
Understanding view statesCreating view states•   Create a base state, which is default layout of the application•   Modify...
Understanding view statesBenefits of using view states•   Flex manages the switching of states•   Components can be shared...
Understanding view statesCreating a new state•   To manage and create state we need 2 states     – Base state     – New st...
This is my base stateChange state on click of this linkButton
In Design mode, click the New State button in the States view (Window > States).
The New State dialog box appears
Walkthrough 8: Creating states
Understanding view states•   State implementation details•   To change state, set the currentState property value to the n...
Understanding view states<mx:Button id=“b1” label=“Add a button” click=“currentState=‘forms’” /><mx:Button id=“b2” label=“...
On click event the changeState willtrigger the new forms state view
On click event the changeState willtrigger the base state view
Understanding view statesThe following table shows the classes that you use to create states AddChild and       Adds or re...
Walkthrough 9: Switching states
Reviewing the generated MXMLcodeThe MXML tag used to manage the view states are• The states tag – wraps all of the state i...
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal"><mx:states><mx:State name="forms"><mx:AddChi...
Walkthrough 10: implementing viewstates using MXML
Summary
Application navigationIn this section, you will learn how to implement and manipulate navigation containers individually a...
Application navigationObjectivesAfter completing this unit, you shall be able to:•   Understand what navigator container a...
Application navigationTopicsIn this unit, you will learn the following:•   Understanding navigator containers and controls...
Understanding navigator containersand controlsThere are two types of containers•   Layout container - Control the sizing a...
Understanding navigator containersand controlsNavigator container basics•   The direct children of a navigator container m...
Using the LinkBar control•   The LinkBar control•   Defines a horizontal row of linkButton controls•   Is a navigator cont...
Using the LinkBar control <mx:LinkBar> <mx:dataProvider> <mx:String>Home</mx:String> <mx:String>Contact Us</mx:String> <mx...
Using the TabBar control•   The TabBar control•   Defines a horizontal (default) or vertical rows of tabs•   Has default p...
Using the TabBar control <mx:TabBar labelField="menuName"> <mx:dataProvider> <mx:Object menuName="Home" /> <mx:Object menu...
Using the ViewStack controlThe ViewStack container• Is made up of a collection of child containers that are stacked on top...
A. Child container 1 active B. Child container 0 active
Using the ViewStack control
<mx:VBox><!-- Create a LinkBar control to navigate the ViewStack container. --><mx:LinkBar dataProvider="{myViewStack}" bo...
Walkthrough 11:Create navigationwith TabBar and ViewStack control
Using TabNavigator container•   The TabNavigator works the same way as ViewStack.•   Has its own child so no need to provi...
Using TabNavigator container
<mx:TabNavigator borderStyle="solid" >    <mx:VBox label="Accounts"      width="300"      height="150">      <!-- Accounts...
Using Accordion container•   The Accordion works the same way as ViewStack.•   Has its own child so no need to provide Vie...
Using Accordion container
<mx:Accordion borderStyle="solid" >    <mx:VBox label="Accounts"      width="300"      height="150">      <!-- Accounts vi...
Walkthrough 12:creating navigationusing Accordion and TabNavigator
Summary
Styling your Application with CSSIn this section, you will learn to customize the look and feel of flex applications with ...
Styling your Application with CSSObjectivesAfter completing this unit, you shall be able to:•   Modifying the default Flex...
Styling your Application with CSSTopicsIn this unit, you will learn the following:•   Customizing Flex application look an...
Customizing Flex application lookand feel•   You can modify almost every aspect of the look and feel and user    interacti...
Customizing Flex application lookand feelAbout CSS styles in Flex•   You can use CSS styles to modify your Flex user inter...
Customizing Flex application lookand feelExternal Styles•   External styles are defined in a separate file and can be used...
Customizing Flex application lookand feelEmbedded Styles•     Embedded styles are defined in an MXML file and can only be ...
Customizing Flex application lookand feelInline Styles•   Inline styles are defined in an MXML tag and can only be used in...
Customizing Flex application lookand feelChanging flex control style defaults – skins•   Skins are graphics displayed on c...
Modifying styles to change the lookand feel•   Flex provides several ways of setting component styles•   Using MXML compon...
Modifying styles to change the lookand feelSetting styles inline using MXML component attributes•   You have already set s...
Modifying styles to change the lookand feelSetting style in ActionScript for individual components using the setStyle()met...
Modifying styles to change the lookand feelSetting style using Cascading style sheets (CSS)•   Creating CSS type selectors...
Using themes•   Flex provides several themes that can be applied to the overall application•   Use the themeColor style to...
Walkthrough 13:Styling yourApplication
Applying behaviors to components•   A behavior is a combination of a trigger paired with an effect•   Behaviors let you ad...
Applying behaviors to componentsUnderstanding behaviors basics•   Behavior has two parts     – A trigger – an action, such...
Applying behaviors to componentsAbout applying behaviors•   Apply simple behavior by setting the trigger name property of ...
Applying behaviors to components•   Apply a simple behavior by setting the trigger name property of the    component to th...
Applying behaviors to components•   Define a reusable effect instance     – First use the MXML component for the effect   ...
Walkthrough 14:ApplyingBehaviors
summary
Working with Datagrid•   The DataGrid control is a list that can display more than one column of    data•   It is a format...
Working with DatagridThe DataGrid control provides the following features:•   Resizable, sortable, and customizable column...
Working with DataGridCreating a DataGrid control•   You use the <mx:DataGrid> tag to define a DataGrid control in MXML•   ...
Working with DataGrid <mx:DataGrid>   <mx:ArrayCollection>   <mx:Object>   <mx:Artist>Pavement</mx:Artist>   <mx:Price>11....
Walkthrough 15: Working withDatagrid
Specifying columnsSpecifying columns•   Each column in a DataGrid control is represented by a DataGridColumn    object•   ...
Specifying columns<mx:DataGrid><mx:ArrayCollection><mx:Object Artist="Pavement" Price="11.99" Album="Slanted and Enchanted...
Walkthrough 16: Adding Columns
Summary
Adobe Flex - Developing Rich Internet Application Workshop Day 2
Adobe Flex - Developing Rich Internet Application Workshop Day 2
Adobe Flex - Developing Rich Internet Application Workshop Day 2
Adobe Flex - Developing Rich Internet Application Workshop Day 2
Adobe Flex - Developing Rich Internet Application Workshop Day 2
Upcoming SlideShare
Loading in...5
×

Adobe Flex - Developing Rich Internet Application Workshop Day 2

1,899

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,899
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Adobe Flex - Developing Rich Internet Application Workshop Day 2"

  1. 1. Flex 3: Developing Rich InternetApplications
  2. 2. Adobe Flex WorkshopTopics• Understanding course format• Reviewing course outline
  3. 3. Understanding course formatThis course is divided many units, most of which presents new information andcontain demonstration, walkthrough and a lab. At the end of each unit you willfind a summary and a short review to test your knowledge of the unitscontent. The following icons are used throughout the guide Concepts introduce new information Labs let you practice new skills on your own Walkthroughs guide you, through procedures
  4. 4. Reviewing course outlineThis course is separated into following modules:• Understanding RIA• Introduction to Flex 3• Understanding Flex builder• Learning Flex fundamentals – Lay it out with containers – Binding Data – User interface• Using View States for application design• Application Navigation• Customizing your application (CSS)• Creating Data entry forms• Working with data (DataGrid)• Retrieving XML data with HTTPService
  5. 5. Rich Internet ApplicationIn this unit, you will understand what a Rich Internet application (RIA)is. You will understand the Anatomy of RIA.
  6. 6. Rich Internet ApplicationObjectivesAfter completing this unit, you shall be able to:• Rich Internet Application• RIA technologies
  7. 7. Rich Internet ApplicationTopicsIn this unit, you will learn the following:• Understanding RIA• Understanding the foundation of RIA
  8. 8. Understanding RIA• In 2002, Macromedia coined the term rich Internet application (RIA)• Rich Internet Applications (RIA) combine the flexibility, responsiveness, and ease of use of desktop applications with the broad reach of the web.• RIA provide a dynamic web experience that is rich and engaging, as well as interactive
  9. 9. Concept of RichnessRichness in Data model• Support of sophisticated data models: eg, XMLList, ArrayList• Ability to send and receive data in/out of these data structures asynchronously• Ability for a user interface control to manipulate the data through powerful Data binding• Data can be obtained from server without redrawing the entire page• Efficiently utilize network bandwidth transmitting only portion of data that changed.
  10. 10. Concept of RichnessRichness in User Interface• RIA offers a very rich set of user interface controls which can intelligently interact with data model – For example: controls like charts, graphs, calendar control, DataGrid, rich text editors etc• The User interface can incorporate rich multimedia content.
  11. 11. Summary
  12. 12. Adobe Flex 3In this unit, you will understand what Adobe Flex is and how Adobe Flex andAdobe flash player help in constructing Rich Internet Application. YouWill also understand the process of how MXML code you write is transformedinto a SWF file delivered to the client.
  13. 13. Adobe Flex 3ObjectivesAfter completing this unit, you shall be able to:• Explain the different technologies in Adobe Flex product line• Understand the application flow of a Flex application• Know where and how to get help
  14. 14. Adobe Flex 3TopicsIn this unit, you will learn the following:• Understanding Adobe Flex• Adobe Flex product line• Flex Architecture• Flex resources
  15. 15. Understanding Adobe Flex• Adobe Flex is a RIA tool that enables us to develop RIA in a quick delivery model resulting in high productivity and customer satisfaction.• A highly productive, free open source framework for building expressive web applications that deploy consistently on: – All major browser leveraging the Flash Player – And on desktop with Adobe AIR
  16. 16. Where is Flex used
  17. 17. How Flex works
  18. 18. How flex works in the browser
  19. 19. Flex is…
  20. 20. Adobe Flex SDK• Adobe Flex SDK included Flex framework and Flex compiler, enabling you to Freely develop and deploy Flex application using any IDE of your choice.• Flex SDK includes all components needed to create flex applications that run in any browser
  21. 21. Flex Architecture
  22. 22. Flex enables…
  23. 23. Flex makes you
  24. 24. Flex ResourcesFlex tutorialshttp://www.tutorom.com/courses/460/Adobe-Flex-2-tutorials-Flex-2- programming-tutorials.htmDocumentationshttp://flex.org/http://www.adobe.com/support/documentation/en/flex/Flex component explorerhttp://examples.adobe.com/flex3/componentexplorer/explorer.html
  25. 25. Summary
  26. 26. Flex BuilderIn this unit, you will understand the Flex builder and its workbenches. You willlearn how Flex builder is used for code hinting, debugging
  27. 27. Flex BuilderObjectivesAfter completing this unit, you shall be able to:• Understand the Flex builder and its workbenches• Use Flex builder effectively for design, development and debugging• Create a Flex Project• Create, compile and run a Flex application
  28. 28. Flex BuilderTopicsIn this unit, you will learn the following:• Understanding Adobe flex builder• Flex builder workbenches• Creating a project and your first application
  29. 29. Understanding Adobe Flex Builder• Adobe Flex Builder is eclipse based development tool enabling – Intelligent coding that included editors like MXML, ActionScript, CSS, XML. – Interactive step-through debugging and code hinting – Rich Visual layout – Visual UI and behaviors – Interactive data visualization – Skinning and styling
  30. 30. Flex builder workbenches• The term workbench refers to the flex builder development environment.• The Flex builder workbench contains three primary elements – Perspectives – Editors – Views
  31. 31. Flex builder workbenchesUnderstanding Perspectives• Perspectives includes combination of views and editors that are suited to perform certain set of task• Flex builder has two default perspectives – Development – Debugging• May have other perspectives if using plug-in configuration, like java.
  32. 32. Flex builder workbenchesUnderstanding Editors• An editor is the visual component in the workbench that is typically used to edit or browse the resource• An Editor is where files of various types are edited in either – Design mode – Source mode
  33. 33. Flex builder workbenchesUnderstanding Views• A view supplies support tool when modifying a file in editor• Navigator view allows you to manage files, folders and projects• Problems view show errors in your code• Outline view hierarchically present and allows you to navigate to, all of the code elements and user interface in a file
  34. 34. Source and design mode selectors perspectives views editor
  35. 35. Creating a project and your firstapplicationTo begin development, you need to learn the following• Create a Flex project• Create a main application page• Compile the application• Run the application
  36. 36. Creating a project• A project is a grouping of resources that make up a flex application• When a project is created a number of files and folders are automatically created – bin-debug folder: where your compiled applications resides – html-template folder: where the html wrapper page resides – .settings folder: where some configuration file resides – .actionScriptProperties, .flexProperties and .project files: project configuration files – src folder: – libs folder: where custom class files reside – A main application file, if you do not select an existing file for that role Supply the following information to create a project
  37. 37. Select File > new > Flex project Choose a project name and location
  38. 38. Specify output folder. The default is bin-debug folder
  39. 39. Choose project build paths
  40. 40. Using the main application file• The main application file contains the <mx:Application> container set tag – Each application can have only one associated application file• The layout property is given the value absolute the first time you create an application – Flex builder will retain your last layout selection for future applications• If you do not specify the layout property, the layout will be vertical
  41. 41. Running the application file• Run the application by clicking the Run button. Run button is the green button on the top panel What exactly happens when you push the run button?
  42. 42. Main.mxml MXML ActionScriptClient withFlash player Main.swf SWF
  43. 43. Walkthrough 1: creating a mainapplication and running it
  44. 44. Summary
  45. 45. Learning Flex fundamentalIn this section, you will develop your first flex application and understand thebasic infrastructure that a flex application must have
  46. 46. Learning Flex fundamentalObjectivesAfter completing this unit, you shall be able to:• Create a flex application (MXML file)• Layout an application with container• Add a simple user interface control• Create data binding between controls
  47. 47. Learning Flex fundamentalTopicsIn this unit, you will learn the following:• Creating a simple Flex application• Displaying images• Laying out Flex application with containers• Using Panel container• Using controlBar container• adding user interface controls• Create data binding between components
  48. 48. Creating a simple Flex application• Application is the default container tag.• Skeleton of an MXML application file contains – XML document type definition – Opening and closing <mx:Application> component tag set
  49. 49. Creating a simple Flex applicationSpecifying namespace• use xmlns:mx attribute for the namespace, which defines the collection of legal MXML tags• http://www.adobe.com/2006/mxml is the uniform resource identifier which associates a prefix (in this case mx) with a manifest file as follows<namespace><url>http://www.adobe.com/2006/mxml</url><manifest>mxml-manifest.xml</manifest></namespace>• Flex-config.mxml is located in installdirectoryAdobeFlex Builder 3sdks3.0.0frameworksflex-config.xml
  50. 50. Creating a simple Flex applicationSetting the layout property• The layout property defaults to your last selection when building an application or component from the appropriate dialog box – absolute: Visual elements must have specific x, y values or constraints for positioning – horizontal: Visual elements presented horizontally – vertical: Visual elements presented vertically• If the layout property is not used in the Application tag, the default layout is vertical
  51. 51. Creating a simple Flex applicationAdding UI Controls• Used to display user interface type components in an application – Text, text input, buttons, images, combo boxes etc – Add between the application tag set or another container component• Example of the Label control to display a single line of text <mx:Label text=:Hello Flexers!” />
  52. 52. Creating a simple Flex applicationSpecifying components propertiesComponent properties can be specified in two ways• As an attribute of the XML tag<mx:Label text=“Hello” />• As nested tags or nodes<mx:Label> <mx:text> Hello</mx:text></mx:Label>
  53. 53. Creating a simple Flex applicationCommenting you MXML codeUse XML style comments which is similar to HTML comments<! - - this is my comment - - >
  54. 54. Walkthrough 2: creating your firstFlex application
  55. 55. Displaying images• Use the Image control to incorporate• JPEG (non progressive)• GIF (can be transparent)• PNG (can be transparent)• SWF• SVG (can only be embedded at compile time)
  56. 56. Displaying imagesMethods for displaying images• Two ways to display images – Load them dynamically at runtime – Embed them in SWF file• Specify image source in three ways – Via source property of an Image control ; will load image dynamically at runtime – Use Image load() method to add the images dynamically at runtime – Embed them in the SWF at compile time using the @Embed directive; useful when you need instantaneous loading and offline application
  57. 57. Displaying imagesLoading dynamically at runtime• Specify the image using the source attribute of the <mx:Image> control• Image is loaded at runtime<mx:Image source=“myimage.jpg” />• Assign an id to the image to reference in ActionScript<mx:Image source=“myimage.jpg” id=“imageID” />
  58. 58. Displaying images• Using the load() method• Dynamically switch out the image using the load() method of the Image class<mx:Image source=“addis.jpg” id=“imageID” width=“250” height=“250” /><mx:Button label=“Change pic” click=“imageID.load(‘flower.jpg’)” />
  59. 59. Displaying imagesEmbedding images at compile time• You can embed images at compile time for instantaneous loading• To embed, use the @Embed directive when specifying the image source<mx:Image source=@Embed(‘../images/myImage.jpg’)” />
  60. 60. Displaying imagesPros of embedding image• Image is available immediately, it is part of the SWF• Very useful for creating application that are able to work offlineCons of embedding images• Adds to applications SWF size• Slows down application initialization process• Must recompile application every time image changes• Cannot use in data binding calls
  61. 61. Walkthrough 3: Adding an image toan application
  62. 62. Laying out Flex application withcontainers• A Container defines the rectangular region of the drawing surface of adobe flash player• Within a container, you define the components, both controls and containers, that you want to appear within the container• Components defined within a container are called children of the container• At the root of a Flex application is a single container, called the Application container, that represents the entire Flash Player drawing surface.• This Application container holds all other containers and components.• A container has predefined rules to control the layout of its children, including sizing and positioning
  63. 63. Laying out Flex application withcontainersHow containers work• Containers use a set of layout rules to position components – Keeps you from having to worry about positions – Allows resizing/re-positioning with browser window size
  64. 64. Application layout=“vertical” Image: Cafe Townsend banner HBox VBox Tile: Appetizers Panel: Contact VBox VBox VBox Panel: About Tile: Entrees VBox VBox VBox VBox Tile: Desserts Panel: Events VBox VBox VBoxContainer layout of the application
  65. 65. Laying out Flex application withcontainersBox ContainersThere are two types of Box containers available to layout your pages• Vertical box (VBox)• Horizontal box (HBox)
  66. 66. Laying out Flex application withcontainersVBoxThe VBox layout allows you to display controls vertically, as in the image below<mx:VBox><mx:Label text="label in a VBox" /><mx:Button label="Click me" /><mx:Label text="another label" /></mx:VBox>
  67. 67. Laying out Flex application withcontainersHBoxThe HBox layout enables you to lay out your controls horizontally, as in thefollowing image<mx:HBox><mx:Label text="label in a HBox" /><mx:Button label="Click me" /><mx:Label text="another label" /></mx:HBox>
  68. 68. Laying out Flex application withcontainersCanvas container• The Canvas container is a basic component that enables you to specify absolute positions• You can use absolute positioning by specifying x and y properties of the components inside the container<mx:Canvas> <mx:Label x=“20” y=“10” /> <mx:Label x=“100” y=“10” /></mx:Canvas>• Canvas containers can offer better performance, because client processing power does not have to be used in order to determine object placement
  69. 69. Laying out Flex application withcontainersSpecifying positions in a Canvas container• As stated, you must specify the x and y properties of all the child components inside the container; the origin is the top-left corner of the canvas.• This a/y positioning is only valid for components on the canvas, not for components inside child containers 0,0 point Value, 0 0, Value
  70. 70. Walkthrough 4: Using basic layouts
  71. 71. Using Panel container• The Panel container• Wraps self-container application modules• includes a panel title, a title bar, a status message and a content area for its children• It is represented in MXML with the Panel tag Application layout=“horizontal” Panel Panel Panel
  72. 72. Using Panel container status title
  73. 73. Using Panel containerUsing the Panel tag<mx:Panel title=“Panel title” status=“Panel status”> …………</mx:Panel>Characteristics:• Defaults its width and height properties to value that accommodate all children, but will not be larger than allowed by its parent container• Truncates content that is too large and implements scroll bar as appropriate• Has layout property, like the Application container which can take values absolute, vertical (default) and horizontal• Has default padding values of 0 pixels
  74. 74. Using Panel containerSizing container content• The size of any content placed within a container is relative to that container, not the main Application area.• If the child is sized larger than the parent container, then it will be resized down to fit into the parent container
  75. 75. Panel width set to 600 Text width set to 100% relative to PanelPanel width set to 500 Text width set to 600 and will automatically be resized to fit the panel
  76. 76. Walkthrough 5: separatingapplication modules into Panels
  77. 77. Using ControlBar containerThe ControlBar container• Holds components that can be shared by the other children in the Panel and TitleWindow container• Must be the last child of the Panel or TitleWindow container• Is a subclass of the Box class and therefore inherits the layout characteristics of the Box container• Has a direction property to determine either vertical or horizontal layout of the child components• Defaults it width and height properties to values that accommodate all children, but will not be larger than allowed by its parent container
  78. 78. Using ControlBar container• Has default padding value of 10 pixels• Had horizontalAlign and VerticalAlign properties to control the positioning of the child components• Had verticalGap and horizontalGap properties to set the spacing between children<mx:ControlBar width=“100”> <mx:Label text=“Quantity” /> <mx:NumericStepper id=“myNS” /> <mx:Spacer width=“100%”/> <mx:Button label=“Add to Cart” click=“addToCart();” /></mx:ControlBar>
  79. 79. Using ControlBar container ControlBar
  80. 80. Walkthrough 6: using ControlBarcontainer
  81. 81. Adding user interface controls• Controls are user interface components such as Button, TextArea, ComboBox, TextInput• Controls are placed inside the containers• typically you define container and then insert controls or other containers inside it.
  82. 82. The following image shows several controls used in a Form container:A. Form container B. TextInput controls C. ComboBox control D. Button control
  83. 83. Adding user interface controls• Text controls• Menu based controls• Data Driven controls
  84. 84. Alert Displays a pop-up alertButton Displays a variable-size button that can include a label, an icon image, or both.ButtonBar Displays a row of related buttons with a common appearance.CheckBox Shows whether a particular Boolean value is true (checked) or false (unchecked).ComboBox Displays a drop-down list attached to a text field that contains a set of values.ColorPicker Displays a selectable drop-down color swatch panel (palette).DataGrid Displays data in a tabular format.DateChooser Displays a full month of days to let you select a date.DateField Displays the date with a calendar icon on its right side.HorizontalList Displays a horizontal list of items.HRule/VRule Displays a single horizontal rule (HRule) or vertical rule (VRule).
  85. 85. HSlider/VSlider Lets users select a value by moving a slider thumb between the end points of the slider track.Image Imports GIF, JPEG, PNG, SVG, and SWF files.Label Displays a noneditable single-line field label.LinkBar Displays a horizontal row of LinkButton controls that designate a series of link destinations.LinkButton Displays a simple hypertext link.List Displays a scrollable array of choices.Menu Displays a pop-up menu of individually selectable choices, much like the File or Edit menu of most software applications.MenuBar Displays a horizontal menu bar that contains one or more submenus of Menu controlsNumericStepper Displays a dual button control that you can use to increase or decrease the value of the underlying variable.ProgressBar Provides visual feedback of how much time remains in the current operation.RadioButton Displays a set of buttons of which exactly one is selected at any time.
  86. 86. RadioButton Displays a group of RadioButton controls with a single clickGroup event listener.RichTextEditor Includes a multiline editable text field and controls for specifying text formatting.ScrollBar Displays horizontal and vertical scroll bars.(HScrollBar andVScrollBar)SWFLoader Displays the contents of a specified SWF file or JPEG fileTabBar Displays a horizontal row of tabs.Text Displays a noneditable multiline text field.TextArea Displays an editable text field for user input that can accept more than a single line of input.TextInput Displays an editable text field for a single line of user input. Can contain alphanumeric data, but input is interpreted as a String data type.TileList Displays a tiled list of items. The items are tiled in vertical columns or horizontal rows.ToggleButtonBar Displays a row of related buttons with a common appearance.Tree Displays hierarchical data arranged as an expandable tree.
  87. 87. Creating data binding betweencomponents• Data binding is the process of tying or binding data of one object to another• Data biding requires a source property, a destination property and a triggering event that indicates when to copy data from source to destination• There are two ways to perform a binding – Curly braces syntax { } – <mx:Binding> tag
  88. 88. Creating data binding betweencomponentsCreating Data binding• Using curly braces syntax – Assigns a property a dynamic literal value – Uses a broadcast/listener method <mx:Label id=“labelOne” text=“Hello” /> <mx:Label id=“labelTwo” text=“{labelOne.text}” />
  89. 89. Creating data binding betweencomponents• Using <mx:Binding> tag<mx:Label id=“labelOne” text=“Hello” /><mx:Label id=“labelTwo” /><mx:Binding source=“labelOne.text” destination=“labelTwo.text” />
  90. 90. Walkthrough 7: creating databinding
  91. 91. Summary
  92. 92. View StatesIn this section, you will learn to customize the look and feel of flex applications with styles, behaviors and transitions. You will also learn to use different types of themes.
  93. 93. View StatesObjectivesAfter completing this unit, you shall be able to:• Create view states using flex builders design mode• Create view state using MXML• Trigger state changes based on use events
  94. 94. View StatesTopicsIn this unit, you will learn the following:• Understanding view states• Controlling view states• Reviewing the generated MXML code
  95. 95. Understanding view states• A view state defines a particular view of a component• View state define distinct presentation layouts within the same application• Each distinct layout is called a state• User or system events are used to change states
  96. 96. Understanding view statesCreating view states• Create a base state, which is default layout of the application• Modify the base state or another state to create additional states – Can modify, add or delete components in each state – Can modify component property – Can change styles• Create events to trigger switching states
  97. 97. Understanding view statesBenefits of using view states• Flex manages the switching of states• Components can be shared across multiple view states• Components can be added, removed or modified easily
  98. 98. Understanding view statesCreating a new state• To manage and create state we need 2 states – Base state – New state• Base state is the current view of state of any application• On any event triggered, the state changes from base state to new state.
  99. 99. This is my base stateChange state on click of this linkButton
  100. 100. In Design mode, click the New State button in the States view (Window > States).
  101. 101. The New State dialog box appears
  102. 102. Walkthrough 8: Creating states
  103. 103. Understanding view states• State implementation details• To change state, set the currentState property value to the name of the state to switch to• Flex figures out everything that needs to change between any to states• Setting currentState – Setting currentState property of the Application tag sets the initial state to one another. – A components currentState property specifies its view state – To specify the base state, set currentState equal to an empty string
  104. 104. Understanding view states<mx:Button id=“b1” label=“Add a button” click=“currentState=‘forms’” /><mx:Button id=“b2” label=“Remove button” click=“currentState=‘ ’” />
  105. 105. On click event the changeState willtrigger the new forms state view
  106. 106. On click event the changeState willtrigger the base state view
  107. 107. Understanding view statesThe following table shows the classes that you use to create states AddChild and Adds or removes a child component as part of a change RemoveChild of view state. SetEventHandler Adds an event handler as part of a change of view state. SetProperty Sets a component property as part of a change of view state. SetStyle Sets a style property on a component as part of a change of view state
  108. 108. Walkthrough 9: Switching states
  109. 109. Reviewing the generated MXMLcodeThe MXML tag used to manage the view states are• The states tag – wraps all of the state in single block of code• The State tag – wraps the details of one individual state• The AddChild tag – nested within the State tag to instruct that a component has to be added to the Base state when creating the current state• The RemoveChild tag – nested within the state tag to instruct that a component has to be removed from the Base state.• The SetProperty tag – nested within the State tag. Use it to change a property of a component in the current state that originally was created in another state• The SetEventHandler tag – nested within the State tag to set event handlers which are only active during a particular view state
  110. 110. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal"><mx:states><mx:State name="forms"><mx:AddChild relativeTo="{form1}" position="lastChild"><mx:FormItem label="Confirm Password"><mx:TextInput/></mx:FormItem></mx:AddChild><mx:SetProperty target="{panel1}" name="title" value="Register"/><mx:SetProperty target="{linkbutton1}" name="label" value="Back to login"/><mx:RemoveChild target="{button1}"/><mx:SetEventHandler target="{linkbutton1}" name="click" handler="currentState="/><mx:SetProperty target="{spacer1}" name="width" value="287"/><mx:SetProperty target="{spacer1}" name="height" value="14"/></mx:State></mx:states><mx:Panel width="500" layout="vertical" title="Login" id="panel1"><mx:Form width="100%" height="100%" id="form1"><mx:FormItem label="UserName"><mx:TextInput/></mx:FormItem><mx:FormItem label="Password"><mx:TextInput/></mx:FormItem></mx:Form><mx:ControlBar> <mx:LinkButton label="Need to register?" id="linkbutton1" click="currentState=forms"/><mx:Spacer width="100%" id="spacer1"/><mx:Button label="Login" id="button1"/></mx:ControlBar></mx:Panel></mx:Application>
  111. 111. Walkthrough 10: implementing viewstates using MXML
  112. 112. Summary
  113. 113. Application navigationIn this section, you will learn how to implement and manipulate navigation containers individually and relative to one another. You will also learn how navigator and layout containers interact
  114. 114. Application navigationObjectivesAfter completing this unit, you shall be able to:• Understand what navigator container are and how to create them• Navigate the ViewStack container with LinkBar, TabBar controls
  115. 115. Application navigationTopicsIn this unit, you will learn the following:• Understanding navigator containers and controls• Using the LinkBar control• Using the TabBar control• Using the ViewStack container• Using the TabNavigator container• Using the Accordion container
  116. 116. Understanding navigator containersand controlsThere are two types of containers• Layout container - Control the sizing and positioning of the child element within them• Navigator container – Control user movement, or navigation among multiple child containers
  117. 117. Understanding navigator containersand controlsNavigator container basics• The direct children of a navigator container must be containers, either layout or navigator container• Typical properties of a container tag include id, width and height.• Navigator container and their children• Only ViewStack, TabNavigator and Accordion containers have child containers that you can layout.• LinkBar, ButtonBar, TabBar navigator controls do not have child containers. Instead they enable users and code to control the currently active child container of ViewStack container.
  118. 118. Using the LinkBar control• The LinkBar control• Defines a horizontal row of linkButton controls• Is a navigator container with built-in logic to switch between children of a ViewStack container• Has a width that is wide enough to contain all label text plus separators and necessary padding• Has a height that accommodate the tallest child element• Has default padding value of 2 pixels on all sides• Is represented in MXML with the <mx:LinkBar> tag
  119. 119. Using the LinkBar control <mx:LinkBar> <mx:dataProvider> <mx:String>Home</mx:String> <mx:String>Contact Us</mx:String> <mx:String>Special Events</mx:String> <mx:String>Restaurant Menu</mx:String> </mx:dataProvider> </mx:LinkBar>
  120. 120. Using the TabBar control• The TabBar control• Defines a horizontal (default) or vertical rows of tabs• Has default padding value of 0 pixels on all sides• Is represented in MXML using <mx:TabBar> tag
  121. 121. Using the TabBar control <mx:TabBar labelField="menuName"> <mx:dataProvider> <mx:Object menuName="Home" /> <mx:Object menuName="Contact Us" /> <mx:Object menuName="Special Events"/> <mx:Object menuName="Resturant Menu" /> </mx:dataProvider> </mx:TabBar>
  122. 122. Using the ViewStack controlThe ViewStack container• Is made up of a collection of child containers that are stacked on top of each other, with one container visible or active at a time.• The ViewStack container does not define a built-in mechanism for users to switch the currently active container• you must use a LinkBar, TabBar, ButtonBar, or ToggleButtonBar control or build the logic yourself in ActionScript to let users change the currently active child.• Is represented in MXML with the <mx:ViewStack> tag
  123. 123. A. Child container 1 active B. Child container 0 active
  124. 124. Using the ViewStack control
  125. 125. <mx:VBox><!-- Create a LinkBar control to navigate the ViewStack container. --><mx:LinkBar dataProvider="{myViewStack}" borderStyle="solid"/><!-- Define the ViewStack and the three child containers. --><mx:ViewStack id="myViewStack" borderStyle="solid" width="100%"><mx:Canvas id="search" label="Search"><mx:Label text="Search Screen"/></mx:Canvas><mx:Canvas id="custInfo" label="Customer Info"><mx:Label text="Customer Info"/></mx:Canvas><mx:Canvas id="accountInfo" label="Account Info"><mx:Label text="Account Info"/></mx:Canvas></mx:ViewStack></mx:VBox>
  126. 126. Walkthrough 11:Create navigationwith TabBar and ViewStack control
  127. 127. Using TabNavigator container• The TabNavigator works the same way as ViewStack.• Has its own child so no need to provide ViewStack or dataProvider• Defines a horizontal row of tabs• Display one child at a time, in order they are defined• Had default padding value of 2 pixels on all side• Is represented in MXML with <mx:TabNavigator> tag
  128. 128. Using TabNavigator container
  129. 129. <mx:TabNavigator borderStyle="solid" > <mx:VBox label="Accounts" width="300" height="150"> <!-- Accounts view goes here. --> </mx:VBox> <mx:VBox label="Stocks" width="300" height="150"> <!-- Stocks view goes here. --> </mx:VBox> <mx:VBox label="Futures" width="300" height="150"> <!-- Futures view goes here. --> </mx:VBox> </mx:TabNavigator>
  130. 130. Using Accordion container• The Accordion works the same way as ViewStack.• Has its own child so no need to provide ViewStack or dataProvider• Defines vertically stacked panels that animate as they open and close• has its own child content• Has default padding value of 2 pixels on all side• Is represented in MXML with the <mx:Accordion> tag
  131. 131. Using Accordion container
  132. 132. <mx:Accordion borderStyle="solid" > <mx:VBox label="Accounts" width="300" height="150"> <!-- Accounts view goes here. --> </mx:VBox> <mx:VBox label="Stocks" width="300" height="150"> <!-- Stocks view goes here. --> </mx:VBox> <mx:VBox label="Futures" width="300" height="150"> <!-- Futures view goes here. --> </mx:VBox> </mx:Accordion>
  133. 133. Walkthrough 12:creating navigationusing Accordion and TabNavigator
  134. 134. Summary
  135. 135. Styling your Application with CSSIn this section, you will learn to customize the look and feel of flex applications with styles, behaviors and transitions. You will also learn to use different types of themes.
  136. 136. Styling your Application with CSSObjectivesAfter completing this unit, you shall be able to:• Modifying the default Flex application style• Add animations to components using triggers and effects• Add animation to view state transitions
  137. 137. Styling your Application with CSSTopicsIn this unit, you will learn the following:• Customizing Flex application look and feel• Modifying Flex styles to change the look and feel• Using themes• Applying behaviors to components• Applying transitions to view state changes
  138. 138. Customizing Flex application lookand feel• You can modify almost every aspect of the look and feel and user interaction of your application by using these features of flex – Component sizes- height and width. – Graphical display – characteristic like color, font size, border, width, text alignment, corner radius setting etc – Dynamic effects – animations or sound – Fonts – default embedded text character sets
  139. 139. Customizing Flex application lookand feelAbout CSS styles in Flex• You can use CSS styles to modify your Flex user interface more efficiently.• CSS styles in Flex can be defined at the site level with external styles, at the document level with embedded styles, or at the component level with inline styles.• Flex uses slightly different names for multi-word CSS property names such as font-family or font-size.• Hyphens are removed, the letter following each hyphen is capitalized, and equal signs instead of colons are used for property values.
  140. 140. Customizing Flex application lookand feelExternal Styles• External styles are defined in a separate file and can be used in any MXML file that references the CSS file.• You reference a CSS file into an MXML file with the source property of the <mx:Style> tag, as follows:• <mx:Style source="../siteStyles.css"/>
  141. 141. Customizing Flex application lookand feelEmbedded Styles• Embedded styles are defined in an MXML file and can only be used in that file. Embedded styles are defined with the <mx:Style> tag, as follows: <mx:Style> .myclass { background-color: xFF0000 } TextInput { font-family: Helvetica; font-size: 12pt } </mx:Style>• Once defined, you can apply the myclass style to any component using the styleName property, as in the following example: <mx:Button styleName="myclass">
  142. 142. Customizing Flex application lookand feelInline Styles• Inline styles are defined in an MXML tag and can only be used in that tag. Inline styles are defined as follows:<mx:Button color="red"...>
  143. 143. Customizing Flex application lookand feelChanging flex control style defaults – skins• Skins are graphics displayed on components – for example, the down arrow of the ScrollBar component is made up of three skins – ScrollDownArrowDisabled, ScrollDownArrowUp, ScrollDownArrowDown – Some components share skins. For example components that use scroll bars – including all containers share their skin with the ScrollBar component• Styles are defined on components. You can customize these styles
  144. 144. Modifying styles to change the lookand feel• Flex provides several ways of setting component styles• Using MXML component properties• Calling the setStyle() method in ActionScript• Using Cascading style sheets (CSS)• Setting global styles• Implementing built in theme styles
  145. 145. Modifying styles to change the lookand feelSetting styles inline using MXML component attributes• You have already set some styles for components by specifying values for attributes in MXML components• <mx:Text text=“Appetizers” color=“#dd7142” />
  146. 146. Modifying styles to change the lookand feelSetting style in ActionScript for individual components using the setStyle()method emailButton.setStyle(“ontSize”, 15);
  147. 147. Modifying styles to change the lookand feelSetting style using Cascading style sheets (CSS)• Creating CSS type selectors – Type selectors assign styles to all instances of a particular type – Within the Style container, name MXML component and define its styles – Use a comma-separated list of components to set the same style to all specified components types<mx:Style>TextArea { backgroundColor: “#cccccc”}Button, TextInput, Label { font-style: Italic}</mx:Style><mx:TextArea id=“message” />
  148. 148. Using themes• Flex provides several themes that can be applied to the overall application• Use the themeColor style to set the theme color to any color or to a halo color (haloGreen, haloBlue, haloSilver, haloOrange)<mx:Application themeColor=“haloBlue” >
  149. 149. Walkthrough 13:Styling yourApplication
  150. 150. Applying behaviors to components• A behavior is a combination of a trigger paired with an effect• Behaviors let you add animation and motion to your application components in response to some user or programmatic action.• For example, you can use behaviors to cause a dialog box to bounce slightly when it receives focus, or to play a sound when the user enters an invalid value.• You build behaviors into your applications by using MXML and ActionScript
  151. 151. Applying behaviors to componentsUnderstanding behaviors basics• Behavior has two parts – A trigger – an action, such as user clicking on a button, a component gaining focus or becoming invisible • You can define multiple effects for a single trigger. – An effect – a visible or audible change to the component occurring over a period of time such as fade effect
  152. 152. Applying behaviors to componentsAbout applying behaviors• Apply simple behavior by setting the trigger name property of the component to the name of the effect class• <mx:Button id=“sendButton” label=“send message” mouseDowneffect=“fade” />
  153. 153. Applying behaviors to components• Apply a simple behavior by setting the trigger name property of the component to the name of the effect class<mx:Button id=“sendButton” label=“Send Message” mouseDownEffect=“Fade” />
  154. 154. Applying behaviors to components• Define a reusable effect instance – First use the MXML component for the effect <mx:Fade id=“fadeEffect” /> – Then apply the effect to the targets using data binding <mx:Button id=“sendButton” label=“Send Message” mouseDownEffect=“{fadeEffect}” /> <mx:Button id=“requestButton” label=“Request broucher” mouseDownEffect=“{fadeEffect}” />
  155. 155. Walkthrough 14:ApplyingBehaviors
  156. 156. summary
  157. 157. Working with Datagrid• The DataGrid control is a list that can display more than one column of data• It is a formatted table of data that lets you set editable table cells, and is the foundation of many data-driven applications.
  158. 158. Working with DatagridThe DataGrid control provides the following features:• Resizable, sortable, and customizable column layouts, including hidable columns• Optional customizable column and row headers, including optionally wrapping header text• Columns that the user can resize and reorder at run time• Selection events• Ability to use a custom item renderer for any column• Support for paging through data• Locked rows and columns that do not scroll
  159. 159. Working with DataGridCreating a DataGrid control• You use the <mx:DataGrid> tag to define a DataGrid control in MXML• Specify an id value if you intend to refer to a component elsewhere in your MXML, either in another tag or in an ActionScript block• The DataGrid control uses a list-based data provider• You can specify data in several different ways.• In the simplest case for creating a DataGrid control, you use the <mx:dataProvider> property subtag with <mx:ArrayCollection>, and <mx:Object> tags to define the entries as an ArrayCollection of Objects.
  160. 160. Working with DataGrid <mx:DataGrid> <mx:ArrayCollection> <mx:Object> <mx:Artist>Pavement</mx:Artist> <mx:Price>11.99</mx:Price> <mx:Album>Slanted and Enchanted</mx:Album> </mx:Object> <mx:Object> <mx:Artist>Pavement</mx:Artist> <mx:Album>Brighten the Corners</mx:Album> <mx:Price>11.99</mx:Price> </mx:Object> </mx:ArrayCollection></mx:DataGrid>
  161. 161. Walkthrough 15: Working withDatagrid
  162. 162. Specifying columnsSpecifying columns• Each column in a DataGrid control is represented by a DataGridColumn object• You use the columns property of the DataGrid control and the <mx:DataGridColumn> tag to select the DataGrid columns, specify the order in which to display them, and set additional properties.• You can also use the DataGridColumn class visible property to hide and redisplay columns
  163. 163. Specifying columns<mx:DataGrid><mx:ArrayCollection><mx:Object Artist="Pavement" Price="11.99" Album="Slanted and Enchanted" /><mx:Object Artist="Pavement" Album="Brighten the Corners" Price="11.99" /> </mx:ArrayCollection><mx:columns><mx:DataGridColumn dataField="Album" /> <mx:DataGridColumn dataField="Price" /> </mx:columns></mx:DataGrid>
  164. 164. Walkthrough 16: Adding Columns
  165. 165. Summary

×