Flash Camp Chennai - Newbie

Introducing RIAs and Flex
Immanuel Noel | blog.immanuelnoel.com

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

The Web

Web, AIR
Flex
Flex, Java,
RIAs Silverlight

RIAs, AJAX,
Web 2.0 Web-Services


Web 2.0

Wikipedia,
Bit Torrent
Wiki’s

Gmail, Maps,
AJAX, RIAs Blogs
Web as a Platform
Page Rank, User Controlled Data
Ebay, Services, Not Software Flickr,
Amazon Participation Del.icio.us,
reviews Cost Effective Tagging
Software -> Multiple Device
Harnessing Collective Intelligence

Attitude, not More People, Some Rights
Hackability
Technology Better Software Reserved

Cooperate, Rich User
Don’t Control Experience Web-Services

Emergent – Trust your
unpredicted Users
Source : O’Reilly Media


The Shift to Web 2.0

DoubleClick --> Google AdSense

Ofoto --> Flickr

Akamai --> BitTorrent
Mp3.com --> Napster
Britannica Online --> Wikipedia
Personal websites --> Blogging
Evite --> Upcoming.org
Domain name speculation --> Search engine optimization
Page views --> Cost per click
Screen scraping --> Web services
Publishing --> Participation

Content management systems --> Wikis

Directories (taxonomy) --> Tagging ("folksonomy")

Stickiness --> Syndication

Source : O’Reilly Media


Rich Internet Applications

Rich Internet applications (RIAs)
are web applications that have
some of the characteristics of
desktop applications. Adobe
Flash, Java, and Microsoft
Silverlight are currently the three
most common platforms.,

Rich Internet applications (RIAs) offer a
rich, engaging experience that improves
user satisfaction and increases
productivity. Using the broad reach of
the Internet, RIAs can be deployed
across browsers and desktops.


Why RIA ?
Rich Media

RIAs offer organizations a proven, cost
effective way to deliver modern
applications with real business benefits

1. Offer users a richer, more engaging
experience.

2. Keep pace with users' rising expectations.

3. Increase customer loyalty and generate
higher profits.

4. Leverage existing personnel, processes,
and infrastructure.


RIA Market Share

(courtesy:http://www.statowl.com/custom_ria_market_penetration.php)

Hence, ADOBE FLASH PLATFORM


Building RIAs using the Flash Platform

The Adobe Flash Platform is the leading solution for building rich Internet applications, offering a
complete set of integrated technologies supported by an established ecosystem.


Flex

Flash Builder IDE Browser

Flex SDK Flash Player
MXML ActionScript

Flex Class Library SOAP HTTP/S AMF/S RTMP/S

Web Server
Compile
XML/HTTP
LC Data Services
REST
SOAP Web Services J2EE Application Server

Existing Applications & Infrastructure


What is ActionScript ?

 Powerful, object-oriented scripting
language undergirding the Flash
Platform
Flex
 Supported across multiple products:
 Flex
 Flash
 Flash Media Server Flash
Flash ActionScript Media
 Flash Lite Server

 Standards compliant
 ECMA-262, Edition Three
 ECMA-262, Edition Four proposal
Flash Lite


What is MXML ?

 MXML is a compile time source format var a:Application = new Application();
a.percentWidth=100;
a.percentHeight=100;
 No MXML appears in the SWF var p:Panel = new Panel();
a.addChild(p);
 SWF has bytecode p.percentWidth=100;
p.percentHeight=100;
p.title=“summit app”;

MXML is XML
var h:HBox = new HBox();
 p.addChild(h);
h.percentWidth=100;
Declarative format:
h.percentHeight=100;

var l:List = new List();
 More readable h.addChild(l);
l.width=300;
l.percentHeight=100;
 More maintainable var dataSvc:HTTPService = new HTTPService();
 More “toolable” dataSvc.url = “http://localhost/userList/”;
dataSvc.addEventListener(“result”,function(event:Eve
nt) {l.dataProvider = dataSvc.result});
var details:DetailPane = new DetailPane();
h.addChild(details);
 MXMLC generates ActionScript classes l.addEventListener(“change”,function(event:Event)
{details.user = l.selectedItem} );
from markup
 This generative approach saves the
developer from a lot of mundane Who wants to write this !!!
coding


Components

 Flex framework has many components

 You can create custom components


Adobe AIR

Adobe AIR enables web developers to use
JavaScript, HTML, Flash, and Flex to build web
applications that run outside the browser


Limitations of browser-based applications

 No offline access
 Constrained with the browser’s chrome
 Common desktop interactions not possible
 Drag and Drop
 Local system access is limited
 For example, cannot access the local file system
 Updates are delivered only when browser is open


Go beyond the browser sandbox

Install and run as a desktop
application

Local database access
(SQLite)

Full file system access


Adobe AIR Application Stack

HTML Flash
Cross-OS
HTML Flex Application
JavaScript Flash ActionScript HTML
Integrated
XML XML Rendering
CSS Audio
PDF Video PDF Integrated DOMs
& Scripting

File System Network Application Drag and Local Adobe AIR APIs
Notifications ...
Access Detection Update Drop Database

Mac, Windows, Linux, Android and BlackBerry


Creating an Adobe AIR application

.air file contains all application files
• SWF, HTM, JS, XML, JPG, etc
• Enables cross-OS deployment

Build Test Package Sign Deploy

Use existing designer/developer tools or free
AIR SDK for testing and packaging

Tooling : Flash Builder

• IDE for building Flex / AIR Applications
• WYSIWYG
• MXML & ActionScript code editors
• Debuggers
• Performance Analyzers
• Free for Students : http://www.adobe.com/devnet-archive/flex/free/


Demo
Hello World for the Web and Desktop


Next ?

• Flex in a Week Videos :
http://www.adobe.com/devnet/flex/videotraining.html

• Test Drive Flex in a hour :
http://www.adobe.com/devnet/flex/testdrive.html

• Tour de Flex :
http://www.adobe.com/devnet/flex/tourdeflex.html

• Devnet :
http://www.adobe.com/devnet.html


Questions ?


Flash Camp Chennai - Newbie

More Related Content

What's hot

Viewers also liked

Similar to Flash Camp Chennai - Newbie

More from RIA RUI Society

Flash Camp Chennai - Newbie