Flex FrameworkMonica Macoveiciuc and Constantin Stan

Faculty of Computer Science, Alexandru Ioan Cuza University, Iasi

FunctionalityThe Flex framework provides the declarative language, application services, components, and data connectivity developers need to rapidly build rich Internet applications (RIAs) for the browser or desktop.Flex 3 is a powerful framework that provides enterprise-level components for the Flash Player platform in a markup language format recognizable to anyone with HTML or XML development experience. The Flex Framework provides components for visual layout, visual effects, data grids, server communication, charts, and much more.

LanguagesMXML is the language developers use to define the layout, appearance, and behaviors of a Flex application. ActionScript™ 3, an object-oriented language based on industry-standard ECMAScript, is the language that defines the client-side application logic. Your MXML and ActionScript are compiled together into a single SWF file that makes up your Flex application. Because the compiler is available both as a standalone utility in the Flex 3 SDK and as part of Adobe® Flex® Builder™ 3 software, developers can choose to develop in the Eclipse™ based Flex Builder IDE or in an IDE of their choice.

Class library and application servicesFlex includes a prebuilt class library and application services that help developers assemble and build RIAs. These services include data binding, drag-and-drop management, the display system that manages the interface layout, the style system that manages the look and feel of interface components, and the effects and animation system that manages motion and transitions.

Components The component library provides all of the user interface controls that developers need, from simple buttons, checkboxes, and radio buttons to complex data grids, combo boxes, and rich text editors. Use the provided containers to design complex, adaptive layouts with ease, and use (or modify) the visually stunning skins to achieve an ideal look and feel.

Adobe AIR integrationThe Adobe AIR™ runtime extends web applications to the desktop, creating new opportunities for more engaging, higher performing online/offline applications. The Flex framework provides native support for the new AIR APIs, and Flex Builder 3 provides all the tools necessary to build, debug, package, and sign applications built on Adobe AIR.

SWF file size reductionGreatly reduce the size of your Flex application SWF files. In addition to bytecode optimizations in the Adobe Flex 3 compiler, a new persistent framework caching feature in Adobe Flash® Player software allows the Flex framework to be cached the first time any Flex application is used, ready for reuse with other Flex applications regardless of the domain they come from. This cache is unrelated to the browser cache, so once the Flex framework has been downloaded it will continue to be available to all Flex applications.

Flex Remoting and Messaging

Flex Remoting and Messaging are both now available to all developers through the open source BlazeDS project. Developers can now start using these powerful Java™ server integration features for free, and then subscribe to Adobe LiveCycle® Data Services, Community Edition for certified builds and support, or upgrade to the full LiveCycle Data Services ES edition for a complete server solution.

Arhitecture

Design patterns can help us design a good Flex Application. It's considered good practice to divide our application into three parts : The Model, the View, and the Controller.We'll present three main Flex architecture frameworks alternatives:

1. No third party framework2. Cairngorm3. PureMVC

1. No third party framework

Most Flex applications that are designed using just the Flex framework are as follows:On one side, you have properly decoupled and reusable view components, that know nothing about the rest of the application, dispatching events and using databinding from parents and to children views.On the other side, a main application container (the Application root tag) acts both as a controller and a model, sometimes delegating tasks to some "utils" classes that handle things such as RPC communications. In other words, a big Master object, which can quickly take the form of a hideous spaghetti-code monster.If the application is quite simple, and no long time maintenance is required, this might be not such a bad choice.Using Events and dataBinding, Flex can achieve a very good view components decoupling. But your main view container will either have to handle all the logic by itself, or explicitly delegate it to a controller class with which it will then be very tightly coupled.The main problem is that user interaction events dispatched by the views cannot directly communicate with a separate application controller, unless it is a view. To have a separate controller handle these events and take actions, the events have to climb the display list up to the main application container (the root application tag) which may then lead them to the controller.Cairngorm may get rid of the hideous spaghetti-code monster...

2. Cairngorm

Cairngorm is probably the most widely used architecture framework in Flex applications. This framework was written by some smart guys at Adobe Consulting and is very inspired by J2EE patterns.Basically, you create a controller by extending a FrontController class, and just put a bunch of addCommands(EventName, CommandClass), to associate events with commands. Of course you create one Command (a class that implements ICommand) per user gesture, and you tell them what to do in their execute() method.A BusinessDelegate class just exposes the Service API, and will be instanciated each time a Command needs to talk to the server. It gets the right AbstractService object through the use of a ServiceLocator that is a super simple non visual MXML which extends Cairngorm's ServiceLocator and contains all the AbstractService (or AbstractInvoker) objects.You have a Singleton Class, the ModelLocator, that represents your model, and is pretty much just a list of properties, some probably refering to ValueObjects.Your main view container instantiates the ModelLocator, the FrontController, and a ServiceLocator, if needed. It also binds the ModelLocator properties to the properties of the views contained in this main view container.To overcome the view-events-to-controller problem, Cairngorm had to re-invent its own observer pattern implementation. Early Cairngorm builds tried to rely on event bubbling, but this technique was discontinued because of its flaws. Today, you have a CairngormEventDispatcher which you have to invoke in order to let it dispatch CairngormEvents that will naturally find their way to the controller. Note that CairngormEvents can now dispatch themselves through the use of a self dispatch() method.It's very efficient. The problem is, of course, that it's a Cairngorm-only option. If you need a view to dispatch an user interaction event, it either has to dispatch them the Cairngom way, using event.dispatch() (which means that your view is now coupled with Cairngorm), or dispatch the event up the display list, and let the highest view (your main container), be responsible to dispatch them using event.dispatch() (this way, only this main view is Cairngorm-dependent). A third option could be to create a super class for all events in your application, and have it implement the dispatch() method, either by extending CairngormEvent, or using its own magic.The other problem is that Cairngorm does not offer a elegant way for its controller to communicate back to its views.

3. PureMVC

PureMVC is a not a Flex specific architecture framework. It's an AS3 framework, written by Cliff Hall.Just like Cairngorm, PureMVC uses a controller / Command technique. Here, the controller is actually a Facade that is responsable for MVC layers instanciations, besides the traditionnal event/Command associations.The Model is scattered into several Proxy classes, which tend to have a little more responsability than Cairngorm's ModelLocator, since it is considered best practice to use Remote Proxies to communicate with the remote Services.The views are helped by Mediators which can listen to events and call the views, thus giving the controller a great way to update the views while staying properly decoupled from them.PureMVC, too, had to implement its own observer mechanism to overcome the Flash/Flex event issue. In fact, it's not even an Event (since PureMVC is independent from flash's framework) : PureMVC uses so-called Notifications. The difference is that, here, Mediators can listen for traditionnal Events dispatched by your views, and then "translate" it into PureMVC specific Notifications.PureMVC does a better job than Cairngorm at architecting your application, but requires more work (so if you're lazy better stick with Cairngorm).

Comparison between the Spotify API platform and Last.fm API platform

Spotify

Spotify (http://www.spotify.com) is a new way to enjoy music. Simply download and install, before you know it you’ll be singing along to the genre, artist or song of your choice. With Spotify you are never far away from the song you want.

The Terms of use from the http://developer.spotify.com website forbids creating any web interface between other applications and the Spotify Application. ( http://developer.spotify.com/en/libspotify/terms-of-use/ )

“...

3. Authorizations & Restrictions...3.2 You must use the API in the exact, unaltered form provided to you by Spotify and may not utilize it in any manner that is not expressly authorized in these Terms of Use. Without limiting the foregoing, you may not: ...viii. attempt to embed or integrate the API into any website or otherwise allow access to the Service via the web rather than via the Application. ...”The documentation of the C library that Spotify offers can be found at http://developer.spotify.com/en/libspotify/docs/index.htmlThe response format of the API can be modeled as needed or desired for the fact that if a web service is desired this has to be created. Creating an web service will violate the Terms and conditions that Spotify states. The response format can be in JSON, XML or any other format.We planed to build an web service and our response format would have been JSON.Unfortunately we'll use in our mash-up the YouTube API and/or the Upcoming API.

Last.fm

Last.fm is a music service that lets you discover new music you like, based on the music you already listen to.The Last.fm API allows anyone to build their own programs using Last.fm data, whether they're on the web, the desktop or mobile devices.The API documentation can be found at http://www.last.fm/api/introThe requests can be REST requests or XML-RPC request. The sent parameters must be UTF-8 encoded. The response format of the API is XML.

An example of call from the library client for Flex towards Last.fm is the following: // after importing two classes of the fm.last package // and configuring the first LastFMBase class with the API key, app secret from the Last.fm website

import fm.last.Artist;import fm.last.LastFMBase;

// we instantiate an Artist object

private var _artist:Artist = new Artist();

// then we simply call the search method of the new object // passing as parameter the artist we want to search

_artist.search(searchedTerm);

// we add an event listener in order to listen for the search complete event

_artist.addEventListener(Artist.SEARCH, searchHandler);

// the result will be an XML containing all the artists that match the provided string

<results for="cher" xmlns:opensearch="http://a9.com/-/spec/opensearch/1.1/"> <opensearch:Query role="request" searchTerms="cher" startPage="1"/> <opensearch:totalResults>386</opensearch:totalResults> <opensearch:startIndex>0</opensearch:startIndex> <opensearch:itemsPerPage>20</opensearch:itemsPerPage> <artistmatches> <artist> <name>Cher</name> <mbid>bfcc6d75-a6a5-4bc6-8282-47aec8531818</mbid> url>www.last.fm/music/Cher <image_small>http://userserve-ak.last.fm/serve/50/342437.jpg%3c/image_small> <image>http://userserve-ak.last.fm/serve/160/342437.jpg</image> <streamable>1</streamable> </artist>... </artistmatches></results>

Lastify ApplicationCurrently the Lastify application is the demo for the mash up between the Spotify and Last.fm applications.

The application allows searching artists in Last.fm and linking them from Lastify towards their Last.fm URL. It also allow searching artists within the Spotify player using the URI search.

Due to the Terms of use of Spotify the initial plans have to be changed and make a mash-up with the above specified applications (YouTube or Upcoming).