Web 2.0 and Ajax With Java
Uploaded by
AdarshWeb 2.0 and Ajax With Java
Uploaded by
AdarshWeb 2.
0 and AJAX with Java
Greg Murray February 2006
Agenda
Definitions: Web 2.0, Rich Web Applications, AJAX Demo Guidelines JSF Approach AJAX BluePrints Futures Q&A
Agenda
Definitions: Web 2.0, Rich Web Applications, AJAX AJAX UseCases? Demo Guidelines JSF Approach AJAX BluePrints Futures Q&A
3
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
Conventional Rich Web Applications
Plugins/Applets Frames/ iframes Dumb browser Server Centric Page to Page navigation based
Conventional Interaction Model
High Level AJAX Interaction Model
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.
Anatomy of an AJAX Interaction
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>
10
JavaScript Event Handler
function getXHR() { if (window.XMLHttpRequest) { return new XMLHttpRequest(); } else if (window.ActiveXObject) { return new ActiveXObject("Microsoft.XMLHTTP"); } } function doCompletion() { var url = "autocomplete?action=complete&id=" + encodeURI(target.value); var req = getXHR(); req.onreadystatechange = processRequest; req.open("GET", url, true); req.send(null); }
11
Servlet
public void doGet(HttpServletRequest request, HttpServletResponse throws IOException, ServletException { response)
String targetId = request.getParameter("id");
Iterator it = employees.keySet().iterator(); while (it.hasNext()) { EmployeeBean e = (EmployeeBean)employees.get((String)it.next()); if ((e.getFirstName().toLowerCase().startsWith(targetId) || e.getLastName().toLowerCase().startsWith(targetId)) && !targetId.equals("")) sb.append("<employee>"); sb.append("<id>" + e.getId() + "</id>"); sb.append("<firstName>" + e.getFirstName() + "</firstName>"); sb.append("<lastName>" + e.getLastName() + "</lastName>"); sb.append("</employee>"); namesAdded = true; } } if (namesAdded) { {
response.setContentType("text/xml"); response.setHeader("Cache-Control", "no-cache");
response.getWriter().write("<employees>" + sb.toString() + "</employees>"); } else }
response.setStatus(HttpServletResponse.SC_NO_CONTENT);
12
JavaScript Client Callback
function postProcess(responseXML) { clearTable(); var employees = responseXML.getElementsByTagName("employees")[0]; if (employees.childNodes.length > 0) { completeTable.setAttribute("bordercolor", "black"); completeTable.setAttribute("border", "1"); } else { clearTable(); } for (loop = 0; loop < employees.childNodes.length; loop++) { var employee = employees.childNodes[loop]; var firstName = 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 Guidelines
JavaScript Libraries Usability I18n AJAX Design Architectures HTTP methods Return content-types Usecases/Patterns Security
16
JavaScript Libraries
Prototype RICO Script.aculo.us Dojo Zimbra
Recommendation: Adopt a library and don't try to re-invent the wheel. 17
Usability
Back/Forward/Refresh Buttons Bookmarking URL sharing Printing 508 Compliance
Recommendation: Consider the meaning of each and weigh the benefits when designing your application. 18
XMLHttpRequest (XHR)
HTTP Method
> GET - When the result of N > 0 requests is the same. > POST - When operation has side-effects and changes
the state on the server.
Concurrent Requests
> Max is 2 (IE) Consider - Pooling > JavaScript Closures Inline functions
Recommendation: Take care using the XHR. Use Closures to track the requests/callbacks. Consider using a library. 19
Internationalization (I18n)
Page Content Type
<meta 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 (autocomplete, tree, partial submit)
Page is the Application
> Client and Server split MVC responsibilities
Recommendation: Consider designing initial AJAX applications around the edges as you gain experience. Don't go overboard. 21
Architectures
Server Centric
> Server Renders Everything
Client Centric
> More JavaScript > Page as the Application > Client Controller
Recommendation: If you already have a server centric architecture consider adding some client centric components. When using a client centric architecture consider using an 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
Advanced Controls Autocomplete Observer Master Details Partial Submit Server Side Validation Value 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
Performance
http://www.macrumors.com/events/mwsf2006-stats.php We peaked at approximately 103,000 simultaneous web visitors and 6,000 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 times as 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: Control Content 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
<ajaxTags:completionField size="40" id="cityField" completionMethod=" #{ApplicationBean.completeName}" />
30
Server Side Logic for JSF Component
public String[] completeName() { ArrayList results = new ArrayList(); Iterator it = employees.keySet().iterator(); while (it.hasNext()) { EmployeeBean e = (EmployeeBean)employees.get((String)it.next()); if ((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 Pet Store More Java BluePrints Solutions Catalog entries More Java BluePrints AJAX components Better tool support Web 2.0/AJAX focus for JavaOne 2006
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:
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
