Adobe® Corporate Template 2005
-
Upload
sampetruda -
Category
Documents
-
view
745 -
download
1
Transcript of Adobe® Corporate Template 2005
2006 Adobe Systems Incorporated. All Rights Reserved.1
Rich Internet Applications
P.N. AnantharamanSenior Engineering Manager –Enterprise products23 March 2007
2006 Adobe Systems Incorporated. All Rights Reserved.2
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
2006 Adobe Systems Incorporated. All Rights Reserved.3
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
2006 Adobe Systems Incorporated. All Rights Reserved.4
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
2006 Adobe Systems Incorporated. All Rights Reserved.5
Outline of the presentation
Web 1.0 core concepts
Web 2.0 defining features
Rich Internet ApplicationsAJAX
Flex
Apollo
2006 Adobe Systems Incorporated. All Rights Reserved.6
Web 1.0 Evolution and Key technologies
2006 Adobe Systems Incorporated. All Rights Reserved.7
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)
File transfer
Remote login
World Wide Web (WWW)
Web is the application while Internet is the infrastructure
2006 Adobe Systems Incorporated. All Rights Reserved.8
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
2006 Adobe Systems Incorporated. All Rights Reserved.9
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.
2006 Adobe Systems Incorporated. All Rights Reserved.10
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
2006 Adobe Systems Incorporated. All Rights Reserved.11
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
2006 Adobe Systems Incorporated. All Rights Reserved.12
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
2006 Adobe Systems Incorporated. All Rights Reserved.13
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
2006 Adobe Systems Incorporated. All Rights Reserved.14
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
2006 Adobe Systems Incorporated. All Rights Reserved.15
Rich Internet Applications
2006 Adobe Systems Incorporated. All Rights Reserved.16
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>
2006 Adobe Systems Incorporated. All Rights Reserved.17
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
2006 Adobe Systems Incorporated. All Rights Reserved.18
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
2006 Adobe Systems Incorporated. All Rights Reserved.19
Rich Internet Applications – AJAX model
Web BrowserHTTP Request
HTML, CSS, JS
Database
Server
Web BrowserHTTP Request
Data
Database
Server
UI AJAX Engine
2006 Adobe Systems Incorporated. All Rights Reserved.20
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
2006 Adobe Systems Incorporated. All Rights Reserved.21
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.
2006 Adobe Systems Incorporated. All Rights Reserved.22
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
2006 Adobe Systems Incorporated. All Rights Reserved.23
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
2006 Adobe Systems Incorporated. All Rights Reserved.24
Flex – A primier platform for Rich Internet Applications
2006 Adobe Systems Incorporated. All Rights Reserved.25
Transforming the User Experience
Expressiveness
Performance
Real time
Rich media
Offline support
Accessible
2006 Adobe Systems Incorporated. All Rights Reserved.26
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
2006 Adobe Systems Incorporated. All Rights Reserved.27
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
2006 Adobe Systems Incorporated. All Rights Reserved.28
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
2006 Adobe Systems Incorporated. All Rights Reserved.29
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
2006 Adobe Systems Incorporated. All Rights Reserved.30
Where Flex is Used
Product Configuration
Rich Media Applications
Data Visualization
Complex, Multi-Step Processes
Product Selection
Line of Business Applications
2006 Adobe Systems Incorporated. All Rights Reserved.31
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
2006 Adobe Systems Incorporated. All Rights Reserved.32
Target Flex applications
Flex for… Guided self-service Flex for… Rich media experiences
Flex for… Data visualization Flex for… Business applications
2006 Adobe Systems Incorporated. All Rights Reserved.33
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
2006 Adobe Systems Incorporated. All Rights Reserved.34
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
2006 Adobe Systems Incorporated. All Rights Reserved.35
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.
2006 Adobe Systems Incorporated. All Rights Reserved.36
Download Flex…www.adobe.com/go/flex
Learn more…www.flex.orgwww.ananth.info
2006 Adobe Systems Incorporated. All Rights Reserved.37
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?
2006 Adobe Systems Incorporated. All Rights Reserved.
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
SWF
HTML
RendererOverlaysScriptingDOM
Apollo APIs
2006 Adobe Systems Incorporated. All Rights Reserved.
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
2006 Adobe Systems Incorporated. All Rights Reserved.
Apollo Desktop Integration
Installation
Application Shortcuts
Drag and Drop
Clipboard
Cross Application communication
Notifications
more
2006 Adobe Systems Incorporated. All Rights Reserved.
Apollo Applications Overview
2006 Adobe Systems Incorporated. All Rights Reserved.43