Ajax DWR dojo In WebSphere Portal

Size: px

Start display at page:

Download "Ajax DWR dojo In WebSphere Portal"

Ralf Bradley
6 years ago
Views:

1 Ajax DWR dojo In WebSphere Portal 1 / 24

2 Review History Version Date Author Change Description 1.0a 10-Feb-09 Imtiaz B Syed New Document Feb-09 Chaitanya P Paidipalli Review 2 / 24

3 Introduction This document explains the process of integrating AJAX, DWR and dojo with Portlets in order to provide rich user interface. This document covers the basics of the tools mentioned above. For more details regarding the above tools please study more about web2.0. What ever this document covers is only to provide startup to the portlet developers who want to work with AJAX calls where they can come to an understanding in developing portlets which supports rich user interface. Prerequisite: Assuming that who ever doing this exercise is aware of basic Portlet Project development, deployment and testing. Software/tools Requirements 1. Rational Application Developer IBM WebSphere Portal Server dojo tool kit dwr.jar (1.1v) Sample Scenario Let s create a simple empty portlet and add a JSP where it tries to make AJAX calls. Once we finish working with AJAX, we will try to add DWR and later we try to add dojo to the same portlet. AJAX in Portlets Making a request with Ajax: There are a number of steps to make the request after the XMLHttpRequest object is created: 1. Get the data from the Web form. 2. Build the connection URL. 3. Create a function for the server to run when done. 4. Send request. Handling the response: 1. The server s response must also be handled. 2. Handle only the response when communication is complete. a. xmlhttp.readystate property equals Server stuffs the response in the xmlhttp.responsetext/xmlhttp.responsexml property. 3 / 24

4 Issues in implementing Ajax in Portal: 1. Because of the unique way that Portal aggregates page content, there are some best practices to avoid complications: Avoid global variables in JavaScript in a portal application. Create namespace for global JavaScript attributes to guarantee unique variable names. Make sure that ID attributes in HTML are unique. Ajax activities must be restartable with no dependencies on state. 2. Servlets and portlets can share session data. To access portlet variables from the servlet, use a namespaced name value based on the portlet ID. This is set when the portlet is originally deployed to the portal. Do not store action URLs in the shared session. Ajax makes dealing with these Action URLs challenging. 3. Ajax does not trigger the browser activity image. Provide a visual notification to indicate activity otherwise. Implementation Open your RAD7.0 if it is not opened and follow the below steps to implement AJAX in portlets. 4 / 24

5 1. Create a new PortletProject from menu File New Project which opens a New Project wizard as shown below 2. Select PortletProject from the wizard and Click Next. In next screen of the wizard provide the Project name as AjaxDWRdojoDemo and select portlet type as empty as 5 / 24

6 shown below and click Next. 3. Provide the package com.ibm.ajaxdemo and leave the remaining unchanged as shown below in next screen and click Finish. If RAD is not in web perspective then it 6 / 24

will ask for confirmation to change the perspective. Click Yes button to do so. 4. Navigate to the package com.ibm.ajaxdemo and open the portlet source file named as AjaxDWRdojoDemoPortlet.

7 will ask for confirmation to change the perspective. Click Yes button to do so. 4. Navigate to the package com.ibm.ajaxdemo and open the portlet source file named as AjaxDWRdojoDemoPortlet.java and add the code given below: Let s not include action phase in this example. So, simply invoke a JSP resource which gets displayed in VIEW mode. a. PortletRequestDispatcher prd = getportletcontext().getrequestdispatcher("/demoview.jsp"); prd.include(request,response); b. Save the file. 5. Right click on WebContent folder of the project and select options New WebPage. Provide the resource name as demoview.jsp in the wizard as shown below and click Finish. 7 / 24

8 6. Open demoview.jsp if its not open and replace the default code with the following code given below: language="java" contenttype="text/html; charset=iso " pageencoding="iso " session="false"%> uri=" prefix="portlet"%> <portlet:defineobjects /> <head> <title>simple XMLHttpRequest</title> <script type="text/javascript"> var xmlhttpxml; var xmlhttptext; //var xmldoc; var encodenamespace; var url; function startrequest() createxmlhttprequest(); xmlhttpxml.onreadystatechange = handlestatechangexml; xmlhttptext.onreadystatechange = handlestatechangetext; var sendtext = document.getelementbyid("user").value; alert("got Text : " + sendtext); if(sendtext!= "") 8 / 24

9 encodenamespace = "<%=renderresponse.encodeurl(renderrequest.getcontextpath()+"/servlet/res ponseservlet")%>"; url=encodenamespace+"?user="+sendtext; xmlhttptext.open("get",url,true); xmlhttptext.send(null); else alert("in else"); encodenamespace = "<%=renderresponse.encodeurl(renderrequest.getcontextpath()+"/servlet/res ponseservlet")%>"; xmlhttpxml.open("get", encodenamespace, true); xmlhttpxml.send(null); function createxmlhttprequest() if(window.activexobject) alert("creating XMLObject for IE"); xmlhttpxml = new ActiveXObject("Microsoft.XMLHTTP"); xmlhttptext = new ActiveXObject("Microsoft.XMLHTTP"); else if(window.xmlhttprequest) alert("creating XMLObject for Mozilla"); xmlhttpxml = new XMLHttpRequest(); xmlhttptext = new XMLHttpRequest(); function handlestatechangetext() alert("handle Text : " + xmlhttptext.readystate); if(xmlhttptext.readystate == 4) if(xmlhttptext.status == 200) document.getelementbyid("greetingname").innerhtml = xmlhttptext.responsetext; function handlestatechangexml() alert("this is state : " + xmlhttpxml.readystate); if(xmlhttpxml.readystate == 4) 9 / 24

10 if(xmlhttpxml.status == 200) alert("the Server Replied With : " + xmlhttpxml.responsexml); processxml(xmlhttpxml.responsexml); function processxml(xmldoc) var companies = xmldoc.getelementsbytagname("company"); var employees = companies[0].getelementsbytagname("employee"); var xmldata = "<table width='300px' border='1'><tr><td>"; for(var i=0;i<employees.length;i++) xmldata += employees[i].firstchild.nodevalue + "<br>"; //firstchild.nodevalue or firstchild.data xmldata += "</td><td>"; var turnover = companies[0].getelementsbytagname("turnover"); var years = turnover[0].getelementsbytagname("year"); for(var i=0;i<years.length;i++) xmldata += years[i].firstchild.nodevalue + "<br>"; xmldata += "</td></tr></table>"; document.getelementbyid("greeting").innerhtml = xmldata; </script> </head> <body> <h3>ajax Implementation</h3><br><hr> <input type="text" id="user" name="user"> <input type="button" value="assynchronous Response" onclick="javascript:startrequest();"/><br/> <div id="greetingname"></div><br/> <div id="greeting"></div><br/><hr/><br/> </body> The above code is implemented to demonstrate both the type of content handling i.e., Text as well as XML format data using AJAX s response objects. Need to create two XMLHTTP objects in order to demonstrate the response handling for text as well as XML response objects. Here we are placing a text box and a button. Request will be issued based on the text field input. If field is empty then request will be 10 / 24

11 sent with out parameter otherwise with parameter. Response from servlet depends up on the parameter we send. a. Code snippet provided below shows the scenario to create HttpRequest objects based on the type of browser which client is using (say IE or Mozilla). if(window.activexobject) alert("creating XMLObject for IE"); xmlhttpxml = new ActiveXObject("Microsoft.XMLHTTP"); xmlhttptext = new ActiveXObject("Microsoft.XMLHTTP"); else if(window.xmlhttprequest) alert("creating XMLObject for Mozilla"); xmlhttpxml = new XMLHttpRequest(); xmlhttptext = new XMLHttpRequest(); b. Once the request object got created, one need to specify that which method will act as handler to read the server response status. Below provided code snippet relates to that. xmlhttpxml.onreadystatechange = handlestatechangexml; xmlhttptext.onreadystatechange = handlestatechangetext; c. Define the handlers with appropriate JS functions. Ex: function handlestatechangetext() alert("handle Text"); if(xmlhttptext.readystate == 4) if(xmlhttptext.status == 200) document.getelementbyid("greetingname").innerhtml = xmlhttptext.responsetext; d. Below JS snippet shows how to send AJAX calls/requests to the server encodenamespace = "<%=renderresponse.encodeurl(renderrequest.getcontextpath()+"/servlet/r esponseservlet")%>"; url=encodenamespace+"?user="+sendtext; xmlhttp.open("get",url,true); xmlhttptext.send(null); e. Place some alert statements to understand execution in a better way as we did in above sample code. 11 / 24

From the palette window type for serv and you will get servlets option and click Next button where

12 7. Right click on project s Java Resources and select New Package. Name the package as com.ibm.servlets as shown below 8. Right click on servlets package and opt for option New Other. From the palette window type for serv and you will get servlets option and click Next button where you will get a wizard to create servlet as shown below: name the class file as AjaxResponse and click Next button 12 / 24

13 9. Clicking on Next button gives the screen as shown below: Edit the URL Mapping to /servlet/responseservlet and click Next. 13 / 24

10. Change the options in next screen of the wizard as shown below and click finish. 11. On clicking Finish RAD will make an entry in web.xml and create AjaxResponse.java as well.

14 10. Change the options in next screen of the wizard as shown below and click finish. 11. On clicking Finish RAD will make an entry in web.xml and create AjaxResponse.java as well. <servlet> <description></description> <display-name>ajaxresponse</display-name> <servlet-name>ajaxresponse</servlet-name> <servlet-class>com.ibm.servlets.ajaxresponse</servlet-class> </servlet> <servlet-mapping> <servlet-name>ajaxresponse</servlet-name> <url-pattern>/servlet/responseservlet</url-pattern> </servlet-mapping> 12. Open AjaxResponse.java if it is not and add the below code to doget() method and save the changes. StringBuffer responsecontent = new StringBuffer(); PrintWriter out = response.getwriter(); 14 / 24

15 String user = request.getparameter("user"); if(user!= null) response.setcontenttype("text/html"); out.println("<h4>" + request.getparameter("user") + " entered AJAX world.</h4>"); else response.setcontenttype("text/xml"); responsecontent.append("<?xml version=\"1.0\"?>"); responsecontent.append("<company>" + "<employee id=\"001\" sex=\"m\" age=\"20\">premshree Pillai</employee>" + "<employee id=\"002\" sex=\"m\" age=\"24\">kumar Singh</employee>" + "<employee id=\"003\" sex=\"m\" age=\"21\">ranjit Kapoor</employee>" + "<turnover>" + "<year id=\"2000\">100,000</year>" + "<year id=\"2001\">140,000</year>" + "<year id=\"2002\">200,000</year>" + "</turnover>" + "</company>"); out.println(responsecontent.tostring()); 13. Now the portlet is ready for deployment and test. 15 / 24

DWR in Portlets: What is DWR? 1. Is a Java and JavaScript open source library which allows you to write Ajax web applications a. Hides low-level XMLHttpRequest handling 2.

16 DWR in Portlets: What is DWR? 1. Is a Java and JavaScript open source library which allows you to write Ajax web applications a. Hides low-level XMLHttpRequest handling 2. Specifically designed with Java technology in mind b. Easy AJAX for Java 3. Allows JavaScript code in a browser to use Java methods running on a web server just as if they were in the browser c. Why it is called Direct remoting Why DWR? 1. Without DWR, you would have to create many Web application endpoints (servlets) that need to be address'able via URI's 2. What happens if you have several methods in a class on the server that you want to invoke from the browser? a. Each of these methods need to be addressable via URI whether you are using XMLHttpRequest directory or clientside only toolkit such as Dojo or Prototype b. You would have to map parameters and return values to HTML input form parameters and responses yourself 3. DWR comes with some JavaScript utility functions How DWR Works: 16 / 24

DWR Consists of Two Main Parts: 1. A DWR-runtime-provided Java Servlet running on the server that processes incoming DWR requests and sends responses back to the browser a. uk.ltd.getahead.dwr.

17 DWR Consists of Two Main Parts: 1. A DWR-runtime-provided Java Servlet running on the server that processes incoming DWR requests and sends responses back to the browser a. uk.ltd.getahead.dwr.dwrservlet b. This servlet delegates the call to the backend class you specify in the dwr.xml configuration file 2. JavaScript running in the browser that sends requests and can dynamically update the webpage a. DWR handles XMLHttpRequest handling How Does DWR Work? 1. DWR dynamically generates a matching client-side Javascript class from a backend Java class a. Allows you then to write JavaScript code that looks like conventional RPC/RMI like code, which is much more intuitive than writing raw JavaScript code 2. The generated JavaScript class handles remoting details between the browser and the backend server a. Handles asynchronous communication via XMLHttpRequest - Invokes the callback function in the JavaScript b. You provide the callback function as additional parameter c. DWR converts all the parameters and return values between client side Javascript and backend Java Implementation of DWR in Portlets: Note: Be careful while selecting the version of dwr.jar as there will be some version incompatibility issues may arise. In this document we will use the same portlet project used for AJAX implementation. One can create new project or can create new JSP resource in the existing project. Implementing DWR is completely independent of what we did for AJAX. In order to implement DWR in JSR portlets follow the steps given below: 1. Let s create a POJO which will act as the resource from where response should come back to browser for internal AJAX calls through DWR. 2. Right click on Java Resources folder and select option New Package and name the package as com.ibm.dwr and click Finish as shown below 17 / 24

3. Right click on the package com.ibm.dwr and select option New Class and name the class as DWRDemo then click Finish button as shown below. This will create a POJO file for us. 4. Open DWRDemo.

18 3. Right click on the package com.ibm.dwr and select option New Class and name the class as DWRDemo then click Finish button as shown below. This will create a POJO file for us. 4. Open DWRDemo.java file if it is not open. Add the following method to the class and save the modifications public String getstring() return "DWR implemented, String returned from server."; 5. Open demoview.jsp file and place the following code in top of </body> tag. <h3>dwr Implementation</h3><br> <br> <input type="button" value="getdata" onclick="callmethod()"> <br> <div id="dwrdemo"></div> <hr> 18 / 24

19 6. Just to top of </head> tag add the following snippet to demoview.jsp file <script type="text/javascript"> function callmethod() DWRDemo.getString(getData); function getdata(data) alert(data); document.getelementbyid("dwrdemo").innerhtml = data; </script> 7. Copy Paste the dwr.jar (v1.1) to lib folder of WEB-INF directory. 8. Right click on WEB-INF directory and select option New File and name the file as dwr.xml then click Finish button as shown below 9. Open dwr.xml file and Paste the following content in it 19 / 24

20 <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN" " <dwr> <allow> <create creator="new" javascript="dwrdemo" scope="session"> <param name="class" value="com.ibm.dwr.dwrdemo"/> </create> </allow> </dwr> This configuration file will be read by the DWRServlet for dynamic generation of java scripts at server side. Name of the generated JS will be taken from the attribute javascript. Save the modifications. 10. Open web.xml file and add the following entries for DWRServlet <servlet> <servlet-name>dwr-invoker</servlet-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> 11. Make the following entries in demoview.jsp file with in <head> tag section and save the modifications. <script type='text/javascript' src='<%=renderresponse.encodeurl(renderrequest.getcontextpath() + "/dwr/engine.js") %>'></script> <script type='text/javascript' src='<%=renderresponse.encodeurl(renderrequest.getcontextpath() + "/dwr/interface/dwrdemo.js") %>'></script> <script type='text/javascript' src='<%=renderresponse.encodeurl(renderrequest.getcontextpath() + "/dwr/util.js") %>'></script> 12. Deploy the application to the portal server and test it. 20 / 24

21 dojo in Portlets: Features of Dojo Toolkit: 1. Powerful AJAX-based I/O abstraction (remoting) 2. Graceful degradation 3. Backward, forward, book-marking support 4. Aspect-oriented event system 5. Markup-based UI construction through widgets 6. Widget prototyping 7. Animation 8. Lots of useful libraries For more information, visit api.dojotoolkit.org. Implementation of dojo: As dojo provides lots of features with its huge library, we will see an accordion tab feature in the above developed portlet. Note: The below specified sample can be done on a new portlet project or this can be continued with the above Sample. Let s move with the above created portlet project. 1. Navigate to the WebContent directory of the AjaxDWRdojoDemo project. Extract/copy-paste the dojo root folder of the dojo_0.9 tool kit to WebContent directory. 2. After copying dojo toolkit, RAD may highlight some errors in dojo directory. Open project properties (Click on project and press Alt+Enter keys) and select the following option as shown below: 21 / 24

Validation (Check)Override Validation Preferences Disable All Ok. 3. Open demoview.jsp file and place the following code with in <head> tag some where appropriately.

22 Validation (Check)Override Validation Preferences Disable All Ok. 3. Open demoview.jsp file and place the following code with in <head> tag some where appropriately. Below code is to include the required resources from dojo kit. One need to use the dojo.require() method to include the components similar to importing packages in java. In this example we are importing AccordianContainer. 22 / 24

23 <style '<%=renderresponse.encodeurl(renderrequest.getcontextpath() + '<%=renderresponse.encodeurl(renderrequest.getcontextpath() + "/dojo/dojo/resources/dojo.css") %>'; </style> <script type="text/javascript" src='<%=renderresponse.encodeurl(renderrequest.getcontextpath() + "/dojo/dojo/dojo.js")%>' djconfig="parseonload: true"></script> <script type="text/javascript"> dojo.require("dojo.parser"); dojo.require("dijit.layout.accordioncontainer"); </script> 4. Paste the following code in demoview.jsp with in <body> tag <h3>dojo Implementation (AccordianContainer)</h3> <br> <div dojotype="dijit.layout.accordioncontainer" duration="80" style="margin-right: 10px; width: 500px; height: 200px;"> <div dojotype="dijit.layout.accordionpane" selected="true" title="benefits of Dojo"> <p >Benefits of Dojo: Associative arrays, Loosely typed variables, Regular expressions, Objects and classes, Highly evolved date, math, and string libraries, W3C DOM support in the Dojo.</p > </div> <div dojotype="dijit.layout.accordionpane" title="introduction to Dojo"> <p>this tips is light towards people with some JavaScript knowledge, priestly used another JavaScript (Ajax) framework before, now have a real need to use some of the features found in dojo.</p> </div> <div dojotype="dijit.layout.accordionpane" title="website for Dojo Tutorial"> <p>if you want to learn dojo. Please go to the url mentioned in the doc.</p> </div> </div> <br><hr> Dojo uses a special attribute to identify its own components to render and that is dojotype as we are placing three accordion panes with in accordion container. 23 / 24

24 5. Dojo supports different themes in order to give preferable look and feel with different color schemes. To apply dojo theme, add an attribute named as class with in <body> tag as given: <body class="tundra">. 6. Save the modification and deploy the application to test it. 24 / 24

Enriching Portal user experience using Dojo toolkit support in IBM Rational Application Developer v8 for IBM WebSphere Portal

Enriching Portal user experience using Dojo toolkit support in IBM Rational Application Developer v8 for IBM WebSphere Portal Summary: Learn how to create Portlet applications for Websphere Portal for