In this sample scenario, you will complete the following tasks : -
Create and run a portlet project using the basic portlet type to become familiar with how portlets work -
Modify the portlet to use JSP expressions and verify your changes -
Add a JavaBean to your project and verify the changes The development workstation has already been created for you and its components can be seen in Figure 4-1. Figure 4-1. Development workstation 4.1.1 Creating a portlet project You will start by creating a portlet application using WebSphere Studio Site Developer. This sample portlet is based on the Model-View-Controller (MVC) design pattern. The MVC methodology allows efficient relationships between the user interface and the underlying data model. The main components of this design pattern are: -
Model - represents the logical structure of data in a software application -
View - represents all elements in the user interface -
Controller - represents the elements connecting the Model and View elements Figure 4-2 on page 155 illustrates the MVC portlet application. The portlet application also includes a Configure.jsp, but it is not shown here. Figure 4-2. HelloWorld portlet application Note : In this initial project, the Edit mode will not be implemented and therefore Edit.jsp is not required. You will start by creating a portlet application using WebSphere Studio Site Developer. This sample portlet uses the basic portlet type. In this section, you will create a portlet application and then test the application in the WebSphere Studio Site Developer Test Environment. The sample portlet HelloWorld displays a Hello World message and a message indicating the portlet current mode. Portlet modes allow a portlet to display different content to the user, depending on the task required by the portlet. The WebSphere Portal API provides the modes View, Help, Edit and Configure. Creating the portlet project Execute the following steps to create the portlet application: -
Open the IBM WebSphere Studio Site Developer by clicking Start-> Programs-> IBM WebSphere Studio-> Site Developer 5.0. Note : If prompted, click OK to use the default workspace directory. -
Select File-> New-> Project . Figure 4-3. Creating a new project -
Select Portlet Development from the left panel and Portlet Application Project from the right panel. Then click Next . Figure 4-4. Selecting Portlet Application Project -
In the Define the Portlet Project window, enter HelloWorld as the Project Name . You will be creating a basic type prolet which extends PortletAdapter in the Portlet API. Click Next to continue. Figure 4-5. Defining the portlet project -
On the J2EE Settings Page, accept the default values. This will create a portlet project compatible with WebSphere Portal V5. Click Next . Figure 4-6. Creating a portlet project for WebSphere Portal V5 -
Accept the default values on the Portlet Settings Page. Click Next . Figure 4-7. Portlet settings window -
Deselect the Add form sample and Add actionlistener check boxes. The Hello World example does not need these. You will learn more about the action listener in Chapter 5, "Action event handling" on page 181. Click Next . Figure 4-8. Event handling -
Accept the default values for the Single Sign-On (SSO) page. The Hello World application will not use this feature. You will learn more about the Credential Vault in Chapter 10, "Using the Credential Vault" on page 319. Click Next . Figure 4-9. Single Sign-On window -
Select the check boxes to Add help mode and Add configure mode to your protlet project (see Figure 4-10). We will show you how to navigate to these modes in this exercise. Click Finish to generate your project. Figure 4-10. Additional markup support and additional portlet modes Note : Configure mode is for administrators only. -
You will now see the HelloWorld project listed in the J2EE Navigator panel. This panel is located in the upper left hand of the WebSphere Studio Site Developer workbench. Figure 4-11. The Navigator panel -
Expand the /Java Source/helloworld/ folder to view the Java files used in this project. Do the same to the /Web Content/helloworld/jsp/html/ folder to view the JSPs used to render the content of your project. Figure 4-12. Java and JSP files 4.1.2 Configuring the Test Environment Initially, you will need to configure the WebSphere Portal V5.0 Test Environment. If it is not already configured, follow these steps: -
Click the Server Configuration tab. Figure 4-13. Server Configuration tab -
Right-click Servers , then click New , then Server and Server Configuration . Figure 4-14. Creating a new server and configuration -
A new window will be displayed to allow you to configure the new server. Enter Test Environment as the server name. Select Test Environment under WebSphere Portal V5.0 as the server type. Click Next to continue. Note : You must enter a server name to continue. Also, be sure to select Test Environment . Figure 4-15. Server configuration settings -
This will bring up a window to select the HTTP port number to be used by Site Developer. Use port 9080 . Click Finish to add the Test Environment. Figure 4-16. HTTP port selection -
The server has been successfully added and it can now be seen in the Server Configuration tab. Figure 4-17. Test Environment has been added successfully 4.1.3 Running the portlet application To run a project in the WebSphere Studio Site Developer Test Environment, you will need to add the portlet project to the Test Environment. -
Add your portlet project to the Test Environment: -
Click the Server Configuration tab (on the navigator panel). -
Expand the Servers tree. -
Right-click WebSphere Portal V5.0 Test Environment (or Test Environment ). -
Click Add-> DefaultEAR to add your project to the Test Environment. Figure 4-18. Adding a project to the Test Environment -
Expand the Servers tree. You will see the HelloWorld project under the DefaultEAR project in the Test Environment. Figure 4-19. Project shown in the Servers tree -
Now click the J2EE Navigator tab to see your project again. Right-click HelloWorld . Then click Run on Server . This will load your project into the Test Environment so that you can view it in the WebSphere Studio Site Developer Web browser. It may take a minute or two for this process to complete. Figure 4-20. Running the project in the Test Environment -
You will now see your newly created portlet project running in the Web browser. Figure 4-21. Viewing the portlet project -
Click the wrench icon in the title bar of the HelloWorld portlet. This will take you to the Configure mode of the portlet (administration). -
Similarly, clicking the ? icon will take you to the Help mode. The Help mode window will be quickly displayed as a pop-up window and you will not be able to see it. However, you can open an external browser instance like Internet Explorer and then point it to the same Portal URL. -
In IE, enter http://localhost:9080/wps/portal . -
Log on to the portal with user ID wpsadmin and password wpsadmin. -
Click the ? icon to see the help page. -
Click the small white triangle highlighted to return to the View mode. See Figure 4-22 on page 169. Figure 4-22. Configure mode Figure 4-23. Portlet help mode page -
Click the minimize button ( - ). This will change the state of your portlet to minimized. When a portlet is minimized, the content of the portlet is not rendered, and only the title bar is shown. -
Now click the maximize icon (rectangle). This will set the state of your portlet to maximized and the entire screen will be filled with one portlet. -
Now click the restore icon in the title bar as highlighted in Figure 4-24. This will return your portlet to its normal viewing state. Figure 4-24. Maximized state Figure 4-25. Normal viewing state 4.1.4 Updating the portlet project In this section, you will use JSP expressions to add content to the View mode of your portlet. -
Double-click HelloWorldPortletView.jsp in the /Web Content/helloworld/jsp/html/ directory of your portlet project to open it for editing. Note : Make sure you edit the JSP in the /html/ directory. Figure 4-26. Editing the view JSP -
You will see the code for this page in the integrated JSP editor. Figure 4-27. HelloWorldPortletView.jsp code -
Modify the code according to the following example. Add the text shown in bold. Example 4-1. HelloWorldPortletView.jsp ... <DIV style="margin: 6px"> <H3 style="margin-bottom: 3px">Welcome!</H3> This is a sample <B>view mode</B> page. You have to edit this page to customize it for your own use.<BR> The source file for this page is "/Web Content/helloworld/jsp/html/HelloWorldPortletView.jsp". <br> Current time: <%=new java.util.Date() %> <br> Hostname: <%= request.getRemoteHost()%> </DIV> -
Save all your changes. For example click File-> Save All . -
Right-click the HelloWorld project in the navigator panel and click Run on Server to view your changes. Figure 4-28. Running the updated project on the server -
You will see your changes in the integrated Web browser. Figure 4-29. Viewing your updated portlet results 4.1.5 Adding a JavaBean to your portlet project Another way to store information to be accessed and displayed by the View mode JSP is to use a JavaBean. In this exercise, you will add a JavaBean to your project and use it to display information when it is run. JavaBeans are a special type of Java class that contain the business logic of the application. They are used to temporarily store and process data and access back-end resources such as databases. -
The Java files used to invoke the JSPs to render content are located in the /Java Source/helloworld/ folder of your portlet project. Figure 4-30. /Java Source/helloworld directory -
To add a JavaBean, you will add a class to this project. There is an easy-to-use wizard in WebSphere Studio Site Developer for doing this. To start the wizard, right-click the /Java Source/helloworld/ folder and click New-> Class . Figure 4-31. Adding a new class to your project -
Give this class the name HelloWorldPortletViewBean . Click Finish to add this file to your project. Figure 4-32. Adding a class wizard -
The HelloWorldPortletViewBean.java file will now appear under the /Java Source/helloworld/ folder. Figure 4-33. The newly added file is shown -
Double-click the HelloWorldPortletViewBean.java file for editing. Modify its code according to the following example. The addition of a set and get method allows you to store and retrieve a value from this bean. Example 4-2. HelloWorldPortletViewBean.java public class HelloWorldPortletViewBean { private String myName = "" ; public void setMyName (String s){ myName = s ; } public String getMyName (){ return myName ; } } -
Next, you will need to modify the HelloWorldPortlet.java file.You will add code that will use the set information in the bean you just created. This code is inserted in the doView() method of the HelloWorldPortlet.java file. Example 4-3. HelloWorldPortlet.java public class HelloWorldPortlet extends PortletAdapter { .... .... public void doView(PortletRequest request, PortletResponse response) throws PortletException, IOException { //Make a bean HelloWorldPortletViewBean viewBean = new HelloWorldPortletViewBean() ; //Set your name viewBean.setMyName("John Doe") ; //Save bean in request so the view jsp can read it request.setAttribute("HelloWorldPortletViewBean", viewBean) ; // Invoke the JSP to render getPortletConfig().getContext().include(VIEW_JSP+getJspExtension(request), request, response); } -
Now that the bean is created and the portlet can successfully store a value in this bean, it is necessary to modify the code to the HelloWorldPortletView.jsp file so that the value can be extracted from the bean and shown on the screen. Double-click the HelloWorldPortletView.jsp file and make the following changes. The useBean tag tells the JSP file that it will be accessing values stored in a JavaBean. Example 4-4. HelloWorldPortletView.jsp <jsp:useBean id="HelloWorldPortletViewBean" class="helloworld.HelloWorldPortletViewBean" scope="request" /> <%@ page contentType="text/html" import="java.util.*, helloworld.*"%> <%@ taglib uri="/WEB-INF/tld/portlet.tld" prefix="portletAPI" %> <portletAPI:init/> <DIV style="margin: 6px"> <H3 style="margin-bottom: 3px">Welcome!</H3> This is a sample <B>view mode</B> page. You have to edit this page to customize it for your own use.<BR> The source file for this page is "/Web Content/helloworld/jsp/html/HelloWorldPortletView.jsp". <br> Current time: <%=new java.util.Date() %> <br> Hostname: <%= request.getRemoteHost()%> <br> Updated by <%=HelloWorldPortletViewBean.getMyName()%> </DIV> -
Save all your changes. For example, click File-> Save All . -
Again, right-click the HelloWorld project in the Navigator panel and click Run on Server . You will now see the changes you made to your project when the portal loads in the Web Broswer. Figure 4-34. Viewing the changes made to your portlet |