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 (http://maps.google.com/)– Yahoo map (http://maps.yahoo.com/)– Youtube (http://www.youtube.com/)

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

• http://www.sun.com/software/javafx/

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/

RIA Tech - SilverLight

• Microsoft

• Design tool: Visual Studio / Blend

• CTP version: 11/2006

• Commercial

• http://www.microsoft.com/silverlight/

RIA Tech - Flex

• Macromedia -> Adobe

• Design tool: Flex Builder

• Flex 1.0: 2004

• http://www.adobe.com/devnet/flex/

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: http://www.miniusa.com/?#/build/configurator/mini_clubs-m

• Adobe’s Buzzword project : http://buzzword.acrobat.com/

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: http://www.adobe.com/support/flex/

Create a simple app 1

• Basic Concepts– MXML: Layout– ActionScript : application logic

MXML – The root element

<mx:Application>

MXML - Components

<mx:Application> <mx:WebService id=“ws” wsdl=“catalog.wsdl”/> <mx:Button label=“Get Data”

click=“ws.getProducts()”/> <mx:DataGrid dataProvider=“{ws.getProducts…}”/> <mx:LineChart dataProvider=“{ws.getProducts….}”/></mx:Application>

MXML - ID

<mx:Application> <mx:WebService id=“ws” wsdl=“catalog.wsdl”/> <mx:Button label=“Get Data”

click=“ws.getProducts()”/> <mx:DataGrid dataProvider=“{ws.getProducts…}”/> <mx:LineChart dataProvider=“{ws.getProducts….}”/></mx:Application>

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>

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=“http://api.flickr.com/services/feeds/photos_public.gne”

• Add result=“photoHandler(event)

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;

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<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>

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}" />

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• <?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>

Another Example

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

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/

Thanks!