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]

Select a language:

  • Close [x]
  • Close [x]

Developing portlets using drag-and-drop in WebSphere Portal V6.0

Genaro Nieto Fernandez (genaro@es.ibm.com), Senior IT Specialist, IBM
Author photo
Genaro Nieto is a Senior IT Specialist in the IBM Software Group's SMB & Channel Technical Sales organization. He helps customers from SPGIT (Spain, Portugal, Greece, Israel and Turkey) by providing them with enablement and technical support for Websphere products. His main focus areas are Websphere Application Server, Websphere Portal Server, Websphere Process Server, and Websphere Integration Developer. Before joining the Software Group, he spent six years in Services and three years in the Consulting group. Mr. Nieto holds a degree in Communications Engineering and another in Business Management. He lives in the Barcelona (Spain) area, and he likes to spend his spare time with his family, friends, or riding his mountain bike.

Summary:  IBM WebSphere Portal V6.0 introduced a new feature that lets you drag-and-drop portlets from a Portlet Palette onto pages, and to arrange the placement of the portlets on the page. You can also drag-and-drop content in a portlet or between portlets. You could, for example, create an eCommerce portlet where selected items are dragged into the cart.

Administration is easeir for both for administrators and end users because adding content to pages is easier and more intuitive than using the page layout portlets in the Administration area.

This tutorial takes you through the steps to enable drag-and-drop functionality of items between two portlets that run in the WebSphere Portal V6 environment. Programmers can use drag-and-drop capabilities to provide end users with richer environments that are easier and more intuitive to use.

Date:  11 Jul 2007
Level:  Intermediate
PDF:  A4 and Letter (124 KB | 18 pages)Get Adobe® Reader®

Activity:  8656 views
Comments:  

Before you begin

Objectives

You learn how to:

  • Create a portlet containing items (geometric shapes in various colors, in this case) which are "draggable"
  • Create a portlet that provides drop zones related to the types of items in the first portlet
  • Use the WebSphere Portal tag library to enable the drag-and-drop capabilities
  • Test the drag-and-drop capabilities of the two portlets in either Rational Application Developer's Test Environment, or by deploying the portlets to WebSphere Portal V6.0.1

System requrements

To work through the steps in this tutorial, you need:

  • IBM Rational® Application Developer V7.0 (hereafter called Application Developer). A link to a trial download is available in the Resources section. Although it is not required, you might want to upgrade to the last release of Application Developer.
  • The test environment that is included in Application Developer is WebSphere Portal 6.0. You need to upgrade this environment to V6.0.1. Otherwise, pages containing portlets using the drag-and-drop feature will show erratic behaviour.

    Tip: When applying the fix pack, read the instructions and adjust the timeout values for your environment. Otherwise, the fix pack installation might fail.

Prerequisite skills

You need to have a working of Java™ and programming portlets is required to understand the explanations. See the Resources list for references which can help you get some of these skills.

About the sample code

Included with this article (in the Download section) is the complete code for the portlets in the sample scenario. The file is in Project Interchange format. To load this file into Application Developer:

  1. Select File => Import => Project Interchange.
  2. In the project selection dialog, select all the projects available, DragNDrop and DragNDropEAR.

1 of 5 | Next

Comments

Back to top

Close [x]

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

Close [x]

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=239831
TutorialTitle=Developing portlets using drag-and-drop in WebSphere Portal V6.0
publish-date=07112007
author1-email=genaro@es.ibm.com
author1-email-cc=

Table of contents

1 of 5 | Next

Next steps from IBM

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

 

Dig deeper into WebSphere on developerWorks

Try IBM PureSystems. No charge.

IBM PureSystems on a kaleideoscope background

Experience today!

Get started with the cloud-based trial and pattern development kit.

Share this page:

  • Close [x]

Follow developerWorks:

  • Close [x]