1. RIA & Adobe Flex Yunhui Fu 11/05/2008

2. What’s RIA RIA (Rich Internet Applications) –web applications which look and perform like desktop applications.

3. What’s RIA RIA (Rich Internet Applications) –web applications which look and perform like desktop applications. Some examples: –Google map (http://maps.google.com/) –Yahoo map (http://maps.yahoo.com/)http://maps.yahoo.com/ –Youtube (http://www.youtube.com/)

4. RIA Tech Two type of techonologies –Javascript AJAX – supported by browser Toolkits –Open source: jQuery, Prototype, script.aculo.us, Mootools, Dojo –Google AJAX API –Yahoo! User Interface Library (YUI) –ASP.NET AJAX –Plug-ins Installation – virtual machine Toolkits –Java, JavaFX –Flash, Flex –Silverlight

5. RIA Tech - JavaFX Sun Microsystems Design tool: NetBean Java one meeting, May 2007 Not available until 2009 Open source? compiler http://www.sun.com/software/javafx/

6. RIA Tech - Curl Curl – subsidiary of Sumisho Computer Systems Design tool: Curl 6.0 First release: 2002 Free for personal use; Deployment License is needed. http://www.curl.com/

7. RIA Tech - SilverLight Microsoft Design tool: Visual Studio / Blend CTP version: 11/2006 Commercial http://www.microsoft.com/silverlight/

8. RIA Tech - Flex Macromedia -> Adobe Design tool: Flex Builder Flex 1.0: 2004 http://www.adobe.com/devnet/flex/

9. What’s Flex A method to develop the swf A tool of the programmer Flex applications are rendered using Flash Player 9 Flex applications are written using MXML and/or ActionScript –MXML: XML-based markup language, layout display elements –ActionScript : ECMAScript-compliant object-oriented programming language, application logic. –MXML and ActionScript code are compiled into binary SWF files.

10. Flex examples MINI car Configurator: http://www.miniusa.com/?#/build/configura tor/mini_clubs-m http://www.miniusa.com/?#/build/configura tor/mini_clubs-m Adobe’s Buzzword project : http://buzzword.acrobat.com/ http://buzzword.acrobat.com/

11. Flex Builder IDE (Integrated Development Environment) Base on Eclipse IDE (An open source IDE) Integrate design, debug

12. Flex Builder - Installation Flex Builder 3 Professional Windows & Macintosh Version Download: http://www.adobe.com/support/flex/

13. Create a simple app 1 Basic Concepts –MXML: Layout –ActionScript : application logic

14. MXML – The root element

15. MXML - Components

16. MXML - ID

17. MXML - Attributes

18. Create a simple app 2 Application: FlickrRIA flickr.com

19. Create a simple app 3

20. Create a simple app 4 Create a new project Flex Builder IDE –File->New->Flex Project: (name) FlickrRIA –(Application Type) Web Application + Server Technology –Finish  FlickrRIA.mxml is created

21. Create a simple app 5 Delete layout=“absolute” Add: –backroundGradientColors=“left” –horizontalAlign="left“ –verticalGap="15" horizontalGap="15"

22. Create a simple app 6 Click “Design” button to switch to design mode Add Component: HBox Add Label Add TextInput Add Button

23. Create a simple app 7 Add HTTPService object Use HTTPService to call Flickr service and return results Add id=“photoService” Add url=“http://api.flickr.com/serv ices/feeds/photos_public.gne” Add result=“photoHandler(event)

24. Create a simple app 8 Create a bindable XML variable in ActionScript <![CDATA[ ]]> Add –import mx.collections.ArrayCollection; –import mx.rpc.events.ResultEvent; Add bindable private variable –[Bindable] –private var photoFeed: ArrayCollection;

25. Create a simple app 9 Create submit button click handler Add button’s attribute: –click="requestPhotos()" Add TextInput’s id: –id="searchTerms" Add function requestPhotos() private function requestPhotos () : void { photoService.cancel (); var params:Object = new Object (); params.format = 'rss_200_enc'; params.tags = searchTerms.text; photoService.send (params); }

26. Create a simple app 10 Add HTTPService result handler – photoHandler() private function photoHandler (event:ResultEvent) :void{ photoFeed = event.result.rss.channel.item as ArrayCollection; }.

27. Create a simple app 11-a Add TileList component to display the images Add TileList ‘s attribute: dataProvider="{photoFeed} Add TileList ‘s property: Add itemRenderer ‘s property:

28. Create a simple app 11-b Add VBox in Component : Add Image & Text in Vbox :

29. Create a simple app 12 Run!

30. Connecting to server Flex provides a rich set of web service tools POST & PUT HTTP request –Similar to Ajax –asynchronously SOAP services, Simple Object Access Protocol –A set of Flex classes Remote object –Server side: support AMF requests Socket –Any protocol

31. HTTPService tag <mx:HTTPService id="srv" url="http://localhost/formtest.php" method="POST“ result="mx.controls.Alert.show (srv.lastResult.toString());"> {first.text} {last.text} {email.text}

32. Another Example Video (10’): http://www.adobe.com/products/flex/media /flexapp/

33. Reference Jack Herrington and Emily Kim, Getting Started with Flex™ 3 MINI car Configurator: http://www.miniusa.com/?#/build/conf igurator/mini_clubs-m Adobe’s Buzzword project : http://buzzword.acrobat.com/ Google map: http://maps.google.com/ Yahoo map: http://maps.yahoo.com/ Youtube: http://www.youtube.com/

34. Thanks!