+ All Categories
Home > Documents > Ajax – DWR – dojo In WebSphere Portal - IBM in Portlets... · Ajax – DWR – dojo In...

Ajax – DWR – dojo In WebSphere Portal - IBM in Portlets... · Ajax – DWR – dojo In...

Date post: 13-Mar-2018
Category:
Upload: duongque
View: 237 times
Download: 0 times
Share this document with a friend
24
Imtiaz B Syed 1 / 24 Ajax – DWR – dojo In WebSphere Portal
Transcript
Page 1: Ajax – DWR – dojo In WebSphere Portal - IBM in Portlets... · Ajax – DWR – dojo In WebSphere Portal. Imtiaz B Syed ... Let’s create a simple empty portlet and add a JSP

Imtiaz B Syed

1 / 24

Ajax – DWR – dojo

In

WebSphere Portal

Page 2: Ajax – DWR – dojo In WebSphere Portal - IBM in Portlets... · Ajax – DWR – dojo In WebSphere Portal. Imtiaz B Syed ... Let’s create a simple empty portlet and add a JSP

Imtiaz B Syed

2 / 24

Review History

Version Date Author Change Description

1.0a 10-Feb-09 Imtiaz B Syed New Document

1.0 10-Feb-09 Chaitanya P Paidipalli Review

Page 3: Ajax – DWR – dojo In WebSphere Portal - IBM in Portlets... · Ajax – DWR – dojo In WebSphere Portal. Imtiaz B Syed ... Let’s create a simple empty portlet and add a JSP

Imtiaz B Syed

3 / 24

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 7.0 2. IBM WebSphere Portal Server 6.0 3. dojo tool kit 0.9 4. 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 4. 3. Server stuffs the response in the xmlHttp.responseText/xmlHttp.responseXML property.

Page 4: Ajax – DWR – dojo In WebSphere Portal - IBM in Portlets... · Ajax – DWR – dojo In WebSphere Portal. Imtiaz B Syed ... Let’s create a simple empty portlet and add a JSP

Imtiaz B Syed

4 / 24

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.

Page 5: Ajax – DWR – dojo In WebSphere Portal - IBM in Portlets... · Ajax – DWR – dojo In WebSphere Portal. Imtiaz B Syed ... Let’s create a simple empty portlet and add a JSP

Imtiaz B Syed

5 / 24

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

Page 6: Ajax – DWR – dojo In WebSphere Portal - IBM in Portlets... · Ajax – DWR – dojo In WebSphere Portal. Imtiaz B Syed ... Let’s create a simple empty portlet and add a JSP

Imtiaz B Syed

6 / 24

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

Page 7: Ajax – DWR – dojo In WebSphere Portal - IBM in Portlets... · Ajax – DWR – dojo In WebSphere Portal. Imtiaz B Syed ... Let’s create a simple empty portlet and add a JSP

Imtiaz B Syed

7 / 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.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.

Page 8: Ajax – DWR – dojo In WebSphere Portal - IBM in Portlets... · Ajax – DWR – dojo In WebSphere Portal. Imtiaz B Syed ... Let’s create a simple empty portlet and add a JSP

Imtiaz B Syed

8 / 24

6. Open ‘demoview.jsp’ if its not open and replace the default code with the following code given below:

<%@page language="java" contentType="text/html; charset=ISO-8859-1"

pageEncoding="ISO-8859-1" session="false"%>

<%@taglib uri="http://java.sun.com/portlet" 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 != "")

{

encodeNameSpace =

Page 9: Ajax – DWR – dojo In WebSphere Portal - IBM in Portlets... · Ajax – DWR – dojo In WebSphere Portal. Imtiaz B Syed ... Let’s create a simple empty portlet and add a JSP

Imtiaz B Syed

9 / 24

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)

{

Page 10: Ajax – DWR – dojo In WebSphere Portal - IBM in Portlets... · Ajax – DWR – dojo In WebSphere Portal. Imtiaz B Syed ... Let’s create a simple empty portlet and add a JSP

Imtiaz B Syed

10 / 24

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

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>

Page 11: Ajax – DWR – dojo In WebSphere Portal - IBM in Portlets... · Ajax – DWR – dojo In WebSphere Portal. Imtiaz B Syed ... Let’s create a simple empty portlet and add a JSP

Imtiaz B Syed

11 / 24

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.

Page 12: Ajax – DWR – dojo In WebSphere Portal - IBM in Portlets... · Ajax – DWR – dojo In WebSphere Portal. Imtiaz B Syed ... Let’s create a simple empty portlet and add a JSP

Imtiaz B Syed

12 / 24

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

Page 13: Ajax – DWR – dojo In WebSphere Portal - IBM in Portlets... · Ajax – DWR – dojo In WebSphere Portal. Imtiaz B Syed ... Let’s create a simple empty portlet and add a JSP

Imtiaz B Syed

13 / 24

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

Page 14: Ajax – DWR – dojo In WebSphere Portal - IBM in Portlets... · Ajax – DWR – dojo In WebSphere Portal. Imtiaz B Syed ... Let’s create a simple empty portlet and add a JSP

Imtiaz B Syed

14 / 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.

<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();

Page 15: Ajax – DWR – dojo In WebSphere Portal - IBM in Portlets... · Ajax – DWR – dojo In WebSphere Portal. Imtiaz B Syed ... Let’s create a simple empty portlet and add a JSP

Imtiaz B Syed

15 / 24

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.

Page 16: Ajax – DWR – dojo In WebSphere Portal - IBM in Portlets... · Ajax – DWR – dojo In WebSphere Portal. Imtiaz B Syed ... Let’s create a simple empty portlet and add a JSP

Imtiaz B Syed

16 / 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. 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:

Page 17: Ajax – DWR – dojo In WebSphere Portal - IBM in Portlets... · Ajax – DWR – dojo In WebSphere Portal. Imtiaz B Syed ... Let’s create a simple empty portlet and add a JSP

Imtiaz B Syed

17 / 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.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

Page 18: Ajax – DWR – dojo In WebSphere Portal - IBM in Portlets... · Ajax – DWR – dojo In WebSphere Portal. Imtiaz B Syed ... Let’s create a simple empty portlet and add a JSP

Imtiaz B Syed

18 / 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.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>

Page 19: Ajax – DWR – dojo In WebSphere Portal - IBM in Portlets... · Ajax – DWR – dojo In WebSphere Portal. Imtiaz B Syed ... Let’s create a simple empty portlet and add a JSP

Imtiaz B Syed

19 / 24

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

Page 20: Ajax – DWR – dojo In WebSphere Portal - IBM in Portlets... · Ajax – DWR – dojo In WebSphere Portal. Imtiaz B Syed ... Let’s create a simple empty portlet and add a JSP

Imtiaz B Syed

20 / 24

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

11. Make the following entries in demoview.jsp file with in <head> tag section and save the modifications.

12. Deploy the application to the portal server and test it.

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting

1.0//EN"

"http://www.getahead.ltd.uk/dwr/dwr10.dtd">

<dwr>

<allow>

<create creator="new" javascript="DWRDemo" scope="session">

<param name="class" value="com.ibm.dwr.DWRDemo"/>

</create>

</allow>

</dwr>

<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>

<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>

Page 21: Ajax – DWR – dojo In WebSphere Portal - IBM in Portlets... · Ajax – DWR – dojo In WebSphere Portal. Imtiaz B Syed ... Let’s create a simple empty portlet and add a JSP

Imtiaz B Syed

21 / 24

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:

Page 22: Ajax – DWR – dojo In WebSphere Portal - IBM in Portlets... · Ajax – DWR – dojo In WebSphere Portal. Imtiaz B Syed ... Let’s create a simple empty portlet and add a JSP

Imtiaz B Syed

22 / 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. 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’.

Page 23: Ajax – DWR – dojo In WebSphere Portal - IBM in Portlets... · Ajax – DWR – dojo In WebSphere Portal. Imtiaz B Syed ... Let’s create a simple empty portlet and add a JSP

Imtiaz B Syed

23 / 24

4. Paste the following code in demoview.jsp with in <body> tag

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.

<style type="text/css">

@import '<%=renderResponse.encodeURL(renderRequest.getContextPath()

+ "/dojo/dijit/themes/tundra/tundra.css")%>';

@import '<%=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>

<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>

Page 24: Ajax – DWR – dojo In WebSphere Portal - IBM in Portlets... · Ajax – DWR – dojo In WebSphere Portal. Imtiaz B Syed ... Let’s create a simple empty portlet and add a JSP

Imtiaz B Syed

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.


Recommended