Flex for Flash Developers :1 Flex for Flash Developers Sho Kuwamoto Sr. Director, Engineering Adobe Systems, Inc.


What is Flex? :2 What is Flex? Tag/script-based app development for Flash ActionScript class library Layout Effects, skins, etc. Networking and data Compiler, debugger, and other tools


HTML vs Flex vs Flash :3 HTML vs Flex vs Flash Unlike HTML, Flex was designed for application development (no more creating navbars by slicing up images!) HTML / CSS files Includes JavaScript libraries Tag-based HTML output HTML Flex Flash MXML / CSS files Components ActionScript classes Tag-based SWF output FLA files Symbols ActionScript classes Timeline-based SWF output format reuse behavior metaphor output


Let’s see some code :4 Let’s see some code


Our first application – Step1.mxml :5 Our first application – Step1.mxml


Adding layout – Step2.mxml :6 Adding layout – Step2.mxml


Adding styles – Step3.mxml :7 Adding styles – Step3.mxml TextArea { font-size: 36px; font-weight: bold; }


Adding behavior – Step4a.mxml :8 Adding behavior – Step4a.mxml


Adding behavior – Step4b.mxml :9 Adding behavior – Step4b.mxml public function goodbye() : void { myPanel.visible = false; }


Adding behavior – Step4c.mxml :10 Adding behavior – Step4c.mxml


Adding behavior – Step4c_code.as :11 Adding behavior – Step4c_code.as public function doInit() : void { goodbyeButton.addEventListener("click", goodbye); } public function goodbye(event: Event) : void { myPanel.visible = false; }


Adding states – Step5.mxml :12 Adding states – Step5.mxml


Adding states – Step5_code.as :13 Adding states – Step5_code.as public function doInit() : void { goodbyeButton.addEventListener("click", goodbye); smallButton.addEventListener("click", makeSmall); } public function goodbye(event: Event) : void { myPanel.visible = false; } public function makeSmall(event: Event) : void { currentState = "small"; }


Adding effects – Step6.mxml :14 Adding effects – Step6.mxml


Deeper dives :15 Deeper dives


Application structure :16 Application structure Flex Application Framework Code behind (AS) CSS Component MXML Component App-specific component (AS/MXML) Reusable component library State State State SWF Skins & Styles Layout & Effects Behavior & Data Components Designer Developer


Designers and developers :17 Designers and developers Responsible for skinning and styling through CSS and SWF Does initial layout. May do final layout (via tool) Does effect and transition design. Responsible for program logic and component development May be responsible for final layout (via containers) May implement effects and transitions Connects to data and services Designer Developer MXML AS CSS/SWF


Keys to des/dev workflow :18 Keys to des/dev workflow Separate out code into “code behind” pages Use or other methods to separate the ActionScript code Add event handlers from ActionScript, not MXML Try not to write fancy data binding code in MXML Do not create visual components programmatically unless absolutely necessary Do as much styling in CSS as possible Use states when possible to express changes to user interface


Skinning and styling :19 Skinning and styling SWF files or GIF/PNG can be used for skinning SWF attached to controls via CSS Scale 9 can be done in SWF or in CSS CSS gives tons of control for the look of Flex controls http://weblogs.macromedia.com/mc/archives/FlexStyleExplorer.html CSS styles can be defined per tag, or per class


Working with states – music app :20 Working with states – music app welcome top 100 by genre user user - edit login genre listing which genre? which user?


How are the states related? :21 How are the states related? welcome top 100 by genre user - edit genre listing (base state) (listing) user


When do effects run? :22 When do effects run? When a specific trigger fires e.g., show, hide, and resize When a transition from one state to another occurs When called explicitly through ActionScript myEffect.play();


Defining your own effects :23 Defining your own effects Using parallel and sequence Effects can also be defined programmatically


Interstate gotchas :24 Interstate gotchas Control how the state change interacts with effects by using SetPropertyAction, et. al.


Components :25 Components MyApp.mxml Break your application into pieces using components function initStartPanel() {…} function initDetailPanel() {…} … …


Components :26 Components MyApp.mxml StartPanel.mxml Break your application into pieces using components function initStartPanel() {…} …


Service calls :27 Service calls Make calls to the server using RPC calls


Service calls :28 Service calls Results come asynchronously; listen for the “result” event. Alternatively, use data binding. Results can be retrieved off of the “result” property of the service itself. Always add fault handlers; you never know whether the connection will work.


Data binding :29 Data binding Use curly braces to bind ActionScript expressions to MXML attribute values. Not all attributes can be bound – use the [Bindable] metadata in order to make a member variable bindable. In beta 2, properties with getters and setters can also be made bindable through the same metadata.


Slide 30:30