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: –Google map ( –Yahoo map ( –Youtube (

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

RIA Tech - JavaFX Sun Microsystems Design tool: NetBean Java one meeting, May 2007 Not available until 2009 Open source? compiler

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.

RIA Tech - SilverLight Microsoft Design tool: Visual Studio / Blend CTP version: 11/2006 Commercial

RIA Tech - Flex Macromedia -> Adobe Design tool: Flex Builder Flex 1.0:

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.

Flex examples MINI car Configurator: tor/mini_clubs-m tor/mini_clubs-m Adobe’s Buzzword project :

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

Flex Builder - Installation Flex Builder 3 Professional Windows & Macintosh Version Download:

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

MXML – The root element

MXML - Components

MXML - ID

MXML - Attributes

Create a simple app 2 Application: FlickrRIA flickr.com

Create a simple app 3

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

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

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

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

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;

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); }

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

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:

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

Create a simple app 12 Run!

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

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

Another Example Video (10’): /flexapp/

Reference Jack Herrington and Emily Kim, Getting Started with Flex™ 3 MINI car Configurator: igurator/mini_clubs-m Adobe’s Buzzword project : Google map: Yahoo map: Youtube:

Thanks!