presentation-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:
  – 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/configura
  tor/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/serv
  ices/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/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/
Thanks!