Lab 05: Developing Rich Internet Applications with the ...

AT 70.12: Web Application Engineering Asian Institute of Technology Handout 6: Lab 05 Instructions

August 2009 Computer Science and Information Management Instructor: Matthew Dailey

Lab 05: Developing Rich Internet Applications with the Adobe Flex Framework Instructions: In this lab, we will experiment with the Adobe Flex framework. We will begin by installing the Flex3 SDK. To get a better understanding of the Flex development process, we will develop a simple Flex application. Credits: The material in this tutorial comes from the Adobe Flex developer center: http://learn.adobe. com/wiki/display/Flex/Part+I.+Creating+a+Simple+RIA. This lab manual was originally written by Euam Chantarasombat.

Introduction to Flex Flex is an open source framework used for the development of rich Internet applications (RIAs) that can be deployed on the desktop, on browsers, and shipped with operating systems. The Flex product family is comprised of the Flex software development kit (SDK), the Flex data services IDE, Flex charting, and Flex data services. Flex applications normally run under the Flash Player, or you can use the Adobe AIR runtime for desktop applications. Flex applications can be developed directly using the open source Flex SDK or with the help of the proprietary Adobe Flex Builder IDE plugin for Eclipse. Flex applications use Adobe’s MXML user interface markup language and application logic written in ActionScript3 (like JavaScript, a subset of ECMAScript). Flex applications generate richer and user experiences than traditional Web applications but are similar in capability to Ajax applications but with tightly integrated user interface components such as trees, data grids, several text box controls, buttons, and various layouts. Flex doesn’t constrain how you structure your applications. For a MVC framework on top of Flex, see Cairngorm.

Install Flex SDK 1. Download the Flex SDK zip file from the course website. 2. Create a directory for the Flex SDK. 3. Extract the zip file in this directory. You’ll find the following directories: ˆ ant/: Contains Flex ant tasks. ˆ asdoc/: Contains helper files for the ASDoc tool, which creates HTML documentation from your MXML and ActionScript source code. ˆ bin/: Contains the mxmlc, compc, asdoc, and fdb utilities. bin/ also contains the jvm.config file, which specifies Java settings that you can modify, if necessary. ˆ frameworks/: Contains compiled framework classes, configuration files, and framework source code. ˆ lib/: Contains JAR files used by the utilities. ˆ runtimes/: Contains installers for the Adobe AIR runtime inside the air/ subdirectory and installers for debug versions of Flash Player 9 inside the player/ subdirectory. ˆ samples/: Contains sample applications.

1

ˆ templates/: Contains HTML templates for Flash Player detection and browser integration and inside the air folder, a sample Adobe AIR application.xml file.

4. Ensure that the Java Runtime Environment (JRE) is installed on the computer and that the $JAVA HOME/bin directory is defined in the system path. JRE 1.4, 1.5, or 1.6 is required. For 1.4, JRE 1.4.2 06 or later is required. 5. Install the appropriate debug Flash Player from the runtimes/player/platform directory. 6. (Optional; seems unnecessary for Linux at least) When the Flash Player installation finishes, restart your computer to ensure that the updated Flash Player browser plugin is enabled. 7. Continue by reviewing the explorer sample. To run the explorer sample, you must first compile it running the samples/explorer/build.bat (Windows) or samples/explorer/build.sh (UNIX and Mac OS X) files. For more information on the Flex compilers, see the “Using the Flex Compilers” chapter in the Building and Deploying Flex Applications manual. If using Firefox on Linux, be sure that you’re using the Adobe flash player, not the Swfdec SWF Player for the content (see Tools → Manage Content Plug-ins).

Creating Simple Flex Applications Here we are going to create a simple flex application to retrieve and display photos from the Flickr API based on user-supplied keywords. To develop this application we will use pre-built Flex components, and the Flex HTTP service. Before we begin the coding, the following list summarizes key points will help you familiarize to Adobe Flex technology: ˆ Flex applications are Flash applications.

– Flex is a programmer-friendly way to create Flash-based rich internet applications. – Flex applications are rendered using Flash Player 9. – Like all Flash RIAs, Flex SWF files are processed by the client, rather than the server. ˆ The Flex framework contains a rich set of predefined class libraries and application services for creating Flex applications.

– The framework is available in a free SDK and the Eclipse-based Flex Builder IDE. – The framework includes a compiler that is available as a standalone tool or as part of Flex Builder. – The class libraries and application services provide developers with standard components and tools for quick application development. Standard UI components can be extended and customized. ˆ Flex applications are written using MXML and/or ActionScript.

– MXML is an XML-based markup language that is primarily used to lay out application display elements. – ActionScript is an ECMAScript-compliant object-oriented programming language that is primarily used for application logic. – MXML and ActionScript code are compiled into binary SWF files.

Let the fun begin Now that we’ve learned what Flex is, it’s time to start building an application. Follow the steps below to create a Flex application that retrieves photos from Flickr and displays them. The application is comprised of 3 main parts: the UI for accepting the keywords and displaying photos, the HTTPService defining the URL from which images are requested, and action scripts defining methods and event handlers. Use any text editor to create this Flex application and name it FlickrRIA.mxml.

2

1. Create a user interface using MXML to accept user-supplied keywords. We’ll use MXML version 1 controls for the UI layout. ˆ The Application container surrounds an MXML file’s content, defines the mx namespace and sets some styles. ˆ The HBox container forces the UI controls to a horizontal layout. Users enter the search terms into the TextInput control.

We’ll set the display format and layout the search form in this step. 2. To request and handle RSS data from Flickr we will use the Flex HTTPService. In this step we’ll create the HTTPService object. After the opening Application tag and before the HBox component, create an HTTPService component. It does not have a closing tag. Add the id attribute with a value of photoService, the url attribute with the value of http://api.flickr.com/services/ feeds/photos_public.gne, and the result attribute with the value photoHandler(event). The photoHandler event packages the service results. We create the photoHandler function later in this tutorial. 3. We use ActionScript for business logic to write a method and event handler. Here we declare a variable called photoFeed as an array collection. The [Bindable] metadata tag is placed before variables you want automatically managed. Changes to photoFeed will be instantly reflected everywhere the variable is used. We will also write a script function for requesting a photo which is called when search button in step 1 is clicked. requestPhotos() is a custom method that adds two parameters (format and tags) to an object and sends it to the Flickr API using the photoService.send() HTTPService method. The photoService object is a Flex HTTP service, which we have created in step 2. (a) Create a bindable XML variable in ActionScript 3.0: i. Before the HTTPService component, add a Script component. Alternatively, you can place the Script component after the HTTPService component. ii. In the mx:Script block, enter import mx.collections.ArrayCollection. ArrayCollection is the type of object that is used as a data provider.
3

import mx.collections.ArrayCollection; ]]> iii. After the ArrayCollection import statement, enter import mx.rpc.events.ResultEvent to import the ResultEvent class. The ResultEvent class is the type of event that the HTTPService generates. iv. Declare a bindable private variable named photoFeed of class ArrayCollection after the import statement in the mx:Script block. The photoFeed ArrayCollection will be populated with the HTTPService response data. (b) Next let’s write a function to send a HTTPService request and user-selected keywords to flickr.com via the Flickr API: i. In the mx:Script block, create a private function named requestPhotos() with a return type of void. This is the function where the HTTPService call is initiated. ii. In the function, cancel any previous requests to photoService using the cancel() method. The instance name of the HTTPService component is photoService: photoService.cancel(); iii. Create an Object variable named params: var params: Object = new Object(); iv. Set a format attribute for the params object with a value of rss 200 enc. This value tells Flickr how to package the response: params.format = 'rss_200_enc'; v. Set a tags attribute for the params object with a value of searchTerms.text. This will be the value that the user entered in the the search field: params.tags = searchTerms.text; vi. Finally, write the code to send the request and the corresponding parameters using the send() method of photoService: photoService.send( params );

4

(c) OK, now let’s create the HTTPService result handler that will run when the response to our HTTPRequest is received. After the requestPhotos() function definition, create a private function named photoHandler with return type void that takes one argument of type ResultEvent. In the function, populate the photoFeed variable with the data located in the event object, event.result.rss.channel.item, cast as an ArrayCollection: private function photoHandler( event: ResultEvent ): void { photoFeed = event.result.rss.channel.item as ArrayCollection; } (d) When you’re done, your script should look like this: 4. Next let’s create a bindable XML element specifying a TileList component to display the returned images. After the HBox component and before the closing Application tag, add a TileList component with a width of 100% and height of 100%. Specify attribute dataProvider with a value of {photoFeed} to bind the data set by our script to the tile component. Finally, add an itemRender attribute with value FlickrThumbnail (we’ll create the item renderer in the next section — it renders the layout for each item in the TileList): 5. Save the file FlickrRIA.mxml. 6. Next we’re going to create a custom component item renderer to display photo thumbnail and description into each Tile component. Create a new file called FlickrThumbnail.mxml: Here we define how our item renderer will look. It has a VBox which contains image and text components. The itemRenderer passes values to the Image component through the Image component’s data property. We add a source with a value of {data.thumbnail.url} to the Image component to populate the image. To the text component we add text attribute having a value of {data.credit} to display the name of the author. 7. Save the file FlickrThumbnail.mxml.

Compile the MXML file Ok we’re almost there, now what we have to do is just compile the MXML file into a SWF (Shockwave Flash) file. Here are the steps for turning your MXML file into a Flash package: 1. Go to directory containing FlickrRIA.mxml. 2. Type [Flex SDK path]/bin/mxmlc FlickrRIA.mxml to compile. 3. Voila, (after fixing any bugs) you have a FlickrRIA.swf file!

Having it up and running Once you have a SWF file, you can run it with the Flash player, or you can embed it in a HTML file. Here we are going to embed in HTML so you can get the idea of how to include Flex applications in your Web pages. Like any other Flash object, we include our Flex application using the tag. Create your HTML file, with any name, as follows:

My first flex application

Then open it in the browser and enjoy your first Flex application! You might try some nice queries like “doggie” and “benjamindailey.”

6

Finished already? OK, now try something just a bit more sophisticated. Try going through the tutorial on a Flex app to download and display data on music from Amazon. This is online at http://blog.paranoidferret.com/ index.php/2007/08/13/flex-amazon-web-services-tutorial/.

7