Building an Ajax portlet for WebSphere Portal

38 Pages·2011·2.04 MB·English

Building an Ajax portlet for WebSphere Portal
Skill Level: Intermediate
Karl Bishop ([email protected])
Senior Software Engineer
IBM
Doug Phillips ([email protected])
Advisory Software Engineer
IBM
16 Aug 2006
In our previous article, Using Ajax with WebSphere Portal, we discussed some issues
and design concerns when using Ajax in a portal application. In this tutorial, we will put
our newfound knowledge to use and create an Ajax portlet application. To make things
interesting, we decided to build a portlet that makes heavy use of Ajax and DHTML.
This provides you a glimpse into what's possible with this technology, and to also give
you a useful tool to browse your databases. While most of the application is already
written, it is up to you to fill in the blanks to get things running.
Section 1. Before you start
In this tutorial, you will write code for Ajax specific calls, review code that
manipulates the DHTML of the page, and follow through the process of a complete
round trip Ajax call from the browser to the server. The entire application is several
hundred lines long, but we'll only ask you to code the important components while
the rest will be provided. The steps are:
• Write browser independent code for creating XMLHttpRequest (XHR) and
processing XML document objects.
• Send Ajax requests to the server and manipulate the returned results.
• Retrieve and manipulate the servlet context from the portlet configuration
BuildinganAjaxportletforWebSpherePortal
©CopyrightIBMCorporation1994,2008.Allrightsreserved. Page1of38
developerWorks® ibm.com/developerWorks
for dynamically accessing the Ajax servlet included in the portlet .war file.
• Enable the JavaScript events to process the actions and display or
update data on the JSP page.
• Deploy the portlet application onto WebSphere® Portal and see the
results.
We will also review the code that manipulates the data for this particular application,
including how to:
• Enable and disable form elements during asynchronous Ajax calls.
• Use DHML to update select boxes after new data is retrieved from the
Ajax call.
• Dynamically update HTML <div> area tags using innerHTML to replace
the portions of the Web page.
Section 2. Setting up
This tutorial assumes that you will be using the Rational® Application Developer
(RAD), or one of its kin, but you are free to use whatever you like to edit and deploy
the portal application. Nothing in this exercise is tool specific. You will also need to
have WebSphere Portal v5.x or higher installed, and an available database, which
we assume to be DB2® of course.
For all of these pieces to come together, you will need to import the application code
into a RAD portal project and create at least one data source in WebSphere. The
following steps will help you get started.
See Appendix A for the process of setting up a sample database and data source for
use in this tutorial. You can use any available data source once everything is
configured.
Section 3. Configuring project and import files
BuildinganAjaxportletforWebSpherePortal
Page2of38 ©CopyrightIBMCorporation1994,2008.Allrightsreserved.
ibm.com/developerWorks developerWorks®
1. Create a JSR 168 Portlet project in RAD.
1. Start RAD.
2. Select File > New > Other, then locate and select Portal > Portlet
Project (JSR 168). Note: Check Show All Wizards if you do not
see the Portal section.
Figure 1. JSR 168 portlet project
2. Click Next.
3. Enter the following information as shown below.
• Name: Ajax_and_Portal
• Project location: Accept the default.
• WebSphere Portal version: Select your version of WebSphere Portal.
BuildinganAjaxportletforWebSpherePortal
©CopyrightIBMCorporation1994,2008.Allrightsreserved. Page3of38
developerWorks® ibm.com/developerWorks
• Create a portlet: Deselect this checkbox.
Figure 2. New portlet project definition
4. Click Finished.
5. Import the provided source files into the new project.
1. Right-click on the top level of the "Ajax_and_Portal" project.
2. Select Import... > Import ...
3. Select Zip file.
4. Click Next.
Figure 3. Import from the zip file
BuildinganAjaxportletforWebSpherePortal
Page4of38 ©CopyrightIBMCorporation1994,2008.Allrightsreserved.
ibm.com/developerWorks developerWorks®
6. On the zip file import page, do the following:
• From Zip file: Locate and select the zip file you downloaded with this
tutorial.
• Into folder: Ensure that the Ajax_and_Portal project is selected.
• Overwrite existing resources without warning: Select this checkbox.
Figure 4. Select zip file to import screen
BuildinganAjaxportletforWebSpherePortal
©CopyrightIBMCorporation1994,2008.Allrightsreserved. Page5of38
developerWorks® ibm.com/developerWorks
7. Click Finished.
8. Your project structure should now look like Figure 5.
Figure 5. Imported project structure
BuildinganAjaxportletforWebSpherePortal
Page6of38 ©CopyrightIBMCorporation1994,2008.Allrightsreserved.
ibm.com/developerWorks developerWorks®
Section 4. Initial deployment and test
The first thing to do is deploy the application in its current -- albeit lifeless -- state.
BuildinganAjaxportletforWebSpherePortal
©CopyrightIBMCorporation1994,2008.Allrightsreserved. Page7of38
developerWorks® ibm.com/developerWorks
Refer to Appendix B for instructions on deploying the portlet application into portal
using RAD. Once you have the portlet deployed and placed on a page, we want to
look at it.
Figure 6. Application web page
Try to lookup a data source. Nothing happens! Not very exciting is it? By the end of
this exercise, all of these items on the page will take action or display new data
based on the Ajax calls made to the server, and the JavaScript code used to update
the HTML tags.
Note that the Context Path is at the top of the portlet. You need this in just a minute
to call the servlet directly from your browser. In our sample above, the context path
is: /wps/PA_dsllabu.
It really is a portlet, no kidding
Yes, it's a portlet. And it completely confirms to the Java® Portlet (JSR168)
specifications. However, Ajax itself is a separate technology that this exercise will
demonstrate, and it happens to be using a portlet for displaying the data. This is
important because we are also including a servlet that retrieves data for the
application inside the portlet war file. WebSphere Portal is going to deploy this
portlet, along with the servlet, as a Web application into IBM WebSphere Portal. This
gives the portlet the ability to dynamically access the servlet that is included with its
application. It does not have to be deployed separately in another J2EE application.
Let's first take a look at the portlet code.
1. Locate the Project Explorer on the left of the page. Expand the
Ajax_and_Portal project and keep expanding down to the
BuildinganAjaxportletforWebSpherePortal
Page8of38 ©CopyrightIBMCorporation1994,2008.Allrightsreserved.
ibm.com/developerWorks developerWorks®
DBExplorerPortlet.java file. Use Figure 7 to determine the location and
tree structure of the file.
Figure 7. DBExplorerPortlet.java location
2. Double click the file to open it in the editor view. Browse through the code
and notice it does nothing but display the JSP page for the portlet. The
doView() method is displayed below as an example of what you should
see.
public void doView(RenderRequest request, RenderResponse response)
throws PortletException, IOException {
// ------------------------------------------------------------
// Note: The portlet is just diplaying a JSP for the AJAX Lab.
// It does absolutely nothing else.
// ------------------------------------------------------------
// Set the MIME type for the render response
response.setContentType(request.getResponseContentType());
// Invoke the JSP to render
PortletRequestDispatcher rd =
BuildinganAjaxportletforWebSpherePortal
©CopyrightIBMCorporation1994,2008.Allrightsreserved. Page9of38
developerWorks® ibm.com/developerWorks
getPortletContext().getRequestDispatcher(JSP_FOLDER + VIEW_JSP);
rd.include(request,response);
}
Ajax technology uses JavaScript and DHTML to use its functionality. This particular
example does not require any pre-determined data for the JSP; therefore, the portlet
itself has nothing to do other than display the JSP.
Section 5. It's a normal servlet, I tell ya
Creating the servlet is a no-brainer. You've done it hundreds of times. Implement
your service methods (doGet/doPost) and whatever business logic you require.
Under normal circumstances, you will want to return an XML document to the caller,
but you can return any textual information to the client. Let's look at the provided
servlet code to understand where the data is coming from for the Ajax calls.
1. Under the Project Explorer, expand the tree down to the code for the
servlet. The file is called com.ibm.examples.Ajax.servlets >
DBExplorerServlet.java. Double click this Java file to open it in the
editor.
2. Notice the doPost() method of the servlet and what it accomplishes. This
particular code is not Ajax specific, but it is one way of getting a servlet to
respond to the request by using parameters sent by the XMLHttpRequest
object explained later in the exercise.
3. Feel free to browse the code if you want to have a better understanding of
what it does.
Each set of parameters requested to the servlet causes it to respond with a unique
XML result. The browser-side JavaScript then parses the response data and renders
it as needed. For example, if the parameter "LIST=SCHEMAS" is sent to the servlet,
it returns the list of database schemas in an XML format. Let's try it, just to prove that
there is nothing special happening with the servlet code.
1. Enter the following URL into your browser window. An example is shown
in Figure 8.
BuildinganAjaxportletforWebSpherePortal
Page10of38 ©CopyrightIBMCorporation1994,2008.Allrightsreserved.