Adobe® Corporate Template 2005

2006 Adobe Systems Incorporated. All Rights Reserved.1

Rich Internet Applications

P.N. AnantharamanSenior Engineering Manager –Enterprise products23 March 2007


Experience evolution: Building the new frontier

CLIENT/SERVERMAINFRAME

WEB APPLICATIONS

REA

CH

Local

Global

RICHText UI Integrated media GUI

1992

1998

2004

RICH INTERNETAPPLICATIONS

HTML Deficiencies• Page metaphor• Only 6 UI controls• Browser inconsistencies• Press n’ pray printing• Request-only data• No offline operation• Bitmaps from the server• A/V plug-in hell

HTML Deficiencies• Page metaphor• Only 6 UI controls• Browser inconsistencies• Press n’ pray printing• Request-only data• No offline operation• Bitmaps from the server• A/V plug-in hell

Client/Server Benefits• Screen metaphor• Extensible UI libraries• Online/offline + synch• WYSIWYG printing• Data visualization• Live data connectivity• Bitmap/vector graphics• Integrated A/V

Client/Server Benefits• Screen metaphor• Extensible UI libraries• Online/offline + synch• WYSIWYG printing• Data visualization• Live data connectivity• Bitmap/vector graphics• Integrated A/V

Example application

http://localhost:8700/samples/flexstore/flexstore.html


Concept of Richness

Richness in data modelSupport of sophisticated data models: eg, XMLList, ArrayList, etc

Ability to send and receive data in/out of these data structures asynchronously

Ability for a user interface control to manipulate the data through powerful data binding

Richness in user interfaceRIA offers a very rich set of user interface controls which can intelligently interact with data model

For example: controls like charts, graphs, calendar control, data grids, rich text editors etc

The user interface can incorporate rich multimedia content


Anatomy of a Rich Internet Application

Data Visualization & Collaboration

Real Time Data

Push & Alerting

Chat

Offline

Data Synchronization

& Conflict Resolution

Bi-Directional Audio & Video

Rich Data Entry

Menus & Navigation Controls

Resizable Views/Effects/

Transitions

Mapping, Geo-Coding, Annotations &

White boarding


Outline of the presentation

Web 1.0 core concepts

Web 2.0 defining features

Rich Internet ApplicationsAJAX

Flex

Apollo


Web 1.0 Evolution and Key technologies


Internet/Web Evolution

DARPA/ARPA (Advanced Research Projects Agency)Defense program during the cold war era

Goal: Command and control network that would survive a nuclear war

Problems: Circuit switched networks (eg, telephone) are vulnerable as loss of one line or a switch may hamper the communication

Solution: Distributed, packet switched networks

The number of machines, networks and users increased dramatically after the advent of TCP/IP – the Internet

TCP/IP Reference model and the protocol is the glue that holds internet together

Growth of universal services on top of TCP/IP infrastructure (Application layer)

E-mail

File transfer

Remote login

World Wide Web (WWW)

Web is the application while Internet is the infrastructure


Web 1.0

The web (CERN lab, Tim Berners-Lee1989) grew out of the need to have large internationally dispersed teams of scientists to collaborate constantly by exchanging reports, drawings and other documents

The Web is an architectural framework for accessing linked documents and applications spread out over thousands of machines all over the Internet

Up to early 90’s the Internet was largely populated by academic, government and industrial researchers

Researchers -> Commercial applications -> Social applications

Web becomes the mechanism to distribute and deliver any information, not just scientific research reports

Product information, stock prices, communication to employees….

Evolution of browsers, html and Javascript


Web Access model

Distributed, linked documents and applications over the Internet served primarily through the http protocol

Client (Browser), Server (Website) model

Clients access the servers through URLURL specifies the protocol, web server name (or IP), port number on the host machine, file name to retrieve, optional query string

DNS converts destination addresses (eg, www.ananth.info) to IP address (eg, 65.36.166.120)

Clients are by and large access and rendering devices, servers have the content, business logic and the presentation logic.


Web access sequence

The browser determines the URL

The browser asks DNS for IP Address (eg, www.adobe.com)

DNS replies with the IP Address

The browser makes TCP connection to port 80 on the specified IP Address returned by DNS

Browser send a GET command over HTTP

The server sends the document

The TCP connection is released

The browser displays the retrieved document

The browser fetches and displays the image files

http://www.adobe.com/


Web Access and Proxy

HTTP Browser HTTP Server

HTTP Request

HTTP Response

HTTP Browser FTP Server

FTP Request

FTP Response

HTTP Browser HTTP Proxy Server

HTTP Request

HTTP ResponseHTTP Server

HTTP Request

HTTP Response


HTTP Methods

HTTP protocol consists of 2 distinct items: A set of requests, A set of responses. Some key methods are:

GET – Request a web page

HEAD – Request to read a page header

PUT – Request to store a web page

POST – Append to a named resource

Web 1.0 uses synchronous protocols


Web 1.0 Characteristics and technologies

Synchronous model

Platform independenceData: HTML/XML

Code: Java, Javascript and other host of scripting languages

Key technologiesSOAP, WSDL, XML-RPC, Session Management, Cookies etc

Client side

Browsers, plug ins, Javascript, Applets, XML, HTML, ActiveX controls

Server side

Server side scripting languages like PHP, ColdFusion, Ruby, perl and Java servlets, JSP

J2EE Application servers

Database servers


Web 2.0 – defining features

Web as a Technical platform

Data is next Intel Inside

Architecture of participation: Users add value

Services as against packaged software

Perpetual beta

Software above the level of a single device

easy to pick up by early adopters

Rich Internet Applications are the key enabling technology to Web 2.0 revolution


Rich Internet Applications


Basics of Asynchronous communication

Recap:Web sites built with Web 1.0 model use synchronous page refreshes

Rich Internet applications depend upon asynchronous communication, no page refreshes

Simulating asynchronous communications using hidden frames

<frameset rows=“100%, 0” frameborder=“0”><frame name=“displayFrame” src=“display.html” noresize=“noresize”/>

<frame name=“hiddenFrame” src=“about:blank” noresize=“noresize”/>

</frameset>


Asynchronous communications – Hidden Frame

1. Javascript call from visible frame to hidden frame

2. Hidden frame requests a page from server

3. Server responds with another page4. New page makes a call to javascript

on visible frame5. Visible frame displays the new contentVisible Frame

HTTP Request

HTML, CSS, JS

Database

Server

Hidden Frame

1

2

3

4


IFrames

Available from HTML 4.0

IFrames can be used to provide the effect of multiple windows within a web page

Can be used in similar way to hidden frame with the difference that IFrames can be defined without an encapsulating frameset. This allows incremental adoption

IFrame can be used in two ways:Define IFrame within the page statically and use it similar to hidden frames

Create IFrame dynamically


Rich Internet Applications – AJAX model

Web BrowserHTTP Request

HTML, CSS, JS

Database

Server

Web BrowserHTTP Request

Data

Database

Server

UI AJAX Engine


Components

HTML (or XHTML) and CSS

Presenting information

Document Object Model

Dynamic display and interaction with the information

XMLHttpRequest object

Retrieving data ASYNCHRONOUSLY from the web server.

Javascript

Binding everything together


Uses of AJAX Paradigm

Real-Time Form Data ValidationForm data that require server-side validation can be validated in a form “before” the user submits it.

Auto completion A specific portion of form data may be auto-completed as the user types.

Master Details OperationsBased on a client event, an HTML page can fetch more detailed information on data without refreshing the page.

Sophisticated UI ControlsControls such as tree controls, menus, and progress bars may be provided without page refreshes.


Message Flow

<script type=“text/javascript”>

Steve Save <div id=status>

XMLHttpRequest

function handleResponse() {…read response from server…get a handle to the DIVIf Not OK

Replace DIV contents with msg}

Validation Servlet

ValidateName( req, res…) {parse requestlookup name in databaseis it valid?

if so, return OKotherwise

return error message

Database

ServerClient/Browser

function checkName( name ) {…initialize request (url, parms)…register callback function…call the server}

Messagename=steve

Or<name>Steve</name>

Not a Valid Name

Messagestatus=999

msg=Not a valid name


Message Flow

<script type=“text/javascript”>

Steve Save <div id=status>

XMLHttpRequest

function doResp() {if _ajax.readyState == 4 and

_ajax.status != 200 {div=document.getElementById(‘status’)div.innerHTML = _ajax.responseText;

Validation Servlet: /validate

Database

ServerClient/Browser

Save field onchange event: _ajax = new XMLHTTPRequest();_ajax.onreadystatechange = doResp;url = ‘./validate?field=’

+this.name+‘&value=’+this.value;_ajax.open(‘GET’, url, true )

Not a Valid Name

_ajax.send( some data ) Get parameters…do some workReturn something…

a text messagean XML documentan HTML snippeta javascript methodwhatever you want…

Messagestatus=999

msg=Not a valid name


Flex – A primier platform for Rich Internet Applications


Transforming the User Experience

Expressiveness

Performance

Real time

Rich media

Offline support

Accessible


Flex is…

Flex Framework Flex Class Libraries, Components, Containers, Layout Managers, Behaviors, and Effects

Flex Utilities Compilation, Debugging, Automated Testing

Flex Data Services 2

Real Time MessagingReal Time Messaging

Data Management ServiceData Management Service

Remote Procedure Calls (RPC Service)Remote Procedure Calls (RPC Service)

Flex Utilities Compilation and Debugging

Programming Language ActionScript 3, MXML

Flex SDK

Design ViewDesign View

Flex Builder 2

Code HintingCode Hinting

DebuggingDebugging

Component SkinningComponent Skinning


How Flex works…

BrowserBrowser

Flash Player

Web ServerWeb Server

Flex Builder IDEFlex Builder IDE

Flex SDKFlex SDKMXMLMXML ActionScriptActionScript

Flex Class LibraryFlex Class Library

.swf

Compile

.swf


XML/HTTPREST

SOAP Web Services

XML/HTTPREST

SOAP Web Services

Browser

How Flex works…

Browser

J2EE Application ServerJ2EE Application Server

Flex Data Services 2

Flash Player

Web ServerWeb Server

Existing Applications and InfrastructureExisting Applications and Infrastructure

Flex Builder IDEFlex Builder IDE

Flex SDKFlex SDKMXMLMXML ActionScriptActionScript

Flex Class LibraryFlex Class Library

.swf

Compile

.swf

Data Data

.swf


Flex class library

UI ComponentsDatagrid, Tree, List, TileList, HorizontalList, ...Tab, Accordion, Menu, ContextMenu, ...RichText Editor, Sliders, ...ToggleButton, PopupButton, ...

Media ComponentsVideo, Audio, Streaming

Layout ManagementPanel, VBox, HBox, VDividedBox, HDivideBox, Form, Tile, Grid, …Constraint-based layoutsView States

Charting ComponentsLineChart, ColumnChart, BarChart, PieChart, HLOC, Candle, Plot, Bubble, ...

ExpressivenessStyling and SkinningEffects, Transitions

DataHTTPService, WebService, RemoteObjectProducer, ConsumerDataServiceE4X data bindingPagingValidatorsFormatters


Where Flex is Used

Product Configuration

Rich Media Applications

Data Visualization

Complex, Multi-Step Processes

Product Selection

Line of Business Applications

http://www.fordvehicles.com/showroom

http://dnpribbons.com/tools_and_resources/ribbon_runner/

http://www.footjoy.com/myjoys/Default.asp?bhcp=1

http://flexapps.macromedia.com/flex/brocade/app.mxml?versionChecked=true


What’s new about Flex 2

Expressive

Applications

Vector Graphics

Drawing API

Rich Media

Real-time Messaging

Enterprise Integration

Data Management

Performance

Pub / Sub Messaging

Data Push

Developer

Productivity

Eclipse-based Flex Builder IDE

Enhanced Programming Model

Debugging


Target Flex applications

Flex for… Guided self-service Flex for… Rich media experiences

Flex for… Data visualization Flex for… Business applications

http://localhost:8700/samples/mortgage/1-FinanceCorp.html

http://localhost:8700/samples/mediaportal/portal.html

http://localhost:8700/samples/dashboard/dashboard.html

http://localhost:8700/samples/dataservice/crm/companyapp.mxml


Web 2.0 with Ajax, Flex and Flash

Why Developers Leverage FlashCross-platform vector drawing API

Integrated two-way audio/video

Advanced communication protocols

Performance

Flash Player External API

You TubeGoogle Finance Measure Map

Blending Flex and Ajax Today/TomorrowFlex/Ajax Bridge (FABridge)

Ajax Client for Flex Data Services

Joining Open Ajax initiative

Releasing Spry Ajax framework

Apollo universal client

Example application

http://localhost:8700/samples/hybridstore/hybridstore.html

http://finance.google.com/finance?cid=13756934

http://www.measuremap.com/


Extending Ajax… where Flex adds value

http(s) transport

browser clientuser interface

JavaScript callHTML+CSS data

Ajax engine

HTTP request

XML data

web and/or XML server

datastores, backendprocessing, legacy systems

server-side systems

PerformanceVM - bytecode - JIT

ExpressivenessVector Graphics - Drawing API – Rich

Media

Real TimeBinary Sockets - Pub/Sub Messaging

OfflineLocal Storage

Programming Model / Productivity


Flex SDK 2

Flex/Ajax Bridge

Putting it all together…

FREE

FREE

Flash Player 9*

FREEFlex Builder 2Design ViewCode HintingDebuggingComponent Skinning

Flex Data Services 2Messaging ServiceData Management ServiceRPC Services

*formerly Flash Player 8.5. Click here for more info.

http://labs.macromedia.com/wiki/index.php/Flash_Player


Download Flex…www.adobe.com/go/flex

Learn more…www.flex.orgwww.ananth.info

http://www.adobe.com/go/flex

http://www.flex.org/

http://www.ananth.info/


Bringing web and desktop experiences together - Apollo

2006 Adobe Systems Incorporated. All Rights Reserved.

Apollo is a cross-operating system runtime that allows developers to leverage their existing web development skills (Flash, Flex, HTML, Ajax) to build and deploy desktop RIA’s.

What is Apollo?


How are Apollo Applications Composed?

Applications can be built using the following technologiesFlash / Flex / ActionScript

HTML / JavaScript / CSS / AJAX

Combination of these technologies

PDF can be leveraged with any application

Native Application Display

HTML

SWF

RendererScriptingDOM

PDF

SWF

HTML

RendererOverlaysScriptingDOM

PDF

Apollo APIs


Apollo Functionality / APIs

Offline / Occasionally Connected

Applications can run in background

NetworkHTTP

XML-RPC / SOAP / Rest based web services

Binary and XML sockets

File I/O

Local storage / Settings API

Custom ChromeShape

Alpha

more


Apollo Desktop Integration

Installation

Application Shortcuts

Drag and Drop

Clipboard

Cross Application communication

Notifications

more


Apollo Applications Overview


Date post:	14-May-2015
Category:	Documents
Upload:	sampetruda
View:	744 times
Download:	1 times

Adobe® Corporate Template 2005

Documents