Building Rich Internet Applications with Macromedia Flex

1. Building Rich Internet Applications with Macromedia Flex Steve DruckerCEOFig Leaf Software

2. Topics • What is Flex? • Getting Started • Interacting with Users • Working with Data Models • Retrieving External Data

3. What is Flex? • J2EE-based application server that compiles XML-based syntax into Flash AS/SWF files. Future support for .NET is planned. • Forces model-view-controller approach to development • Analogy: CFML:Text as MMXML:SWF • Application can interact with a variety of data sources • Java Objects • SOAP web services • Server-side data sources (XML) • Data may be "baked" into your application at compile-time • Target Uses • Rich internet applications • Executive Dashboards, Portal • E-Commerce • Example Applications: http://www.macromedia.com/devnet/flex/example_apps.html

4. What is Flex (con't) • Trial and Developer Version • Generated SWFs expire after 24 hours • Enterprise Version • Generated SWF may persist indefinitely

5. Flex Application Elements • MXML (Flex Markup Language) • Containers • <box>, <canvas>, <controlbar>, <form> • Controls • <button>,<checkbox>,<combobox>, etc… • Data Modeling • <model> • Data Communication Services • <WebService>, <RemoteObject> • Behaviors • <Effect>, <Fade>, <Move> • ActionScript 2.0 • Object Oriented • Strongly Typed • Case-Sensitive • Similar to JavaScript / Java

6. Getting Started with Flex • Installing Flex • "Brady" • Hello World

7. Installing Flex • Flex comes with it's own JRUN-based server • Can install into CF Enterprise J2EE JRUN server as well • Runs on port 8700 by default • May be installed on Websphere, BEA, etc (.war file)

8. "Brady" • "Brady" is the code-name for "Macromedia Flex Builder" which uses a Dreamweaver-based UI to create Flex Applications • Since Flex code is text-based, you may use any editor (including notepad) to write code, however, using Brady may give you productivity benefits (especially in the short-run)

9. Demo "Hello World"

10. Hello World <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" themeColor="haloSilver"> <mx:Panel label="Welcome to Flex" title="Welcome to Flex"> <mx:Label text="Hello World" /> <mx:Label text="Macromedia Flex is FUN!" /> </mx:Panel> </mx:Application>

11. Interacting with Users • Defining User Interfaces • Creating a Form • Creating a Binding • Using the Event Model • Creating an Event Handler

12. Button Checkbox ComboBox DateChooser DateField DataGrid HRule/VRule Label Link List Loader Menu Menubar NumericStepper Progress Bar RadioButton RadioButton Group Scrollbar Text Textarea TextInput Tree Defining User Interfaces

13. Creating a Form • Use the Form Tags, of course! • <mx:Form> • <mx:FormHeading> • <mx:FormItem> • Form Controls • <mx:TextInput> • <mx:TextArea> • <mx:DateChooser> • <mx:DataGrid> • <mx:Button> • Etc…

14. Creating a Binding • Tying Data in One Object to Another Object • Use Curly Brace Syntax • Example: <mx:FormItem label="Enter your last name"> <mx:TextInput id="lastname" /> </mx:FormItem><mx:Label text="You entered {lastname.text}">

15. Demo Creating a Binding

16. Creating a Binding <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" themeColor="haloSilver"> <mx:Panel title="Simple Form"> <mx:Form> <mx:FormItem label="Enter your last name"> <mx:TextInput id="lastname" /> </mx:FormItem> <mx:Button label="Submit" /> </mx:Form> <mx:Label text="You entered: {lastname.text}" /> </mx:Panel> </mx:Application>

17. The Event Model • Flex supports "all the usual suspects" when it comes to events • System Events occur as the result of systematic code execution • draw • initialize • load • User Events • Click • Change • Mousedown • Etc…

18. Creating ActionScript UDF's • Use the <mx:script> block • Import external .AS file <mx:Script> <![CDATA[ function foo(): Void { myLabel.text="Try again"; } ]]> </mx:Script> <mx:Script source="myactionscript.as" />

19. Flex Data Modeling • The Controller • Interprets user interaction and converts these to programmatic action • The Model • Manages data structures, responds to queries about state, responds to instructions to change state • The View • Manages the display

20. Creating Data Models in Flex • For simple models with no custom methods, use <model> • For complex models, use Actionscript classes

21. Example Model Definition <mx:Model id="customer"> <name> <first>Steve</first> <last>Drucker</last> </name> <email>sdrucker@figleaf.com</email></mx:Model> Data can be accessed as: {customer.name.first} {customer.email}

22. Defining Data Validation • Note that Data validation is performed against the MODEL, not against the FORM FIELD • Validators • String • Credit card • Date • Email • Number • Phone • Date • Social Security • Zip Code

23. Walkthrough String Validation

24. String Validation <?xml version="1.0" encoding="utf-8"?> <mx:Application themeColor="haloSilver" xmlns:mx="http://www.macromedia.com/2003/mxml"> <mx:Model id="cartData"> <customerlastname>{lastname.text}</customerlastname> </mx:Model> <mx:StringValidator field="cartData.customerlastname" listener="lastname" minLength="1" maxLength="10" tooShortError="You suck"/> <mx:Panel title="Simple Form"> <mx:Form> <mx:FormItem label="Enter your last name"> <mx:TextInput id="lastname" toolTip="Please enter your last name" /> </mx:FormItem> <mx:Button label="Submit" /> </mx:Form> <mx:Label text="You entered: {lastname.text}" /> </mx:Panel> </mx:Application>

25. Retrieving External Data • Use the <mx:WebService> tag to populate a Flex data model • When referencing data returned from ColdFusion, note that variable names must be referenced in UPPER CASE <mx:WebService id="wsCourses" wsdl="http://localhost/cfun/courses.cfc?wsdl" load="wsCourses.getcourses()" result="wsResultHandler(event.result)"/>

26. Walkthrough • Accessing CF webservice information and displaying in a data grid

27. ColdFusion web service invocation <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml"> <mx:Script> <![CDATA[ var myWSData: Array; function wsResultHandler(result:Array):Void { myWSData = result; } ]]> </mx:Script> <mx:WebService id="wsCourses" wsdl="http://localhost/cfun/courses.cfc?wsdl" load="wsCourses.getcourses()" result="wsResultHandler(event.result)"/> <mx:Model id="CourseData"> {myWSData} </mx:Model> <mx:DataGrid id="datagrid1" dataProvider="{CourseData}"></mx:DataGrid> </mx:Application>

28. Looping through data using <mx:Repeater> • Use the <mx:Repeater> tag to loop through a data structure, generating instances of components

29. Walkthrough Using the <mx:Repeater> Tag

30. Using <mx:repeater> <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml"> <mx:Script> <![CDATA[ var myWSData: Array; function wsResultHandler(result:Array):Void { myWSData = result; } ]]> </mx:Script> <mx:WebService id="wsCourses" wsdl="http://localhost/cfun/courses.cfc?wsdl" load="wsCourses.getcourses()" result="wsResultHandler(event.result)"/> <mx:Model id="CourseData"> {myWSData} </mx:Model> <mx:Panel vScrollPolicy="on" height="400" title="Courses"> <mx:Repeater dataProvider="{CourseData}" id="allCourses"> <mx:Label id="mylabels" text="{allCourses.currentItem.CLASSNAME}"/> </mx:Repeater> </mx:Panel> </mx:Application>

31. Putting it all together • MXML files ultimately become available as tags to be included in a parent component

32. Walkthrough Real Estate Example

33. Using 3rd Party Components • Flex is extendable through SWC files • Uses the v. 2 Component Framework

34. Summary • Flex – an alternative coding lifestyle! • Rapidly develop Rich Internet Apps without Flash! • Resources • Custom development from www.figleaf.com • MM Authorized training from training.figleaf.com • Look for our new free Flex study group, coming soon at http://new.figleaf.com/community/studygroups.cfm