Adobe® Corporate Template 2005

Experience evolution: Building the new frontier HTML Deficiencies HTML Deficiencies •• Page metaphor Page metaphor Global •• Only 6 UI controls Only 6 UI controls •• Browser inconsistencies 2004 Browser inconsistencies •• Press n’ pray printing Press n’ pray printing •• WEB APPLICATIONS Request-only data Request-only data •• No offline operation No offline operation RICH INTERNET •• Bitmaps from the server 1998 Bitmaps from the server APPLICATIONS REACH •• A/V plug-in hell A/V plug-in hell Client/Server Benefits Client/Server Benefits •• Screen metaphor Screen metaphor •• Extensible UI libraries Extensible UI libraries •• Online/offline + synch Online/offline + synch 1992 •• WYSIWYG printing WYSIWYG printing Local •• Data visualization Data visualization MAINFRAME CLIENT/SERVER Live data connectivity •• Live data connectivity •• Bitmap/vector graphics Bitmap/vector graphics Text UI RICH •• Integrated A/V media GUI Integrated A/V Integrated Example application 2 2006 Adobe Systems Incorporated. All Rights Reserved.

Concept of Richness Richness in data model Support 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 interface RIA 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 3 2006 Adobe Systems Incorporated. All Rights Reserved.

Anatomy of a Rich Internet Application Menus & Navigation Bi-Directional Controls Audio & Video Data Visualization & Collaboration Real Time Data Push & Alerting Resizable Views/Effects/ Transitions Chat Rich Data Entry Mapping, Geo-Coding, Data Annotations & Synchronization White & Conflict boarding Resolution Offline 4 2006 Adobe Systems Incorporated. All Rights Reserved.

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 7 2006 Adobe Systems Incorporated. All Rights Reserved.

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 8 2006 Adobe Systems Incorporated. All Rights Reserved.

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 URL URL 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. 9 2006 Adobe Systems Incorporated. All Rights Reserved.

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 10 2006 Adobe Systems Incorporated. All Rights Reserved.

Web Access and Proxy HTTP Request HTTP Browser HTTP Server HTTP Response FTP Request HTTP Browser FTP Server FTP Response HTTP Request HTTP Request HTTP Browser HTTP Proxy Server HTTP Server HTTP Response HTTP Response 11 2006 Adobe Systems Incorporated. All Rights Reserved.

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 12 2006 Adobe Systems Incorporated. All Rights Reserved.

Web 1.0 Characteristics and technologies Synchronous model Platform independence Data: HTML/XML Code: Java, Javascript and other host of scripting languages Key technologies SOAP, 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 13 2006 Adobe Systems Incorporated. All Rights Reserved.

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 14 2006 Adobe Systems Incorporated. All Rights Reserved.

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> 16 2006 Adobe Systems Incorporated. All Rights Reserved.

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 page 4. New page makes a call to javascript on visible frame 1 Visible Frame 5. Visible frame displays the new content 4 Hidden Frame HTTP Request Database 2 HTML, CSS, JS Server 3 17 2006 Adobe Systems Incorporated. All Rights Reserved.

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 18 2006 Adobe Systems Incorporated. All Rights Reserved.

Rich Internet Applications – AJAX model Web Browser HTTP Request Database HTML, CSS, JS Server Web Browser HTTP Request AJAX Database UI Engine Data Server 19 2006 Adobe Systems Incorporated. All Rights Reserved.

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 20 2006 Adobe Systems Incorporated. All Rights Reserved.

Uses of AJAX Paradigm Real-Time Form Data Validation Form 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 Operations Based on a client event, an HTML page can fetch more detailed information on data without refreshing the page. Sophisticated UI Controls Controls such as tree controls, menus, and progress bars may be provided without page refreshes. 21 2006 Adobe Systems Incorporated. All Rights Reserved.

Message Flow <script type=“text/javascript”> Message Validation Servlet name=steve Or <name>Steve</name> ValidateName( req, res…) { XMLHttpRequest parse request lookup name in database is it valid? if so, return OK function handleResponse() { otherwise …read response from server return error message …get a handle to the DIV If Not OK Replace DIV contents with msg } function checkName( name ) { Message …initialize request (url, parms) status=999 …register callback function msg=Not a valid name …call the server } Database Steve Save <div id=status Not a Valid Name > Client/Browser Server 22 2006 Adobe Systems Incorporated. All Rights Reserved.

Message Flow <script type=“text/javascript”> Validation Servlet: /validate _ajax.send( some data ) Get parameters…do some work Return something… XMLHttpRequest a text message an XML document an HTML snippet function doResp() { a javascript method if _ajax.readyState == 4 and whatever you want… _ajax.status != 200 { div=document.getElementById(‘status’) div.innerHTML = _ajax.responseText; Message Save field onchange event: status=999 _ajax = new XMLHTTPRequest(); msg=Not a valid name _ajax.onreadystatechange = doResp; url = ‘./validate?field=’ +this.name+‘&value=’+this.value; _ajax.open(‘GET’, url, true ) Database Steve Save <div id=status Not a Valid Name > Client/Browser Server 23 2006 Adobe Systems Incorporated. All Rights Reserved.

Flex is… Flex Builder 2 Flex Data Services 2 Design View Real Time Messaging Code Hinting Data Management Service Debugging Remote Procedure Calls (RPC Service) Component Skinning Flex Class Libraries, Components, Containers, Flex Framework Layout Managers, Behaviors, and Effects Flex SDK Flex Utilities Compilation and Debugging Programming Compilation, Debugging, Automated Testing Flex Utilities Language ActionScript 3, MXML 26 2006 Adobe Systems Incorporated. All Rights Reserved.

How Flex works… Flex Builder IDE Browser Browser Flash Player Flex SDK Flex SDK MXML MXML ActionScript ActionScript Flex Class Library Flex Class Library Web Server Web Server Compile .swf 27 2006 Adobe Systems Incorporated. All Rights Reserved.

How Flex works… Flex Builder IDE Browser Browser Flash Player Flex SDK Flex SDK MXML MXML ActionScript ActionScript .swf Flex Class Library Flex Class Library Data Data Web Server Web Server Compile XML/HTTP XML/HTTP Flex Data Services 2 REST REST SOAP Web Services SOAP Web Services J2EE Application Server J2EE Application Server .swf Existing Applications and Infrastructure Existing Applications and Infrastructure 28 2006 Adobe Systems Incorporated. All Rights Reserved.

Flex class library UI Components Charting Components Datagrid, Tree, List, TileList, LineChart, ColumnChart, BarChart, HorizontalList, ... PieChart, HLOC, Candle, Plot, Bubble, Tab, Accordion, Menu, ... ContextMenu, ... Expressiveness RichText Editor, Sliders, ... Styling and Skinning ToggleButton, PopupButton, ... Effects, Transitions Media Components Data Video, Audio, Streaming HTTPService, WebService, Layout Management RemoteObject Panel, VBox, HBox, VDividedBox, Producer, Consumer HDivideBox, Form, Tile, Grid, … DataService Constraint-based layouts E4X data binding View States Paging Validators Formatters 29 2006 Adobe Systems Incorporated. All Rights Reserved.

Where Flex is Used Product Line of Business Data Configuration Applications Visualization Rich Media Complex, Multi-Step Product Applications Processes Selection 30 2006 Adobe Systems Incorporated. All Rights Reserved.

What’s new about Flex 2 Expressive Enterprise Integration Developer Applications Data Management Productivity Vector Graphics Performance Eclipse-based Flex Pub / Sub Messaging Builder IDE Drawing API Data Push Enhanced Rich Media Programming Model Real-time Messaging Debugging 31 2006 Adobe Systems Incorporated. All Rights Reserved.

Target Flex applications Flex for… Guided self-service Flex for… Rich media experiences Flex for… Data visualization Flex for… Business applications 32 2006 Adobe Systems Incorporated. All Rights Reserved.

Web 2.0 with Ajax, Flex and Flash Google Finance Measure Map You Tube Why Developers Leverage Flash Blending Flex and Ajax Today/Tomorrow Cross-platform vector drawing API Flex/Ajax Bridge (FABridge) Integrated two-way audio/video Ajax Client for Flex Data Services Advanced communication protocols Joining Open Ajax initiative Performance Releasing Spry Ajax framework Flash Player External API Apollo universal client Example application 33 2006 Adobe Systems Incorporated. All Rights Reserved.

Extending Ajax… where Flex adds value browser client Expressiveness user interface Vector Graphics - Drawing API – Rich Media JavaScript call HTML+CSS data Performance VM - bytecode - JIT Ajax engine Offline Local Storage HTTP request http(s) transport Real Time XML data Binary Sockets - Pub/Sub Messaging web and/or XML server Programming Model / Productivity datastores, backend processing, legacy systems server-side systems 34 2006 Adobe Systems Incorporated. All Rights Reserved.

Putting it all together… FREE Flex Builder 2 Flash Player 9* Design View Code Hinting Debugging FREE Component Skinning Flex SDK 2 Flex Data Services 2 FREE Messaging Service Data Management Service Flex/Ajax Bridge RPC Services *formerly Flash Player 8.5. Click here for more info. 35 2006 Adobe Systems Incorporated. All Rights Reserved.

What is Apollo? 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. 2006 Adobe Systems Incorporated. All Rights Reserved.

How are Apollo Applications Composed? Applications can be built using the following technologies Flash / Flex / ActionScript HTML / JavaScript / CSS / AJAX Combination of these technologies PDF can be leveraged with any application Native Application Display HTML SWF PDF Renderer PDF Renderer Overlays Scripting Scripting DOM SWF HTML DOM Apollo APIs 2006 Adobe Systems Incorporated. All Rights Reserved.

Apollo Functionality / APIs Offline / Occasionally Connected Applications can run in background Network HTTP XML-RPC / SOAP / Rest based web services Binary and XML sockets File I/O Local storage / Settings API Custom Chrome Shape Alpha more 2006 Adobe Systems Incorporated. All Rights Reserved.

Adobe® Corporate Template 2005

by Sampetruda

Accessibility

Upload Details

Usage Rights

Statistics