Flex Framework Presentation and a mash-up start-up

1. Flex Framework
Monica Macoveiciuc and Constantin Stan
Faculty of Computer Science, Alexandru Ioan Cuza University, Iasi
Functionality
The 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.
Languages
MXML 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 services
Flex 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 integration
The 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 reduction
Greatly 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

2. 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 framework
2. Cairngorm
3. 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...

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

4. 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).

5. 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/ )
“
...

6. 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.html
The 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/intro
The 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();

7. // 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 Application
Currently 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).