Anna-Maria Metzak http://twitter.com/anna_metzak , Elena-Oana Tabaranu http://twitter.com/oanat FII, UAIC 2009 Adobe Flex Framework

What is Adobe Flex? Free open source framework Released by Adobe Systems Created for the development and deployment of cross-platform RIA Based on the Adobe Flash platform.

Free open source framework

Released by Adobe Systems

Created for the development and deployment of cross-platform RIA

Based on the Adobe Flash platform.

Flex is more than Flash Language: MXML tags (Macromedia XML) object oriented language – ActionScript Applications: Web applications (Flash Player) Desktop applications (AIR)

MXML tags (Macromedia XML)

object oriented language – ActionScript

Web applications (Flash Player)

Desktop applications (AIR)

Flex Components User Interface Components buttons, list boxes, trees, data grids, text controls, layout containers charts graphs Web Services Drag and Drop Modal Dialogs Animation Effects Application States Form Validation ...

User Interface Components

buttons, list boxes, trees, data grids, text controls, layout containers

charts

graphs

Web Services

Drag and Drop

Modal Dialogs

Animation Effects

Application States

Form Validation

...

Flex vs Ajax Flex Is stateless Not indicated for text-heavy pages - Flash Player is less efficient at handling large amounts of text than the browser Ajax Not the right choice for an application with complex interactivity requirements (no IDE) Development and debugging can often be complicated Flex and Ajax Often the right choice Flex-Ajax Bridge - facilitates communication between JavaScript and a Flex SWF

Flex

Is stateless

Not indicated for text-heavy pages - Flash Player is less efficient at handling large amounts of text than the browser

Ajax

Not the right choice for an application with complex interactivity requirements (no IDE)

Development and debugging can often be complicated

Flex and Ajax

Often the right choice

Flex-Ajax Bridge - facilitates communication between JavaScript and a Flex SWF

RIA Server Architecture Basics

Communication Between Flex And The Application Server HTTPService HTTP(S) requests (mostly GET or POST) transport various content types, from simple URLEncoded variables to more complex data like XML used to communicate with a simple script or page like a JSP page, an ASP page or a PHP script. WebService SOAP messages over HTTP ActionScript complex types are automatically mapped from and to SOAP/XMLschema data. RemoteObject ActionScript Message Format (AMF) data (not a transfer protocol, it is binary ActionScript) dramatically faster than any other mean of communication (send and receive strongly typed objects) the ActionScript serialization/deserialization process takes place on the server side

HTTPService

HTTP(S) requests (mostly GET or POST)

transport various content types, from simple URLEncoded variables to more complex data like XML

used to communicate with a simple script or page like a JSP page, an ASP page or a PHP script.

WebService

SOAP messages over HTTP

ActionScript complex types are automatically mapped from and to SOAP/XMLschema data.

RemoteObject

ActionScript Message Format (AMF) data (not a transfer protocol, it is binary ActionScript)

dramatically faster than any other mean of communication (send and receive strongly typed objects)

the ActionScript serialization/deserialization process takes place on the server side

Flex application architecture as MVC

MVC - View layer

MVC - Model layer Stores data Often implemented as Singleton Uses Value Objects

Stores data

Often implemented as Singleton

Uses Value Objects

MVC – Controller layer Logic between the View and the Model Update the Model Listen to the View

Logic between the View and the Model

Update the Model

Listen to the View

MVC – the Business layer Communicate with the Application Server to let it update the web application's Model, i.e. the DataBase

Communicate with the Application Server to let it update the web application's Model, i.e. the DataBase

Architecture Frameworks Cairngorm PureMVC Mate Swiz ...

Cairngorm

PureMVC

Mate

Swiz

...

Limitations Flex content is not indexed by search engines Text fields don't remember previous entries Password manager doesn't work Browser shortcuts like “Ctrl+T” don't work

Flex content is not indexed by search engines

Text fields don't remember previous entries

Password manager doesn't work

Browser shortcuts like “Ctrl+T” don't work

Reasons to use Flex No More Browser Compliance Testing. ECMAScript for XML (E4X) No More Interface Layout Pain. Simple Field Validation. Rich Media Support. True Separation of Presentation and Content. The Flex Development Environment. CSS Adobe AIR (Apollo)

No More Browser Compliance Testing.

ECMAScript for XML (E4X)

No More Interface Layout Pain.

Simple Field Validation.

Rich Media Support.

True Separation of Presentation and Content.

The Flex Development Environment.

CSS

Adobe AIR (Apollo)