4.1 Sample scenario

 < Day Day Up > 

In this sample scenario, you will complete the following tasks :

  1. Create and run a portlet project using the basic portlet type to become familiar with how portlets work

  2. Modify the portlet to use JSP expressions and verify your changes

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

graphics/04fig01.gif

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

graphics/04fig02.gif

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:

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

  2. Select File-> New-> Project .

    Figure 4-3. Creating a new project

    graphics/04fig03.gif

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

    graphics/04fig04.jpg

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

    graphics/04fig05.jpg

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

    graphics/04fig06.jpg

  6. Accept the default values on the Portlet Settings Page. Click Next .

    Figure 4-7. Portlet settings window

    graphics/04fig07.jpg

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

    graphics/04fig08.jpg

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

    graphics/04fig09.jpg

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

    graphics/04fig10.jpg

    Note : Configure mode is for administrators only.

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

    graphics/04fig11.jpg

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

graphics/04fig12.gif

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:

  1. Click the Server Configuration tab.

    Figure 4-13. Server Configuration tab

    graphics/04fig13.jpg

  2. Right-click Servers , then click New , then Server and Server Configuration .

    Figure 4-14. Creating a new server and configuration

    graphics/04fig14.jpg

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

    graphics/04fig15.jpg

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

    graphics/04fig16.jpg

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

graphics/04fig17.jpg

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.

  1. Add your portlet project to the Test Environment:

    1. Click the Server Configuration tab (on the navigator panel).

    2. Expand the Servers tree.

    3. Right-click WebSphere Portal V5.0 Test Environment (or Test Environment ).

    4. Click Add-> DefaultEAR to add your project to the Test Environment.

      Figure 4-18. Adding a project to the Test Environment

      graphics/04fig18.jpg

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

    graphics/04fig19.jpg

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

    graphics/04fig20.jpg

  4. You will now see your newly created portlet project running in the Web browser.

    Figure 4-21. Viewing the portlet project

    graphics/04fig21.jpg

  5. Click the wrench icon in the title bar of the HelloWorld portlet. This will take you to the Configure mode of the portlet (administration).

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

    1. In IE, enter http://localhost:9080/wps/portal .

    2. Log on to the portal with user ID wpsadmin and password wpsadmin.

    3. Click the ? icon to see the help page.

  7. Click the small white triangle highlighted to return to the View mode. See Figure 4-22 on page 169.

    Figure 4-22. Configure mode

    graphics/04fig22.jpg

    Figure 4-23. Portlet help mode page

    graphics/04fig23.jpg

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

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

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

    graphics/04fig24.jpg

    Figure 4-25. Normal viewing state

    graphics/04fig25.jpg

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.

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

    graphics/04fig26.jpg

  2. You will see the code for this page in the integrated JSP editor.

    Figure 4-27. HelloWorldPortletView.jsp code

    graphics/04fig27.jpg

  3. 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> 
  4. Save all your changes. For example click File-> Save All .

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

    graphics/04fig28.jpg

  6. You will see your changes in the integrated Web browser.

Figure 4-29. Viewing your updated portlet results

graphics/04fig29.jpg

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.

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

    graphics/04fig30.jpg

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

    graphics/04fig31.jpg

  3. Give this class the name HelloWorldPortletViewBean . Click Finish to add this file to your project.

    Figure 4-32. Adding a class wizard

    graphics/04fig32.jpg

  4. The HelloWorldPortletViewBean.java file will now appear under the /Java Source/helloworld/ folder.

    Figure 4-33. The newly added file is shown

    graphics/04fig33.jpg

  5. 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  ;  }  } 
  6. 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);    } 
  7. 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> 
  8. Save all your changes. For example, click File-> Save All .

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

    graphics/04fig34.jpg

 < Day Day Up > 


IBM WebSphere Portal V5 A Guide for Portlet Application Development
IBM Websphere Portal V5: A Guide for Portlet Application Development
ISBN: 0738498513
EAN: 2147483647
Year: 2004
Pages: 148

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net