Engaging Rich Internet Applications using Flex

21
Engaging Rich Internet Applications using Flex Muhammad Hassan Nasr www.badrit.com Sponsored by: ACM Student Chapter

description

A gentle introduction to Flex, feel free to copy from it and reference: Muhammad Hassan http://www.badrit.com

Transcript of Engaging Rich Internet Applications using Flex

Page 1: Engaging Rich Internet Applications using Flex

Engaging Rich Internet Applications using Flex

Muhammad Hassan Nasrwww.badrit.com

Sponsored by: ACM Student Chapter

Page 2: Engaging Rich Internet Applications using Flex

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

Page 3: Engaging Rich Internet Applications using Flex

What is RIA?

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

Page 4: Engaging Rich Internet Applications using Flex

What is Flex?

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

– all major browsers – desktops

Page 6: Engaging Rich Internet Applications using Flex

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

Page 7: Engaging Rich Internet Applications using Flex

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

Page 8: Engaging Rich Internet Applications using Flex

Why Flex? Rich Interface

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

Flex Class Library

Page 9: Engaging Rich Internet Applications using Flex

Why Flex? Powerful scripting

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

Page 10: Engaging Rich Internet Applications using Flex

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

Page 11: Engaging Rich Internet Applications using Flex

Architecture● Analog to ordinary web application

Ordinary

HTML- XHTML

JavaScript

CSS

Flex

MXML

ActionScript

CSS

AJAX

Page 12: Engaging Rich Internet Applications using Flex

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

Page 13: Engaging Rich Internet Applications using Flex

MXML and Actionscript

How Flex works

Page 14: Engaging Rich Internet Applications using Flex

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

Page 15: Engaging Rich Internet Applications using Flex

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

Page 16: Engaging Rich Internet Applications using Flex

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

Page 17: Engaging Rich Internet Applications using Flex

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?

Page 18: Engaging Rich Internet Applications using Flex

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

– Extjs– SilverLight– JavaFX– ...

Page 19: Engaging Rich Internet Applications using Flex

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

Pacific),Adobe www.prayank.net

Page 20: Engaging Rich Internet Applications using Flex

Questions & Feed Back

Page 21: Engaging Rich Internet Applications using Flex

Thanks● ACM chapter● Your attendance