In-depth Session: Developing Web 2.0 Application Using AJAX and Related Frameworks

Transcription

1 In-depth Session: Developing Web 2.0 Application Using AJAX and Related Frameworks

2 Agenda AJAX Basics > > > > > What is AJAX? AJAX Anatomy AJAX Guidelines AJAX Interaction:Using AutoComplete Sample Application Current Issues & Futures AJAX Toolkits and Frameworks > > > > > AJAX-enabled JavaServer Faces components Clients-side JavaScript Libraries Wrapper:jMaki Java to JavaScript/HTML translator:gwt Remoting via proxy Summary and Resources

3 AJAX Basics: What is AJAX?

4 What is AJAX AJAX is an acronym for Asynchronous Javascript And XML > AJAX uses JavaScript combined with xml to grab information from a server without refreshing the page > nothing new, the main requirement is the web browser has the support for XMLHttpRequest object > The term AJAX was coined Jesse James Garrett in February 2005 Asynchronous communication replaces "synchronous request/response model." > A user can continue to use the application while the client program requests information from the server in the background > Separation of displaying from data fetching

5 Why AJAX? "Partial screen update" replaces the "click, wait, and refresh" user interaction model > Only user interface elements that contain new information are updated (fast response) > The rest of the user interface remains displayed without interruption (no loss of operational context) Intuitive and natural user interaction > No clicking required > Mouse movement is a sufficient event trigger Data-driven (as opposed to page-driven) > UI is handled in the client while the server provides data

6 User Interface: Traditional Web vs. AJAX Interrupted user operation while the data is being fetched Uninterrupted user operation while data is being fetched

7 Components: Traditional Web vs. AJAX

8 AJAX Basics: AJAX Anatomy

9 Server-Side AJAX Request Processing Server programming model remains the same > It receives standard HTTP GETs/POSTs > Can use Servlet, JSP, JavaServer Faces,... With minor constraints > More frequent and finer-grained requests from client > Response content type can be text/xml, text/plain, text/json

10 XMLHttpRequest Methods Method Name Description open("method", "URL", asyncflag) Setup the request (note async) send(content) Send the request (content = post data) abort() Stop the request getallresponseheaders() Return a hash of the headers getresponseheader("header") Return the header value setrequestheader("label", "value") Set a header

11 XMLHttpRequest Properties Property Name Description onreadystatechange Setup the callback event handler readystate responsetext Object status integer: 0 = uninitialized 1 = loading 2 = loaded 3 = interactive 4 = complete Text value of response responsexml XML DOM of response status Status code (numeric) statustext Status text

12 AJAX Basics: AJAX Interaction: Using AutoComplete Sample Application

13 AutoComplete Using a Servlet How can you provide a better means of navigating a large set of data based on a search query?

14 Steps of An AJAX Interaction 1. A client event occurs. 2. An XMLHttpRequest object is created and configured. 3. The XMLHttpRequest object makes a call. 4. The request is processed by the AutocompleteServlet. 5. The AutocompleteServlet returns an XML document containing the result. 6. The XMLHttpRequest object calls the callback() function and processes the result. 7. The HTML DOM is updated.

15 1. A Client event occurs A JavaScript function is called as the result of an event Example: docompletion() JavaScript function is mapped to a onkeyup event on a link or form component 1. <form name="autofillform" action="autocomplete" method="get"> 2. <input type="text" 3. size="20" 4. autocomplete="off" 5. id="complete-field" 6. name="id" 7. onkeyup="docompletion();"> 8. <input id="submit_btn" type="submit" value="lookup Employee"> 9. </form>

16 2. An XMLHttpRequest object is created and configured 1. function docompletion() { 2. if (completefield.value == "") { 3. cleartable(); 4. } else { 5. var url = "autocomplete?action=complete&id=" + escape (completefield.value); 6. var req = initrequest(url); 7. req.onreadystatechange = function() { 8. if (req.readystate == 4) { 9. if (req.status == 200) { 10. parsemessages(req.responsexml); 11. } else if (req.status == 204){ 12. cleartable(); 13. }}}; 14. req.open("get", url, true); 15. req.send(null); 16. }}

17 2. An XMLHttpRequest object is created and configured (cont.) 1. function initrequest(url) { 2. if (window.xmlhttprequest) { 3. return new XMLHttpRequest(); 4. } else if (window.activexobject) { 5. isie = true; 6. return new ActiveXObject ("Microsoft.XMLHTTP"); 7. } 8.}

18 3. XMLHttpRequest object makes an async. request 1. function docompletion() { 2. if (completefield.value == "") { 3. cleartable(); 4. } else { 5. var url = "autocomplete?action=complete&id=" + escape (completefield.value); 6. var req = initrequest(url); 7. req.onreadystatechange = function() { 8. if (req.readystate == 4) { 9. if (req.status == 200) { 10. parsemessages(req.responsexml); 11. } else if (req.status == 204){ 12. cleartable(); 13. }}}; 14. req.open("get", url, true); 15. req.send(null); 16. }}

19 4. The request is processed by the AutoCompleteServlet at the Server 1. public void doget(httpservletrequest request, HttpServletResponse response) throws IOException, ServletException { String targetid = request.getparameter("id"); 3. Iterator it = employees.keyset().iterator(); 4. while (it.hasnext()) { 5. EmployeeBean e = (EmployeeBean)employees.get((String)it.next()); 6. if ((e.getfirstname()... e.getlastname()...) { 7. sb.append("<employee>"); sb.append("<id>" + e.getid() + "</id>"); 8. sb.append("<firstname>" + e.getfirstname() + "</firstname>"); 9. sb.append("<lastname>" + e.getlastname() + "</lastname>"); 10. sb.append("</employee>"); namesadded = true; 11. }} 12. if (namesadded) { } 15.}

20 5. The AutocompleteServlet returns an XML document containing the result 1. public void doget(httpservletrequest request, HttpServletResponse response) throws IOException, ServletException { while (it.hasnext()) { 4. EmployeeBean e = (EmployeeBean)employees.get((String)it.next()); if (namesadded) { 7. response.setcontenttype("text/xml"); 8. response.setheader("cache-control", "no-cache"); 9. response.getwriter().write("<employees>" + sb.tostring() + "</employees>"); 10. } else { 11. response.setstatus(httpservletresponse.sc_no_content); 12. } 13.}

21 6. XMLHttpRequest object calls callback() function and processes the result The XMLHttpRequest object was configured to call the function when there is a state change to the readystate of the XMLHttpRequest object 1.req.onreadystatechange = function() { 2. if (req.readystate == 4) { 3. if (req.status == 200) { 4. parsemessages(req.responsexml); 5. } else if (req.status == 204){ 6. cleartable(); 7. }}};

22 Browser, DOM and JavaScript Browsers maintain an object representation of the documents being displayed (referred to as the Document Object Model or DOM) JavaScript technology in an HTML page has access to the DOM, and APIs are available that allow JavaScript technology to modify the DOM after the page has loaded Following a successful request, JavaScript technology code may modify the DOM of the HTML page The object representation of the XML document that was retrieved from the servlet is available to JavaScript technology code using the req.responsexml, where req is an XMLHttpRequest object

23 7. The HTML DOM is updated JavaScript technology gets a reference to any element in a page using DOM API The recommended way to gain a reference to an element is to call > responsexml.getelementsbytagname("employees")[0], where "employees" is the ID attribute of an element appearing in the HTML document JavaScript technology may now be used to modify the element's attributes; modify the element's style properties; or add, remove, or modify child elements

24 AutoComplete parsemessages 1.function parsemessages(responsexml) { 2. cleartable(); 3. var employees = responsexml.getelementsbytagname("employees")[0]; 4. if (employees.childnodes.length > 0) { 5. completetable.setattribute("bordercolor", "black"); 6. completetable.setattribute("border", "1"); 7. } else { 8. cleartable(); 9. } for (loop = 0; loop < employees.childnodes.length; loop++) { 12. var employee = employees.childnodes[loop]; 13. var firstname = employee.getelementsbytagname("firstname")[0]; 14. var lastname = employee.getelementsbytagname("lastname")[0]; 15. var employeeid = employee.getelementsbytagname("id")[0]; 16. appendemployee(firstname.childnodes[0].nodevalue,lastname.childnodes[0].nodevalue, employeeid.childnodes[0].nodevalue); } }

25 AutoComplete Update

26 AJAX Basics: AJAX Guidelines

27 AJAX Guidelines Usability JavaScript Libraries I18n State Management HTTP methods Return content-types Tools and Debuggers

28 Usability Back/Forward button meaningless Refresh button can kill your app > Save state in <body onload> method Bookmarking/URL sharing not working Printing dynamically rendered pages can be problematic JavaScript framework Dojo toolkit ( > provides API's history manipulation and navigation control > provides client-side for bookmarking and URL manipulation Requires thinking about interface and interaction > Usability is the key > Do not break what the user is focusing on > Make sure to give the user feedback > Do not over-use it Recommendation: Consider the meaning of each and weigh the benefits when designing your application.

29 JavaScript Libraries There are differences in javascript implementations Serializing complex data and mapping it to javascript isn't a trival task Directly consuming xml in Javascript can be painful due to browser differences in technologies like xslt Dojo: a key focus on user experience Prototype: focuses more on AJAX interactions > JavaScript objects and utility methods DWR: both client-side and server-side framework > do RPC calls from client-side JavaScript to Java objects in a web container server side Recommendation: Adopt a library and don't try to re-invent the wheel.

30 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 HttpServletRequest.setCharacterEncoding("UTF-8") before retrieving any parameters from Java EE Recommendation: Use UTF-8 since it supports the widest number of languages and browsers.

31 State Management On Client > In memory in JavaScript Objects > In hidden form variables > In cookies On Server > HttpSession > Persisted How do you handle state + sessions? > Can all be on the client so you can have truly stateless servers? > What happens if the server or network dies? Recommendation: Consider keeping non-secure state related to the rendering of the client on the client. Keep secure persistent state on the server.

32 HTTP Methods GET > When the data will not change POST > When operation has side-effects and changes the state on the server. Recommendation: Follow the HTTP idempotency rules.

33 Response Content Type XML 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.

34 Development Tools for NetBeans IDE Building AJAX Applications over NetBeans is not that much different from building regular Web applications NetBeans JavaScript editor plug-in >

35 Debuggers Mozilla FireBug debugger (add-on) > This is the most comprehensive and most useful JavaScript debugger > This tool does things all other tools do and more Mozilla JavaScript console Mozilla DOM inspector (comes with Firefox package) Mozilla Venkman JavaScript debugger (add-on) Mozilla LiveHTTPHeaders HTTP monitor (similar to NetBeans HTTP monitor) Microsoft Script Debugger (IE specific)

36 AJAX Basics: Current Issues & Futures

37 Current Issues of AJAX No standardization of the XMLHttpRequest yet > Future version of IE will address this No support of XMLHttpRequest in old browsers > Iframe will help Using AJAX requires cross browser testing JavaScript technology dependency & incompatibility > Must be enabled for applications to function > Still some browser incompatibilities JavaScript code is visible to a hacker > Poorly designed JavaScript code can invite security problem

38 Browsers support Need XmlHttpRequest browser support Mozilla Firefox 1.0 and above Netscape version 7.1 and above Apple Safari 1.2 and above. Microsoft Internet Exporer 5 and above Konqueror (Unix) Opera 7.6 and above

39 Current Issues of AJAX Complexity is increased > Server side developers will need to understand that presentation logic will be required in the HTML client pages as well as in the server-side logic > Page developers must have JavaScript technology skills AJAX-based applications can be difficult to debug, test, and maintain > JavaScript is hard to test - automatic testing is hard > Weak modularity in JavaScript > Lack of design patterns or best practice guidelines yet

40 AJAX Futures AJAX-enabled JSF Component libraries Standardization of XMLHttpRequest Better browser support Better and Standardized Framework support More best practice guidelines in the programming model

41 AJAX Toolkits and Frameworks

42 Types of AJAX Toolkit and Framework Solutions of Today AJAX-enabled JSF components Clients-side JavaScript Libraries Wrapper:jMaki Java to JavaScript/HTML translator:gwt Remoting via proxy

43 AJAX Toolkits and Frameworks: AJAX-Enabled JavaServer Faces Components

44 AJAX-enabled JSF Components AJAX-enabled JavaServer Faces components hides all the complexity of AJAX programming > Page author does not need to know JavaScript > The burden is shifted to component developers Leverages drag-and-drop Web application development model of Faces through an IDE > You can drag and drop AJAX-enabled Faces components within Sun Java Studio Creator 2 (and other Faces-aware IDE's) to build AJAX applications JavaServer Faces components are reusable > More AJAX-enabled Faces components are being built by the community

45 Implementations Blueprint AJAX-enabled JSF components (opensource) > > ajax4jsf (open-source) > Can add AJAX capability to existing applications > ICEfaces (ICESoft) - commercial >

46 AutoComplete Sample Using a JavaServer Faces Component

47 AJAX JavaServer Faces Component Generic and show completion results for any type of data JavaServer Faces component does three things: > Renders the HTML for the form elements > Renders the links to the JavaScript code that handles the form events > Processes AJAX requests

48 AJAX Faces Component That Renders Client-side AJAX Script and Processes AJAX Requests AJAX is built into the JavaServer Faces lifecycle Faces environment with a phase listener used to return initial JavaScript technology Faces environment with a phase listener processes AJAX requests View state from a page may also be accessed

49 Anatomy of an AJAX enabled JSF Component

50 Steps for Creating and Using a Custom Render Kit 1. Creating custom component classes or determining which standard components to use 2. Creating renderer classes to render the components on the target client 3. Creating a RenderKit class 4. Creating a ResponseWriter class 5. Creating a ResponseStateManager class 6. Creating a SerializedView class 7. Creating custom tags and tag handlers for the renderer and component combinations 8. Registering the render kit, renderers, and components with the application 9. Using the custom tags in the page

51 Page Developer's View of JavaServer Faces Component 1.<ajaxTags:completionField 2. size="40" id="cityfield" 3. completionmethod=" 4. #{ApplicationBean.completeName}" 5./>

52 HTML Rendered in Browser <div id="menu-popup0" style="position: absolute; top:170px;left:140px;visibility:hidden" class="popupframe"> </div> <input id="autofillform:cityfield" autocomplete="off" type="text" name="autofillform:cityfield" size="40" onfocus="docompletion('autofillform:cityfield','menu-popup0', '#{ApplicationBean.completeCity}',function(item) { return choosecity(item); },function(item) { return extractcity(item); });" onkeyup="docompletion('autofillform:cityfield','menupopup0','#{applicationbean.completecity}',function(item) { return choosecity(item); },function(item) { return extractcity(item); });" onblur="stopcompletiondelayed('menu-popup0');" />

53 AjaxPhaseListener If AJAX related requests, invoke this for Faces to ignore requests FacesContext.responseComplete() Defined in faces-config.xml <!-- Handle AJAX component requests - completion requests, script requests and stylesheet requests --> <lifecycle> <phase-listener> ajax.components.ajaxphaselistener </phase-listener> </lifecycle>

54 AjaxPhaseListener (cont.) Render generates: <script type="text/javascript" src="faces/ajaxtextfield.js"> script request: write out JavaScript to be included in JSP public void afterphase(phaseevent event) { String rootid = event.getfacescontext().getviewroot(). getviewid(); if (rootid.endswith(script_view_id)) { handleresourcerequest(event, "script.js","text/javascript"); } else if (rootid.endswith(css_view_id)) { handleresourcerequest(event, "styles.css", "text/css"); } else if (rootid.indexof(ajax_view_id)!= -1) { handleajaxrequest(event); } }

55 Server Side Logic for Faces Component 1.public String[] completename() { 2. ArrayList results = new ArrayList(); 3. Iterator it = employees.keyset().iterator(); 4. while (it.hasnext()) { 5. EmployeeBean e = (EmployeeBean)employees.get((String)it.next()); 6. if ((e.getfirstname().tolowercase().startswith(targetid) 7. e.getlastname().tolowercase().startswith(targetid)) && 8.!targetId.equals("")) { results.add(e.getid() + " " e.getfirstname() e.getlastname()); 13. } } 14. return (String[])results.toArray();}

56 Pro's And Con's Pro's > Drag-and-dropping AJAX-enabled JavaServer Faces components within an IDE for building AJAX application > Leveraging 3rd-party AJAX-enabled JavaServer Faces components Con's > Building your own AJAX-enabled JavaServer Faces component is not trivial task When to use > When you want to build AJAX apps by drag-and-dropp'ing > When you are already committed to JavaServer Faces programming model for building your applications > When you want to avoid JavaScript coding

57 Sun Developer Tools All FREE! Developer Service Plans NetBeans Fully-featured, Integrated Development Environment Open Source Dynamic Java IDE Sun Java Studio Creator Web application and portlet development made easy Drag-and-drop JavaServer Faces based tool for front-end web and portlet development Sun Java Studio Enterprise Revolutionary Development Platform with a Powerful Feature Set Develop-Test-Deploy to the Sun Java Enterprise System Sun Studio Compilers and Tools for Native Application Development Compilers and tools for native application development

58 AJAX Support Sample Sun BluePrints AJAX Components Provided > > > > > > > > Auto Complete Text Field Map Viewer (uses Google Map API) Progress Bar Rich Textarea Editor (provides word processing features) Select Value Text Field Buy Now Button (PayPal purchase) Rating Popup Calendar

59 AJAX Support Ability to add 3rd-Party AJAX components to extend > Web application richness > Ease of development rd- 3 Party AJAX Component Vendors > ICESoft ICEFaces > Infragistics NetAdvantage for JSF > Nitobi Grid and ComboBox If you investigate, you will find the sample components... > Use Dojo toolkit > Use Shale Remoting > Use common web APIs such as Google Map API, PayPal API, etc.

60 Sun Java Studio Creator 2 Demo

61 AJAX Toolkits and Frameworks: Client Side JavaScript Libraries

62 Client Side JavaScript Libraries HTMP Pages, JavaScript Event Handlers UI Widgets & Components Remoting Abstraction Layer XMLHttpRequest iframe JavaScript Utilities

63 Architectural Layers (Client-side) Remoting abstraction layer > Hides handling of XMLHttpRequest and IFrame Widgets and components > Provides ready-to-use UI widgets such as calendar, button, etc JavaScript event handlers > Provides client-side logic

64 Characteristics of Client Side JavaScript Libraries Server side technology agnostic > The server side technology can be Java EE,.Net, PHP, Ruby on Rails, etc. Should be accessible during runtime either locally or through URL > There is no dynamic JavaScript code generation You can use them in combination in a single app > You might want to use widgets from multiple libraries

65 Client-side JavaScript Libraries DOJO Toolkit > Key focus on user experience > > > > > provides API's history manipulation and navigation control > provides client-side for bookmarking and URL manipulation Most prominent and comprehensive Gaining a leadership in this space Major industry support (Sun, IBM)

66 Client-side JavaScript Libraries Prototype > Focuses more on AJAX interactions > JavaScript objects and utility methods > Used by other toolkit libaries > Script.aculo.us > Built on Prototype > Nice set of visual effects and controls > Rico > Built on Prototype > Rich AJAX components and effects > DHTML Goodies > Various DHTML and AJAX scripts >

67 What is and Why Dojo Toolkit?

68 What is Dojo Toolkit? Open Source DHTML toolkit written in JavaScript > It is a set of JavaScript libraries Aims to solve some long-standing historical problems with DHTML > Browser incompatibility Allows you to easily build dynamic capabilities into web pages > Widgets > Animations Server technology agnostic source: dojotoolkit.org

69 Why Dojo Toolkit? You can use Dojo to make your web applications more useable, responsive, and functional > Supports AJAX Dojo provides lots of plumbing facilities > Hides XMLHttpRequest processing > Handles browser incomaptibilities Strong developer community source: dojotoolkit.org

70 Features of Dojo Toolkit Powerful AJAX-based I/O abstraction (remoting) Backward, forward, bookmarking support Markup-based UI construction through widgets Widget prototyping Animation Lots of useful libraries

71 Dojo Toolkit Libraries dojo.io: AJAX-based communication with the server dojo.event: unified event system for DOM and programmatic events dojo.lang: utility routines to make JavaScript easier to use. dojo.string: String manipulation routines dojo.dom: DOM manipulation routines dojo.style: CSS Style manipulation routines

72 Dojo Toolkit Libraries (cont.) dojo.html: HTML specific operations dojo.reflect: Reflection API dojo.date: Date manipulation dojo.logging.logger: Logging library dojo.profile: JS Profiler dojo.regexp: Regular Expression generators dojo.dad: Drag and Drop

73 Remoting via dojo.io.bind()

74 dojo.io.bind() The dojo.io.* namespace contains generic APIs for doing network I/O > dojo.io.bind() hides low-level XMLHttpRequest operations > In a browser, dojo.io.bind() is how one makes "Ajax" requests Also handles > back-button interception > transparent form submission > advanced error handling

75 dojo.io.bind() Syntax // Make a request that returns raw text from a URL dojo.io.bind({ // URL to make a request to url: " // Callback function to execute upon successful response load: function(type, data, evt){ /*do something w/ the data */ }, // Type of data that is returned mimetype: "text/plain" }); // More options source: dojotoolkit.org

76 Handling of Back/Forward Buttons & Bookmarking

77 Example: Back Button var sampleformnode = document.getelementbyid("formtosubmit"); dojo.io.bind({ url: " load: function(type, evaldobj){ // hide the form when we hear back that it submitted successfully sampleformnode.style.display = "none"; }, backbutton: function(){ //...and then when the user hits "back", re-show the form sampleformnode.style.display = ""; }, formnode: sampleformnode }); source: dojotoolkit.org

78 Example: Forward Button var sampleformnode = document.getelementbyid("formtosubmit"); dojo.io.bind({ url: " load: function(type, evaldobj){ // hide the form when we hear back that it submitted successfully sampleformnode.style.display = "none"; }, backbutton: function(){ //...and then when the user hits "back", re-show the form sampleformnode.style.display = ""; }, forwardbutton: function(){ // and if they hit "forward" before making another request, this // happens: sampleformnode.style.display = "none"; // we don't re-submit }, formnode: sampleformnode }); source: dojotoolkit.org

79 Example: Bookmarking Simply pass in the value "true" to the flag "changeurl" Your top-level page will now have a new timestamp hash value appended to the end dojo.io.bind({ url: " load: function(type, data, evt){ /*do something w/ the data */ }, changeurl: true, mimetype: "text/plain" }); source: dojotoolkit.org

80 Example: Bookmarking Alternately, it's possible to include your own hash value by providing a string instead of "true" to changeurl dojo.io.bind({ url: " load: function(type, data, evt){ /*do something w/ the data */ }, changeurl: "foo,bar,baz", mimetype: "text/plain" }); source: dojotoolkit.org

81 Pro's And Con's Pro's > You can use it with any server side technology > Many widgets from multiple sources Con's > Developer still has to learn JavaScript > Different libraries use different syntax When to use > You need to work with multiple server side technologies > You want to use widgets from multiple sources (jmaki will help here assuming you are using Java EE)

82 AJAX Toolkits and Frameworks: Wrapper: jmaki

83 What is and Why jmaki?

84 Motivations for jmaki You want to leverage widgets from existing and future AJAX toolkits and frameworks > Dojo, Scriptaculus, Yahoo UI Widgets and DHTML Goodies Today, there are multiple AJAX frameworks with their own widgets and with different syntax > There is a need for a common programming model to these various widgets Too much of JavaScript code required for Java developers > There is a need for Java Language view of JavaScript-based widgets

85 Why jmaki? Project jmaki makes it easier to use popular AJAX frameworks within the Java EE Platform It provides a base set of wrappers around some of the widgets from the more popular frameworks (such as Dojo, Prototype and Yahoo Widgets) Project jmaki is easily extensible, allowing developers to use the latest and most useful widgets as they appear

86 Why jmaki? (cont.) Enables Java developers to use JavaScript in their Java based applications as either a JSP tag library or a JavaServer Faces component Uses the best parts of Java and the best parts of JavaScript to deliver a rich AJAX style widgets Promotes a program methodology that cleanly separates behavior (JavaScript), from Styles (CSS), from template HTML

87 jmaki Widgets from NetBeans 5 Plug-in

88 Using jmaki Widgets: Using a List Widget

89 Usage Example of jmaki Widget (List) in a JSP page <%@ taglib prefix="a" uri=" %> Declare JMaki Tag Lib <%@ taglib prefix="a" uri=" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>jsp Page</title> </head> <body> <h1>jsp Page</h1> <a:ajax name="list" service="listservice.jsp" /> </body> </html> Place a jmaki Widget

90 HTML that is Rendered by jmaki <html>... <body> <script type="text/javascript" src=" <script type="text/javascript">jmaki.webroot=' <link rel="stylesheet" type="text/css" href=" <div id="list0" class="listcontainer"> CSS <form onsubmit="jmaki.attributes.get('list0').submitdata(); return false;"> <input id="list0_entryfield" type="text" size="20" value="enter new Value"> <input type="button" onclick="jmaki.attributes.get('list0').submitdata(); return false;" value="add to List"></from> <div id="list0_list" class="listdiv"></div> </div> HTML <script type="text/javascript"> jmaki.addwidget ({service:'listservice.jsp',script:' name:'list'});</script> </body> JavaScript

91 How Does jmaki Know Which HTML Template to use for Rendering? jmaki (actually jmaki tag handler) takes the value from the name attribute - list in the example below > <a:ajax name="list" service="listservice.jsp" /> jmaki then finds the widget named as list list widget has the following 3 files associated with it - these files are parameterized > HTML template: list/component.html > CSS template: list/component.css > JavaScript code: list/component.js When rendered, the parameters are set with values

92

93 What Makes Up a jmaki Widget?

94 What Makes Up a jmaki Widget? HTML template Defines the page layout JavaScript file Defines behavior CSS file Defines style

95 jmaki Demo Use various jmaki widgets to build a Web application through NetBeans jmaki plug-in

96 Pro's And Con's Pro's > Provides unified programming model for using widgets over various AJAX toolkits and frameworks > Allows Java developers to use familiar Java EE programming model (JSP or Faces tags) for using JavaScript widgets > There is already a NetBeans Plug-in Con's > Event model is still not fully baked yet When to use > When you want to use widgets from different sources yet want to use uniform programming model

97 AJAX Toolkits and Frameworks: Java Code To JavaScript/HTML Translator: GWT

98 What is GWT (Google Web Toolkit)? Java software development framework that makes writing AJAX applications easy > Java-to-JavaScript compiler and a special web browser that helps you debug your GWT applications You can develop and debug AJAX applications in the Java language using the Java development tools of your choice When you deploy your application to production, the compiler translates your Java application to browsercompliant JavaScript and HTML

99 GWT User Interface Classes Similar to those in existing UI frameworks such as Swing and SWT except that the widgets are rendered using dynamically-created HTML rather than pixel-oriented graphics While it is possible to manipulate the browser's DOM directly using the DOM interface, it is far easier to use classes from the Widget hierarchy Using widgets makes it much easier to quickly build interfaces that will work correctly on all browsers

100 GWT Widget Gallery

101 Events and Listeners Events in GWT use the "listener interface" model similar to other user interface frameworks A listener interface defines one or more methods that the widget calls to announce an event A class wishing to receive events of a particular type implements the associated listener interface - called Event Listener - and then passes a reference to itself to the widget to "subscribe" to a set of events

102 Example: Event Listener public class ListenerExample extends Composite implements ClickListener { private FlowPanel fp = new FlowPanel(); private Button b1 = new Button("Button 1"); private Button b2 = new Button("Button 2"); public ListenerExample() { setwidget(fp); fp.add(b1); fp.add(b2); b1.addclicklistener(this); b2.addclicklistener(this); } } public void onclick(widget sender) { if (sender == b1) { // handle b1 being clicked } else if (sender == b2) { // handle b2 being clicked } }

103 Custom Composite Widget The most effective way to create new widgets You can easily combine groups of existing widgets into a composite that is itself a reusable widget Composite is a specialized widget that can contain another component (typically, a panel) but behaves as if it were its contained widget

104 What is and Why GWT RPC? Mechanism for interacting with the server by invoking a method > Example: For fetching data Makes it easy for the client and server to pass Java objects back and forth over HTTP When used properly, RPCs give you the opportunity to move all of your UI logic to the client, resulting in greatly improved performance, reduced bandwidth, reduced web server load, and a pleasantly fluid user experience

105 GWT RPC Plumbing Architecture

106 Steps for Implementating RPC 1.Write two service interface's (client & server) > Synchronous interface > Asynchronous interface 2.Implement the service at the server side > Service class implements service interface and extends RemoteServiceServlet 3.Make a call from the client

107 1. Write Service Interface Files Synchronous interface public interface MyService extends RemoteService { public String mymethod(string s); } Asynchronous interface interface MyServiceAsync { public void mymethod(string s, AsyncCallback callback); }

108 2. Implement the Service Extends RemoteServiceServlet and implements this service interface public class MyServiceImpl extends RemoteServiceServlet implements MyService { public String mymethod(string s) { // Do something interesting with 's' here on the server. return s; } }

109 3. Make a call from Client Make client proxy Specify the destination URL Create an asynchrounous callback handler Make a call

110 Pro's And Con's Pro's > Allows Java developers to use Java language for the development AJAX applications > No need to learn JavaScript language > It is from Google (Good momentum) Con's > <work in progress> When to use > When you already have Java UI application that you want to expose it as Web application as well

111 AJAX Toolkits and Frameworks: Remoting via Proxy

112 Remoting via Proxy (Client & Server) Java Classes HTMP Pages, JavaScript Event Handlers Proxy Skeleton Remote Abstraction Layer XMLHttpRequest iframe HTTP Get/Post Framework runtime

113 Characteristics of Remoting via Proxy Framework Similar to general RPC communcation schemes Allows RMI like syntax in the client side JavaScript code Framework generates client stub (Proxy), which is a JavaScript code Framework provides server side runtime Client stub (Proxy) handles marshalling of parameters and return value

114 Remoting via Proxy Implementations Direct Web Remoting (DWR) > Designed specifically for Java application at the backend > Do RPC calls from client-side JavaScript to Java objects in a web container server side > JSON-RPC > Lightweight remote procedure call protocol similar to XML-RPC > > There are language-specific implementations > JSON-RPC-Java >

115 What is DWR?

116 What is DWR? a Java open source library which allows you to write AJAX web applications > Hides low-level XMLHttpRequest handling Allows JavaScript code in a browser to use Java methods running on a web server just as if it was in the browser > Why it is called Direct remoting Specifically designed with Java technology in mind > Easy AJAX for Java

117 Why DWR? Without DWR, you would have to create many Web application endpoints (servlets) that need to be address'able via URI's What happens if you have several methods in a class on the server that you want to invoke from the browser? > If you are using low-level XMLHttpRequest, each of these methods need to be addressable via URI > You would have to map parameters and return values to HTML input form parameters and responses yourself DWR comes with some JavaScript utility functions

118 How DWR Works DWR converts all the parameters and return values between client side Javascript and backend Java

119 DWR Consists of Two Main Parts A DWR-runtime-provided Java Servlet running on the server that processes incoming DWR requests and sends responses back to the browser > uk.ltd.getahead.dwr.dwrservlet > This servlet delegates the call to the backend class you specify in the dwr.xml configuration file JavaScript running in the browser that sends requests and can dynamically update the webpage > DWR handles XMLHttpRequest handling source:

120 Steps for Building DWR-based AJAX Application

121 Steps to Follow 1.Copy dwr.jar file into the WEB-INF/lib directory of your web application dwr.jar contains DWR runtime code including the DWR servlet 2.Edit web.xml in the WEB-INF directory DWR servlet mapping needs to be specified 3.Create dwr.xml file in the WEB-INF directory You specifiy which class and which methods you want to expose 4.Write JavaScript code in which you invoke methods of a Java class (or classes) in RPC/RMI-like syntax 5.Build, deploy, test the application

122 Step #1: Copy dwr.jar File in the WEB-INF/lib Directory dwr.jar contains DWR runtime code including the DWR servlet You can get dwr.jar file from The latest version is (as of Aug 2006)

123 Step #2: Edit web.xml in the WEB-INF directory <!-- Configure DWR for your Web application --> <servlet> <servlet-name>dwr-invoker</servlet-name> <display-name>dwr Servlet</display-name> <servlet-class>uk.ltd.getahead.dwr.dwrservlet</servlet-class> <init-param> <param-name>debug</param-name> <param-value>true</param-value> </init-param> </servlet> <servlet-mapping> <servlet-name>dwr-invoker</servlet-name> <url-pattern>/dwr/*</url-pattern> </servlet-mapping>

124 Step #3a: Create dwr.xml file in the WEB-INF directory The dwr.xml config file defines what classes and what methods of those classes DWR can create and remote for use by client-side Javascript code Suppose I have a Java class called mypackage.chat and I want to create a matching JavaScript class called Chat > mypackage.chat Java class (server) > Chat JavaScript class (client)

125 Step #3b: Create dwr.xml file in the WEB-INF directory <!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN" " <dwr> <allow> <create creator="new" javascript="chat"> <param name="class" value="mypackage.chat"/> </create> <convert converter="bean" match="mypackage.message"/> </allow> </dwr>

126 Step #4a: Write JavaScript client code in which you invoke methods of a Java class <!-- You have to include these two JavaScript files from DWR --> <script type='text/javascript' src='dwr/engine.js'></script> <script type='text/javascript' src='dwr/util.js'></script> <!-- This JavaScript file is generated specifically for your application --> <script type='text/javascript' src='dwr/interface/chat.js'></script>

127 Step #4b: Write JavaScript client code in which you invoke methods of a Java class <script type='text/javascript'> function sendmessage(){ var text = DWRUtil.getValue("text"); DWRUtil.setValue("text", ""); } // Invoke addmessage(text) method of the Chat class on // the server. The gotmessages is a callback function. Chat.addMessage(gotMessages, text); function checkmessages(){ Chat.getMessages(gotMessages); }... </script>

128 Step #5: Build, Deploy, & Test You can see the test page of your application >

129 Step #5: Build, Deploy, and Test You can actually test the interaction with the server

130 Step #6: Run the Application

131 Pro's And Con's Pro's > Allows you to expose existing backend business logic to AJAX client with minimum work > Allows you to use familiar RMI like syntax in the client side JavaScript code Con's > Hackers can see what backend methods are available > Custom converter (mashaller and unmarshaller) needs to be created for custom Java objects When to use > When you want to expose existing backend business logic to AJAX client using underlying framework

132 Summary & Resources So... What Should I Use?

133 Summary AJAX helps make applications more interactive J2EE technology is a great platform for AJAX applications AJAX does not come for free Start small and don t overdo it Choose the right Toolkits and Frameworks for your application

134 So What Should I Use? Assuming You are using Java EE... On the UI side > Use AJAX-enabled JavaServer Faces components whenever possible using an Faces-enabled IDE such as Sun Java Studio Creator 2 > If you are not ready to commit yourself to Faces component solutions yet, use jmaki > If you want to have total control on the client side JavaScript coding, use Dojo toolkit > If you already have Swing apps that you want to expose as AJAX-fied Web apps or if you do not want to deal with JavaScript coding, use GWT

135 So What Should I Use? Assuming You are using Java EE... On the business logic side > If you already have Java EE business logic that you want to be exposed as RMI calls on the client with AJAX behavior, use DWR > If you are already using a particular Web application framework for building majority of your web application and the framework has AJAX extension, use it

136 For More Information The BluePrints Solutions catalog on AJAX: > AJAX Q & A > Asynchronous JavaScript Technology and XML (AJAX) With Java 2 Platform, Enterprise Edition > x.html AJAX Frameworks > AJAX Library and Frameworks Comparison > AJAX Developer Resource Center > JavaScript Developer Site > java.sun.com/javascript

137 Cross Browser Resources Cross Browser Discussion > > Cross Browser quirk > JavaScript libraries such as Dojo that makes these differences less painful >

138 Developer Training Training Support your career and Web 2.0 and AJAX your organization's goals Java and web services Solaris app s l a go r development u o y d n a t s r Middleware s Unde p a g l l i development with Sun k s r u yo Java Enterprise System s s e s As Building apps using Sun s l l i k s r u o y Studio 11, NetBeans, d l i u B and Sun Java Studio d e ifi t r Creator e C t e G Certification Industry recognized certifications in Java 1 M developers trained 300 k Java certifications granted

139 Sun Tech Days Java University Get Prepared for Web Sun's Java University -- comprehensive, deep-dive training on Java Technology, at Sun Tech Days, September 8th. > Two Major 1-day Sessions are Offered: > Java EE Architecture and Design w/java EE Patterns (taught by a Sun Master Instructor) leads to Certification > Introduction to AJAX (taught by Craig McClanahan and Stacy Thurston) Sun Learning Connection (SLC) Online elearning Portal Come to the Sun Booth for a DEMO! > 12-Month Subscription to Sun Java elibrary or Sun Solaris 10 elibrary

140 Sun Offers Comprehensive Support for Developers Sun Developer Forums Community & Sun. Incident support for Java, Developer Tools and Solaris > For as little as $99 get answers to your programming questions > Solaris incident support is free till October 31st. Sun Software Services Plans for Developer Tools > Unlimited incidents, bugs and escalations, telephone support > 5x12 or 7x24 worldwide Sun Developer Service Plans for Java and Developer Tools > Get how-to incident help, Unlimited bugs/escalation, telephone support and Sun Training credits > 5x12 or 7x24 worldwide Java MultiPlatform 7x24 Enterprise Java Support for Linux and Windows > Get your run-time Java issues addressed in the release you want to use > Comprehensive run time support for your Java deployment environment > Make $$ by providing front-line Java support to your customers

141 In-depth Session: Developing Web 2.0 Application Using AJAX and Related Frameworks