Skip to main content

By clicking Submit, you agree to the developerWorks terms of use.

The first time you sign into developerWorks, a profile is created for you. Select information in your developerWorks profile is displayed to the public, but you may edit the information at any time. Your first name, last name (unless you choose to hide them), and display name will accompany the content that you post.

All information submitted is secure.

  • Close [x]

The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerworks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

By clicking Submit, you agree to the developerWorks terms of use.

All information submitted is secure.

  • Close [x]

Building an Ajax portlet for WebSphere Portal

Karl Bishop (kfbishop@us.ibm.com), Senior Software Engineer, IBM
Photo: Karl Bishop
Karl Bishop is a Senior Software Engineer on the IBM Web Enablement and Support team. He works from the wilds of North Carolina. Karl works on various internal and external portal-based applications, as well as being a strong proponent of Linux based solutions.
(An IBM developerWorks Contributing Author)
Doug Phillips (dougep@us.ibm.com), Advisory Software Engineer, IBM
Doug Phillips is an Advisory Software Engineer for IBM's elite group of skilled professionals known as IBM's Web Enablement and Support team. He has worked in many organizations within IBM and currently designs and develops both internal and external WebSphere Portal applications using IBM middleware and Linux. Doug is WebSphere and DB2 certified.

Summary:  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.

Date:  16 Aug 2006
Level:  Intermediate PDF:  A4 and Letter (2104 KB | 37 pages)Get Adobe® Reader®

Activity:  39510 views
Comments:  

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

1 of 18 | Next

Comments



Help: Update or add to My dW interests

What's this?

This little timesaver lets you update your My developerWorks profile with just one click! The general subject of this content (AIX and UNIX, Information Management, Lotus, Rational, Tivoli, WebSphere, Java, Linux, Open source, SOA and Web services, Web development, or XML) will be added to the interests section of your profile, if it's not there already. You only need to be logged in to My developerWorks.

And what's the point of adding your interests to your profile? That's how you find other users with the same interests as yours, and see what they're reading and contributing to the community. Your interests also help us recommend relevant developerWorks content to you.

View your My developerWorks profile

Return from help

Help: Remove from My dW interests

What's this?

Removing this interest does not alter your profile, but rather removes this piece of content from a list of all content for which you've indicated interest. In a future enhancement to My developerWorks, you'll be able to see a record of that content.

View your My developerWorks profile

Return from help

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=WebSphere
ArticleID=153838
TutorialTitle=Building an Ajax portlet for WebSphere Portal
publish-date=08162006
author1-email=kfbishop@us.ibm.com
author1-email-cc=
author2-email=dougep@us.ibm.com
author2-email-cc=

Tags

Help
Use the search field to find all types of content in My developerWorks with that tag.

Use the slider bar to see more or fewer tags.

Popular tags shows the top tags for this particular content zone (for example, Java technology, Linux, WebSphere).

My tags shows your tags for this particular content zone (for example, Java technology, Linux, WebSphere).

Use the search field to find all types of content in My developerWorks with that tag. Popular tags shows the top tags for this particular content zone (for example, Java technology, Linux, WebSphere). My tags shows your tags for this particular content zone (for example, Java technology, Linux, WebSphere).

Try IBM PureSystems. No charge.