1 / 34

RIA & Adobe Flex

RIA & Adobe Flex. Yunhui Fu 11/05/2008. What’s RIA. RIA (Rich Internet Applications) web applications which look and perform like desktop applications. What’s RIA. RIA (Rich Internet Applications) web applications which look and perform like desktop applications. Some examples:

teness
Download Presentation

RIA & Adobe Flex

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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/) 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/configurator/mini_clubs-m • Adobe’s Buzzword project : 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 <mx:Application>

  15. MXML - Components <mx:Application> <mx:WebService id=“ws” wsdl=“catalog.wsdl”/> <mx:Button label=“Get Data” click=“ws.getProducts()”/> <mx:DataGriddataProvider=“{ws.getProducts…}”/> <mx:LineChartdataProvider=“{ws.getProducts….}”/> </mx:Application>

  16. MXML - ID <mx:Application> <mx:WebService id=“ws” wsdl=“catalog.wsdl”/> <mx:Button label=“Get Data” click=“ws.getProducts()”/> <mx:DataGriddataProvider=“{ws.getProducts…}”/> <mx:LineChartdataProvider=“{ws.getProducts….}”/> </mx:Application>

  17. MXML - Attributes <Application> <WebService id=“ws” wsdl=“catalog.wsdl”/> <Button label=“Get Data” click=“ws.getProducts()”/> <DataGrid dataProvider=“{ws.getProducts…}”/> <LineChart dataProvider=“{ws.getProducts….}”/> </Application>

  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/services/feeds/photos_public.gne” Add result=“photoHandler(event)

  24. Create a simple app 8 Create a bindable XML variable in ActionScript <mx:Script> <![CDATA[ ]]> </mx:Script> 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 <mx:TileList width="100%“ height="100%"> </mx:TileList> Add TileList‘s attribute: dataProvider="{photoFeed} Add TileList‘s property: <mx:itemRenderer> </mx:itemRenderer> Add itemRenderer‘s property: <mx:Component> </mx:Component>

  28. Create a simple app 11-b Add VBox in Component: <mx:VBox width="125" height="125" paddingBottom="5" paddingLeft="5" paddingTop="5" paddingRight="5"> </mx:VBox> Add Image & Text in Vbox: <mx:Image width="75" height="75" source="{data.thumbnail.url}" /> <mx:Text text="{data.credit}" />

  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 • <?xml version="1.0" encoding="utf-8"?> • <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> • <mx:HTTPService id="srv" url="http://localhost/formtest.php" method="POST“ • result="mx.controls.Alert.show (srv.lastResult.toString());"> • <mx:request> • <first>{first.text}</first> • <last>{last.text}</last> • <email>{email.text}</email> • </mx:request> • </mx:HTTPService> • <mx:Form> • <mx:FormItem label="First Name"> • <mx:TextInput id="first"/> • </mx:FormItem> • <mx:FormItem label="Last Name"> • <mx:TextInput id="last"/> • </mx:FormItem> • <mx:FormItem label="Email"> • <mx:TextInput id="email"/> • </mx:FormItem> • <mx:FormItem> • <mx:Button label="Subscribe" click="srv.send()"/> • </mx:FormItem> • </mx:Form> • </mx:Application>

  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/configurator/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!

More Related