![Flex ® 3 & Adobe ® Flex Builder ™ An introduction Rasheed Akhtar [email_address]](https://image.slidesharecdn.com/flex-3-introduction-1233590386189833-3/85/Flex-3-Introduction-1-320.jpg)
![About Me Extensive experience with “normal” flash development using both AS2 and AS3 I’ve been working with Flex since Flex 2 was released (2006) Started off primarily with data visualization and then moved on to developing apps for streamlining business processes using Flex, Flash Remoting, .NET and SQL Server 2005 LinkedIn – http://www.linkedin.com/in/rasheedakhtar Twitter - http://twitter.com/rakhtar Email – [email_address] Rasheed Akhtar [email_address]](https://image.slidesharecdn.com/flex-3-introduction-1233590386189833-3/85/Flex-3-Introduction-2-320.jpg)
![Flex 3 What is Flex? It is a free, open source framework based on the Adobe Flash Runtime used to develop RIAs (rich Internet applications) RIAs - new kind of web experience that offer the ease of use/experience of a desktop application while providing the broad reach of web applications Flex application framework consists of MXML, ActionScript™ 3 (AS3), and the Flex class library. Developers use MXML to declaratively define the application user interface elements and use ActionScript for client logic and procedural control. Rasheed Akhtar [email_address]](https://image.slidesharecdn.com/flex-3-introduction-1233590386189833-3/85/Flex-3-Introduction-3-320.jpg)
![Why Flex? Business Case – Why RIAs? People know them and like them. Fifty-two percent of online consumers have used highly interactive applications like Google Maps. More importantly, the overwhelming majority of those who tried RIAs say that rich applications greatly enhance their Web experience. They enable tasks that HTML can’t. RIAs give companies a superior alternative to HTML for crafting customer interactions. That’s because RIAs provide a range of capabilities — like improved data visualization and streamlined processes — that go beyond the limitations imposed by HTML They get results. Firms that measure the business impact of their RIAs say that rich applications meet or exceed their goals (see Figure 2). As the RIA success stories of these early adopters become more widely known, site owners at mainstream companies also look to RIAs to boost online effectiveness. Source : “The Business Case For Rich Internet Applications” Forrester Research – March 12, 2007 Rasheed Akhtar [email_address]](https://image.slidesharecdn.com/flex-3-introduction-1233590386189833-3/85/Flex-3-Introduction-4-320.jpg)
![Why Flex? Business Case – Why RIAs (cont’d)? Rasheed Akhtar [email_address]](https://image.slidesharecdn.com/flex-3-introduction-1233590386189833-3/85/Flex-3-Introduction-5-320.jpg)
![Why Flex? Finally – why flex? Same reasons for using Flash over traditional HTML Flex applications run consistently across all major browsers and on the desktop Robust development environment (i.e. via Flex Builder 3 and Flex builder integration with Adobe Creative Suite) Why not just use flash? “ Traditional” programmers found it challenging to adapt to animation metaphor upon which the Flash Platform was originally designed (i.e. movieclips, frames, timeline, etc…) Flex minimizes this problem by providing a workflow and programming model that is familiar to these developers Rasheed Akhtar [email_address]](https://image.slidesharecdn.com/flex-3-introduction-1233590386189833-3/85/Flex-3-Introduction-6-320.jpg)
![History Flex 1.0 & 1.5 (2004 - Macromedia) Primarily for enterprise market Priced around $15,000USD per CPU Java server based solution (J2EE, Tomcat, Jrun) that compiled MXML and Actionscript on-the-fly to SWF files i.e. MXML files placed on server and users requested MXML files directly that would output SWFs Flex Builder IDE based on Dreamweaver code base Rasheed Akhtar [email_address]](https://image.slidesharecdn.com/flex-3-introduction-1233590386189833-3/85/Flex-3-Introduction-7-320.jpg)
![History Flex 2 (2006 – Adobe) Licensing model overhauled Flex SDK (compilers/class library) available as free download Framework built upon AS3 and requires Flash Player 9 2 versions: Standard & Professional (includes data visualization library) No longer dependent on server side component Apps compiled locally as SWFs and placed on web server Server side software spun off as separate product called Flex Data Services 2 (LiveCycle Data Services) Flex Builder based on open source Eclipse platform Rasheed Akhtar [email_address]](https://image.slidesharecdn.com/flex-3-introduction-1233590386189833-3/85/Flex-3-Introduction-8-320.jpg)
![History & Future Flex 3 (2008 – Adobe) Flex 3 SDK open sourced Flex Builder enhancements included integration with Creative Suite, support for AIR (released at same time), and addition of profiling and refactoring tools Flex 4 (2009* – Adobe) Biggest change is to skinning/component architecture (i.e. Spark and FXG) FXG is XML-based graphics interchange format for the Flash Platform Foundation for Flash Catalyst Targets Flash Player 10 Rasheed Akhtar [email_address]](https://image.slidesharecdn.com/flex-3-introduction-1233590386189833-3/85/Flex-3-Introduction-9-320.jpg)
![Now building on Flex… Rasheed Akhtar [email_address]](https://image.slidesharecdn.com/flex-3-introduction-1233590386189833-3/85/Flex-3-Introduction-10-320.jpg)
![Now building on Flex… Some quick sample sites: http://www.iexpenseonline.com/ https://www.photoshop.com/express/landing.html https://acrobat.com/ http://flex.org/showcase/ Rasheed Akhtar [email_address]](https://image.slidesharecdn.com/flex-3-introduction-1233590386189833-3/85/Flex-3-Introduction-11-320.jpg)
![Flex SDK MXML XML based declarative language to define User Interface Similar to XHTML Primarily used for user interface design Actionscript 3 Flex Class Library Everything in the mx.* packages Containers Controls Charting Components Rasheed Akhtar [email_address]](https://image.slidesharecdn.com/flex-3-introduction-1233590386189833-3/85/Flex-3-Introduction-12-320.jpg)
![How Flex works Rasheed Akhtar [email_address]](https://image.slidesharecdn.com/flex-3-introduction-1233590386189833-3/85/Flex-3-Introduction-13-320.jpg)
![Behind the Scenes Flex SDK contains 2 compilers mxmlc: application compiler (compiles to SWF) compc: component compiler (compiles to SWC) Compilers are invoked on MXML, Actionscript and asset files (images, SWF files, etc...) and result in respective file formats Rasheed Akhtar [email_address]](https://image.slidesharecdn.com/flex-3-introduction-1233590386189833-3/85/Flex-3-Introduction-14-320.jpg)
![Behind the Scenes MXML tags correspond to ActionScript classes or properties of classes. When compiler is invoked, Flex parses your MXMLtags and generates the corresponding ActionScript classes. It then compiles these ActionScript classes along with the “other” (user defined) Actionscript classes and assets into SWF bytecode which it stores in a SWF file. MXML: Actionscript: Result: <mx:Button id="myButton" label="I'm a button!" /> var myButton:Button; myButton = new Button(); myButton.label = " I'm a button! " ; addChild (myButton); Rasheed Akhtar [email_address]](https://image.slidesharecdn.com/flex-3-introduction-1233590386189833-3/85/Flex-3-Introduction-15-320.jpg)
![Flex Builder 3 Demo Rasheed Akhtar [email_address]](https://image.slidesharecdn.com/flex-3-introduction-1233590386189833-3/85/Flex-3-Introduction-16-320.jpg)
![MXML MXML documents are plain-text documents Should contain XML declaration encoding should be set to UTF-8 for best compatibility 2 types of root nodes available Application: <mx:Application ...> </Application> Components: any component tag other than application <mx:Canvas ...> </Canvas> <mx:Panel ...></Panel> Rasheed Akhtar [email_address]](https://image.slidesharecdn.com/flex-3-introduction-1233590386189833-3/85/Flex-3-Introduction-17-320.jpg)
![MXML MXML uses namespaces (xmlns) http://www.adobe.com/2006/mxml default namespace for flex (contains manifest file for flex class mappings A namespace is a unique grouping of elements (flex libraries in this case) Namespaces map library classes and components to tags <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml " xmlns:components="components.*“ /> //Flex button <mx:Button id="myButton" label="I'm a button!" /> //custom button <components:Button id="myButton" label="I'm a button!" /> </mx:Application> Rasheed Akhtar [email_address]](https://image.slidesharecdn.com/flex-3-introduction-1233590386189833-3/85/Flex-3-Introduction-18-320.jpg)
![Interactive MXML Declaring UI elements via MXML is useful but need to make it interactive 2 basic MXML features to create interactivity Event Handling Every component does “something” where it dispatches events MXML allows inline event handlers <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml " /> //Flex button <mx:Button id="myButton" label="I'm a button!" click=“Alert(‘ STOP! ’)" /> </mx:Application> Rasheed Akhtar [email_address]](https://image.slidesharecdn.com/flex-3-introduction-1233590386189833-3/85/Flex-3-Introduction-19-320.jpg)
![Interactive MXML Data Binding Used to link one component to another Automates changing of values of one object when the value of another object changes Several ways to utilize it. Simplest method is using curly brace {} syntax <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml " /> <mx:Vbox> <mx:Text id="output" text=" {input.text} " /> <mx:TextInput id="input" /> </mx:Vbox> </mx:Application> Rasheed Akhtar [email_address]](https://image.slidesharecdn.com/flex-3-introduction-1233590386189833-3/85/Flex-3-Introduction-20-320.jpg)
![Containers Containers can hold other containers (nested containers) or controls Components defined within a container are called children 2 categories of containers: Layout containers: control sizing/positioning of their children Navigator containers: control user movement/navigation among multiple child containers Flex offers wide variety of containers: Canvas Panel Tile TitleWindow Hbox Vbox Rasheed Akhtar [email_address]](https://image.slidesharecdn.com/flex-3-introduction-1233590386189833-3/85/Flex-3-Introduction-21-320.jpg)
![Containers - Layout All containers except Canvas container support automatic (box-based) layout Do not need to specify position for children of container Layout handled by selecting container type, specifying properties on container and order of container’s children Hbox does horizontal box layout, Vbox does vertical box layout, etc... Layout rules executed when container created and when children are added or removed Canvas container (and optionally Application/Panel containers) use absolute layout Explicitly set x,y positions of container’s children Support constraint based layout Containers support scroll bars Rasheed Akhtar [email_address]](https://image.slidesharecdn.com/flex-3-introduction-1233590386189833-3/85/Flex-3-Introduction-22-320.jpg)
![Controls Flex natively provides approx 34+ controls Many open source custom controls (and control libraries) available from the community Controls are UI components Most controls have MXML API for declaring control, properties and events Actionscript API for calling methods and setting properties at runtime Customizable appearance (styles/skinning) Rasheed Akhtar [email_address]](https://image.slidesharecdn.com/flex-3-introduction-1233590386189833-3/85/Flex-3-Introduction-23-320.jpg)
![Controls Data entry controls Used to enter data or display plain text or HTML formatted text Examples: Label, Text, TextInput, TextArea, RichTextEditor, etc... Buttons Examples: Button, LinkBar, ButtonBar, etc... List Controls Examples: List, Horizontal List, TileList, etc... Tree and Grid Controls Examples: Tree, DataGrid, OLAPDataGrid Other Controls Examples: Alert, SWFLoader, ColorPicker, etc... Rasheed Akhtar [email_address]](https://image.slidesharecdn.com/flex-3-introduction-1233590386189833-3/85/Flex-3-Introduction-24-320.jpg)
![Controls Data provider controls Use input data from a data provider Data provider is a collection of objects (similar to array) Provide layer of abstraction so multiple controls can use one data provider (model/view separation) Too many controls to go into detail See Flex Framework Diagram Worth checking out Flex 3 Component Explorer: http://examples.adobe.com/flex3/componentexplorer/explorer.html Rasheed Akhtar [email_address]](https://image.slidesharecdn.com/flex-3-introduction-1233590386189833-3/85/Flex-3-Introduction-25-320.jpg)
![Note Both containers/controls can be extended to make customer controls/containers Because framework is open source you can see actual classes used to make framework and borrow/modify as necessary Rasheed Akhtar [email_address]](https://image.slidesharecdn.com/flex-3-introduction-1233590386189833-3/85/Flex-3-Introduction-26-320.jpg)
![Charting Components Only available with professional version Libraries are not open sourced Provides 9 types of charts: Area, Bar, Bubble, Candlestick, Column, HLOC Chart, Line, Pie, Plot Charts can be extended to provide interactivity Charts can also be styled/skinned to customize appearance Charts can have variety of effects applied Rasheed Akhtar [email_address]](https://image.slidesharecdn.com/flex-3-introduction-1233590386189833-3/85/Flex-3-Introduction-27-320.jpg)
![Styling (CSS) Controls modified through style properties Can also be styled using CSS (inline and external stylesheets) Similar concept to HTML CSS (i.e. syntax and certain CSS attributes are the same) however Flex CSS does not support all of the HTML CSS layout options (i.e. x, y, width, height, etc... ) Style Explorer: http://examples.adobe.com/flex3/consulting/styleexplorer/Flex3StyleExplorer.html Rasheed Akhtar [email_address]](https://image.slidesharecdn.com/flex-3-introduction-1233590386189833-3/85/Flex-3-Introduction-28-320.jpg)
![Styling (CSS) Styling can also be done at runtime using StyleManager and Actionscript StyleManager is singleton class that allows access/modification of styles Very powerful – app can completely change visual appearance at runtime import mx.styles.StyleManager; : : StyleManager.getStyleDeclaration("Button").setStyle("fontSize",24); Rasheed Akhtar [email_address]](https://image.slidesharecdn.com/flex-3-introduction-1233590386189833-3/85/Flex-3-Introduction-29-320.jpg)
![Skinning Refers to changing the way a component looks by replacing the assets that make up visual appearance 2 approaches Graphical skinning Use of bitmap/vector graphics to change component appearance Skin import wizard allows for easily importing skin created in other CS products (based on naming conventions) Programmatic skinning Graphics drawn via Actionscript to change appearance Great Flex Skinning resource: http://www.scalenine.com/ Rasheed Akhtar [email_address]](https://image.slidesharecdn.com/flex-3-introduction-1233590386189833-3/85/Flex-3-Introduction-30-320.jpg)
![Final Thoughts… Flex framework is massive and also very powerful Working to bridge the gap between designer and developer workflow using innovative products/techniques Many additional topics around building Flex Apps that deserver their own sessions Application State Application frameworks Backend connectivity Etc… Rasheed Akhtar [email_address]](https://image.slidesharecdn.com/flex-3-introduction-1233590386189833-3/85/Flex-3-Introduction-31-320.jpg)
![Resources Adobe Devnet: http://www.adobe.com/devnet/flex/ Learn Flex in a week http://www.adobe.com/devnet/flex/videotraining/ Flex Help: Getting started with Flex http://learn.adobe.com/wiki/display/Flex/Getting+Started Flex Examples: http://blog.flexexamples.com/ Flex.org http://flex.org/ Rasheed Akhtar [email_address]](https://image.slidesharecdn.com/flex-3-introduction-1233590386189833-3/85/Flex-3-Introduction-32-320.jpg)
Flex 3 - Introduction
- 1. Flex ® 3 & Adobe ® Flex Builder ™ An introduction Rasheed Akhtar [email_address]
- 2. About Me Extensive experience with “normal” flash development using both AS2 and AS3 I’ve been working with Flex since Flex 2 was released (2006) Started off primarily with data visualization and then moved on to developing apps for streamlining business processes using Flex, Flash Remoting, .NET and SQL Server 2005 LinkedIn – http://www.linkedin.com/in/rasheedakhtar Twitter - http://twitter.com/rakhtar Email – [email_address] Rasheed Akhtar [email_address]
- 3. Flex 3 What is Flex? It is a free, open source framework based on the Adobe Flash Runtime used to develop RIAs (rich Internet applications) RIAs - new kind of web experience that offer the ease of use/experience of a desktop application while providing the broad reach of web applications Flex application framework consists of MXML, ActionScript™ 3 (AS3), and the Flex class library. Developers use MXML to declaratively define the application user interface elements and use ActionScript for client logic and procedural control. Rasheed Akhtar [email_address]
- 4. Why Flex? Business Case – Why RIAs? People know them and like them. Fifty-two percent of online consumers have used highly interactive applications like Google Maps. More importantly, the overwhelming majority of those who tried RIAs say that rich applications greatly enhance their Web experience. They enable tasks that HTML can’t. RIAs give companies a superior alternative to HTML for crafting customer interactions. That’s because RIAs provide a range of capabilities — like improved data visualization and streamlined processes — that go beyond the limitations imposed by HTML They get results. Firms that measure the business impact of their RIAs say that rich applications meet or exceed their goals (see Figure 2). As the RIA success stories of these early adopters become more widely known, site owners at mainstream companies also look to RIAs to boost online effectiveness. Source : “The Business Case For Rich Internet Applications” Forrester Research – March 12, 2007 Rasheed Akhtar [email_address]
- 5. Why Flex? Business Case – Why RIAs (cont’d)? Rasheed Akhtar [email_address]
- 6. Why Flex? Finally – why flex? Same reasons for using Flash over traditional HTML Flex applications run consistently across all major browsers and on the desktop Robust development environment (i.e. via Flex Builder 3 and Flex builder integration with Adobe Creative Suite) Why not just use flash? “ Traditional” programmers found it challenging to adapt to animation metaphor upon which the Flash Platform was originally designed (i.e. movieclips, frames, timeline, etc…) Flex minimizes this problem by providing a workflow and programming model that is familiar to these developers Rasheed Akhtar [email_address]
- 7. History Flex 1.0 & 1.5 (2004 - Macromedia) Primarily for enterprise market Priced around $15,000USD per CPU Java server based solution (J2EE, Tomcat, Jrun) that compiled MXML and Actionscript on-the-fly to SWF files i.e. MXML files placed on server and users requested MXML files directly that would output SWFs Flex Builder IDE based on Dreamweaver code base Rasheed Akhtar [email_address]
- 8. History Flex 2 (2006 – Adobe) Licensing model overhauled Flex SDK (compilers/class library) available as free download Framework built upon AS3 and requires Flash Player 9 2 versions: Standard & Professional (includes data visualization library) No longer dependent on server side component Apps compiled locally as SWFs and placed on web server Server side software spun off as separate product called Flex Data Services 2 (LiveCycle Data Services) Flex Builder based on open source Eclipse platform Rasheed Akhtar [email_address]
- 9. History & Future Flex 3 (2008 – Adobe) Flex 3 SDK open sourced Flex Builder enhancements included integration with Creative Suite, support for AIR (released at same time), and addition of profiling and refactoring tools Flex 4 (2009* – Adobe) Biggest change is to skinning/component architecture (i.e. Spark and FXG) FXG is XML-based graphics interchange format for the Flash Platform Foundation for Flash Catalyst Targets Flash Player 10 Rasheed Akhtar [email_address]
- 10. Now building on Flex… Rasheed Akhtar [email_address]
- 11. Now building on Flex… Some quick sample sites: http://www.iexpenseonline.com/ https://www.photoshop.com/express/landing.html https://acrobat.com/ http://flex.org/showcase/ Rasheed Akhtar [email_address]
- 12. Flex SDK MXML XML based declarative language to define User Interface Similar to XHTML Primarily used for user interface design Actionscript 3 Flex Class Library Everything in the mx.* packages Containers Controls Charting Components Rasheed Akhtar [email_address]
- 13. How Flex works Rasheed Akhtar [email_address]
- 14. Behind the Scenes Flex SDK contains 2 compilers mxmlc: application compiler (compiles to SWF) compc: component compiler (compiles to SWC) Compilers are invoked on MXML, Actionscript and asset files (images, SWF files, etc...) and result in respective file formats Rasheed Akhtar [email_address]
- 15. Behind the Scenes MXML tags correspond to ActionScript classes or properties of classes. When compiler is invoked, Flex parses your MXMLtags and generates the corresponding ActionScript classes. It then compiles these ActionScript classes along with the “other” (user defined) Actionscript classes and assets into SWF bytecode which it stores in a SWF file. MXML: Actionscript: Result: <mx:Button id="myButton" label="I'm a button!" /> var myButton:Button; myButton = new Button(); myButton.label = " I'm a button! " ; addChild (myButton); Rasheed Akhtar [email_address]
- 16. Flex Builder 3 Demo Rasheed Akhtar [email_address]
- 17. MXML MXML documents are plain-text documents Should contain XML declaration encoding should be set to UTF-8 for best compatibility 2 types of root nodes available Application: <mx:Application ...> </Application> Components: any component tag other than application <mx:Canvas ...> </Canvas> <mx:Panel ...></Panel> Rasheed Akhtar [email_address]
- 18. MXML MXML uses namespaces (xmlns) http://www.adobe.com/2006/mxml default namespace for flex (contains manifest file for flex class mappings A namespace is a unique grouping of elements (flex libraries in this case) Namespaces map library classes and components to tags <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml " xmlns:components="components.*“ /> //Flex button <mx:Button id="myButton" label="I'm a button!" /> //custom button <components:Button id="myButton" label="I'm a button!" /> </mx:Application> Rasheed Akhtar [email_address]
- 19. Interactive MXML Declaring UI elements via MXML is useful but need to make it interactive 2 basic MXML features to create interactivity Event Handling Every component does “something” where it dispatches events MXML allows inline event handlers <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml " /> //Flex button <mx:Button id="myButton" label="I'm a button!" click=“Alert(‘ STOP! ’)" /> </mx:Application> Rasheed Akhtar [email_address]
- 20. Interactive MXML Data Binding Used to link one component to another Automates changing of values of one object when the value of another object changes Several ways to utilize it. Simplest method is using curly brace {} syntax <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml " /> <mx:Vbox> <mx:Text id="output" text=" {input.text} " /> <mx:TextInput id="input" /> </mx:Vbox> </mx:Application> Rasheed Akhtar [email_address]
- 21. Containers Containers can hold other containers (nested containers) or controls Components defined within a container are called children 2 categories of containers: Layout containers: control sizing/positioning of their children Navigator containers: control user movement/navigation among multiple child containers Flex offers wide variety of containers: Canvas Panel Tile TitleWindow Hbox Vbox Rasheed Akhtar [email_address]
- 22. Containers - Layout All containers except Canvas container support automatic (box-based) layout Do not need to specify position for children of container Layout handled by selecting container type, specifying properties on container and order of container’s children Hbox does horizontal box layout, Vbox does vertical box layout, etc... Layout rules executed when container created and when children are added or removed Canvas container (and optionally Application/Panel containers) use absolute layout Explicitly set x,y positions of container’s children Support constraint based layout Containers support scroll bars Rasheed Akhtar [email_address]
- 23. Controls Flex natively provides approx 34+ controls Many open source custom controls (and control libraries) available from the community Controls are UI components Most controls have MXML API for declaring control, properties and events Actionscript API for calling methods and setting properties at runtime Customizable appearance (styles/skinning) Rasheed Akhtar [email_address]
- 24. Controls Data entry controls Used to enter data or display plain text or HTML formatted text Examples: Label, Text, TextInput, TextArea, RichTextEditor, etc... Buttons Examples: Button, LinkBar, ButtonBar, etc... List Controls Examples: List, Horizontal List, TileList, etc... Tree and Grid Controls Examples: Tree, DataGrid, OLAPDataGrid Other Controls Examples: Alert, SWFLoader, ColorPicker, etc... Rasheed Akhtar [email_address]
- 25. Controls Data provider controls Use input data from a data provider Data provider is a collection of objects (similar to array) Provide layer of abstraction so multiple controls can use one data provider (model/view separation) Too many controls to go into detail See Flex Framework Diagram Worth checking out Flex 3 Component Explorer: http://examples.adobe.com/flex3/componentexplorer/explorer.html Rasheed Akhtar [email_address]
- 26. Note Both containers/controls can be extended to make customer controls/containers Because framework is open source you can see actual classes used to make framework and borrow/modify as necessary Rasheed Akhtar [email_address]
- 27. Charting Components Only available with professional version Libraries are not open sourced Provides 9 types of charts: Area, Bar, Bubble, Candlestick, Column, HLOC Chart, Line, Pie, Plot Charts can be extended to provide interactivity Charts can also be styled/skinned to customize appearance Charts can have variety of effects applied Rasheed Akhtar [email_address]
- 28. Styling (CSS) Controls modified through style properties Can also be styled using CSS (inline and external stylesheets) Similar concept to HTML CSS (i.e. syntax and certain CSS attributes are the same) however Flex CSS does not support all of the HTML CSS layout options (i.e. x, y, width, height, etc... ) Style Explorer: http://examples.adobe.com/flex3/consulting/styleexplorer/Flex3StyleExplorer.html Rasheed Akhtar [email_address]
- 29. Styling (CSS) Styling can also be done at runtime using StyleManager and Actionscript StyleManager is singleton class that allows access/modification of styles Very powerful – app can completely change visual appearance at runtime import mx.styles.StyleManager; : : StyleManager.getStyleDeclaration("Button").setStyle("fontSize",24); Rasheed Akhtar [email_address]
- 30. Skinning Refers to changing the way a component looks by replacing the assets that make up visual appearance 2 approaches Graphical skinning Use of bitmap/vector graphics to change component appearance Skin import wizard allows for easily importing skin created in other CS products (based on naming conventions) Programmatic skinning Graphics drawn via Actionscript to change appearance Great Flex Skinning resource: http://www.scalenine.com/ Rasheed Akhtar [email_address]
- 31. Final Thoughts… Flex framework is massive and also very powerful Working to bridge the gap between designer and developer workflow using innovative products/techniques Many additional topics around building Flex Apps that deserver their own sessions Application State Application frameworks Backend connectivity Etc… Rasheed Akhtar [email_address]
- 32. Resources Adobe Devnet: http://www.adobe.com/devnet/flex/ Learn Flex in a week http://www.adobe.com/devnet/flex/videotraining/ Flex Help: Getting started with Flex http://learn.adobe.com/wiki/display/Flex/Getting+Started Flex Examples: http://blog.flexexamples.com/ Flex.org http://flex.org/ Rasheed Akhtar [email_address]