Đang tải... (xem toàn văn)
Web 2.0 is the term coined for the growing Internet trend characterized by online collaboration and sharing among users. Web 2.0 is changing the way people interact with Web applications, leading nine out of ten Web sites to review their implementation of the request/wait/response paradigm. Technologies like asynchronous JavaScript and XML (AJAX) enhance the user experience of accessing the Web, meeting standards that Web application developers have sought for many years. The success of AJAX occurred when advanced Web applications such as Google Maps and Gmail became generally available. Google offers a framework -- the Google Web Toolkit (GWT) -- to facilitate the development of advanced AJAX applications. This paper tells how to build AJAX applications, including the use of personalized components that extend the application program interface (API) of GWT. To demonstrate the benefits of this technology, we include examples of creating a paged table with editable fields and a personalized dialog box. We discuss the management of events and service calls for data access, as well as peculiar aspects of the API and tips about its use.
Greg Murray February 2006 Web 2.0 and AJAX with Java 2 Agenda • Definitions: Web 2.0, Rich Web Applications, AJAX • Demo • Guidelines • JSF Approach • AJAX BluePrints • Futures • Q & A 3 Agenda • Definitions: Web 2.0, Rich Web Applications, AJAX • AJAX UseCases? • Demo • Guidelines • JSF Approach • AJAX BluePrints • Futures • Q & A 4 Web 2.0 • Web as a Platform • Collection Intelligence > Folksonomy – Collaborative Categorization • Data is key and should be shared • Software is in constantly evolving > Software release cycles dead? • Lightweight Programming Models > SOAP/REST • The Network is the computer • Rich User Experience 5 Conventional Rich Web Applications • Plugins/Applets • Frames/ iframes • Dumb browser • Server Centric • Page to Page navigation based 6 Conventional Interaction Model 7 High Level AJAX Interaction Model 8 AJAX Asynchronous JavaScript + XML AJAX is using JavaScript, namely the XmlHttpRequest object, to communicate asynchronously with a server-side component and dynamically update the source of an HTML page based on the resulting XML/Text response. 9 Anatomy of an AJAX Interaction 10 HTML Page Event <form name="autofillform" action="autocomplete" method="get"> <table border="0" cellpadding="5" cellspacing="0"> <tr><td><b>Employee Name:</b></td><td> <input type="text" id="complete-field" size="20" autocomplete="off" onkeyup="doCompletion();"> </td><td align="left"> <input id="submit_btn" type="Submit" value="Lookup Employee"> </td></tr> <tr><td id="auto-row" colspan="2"> <td/></tr> </table> </form> <div style="position: absolute; top:170px;left:140px" id="menu-popup"> <table id="completeTable" border="1" bordercolor="black" cellpadding="0" cellspacing="0" /> </div> [...]... Store More Java BluePrints Solutions Catalog entries More Java BluePrints AJAX components Better tool support Web 2. 0/ AJAX focus for JavaOne 20 06 33 Summary • Java provides the ideal platform for AJAX and Web 2. 0 style applications • Use AJAX where it makes sense • Follow the guidelines • The BluePrints team and BluePrints Solutions Catalog is a great AJAX resources 34 Resources • BluePrints AJAX Page:... Performance • http://www.macrumors.com/events/mwsf 200 6-stats.php “We peaked at approximately 103 ,00 0 simultaneous web visitors and 6 ,00 0 IRC viewers during the Keynote speech and transmited over 32 GB of data in a three hour period If not for the efficiency of the MacRumorsLive AJAX update system, the same webcast would have required approximately twice as many servers and would have had to transfer almost 6... employee.getElementsByTagName("firstName") [0] ; var lastName = employee.getElementsByTagName("lastName") [0] ; var employeeId = employee.getElementsByTagName("id") [0] ; appendEmployee(firstName.childNodes [0] .nodeValue, lastName.childNodes [0] .nodeValue, employeeId.childNodes [0] .nodeValue); } } 13 Demo AJAX Demo 14 Agenda • • • • • • • Definitions: Web 2. 0, Rich Web Applications, AJAX Demo Guidelines JSF Approach AJAX BluePrints Futures Q&A 15 AJAX. .. much data (196 GB).” • Patterns- Value List Handler/ Master Details • JavaScript - Compression Recommendation: AJAX Performs! Use patterns and try to reduce the size of your JavaScript files Consider dynamic loading of script 26 Agenda • • • • • • • Definitions: Web 2. 0, Rich Web Applications, AJAX Demo Guidelines JSF Approach AJAX BluePrints Futures Q&A 27 JSF Component Approach Benefits Include: •... ((e.getFirstName().toLowerCase().startsWith(targetId) || e.getLastName().toLowerCase().startsWith(targetId)) && !targetId.equals("")) { results.add(e.getId() + " " + e.getFirstName() + e.getLastName()); } } return (String[])results.toArray(); } 31 AJAX BluePrints • BluePrints Solutions Catalog Entries on AJAX > NetBeans > Command Line > Written for Glassfish http://glassfish.dev .java. net • Java Petstore Demo 32 Futures • • • • • AJAX. .. List Handler Recommendation: Use AJAX to Enhance the user experience 24 Security • Sandboxed > Cross Domain XMLHttpRequest restricted > Access to file system restricted • HTTPS – Requires a page refresh • JavaScript Libraries for Encryption Exist • JavaScript code visible to the world Recommendation: Use HTTPS when you want to secure AJAX communication Don't put compromising code in your JavaScript 25 ... existing library 22 Response Content Type • XML • HTML • Text > Post processing on client > Inject directly into the page • JavaScript > Evaluated in JavaScript using eval() > JavaScript object representations of data(JSON) Recommendation: Use XML for structured portable data Use plain text for when injecting content into the HTML Use JavaScript to return object representations data 23 Uscases/Patterns... Rendering Control of Server Side Logic All in one component Reusable Usable in a tool Hide AJAX complexity from page developers 28 Anatomy of an AJAX enabled JSF Component 29 Page Developer's View of JSF Component 30 Server Side Logic for JSF Component public String[] completeName() { ArrayList results... http-equiv="Content-Type" content="text/html; charset=UTF-8"> • Use JavaScript encodeURI when building URLs or sending localizable content • Call request.setCharacterEncoding("UTF-8") before retrieving any parameters from Java EE • Call response.setContentType(“text/xml;charset=UTF-8”) Recommendation: Use UTF-8 since it supports the widest number of languages and browsers 20 AJAX Design • Add Around the Edges > Small components... sense • Follow the guidelines • The BluePrints team and BluePrints Solutions Catalog is a great AJAX resources 34 Resources • BluePrints AJAX Page: http:/ /java. sun.com/blueprints /ajax. html • AJAX FAQ for the Java Developer http://blueprints.dev .java. net /ajax- faq.html • Quirksmode.org http://www.quirksmode.org 35 Q&A . Greg Murray February 20 06 Web 2. 0 and AJAX with Java 2 Agenda • Definitions: Web 2. 0, Rich Web Applications, AJAX • Demo • Guidelines • JSF Approach • AJAX BluePrints • Futures • Q &. A 3 Agenda • Definitions: Web 2. 0, Rich Web Applications, AJAX • AJAX UseCases? • Demo • Guidelines • JSF Approach • AJAX BluePrints • Futures • Q & A 4 Web 2. 0 • Web as a Platform • Collection. lastName.childNodes [0] .nodeValue, employeeId.childNodes [0] .nodeValue); } } 14 Demo AJAX Demo 15 Agenda • Definitions: Web 2. 0, Rich Web Applications, AJAX • Demo • Guidelines • JSF Approach • AJAX BluePrints • Futures • Q