Flex And Ria

Flex and RIA

RIA Adobe: Rich Internet Application Microsoft: Rich Interactive Application RIAs are web applications that have the

feature and functionality of traditional desktop applications.

RIAs typically form a stateful client application with a separate services layer on the backend.

Feature of RIA Richer Interface Desktop type environment Cross-browser compatibility Platform Independent Client/Server balance Asynchronous communication Network efficiency

Web application Demands An Eye-catching Design Web Browsers Compatibility Data integration Interactive interface

Adobe Technology

Flash Flex

Flash Player AIR

Now we have a new Structure Flash

Animation and Design Flex

Application Development Flash Player

Application Deployment on Web AIR

Application Deployment on Desktop

HTML vs Flex vs Flash

HTML / CSS files Includes JavaScript

libraries Tag-based HTML output

HTML Flex Flash

MXML / CSS files Components ActionScript

classes Tag-based SWF output

FLA files Symbols ActionScript

classes Timeline-based SWF output

format

reuse

behavior

metaphor

output

What Is Flex Flex is an extension of Flash. Tag/script-based app development for

Flash. Flex is a cross-platform development

framework for developing Rich Internate Application (RIAs).

Flex is a free and Open Source framework.

Flex Product Line

Visual LayoutVisual Layout

Flex Builder 2

Code HintingCode Hinting

DebuggingDebugging

Skinning and StylingSkinning and Styling

Flex SDK 2 (FREE)

Command-line Compiler & DebuggerCommand-line Compiler & Debugger

Flex Data Services 2

Message ServiceMessage Service

Data Management ServiceData Management Service

RPC ServicesRPC Services

MXML and ActionScript 3.0MXML and ActionScript 3.0

Flex Framework and Class LibraryFlex Framework and Class Library

Flex Charting Extensible Charting ComponentsExtensible Charting Components

Flex Product Line

Visual LayoutVisual Layout

Flex Builder 2

Code HintingCode Hinting

DebuggingDebugging

Skinning and StylingSkinning and Styling

Flex SDK 2 (FREE)

Command-line Compiler & DebuggerCommand-line Compiler & Debugger

Flex Data Services 2

Message ServiceMessage Service

Data Management ServiceData Management Service

RPC ServicesRPC Services

MXML and ActionScript 3.0MXML and ActionScript 3.0

Flex Framework and Class LibraryFlex Framework and Class Library

Flex Charting Extensible Charting ComponentsExtensible Charting Components

Open Source

Open Source

How Flex Works

XML/HTTPREST

SOAP Web Services

XML/HTTPREST

SOAP Web Services

BrowserBrowser

J2EE Application ServerJ2EE Application ServerFlex Data Services 2

Flash Player

Web ServerWeb Server

Existing Applications and InfrastructureExisting Applications and Infrastructure

Flex Builder IDEFlex Builder IDE

Flex SDKFlex SDK

MXMLMXML ActionScriptActionScript

Flex Class LibraryFlex Class Library

.swf

Compile

.swf

Data Data

.swf

Flex Enterprise architecture

Include in the Flex SDK 2 Command line Compilers

mxmlc# Convert MXML into ActionScript code.# Compiles ActionScript code to swf.

compc# Used to create libraries files (swc files)

Debugger fdb.exe Rich Component Library for Flex

framework.

Elements of Flex application Flex framework MXML Actionscript3.0 CSS Graphics Assets DATA

Flex Framework Flex framework contains all the components

you need to build RIA Containers application layouting Controls you use to gather data from users

and to manage the user interface Extensive data binding, formatting, and

validation features An event-driven development model that

provides rich user interface transformation features such as effects and transitions.

MXML An XML based markup language

(Macromedia XML) Declarative language typically used to

describe UI layout and behaviors. MXML is similar to other markup language

such as XHTML and XAML Is converted into ActionScript classes as part

of compilation process. Anything you can do in MXML you can do in

ActionScript

MXML Example<?xml version="1.0" encoding="utf-8"?><mx:Application

xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"><mx:Script>

<![CDATA[private function launchApp():void{

//TODO: Code for launching application.}

]]></mx:Script><mx:Button label="Submit" click="launchApp()"/>

</mx:Application>

ActionScript 3.0 Core of the Flex framework You add dynamic behavior to your

applications using ActionScript 3.0. Controller logic using ActionScript 3.0. You can add ActionScript to Flex applications

directly in the MXML file as script blocks Also create separate files of ActionScript

functions and import them into your MXML files.

CSS Style attributes in visual components are

controlled by component properties. Style properties are controlled by a theme,

by styles defined in a CSS file. Styles defined in style blocks in an MXML

file. Also create separate files of CSS style and

import them into your MXML files.

Flex Learning Curve Developer must have the knowledge of :

ActionScript

Flex Framework

Use of Tools

Passing parameters back and forth to server

Server-side programming language

Development Process Define an application interface using a set of

pre-defined components Arrange components into a user interface design Use styles to define the visual design Add dynamic behavior Define and connect to data services as needed Build the source code into an SWF file that runs

in the Flash Player

Current State of Flex The player has nearly a 95% penetration

rate. Flex content looks identical on every

browser. Easy to debug Flex blogs, books, tutorials and

conferences are exploding

Why Flex Flex is on war with various RIA technologies

Ajax Ajax is a collection of technologies that include

Javascript and XML

It is partly rooted in the asynchronous XmlHttpRequest

Programming languages: JavaScript, XML, HTML

Development environments: Notepad, MyEclipse, GWT Designer

Plugins required: none

Why not Ajax? A simple right-click followed by the “View Source code” menu option

would reveal your business application code.

It loads JavaScript in the browser that forces the browser to make cross-domain calls and opens up security holes.

Ajax cannot access cross-domains from the browser.

Most of the Ajax frameworks don’t have a WYSIWYG editor.

There is no standard VM for AJAX. Each browser implements AJAX building blocks differently.

SilverLight Silverlight is a cross-browser, cross-platform plug-in for

delivering the next generation of Microsoft .NET–based media experiences and rich interactive applications for the Web

Programming languages: XAML, C#, JS, Ruby

Development environments: Microsoft Expression Blend 2, Microsoft Visual Studio

Plugins required: Silverlight Runtime 1.0 or higher

Why not SilverLight? Silverlight is still in Beta version

Silverlight currently only runs on Windows and the Mac

Code behaves differently in the browsers installed on Windows and Mac machine

Silverlight uses WMV file format as compaired to SWF format used by Flex

JavaFX JavaFX Script lets developers build rich user interfaces for Java

applications

JavaFXScript takes advantage of the Java Runtime Environment's (JRE) and enables creative professionals to begin building applications based on their current knowledge base.

It uses Java technology's "write once, run anywhere“ capability.

Programming languages: JavaFX Script, Java

Development environments: JavaFXPad, NetBeans 6.0, JFXBuilder, Notepad

Plugins required: Java Runtime Environment (JRE) 1.5 or higher

Why not JavaFX? JavaFX is essentially designed as a layer that

sits on top of Java.

JavaFX is completely dependent on existing Java technologies.

Its function is primarily to make existing Java technologies easier to use together.

It do not give the developer enough ability to properly separate logic and presentation.

Flex Application Showcase

SAP Application dashboard

Google Analytics

Yahoo Web messenger

Lets Discuss