Post on 13-May-2015
description
transcript
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