|
|
DEVELOPMENT
 Develop Portlets with IBM WebSphere Studio Application Developer
WebSphere Portal 4.1.2 lets you use WSAD to design portlets. Learn how it's done by walking through an example.
By Sunil Hiranniah, Software Engineer, IBM Developer Relations; and Sukumar Konduru, Advisory Software Engineer, IBM Developer Relations
We're often asked, "Can I use WebSphere Studio Application Developer for developing portlets?" The answer is yes, you can. WebSphere Portal 4.1.2 provides the IBM Portal Toolkit for WebSphere Studio Application Developer (WSAD) to build portlets. After you install the toolkit, you can use built-in portlet creation wizards in WSAD to make portlet development much simpler. These wizards generate a default directory structure for portlet creation and sample code for the portlet, which can be modified.
 |
Figure 1: Create a new portlet application project -- Select > Portlet Dev > Portlet application project.
|
 |
| Figure 2: Specify name and location of the portlet project -- Here, you choose a portlet type and define the name of the project. |
 |
Figure 3: Enter the properties for the portlet -- In our example, we kept the default basic portlet parameters.
|
 |
Figure 4: MyMemoProject shown in WSAD workspace -- You right-click on the HTML directory, located under the webApplication\jsp directory, and execute the Delete command.
|
 |
Figure 5: Edit.jsp -- This screen shows the code you inserted from listing 1.
|
 |
| Figure 6: Open MyMemoPortlet.java -- In the MyMemoProject workspace, expand the source folder. |
 |
Figure 7: Modify portlet.xml -- After you expand the WEB-INF folder and double-click on portlet.xml, you should see this source.
|
 |
Figure 8: Export resources to a new or existing WAR file -- Here, you confirm the project to export and select an appropriate directory where you should place the .WAR file.
|
 |
Figure 9: Memo portlet deployed to a page -- After you add the memo portlet to a page, you should see this screen.
|
 |
Figure 10: Enter the memo you want to persist and click on the Submit option -- Based on the edit.jsp page, you should see a window similar to this.
|
 |
Figure 11: Memo portlet with your persisted memo -- Here's the final result.
|
In this article, we show you step-by-step instructions for using WSAD 4.0.3 (which comes with your WebSphere Portal install package) to develop portlets for a WebSphere Portal 4.1 environment. We recommend you read "Develop Portlets for WebSphere Portal" in the November/December edition of WebSphere Advisor magazine to get the basics of portlet design and features. (Pro-level subscribers can access that article at http://Advisor.com/doc/09597.)
We'll develop a portlet that persists a memo into the portal database. The portlet will support three modes: view, help, and edit. User can select edit mode to store a memo in the database. The view mode displays the stored memo. Because the data is stored in the PortletData, it's committed to the database. Even if the user logs out and then logs back in, the data will be retrieved.
Steps to building a portlet in WSAD
Start WSAD 4.0.3 and follow these steps for building your memo portlet.
1. Select File > New > Other.
2. Select > Portlet Dev > Portlet application project, as shown in figure 1.
3. In the next step, you'll see the "Create a Portlet project" wizard. You can choose any portlet type as MVCPortlet or Basic portlet. For this article, we used a Basic portlet. You have to define the name of the project. For this example, we named the project MyMemoProjectEAR, as shown in figure 2.
4. In the next window, we've kept the default basic portlet parameters, as shown in figure 3.
5. Click on Finish.
6. In the workspace, you should see MyMemoProject with the directory structure as shown in figure 4.
7. Right-click on the HTML directory, located under the webApplication\jsp directory, and execute the Delete command.
8. Open the JSP folder located under the Web Application folder. You should see four JSP files: view, edit, configure, and help modes. We'll start modifying with edit.jsp. Double-click on edit.jsp and replace the existing code with the code shown in listing 1.
Listing 1: Edit .jsp -- First, you modify edit.jsp; double-click on edit.jsp and replace the existing code with this code.
<%@ taglib uri='/WEB-INF/tld/portlet.tld' prefix='portletAPI'%>
<portletAPI:init/>
<%@ page import="org.apache.jetspeed.portlet.*" %>
<HEAD>
<META name="GENERATOR" content="IBM WebSphere Studio">
</HEAD>
<DIV CLASS="wpsPortletBack">
<SPAN CLASS="wpsPortletHead">
Memo<BR>
</SPAN>
<SPAN CLASS="wpsPortletText">
Enter memo to save it to persistent store
<BR>
</SPAN>
<% DefaultPortletAction action = new DefaultPortletAction("memo");
PortletURI memoURI = portletResponse.createReturnURI();
memoURI.addAction(action);
%>
<form action="<%= memoURI.toString() %>" method="POST">
<TABLE>
<TR>
<TD>
<SPAN CLASS="wpsLabelText">Memo:</SPAN>
</TD>
<TD>
<input CLASS="wpsEditField" type="text" SIZE=50 name="<%=portletResponse.encodeNamespace("memo")%>" ><br>
</TD>
</TR>
<TR>
<TD colspan="2" align="center">
<input CLASS="wpsButtonText" type="submit" name="Save_Button" value="submit" size=35>
</TD>
</TR>
</TABLE>
</form>
The above code, when copied to edit.jsp, is shown in figure 5.
9. Similarly, add the code for help.jsp and view.jsp, shown in listings 2 and 3.
Listing 2: help.jsp -- Replace existing code with this code.
<HEAD>
<META name="GENERATOR" content="IBM WebSphere Studio">
</HEAD>
<DIV CLASS="wpsPortletText">
This portlet supports edit mode. You may enter memo using edit mode.
The event handler stores data into the database and view mode displays
stored data in the portlet window.
</DIV>
Listing 3: View.jsp -- Replace exiting code with this code.
<%@ taglib uri='/WEB-INF/tld/portlet.tld' prefix='portletAPI'%>
<portletAPI:init/>
<HEAD>
<META name="GENERATOR" content="IBM WebSphere Studio">
</HEAD>
<p>
Your memo contents are <%=portletRequest.getData().getAttribute("memo") %>
10. In the MyMemoProject workspace, expand the source folder as shown in figure 6.
The portlet has to implement ActionListener and define the actionPerformed method in order to extract the values that are submitted in edit mode. In order to achieve this, perform the following steps at this stage:
A. Modify the class to implement ActionListener in the following manner:
public class MyMemoPortlet extends PortletAdapter implements ActionListener{
B. Add the following method:
public void actionPerformed(ActionEvent event) throws PortletException {
PortletRequest request = event.getRequest();
String memo = request.getParameter("memo");
PortletData pd = request.getData();
pd.setAttribute("memo", memo);
try{
pd.store();
}catch(java.io.IOException e){
}
}
C. Before you save, enter the following import statement:
import org.apache.jetspeed.portlet.event.*;
11. Expand the WEB-INF folder and double-click on portlet.xml, and you should see the source as shown in the figure 7.
By default, only view mode is supported. You can add edit and help modes in portlet.xml.
<supports>
<markup name="html">
<view/>
<edit/>
<help/>
</markup>
</supports>
12. Select MyMemoProject and click on File > Export. In the next wizard, select WAR file as the option and click on Next. Confirm the project to export and select an appropriate directory where you should place the WAR file, as shown in figure 8. Click on Finish.
13. Install this portlet and customize the page to add the portlet to it. Again, you can refer to "Develop Portlets for WebSphere Portal" at http://Advisor.com/doc/09597 for instructions on installing and adding a portlet to a page. After you add the memo portlet to a page, you should see the screen shown in figure 9.
Click on the Edit icon. Based on the edit.jsp page, you should see a window as shown in figure 10.
Your memo is persisted, and you should see the final result shown in figure 11.
Congratulations! You've successfully built a portlet using WebSphere Studio Application Developer.
Reference: WebSphere Portal Infocenter
Sunil Hiranniah works for IBM Developer Relations Technical Support Center in Dallas, Texas. He has worked as a software engineer/developer in various commercial projects since 1997. He has ample experience and has published extensively on the WebSphere family of products, J2EE, databases, and security. He is the co-author for the IBM WebSphere Portal 4.1 Handbook (IBM, 2002). His current and most interesting job involves supporting customers with WebSphere Portal issues. sunilh@us.ibm.com.
Sukumar Konduru is an Advisory Software Engineer at the IBM Dallas, Texas, Developer Technical Support Center. He holds a master's degree in computer science from the University of Houston. You can reach Sukumar at konduru@us.ibm.com.
ARTICLE INFO
Web Edition: 2003.03.04, Doc #12036
 FREE ACCESS
Keyword Tags: Application Development, Development, IBM, IBM Lotus, IBM Software, IBM WebSphere, IBM WebSphere Portal, IBM WebSphere Studio Application Developer, Java, Portals, Programming, Security, Software Development, Web Development, XML
|
|