engaging rich internet applications using flex

Engaging Rich Internet Applications using Flex

Muhammad Hassan Nasrwww.badrit.com

Sponsored by: ACM Student Chapter

Agenda● What is RIA and Flex? ● Flex Applications tour● Advantages, Why Flex?● Architecture, How to?● Flex vs others● A sample application● Q & A

What is RIA?

● Rich Internet applications● Traditional desktop features● Run in a web browser● No installation● Access anywhere

What is Flex?

● Adobe product● RIA framework● open source ● Runs on Flash● Run consistently on

– all major browsers – desktops

Flex apps tour● dashboard● hybridstore● maps.yahoo.com● webmessenger.yahoo.com● www.picnik.com● www.buzzword.com

Why Flex? A basic web app● A simple HTML page● Looks ugly● Some CSS style● It is static ● Dynamics content with Javascript● Ajax..

Why Flex? Cross platform

● Any platform with Flash 9 ( 90+% computers)● All browser

– IE 6,7– Firefox 1.5,2,3– Opera, Safari

● All OS– Window– Linux– Mac

Why Flex? Rich Interface

● Large component set● Powerful styles and css● Filters And effects● Powerful image manipulation ● Rich user experience

Flex Class Library

Why Flex? Powerful scripting

● Actionscript● ECMAScript standard● Dynamic, like Javascript (more advanced)● Object oriented like Java● Handle complex business logic

Why Flex? Back End● Integrate with most back end systems ● Java, .Net, PHP or Ruby on Rails,...● XML, JSON, AMF, ...● No need for Ajax● Requests are asynchronous

Architecture● Analog to ordinary web application

Ordinary

HTML- XHTML

JavaScript

CSS

Flex

MXML

ActionScript

CSS

AJAX

Visual Layout

Flex Builder

Code Hinting

Debugging

Skinning and Styling

Flex SDK (Open source)

Command-line Compiler & Debugger

Flex Data Services (Open source alternatives)

Message Service

Data Management Service

RPC Services

MXML, CSS and Action Script 3.0

Flex Framework and Class Library

Flex Charting Extensible Charting Components

Architecture

MXML and Actionscript

How Flex works

XML/HTTPREST, SOAP

JSON

How Flex works…

Browser

Flex Data Services

Flash Player

Web Server

Existing Applications and Infrastructure.Net, Java, PHP, Rails,...

Flex Builder IDE

Flex SDKMXML ActionScript

Flex Class Library

.swf

Compile

.swf

Data Data

.swfCSS

How to develop...● FlexBuilder (with the SDK)

– Eclipse based– syntax highlighting– auto completion– debugging– Cheap (Free for education)

● Open source SDK– use your own actionscript and xml editor– command line for building and debugging

Draw backs● Works on only 90%● No back button● Not search engine friendly● ...● Solutions may exist

Flex alternatives● Javascript, CSS and Ajax + libs

– extjs demo1 demo2 – smartclient– others

● Microsoft SilverLight – version 2 just released– cross-platform?

● JavaFX– Looks promising– Can compete?

What is next● Deploy RIA to the desktop (Adobe AIR)● Flex competitors:

– Extjs– SilverLight– JavaFX– ...

References● flex.org● www.adobe.com/products/flex● Prayank Swaroop Evangelist (Asia

Pacific),Adobe www.prayank.net

Questions & Feed Back

Thanks● ACM chapter● Your attendance