hola mundo con websphere portal 6

41
Hello World: WebSphere Portal V6 Develop, test, and deploy MyFirstPortlet Skill Level: Intermediate Laura Chan ([email protected]) Software Developer IBM Janet Lee ([email protected]) Software Engineer IBM 04 Apr 2007 Get an overview of WebSphere® Portal in this basic tutorial, which includes both demos and hello world exercises. This tutorial includes two practical exercises. You will develop and test your first portlet using Rational® Application Developer with the WebSphere Portal Test Environment. Then, you'll deploy your portlet in a production environment using WebSphere Portal. Section 1. Before you start About this series The Hello World series is for novice developers who want a high-level, hands-on overview of IBM software products. Each tutorial in the series provides simple exercises and step-by-step instructions to familiarize you with the components and use of a particular product. The exercises only cover the basic concepts, but are enough to get you started. About this tutorial This tutorial introduces you to WebSphere Portal. Two exercises provide step-by-step instructions to give you a complete end-to-end experience. You will WebSphere Portal V6 © Copyright IBM Corporation 1994, 2007. All rights reserved. Page 1 of 41

Upload: csarpm

Post on 13-Apr-2015

25 views

Category:

Documents


4 download

TRANSCRIPT

Page 1: Hola Mundo Con Websphere Portal 6

Hello World: WebSphere Portal V6Develop, test, and deploy MyFirstPortlet

Skill Level: Intermediate

Laura Chan ([email protected])Software DeveloperIBM

Janet Lee ([email protected])Software EngineerIBM

04 Apr 2007

Get an overview of WebSphere® Portal in this basic tutorial, which includes bothdemos and hello world exercises. This tutorial includes two practical exercises. Youwill develop and test your first portlet using Rational® Application Developer with theWebSphere Portal Test Environment. Then, you'll deploy your portlet in a productionenvironment using WebSphere Portal.

Section 1. Before you start

About this series

The Hello World series is for novice developers who want a high-level, hands-onoverview of IBM software products. Each tutorial in the series provides simpleexercises and step-by-step instructions to familiarize you with the components anduse of a particular product. The exercises only cover the basic concepts, but areenough to get you started.

About this tutorial

This tutorial introduces you to WebSphere Portal. Two exercises providestep-by-step instructions to give you a complete end-to-end experience. You will

WebSphere Portal V6© Copyright IBM Corporation 1994, 2007. All rights reserved. Page 1 of 41

Page 2: Hola Mundo Con Websphere Portal 6

develop and test a portlet in a development environment, and then deploy the portletin a production environment.

System requirements

To complete Exercise 1: Develop and test a portlet in a development environment,install Rational Application Developer V7. During the installation, check the option toinstall the feature Portal tools to get the WebSphere Portal test environment..

For Exercise 2: Deploy a portlet in a production environment, you need WebSpherePortal V6. You can download a free, trial version of WebSphere Portal Express V6 atno cost.

Section 2. Introduction

What is WebSphere Portal?

IBM WebSphere Portal is a framework that includes a runtime server, services,tools, and many other features for integrating your enterprise into a single,customizable interface called a portal. A portal is a Web site that provides users witha single point of access to resources and services.

A portal built with IBM WebSphere Portal 6.0 offers a single point of personalizedinteraction to resources and services, including applications, content, people, andbusiness processes. Figure 1 shows a high level view of the architecture.

Figure 1. IBM WebSphere Portal architecture

developerWorks® ibm.com/developerWorks

WebSphere Portal V6Page 2 of 41 © Copyright IBM Corporation 1994, 2007. All rights reserved.

Page 3: Hola Mundo Con Websphere Portal 6

WebSphere Portal basic concepts and definitions

PortletTo a user, a portlet is a window on a portal Web site that displays information.To a developer, it is an application.Rational Application Developer or Rational Software Architect can be used todevelop, test, and debug portlets. There are many sample portlets available fordownload.

Portlet APIWebSphere Portal supports industry standard JSR 168 Portlet API. The IBMPortlet API is being deprecated for Version 6.

Portlet applicationA collection of related portlets that share the same resources (for example,images, properties files, and classes).

Portal page

ibm.com/developerWorks developerWorks®

WebSphere Portal V6© Copyright IBM Corporation 1994, 2007. All rights reserved. Page 3 of 41

Page 4: Hola Mundo Con Websphere Portal 6

A portal page contains one or more portlets.

Portal Web siteA portal Web site is built with portal pages.

Portal server runtimeThe execution environment for the portlets. Also called the portlet container, itis a J2EE application that runs on WebSphere Application Server.

Portlet versus servletPortlets can be administered while the Portal Server is running (for example,Install/Remove portlet application, Create/Delete portlets, portlet settings). Thisis more dynamic than servlets.Portlets may not send errors directly to browsers, forward requests, or writearbitrary markup to the output stream.

In WebSphere Portal, go to Portlet Specification for JSR 168 > Relationshipwith the Servlet Specification for details.

Portal page layoutThe page layout defines the number of content areas within the page and theportlets displayed within each content area.

ThemesThemes represent the overall look and feel of the portal, including colors,images, and fonts.

SkinsSkin refers to the visual appearance of the area surrounding an individualportlet. Each portlet can have its own skin.

See Resources for more information.

Key features

Customers can choose one of the three WebSphere Portal Multi-platform offerings:WebSphere Portal Server, WebSphere Portal Enable, and WebSphere PortalExtend.

WebSphere Portal Server is the foundation offering that provides:

• The Portal framework

• Core portal functions

WebSphere Portal Enable adds:

• Web content management

developerWorks® ibm.com/developerWorks

WebSphere Portal V6Page 4 of 41 © Copyright IBM Corporation 1994, 2007. All rights reserved.

Page 5: Hola Mundo Con Websphere Portal 6

• Document management

• Workflow

WebSphere Portal Extend adds:

• Workplace forms

• Collaborative services

How WebSphere Portal compares in the portal market

IBM WebSphere Portal is well recognized, and continues to be in the leadersquadrant according to Gartner, as shown in Figure 2. The rating focuses on visionand ability to execute that vision. It also takes product features and track records intoconsideration.Figure 2. Gartner: Magic Quadrant for Horizontal Portal Products, 2006

ibm.com/developerWorks developerWorks®

WebSphere Portal V6© Copyright IBM Corporation 1994, 2007. All rights reserved. Page 5 of 41

Page 6: Hola Mundo Con Websphere Portal 6

Section 3. How WebSphere Portal fits into SOA

A service oriented architecture (SOA) is simply an IT architectural style that allowsapplications to be built to support the flexibility and integration required for today'sbusinesses. Flexibility enables a business to change and adapt. Integrationemphasizes the communication and interaction of business processes from end toend, both internally and externally, with customers and suppliers.

Getting started with SOA is easier with the IBM SOA Foundation - an integrated,open-standards-based set of software, best practices, and patterns for SOA. Thesoftware that comprises the IBM SOA Foundation was carefully selected from theleading-edge IBM software portfolio to support each phase of the SOA life cycle,which includes four phases: model, assemble, deploy and manage.

WebSphere Portal is part of the IBM SOA Foundation and supports the deployphase of the SOA life cycle. The deploy phase includes a combination of creatingthe hosting environment for your applications and the actual deployment of thoseapplications. WebSphere Portal is a hosting environment for the user interactionlogic of your SOA application.

Figure 3. IBM SOA life cycle

WebSphere Portal provides key functions to support SOA applications, as shown inTable 1 below. See Resources for more information.

Table 1. WebSphere Portal functions that support SOA applicationsFunction Description

Accessing Web Services from portlet Rational Application Developer provides tools toeasily create a portlet to call a Web service.

Web Services for Remote Portlet (WSRP) The WSRP standard simplifies the integration ofremote applications and content into portals. WithWSRP, portal administrators can select from arich choice of remote content and applicationsand integrate them into their portal with a fewmouse clicks and no programming effort.

developerWorks® ibm.com/developerWorks

WebSphere Portal V6Page 6 of 41 © Copyright IBM Corporation 1994, 2007. All rights reserved.

Page 7: Hola Mundo Con Websphere Portal 6

Integrating business processes WebSphere Portal supports the integration ofyour existing business processes andapplications into the portal. Portals are the idealinterface for the human component of businessprocesses.

WebSphere Portlet Factory WebSphere Portal supports the portlets createdby the WebSphere Portlet Factory. WebSpherePortlet Factory speeds WebSphere Portaldeployments by automating portlet development.It provides an SOA entry point for companies bydelivering SOA-based portal applications.

Composite applications WebSphere Portal Version 6.0 simplifies workingwith composite applications, enabling integrationof information from multiple applications, andproviding end users with the content they needbased on their role and task.

A portal is a logical and appropriate first step toward SOA implementation.

Section 4. About the exercises

This tutorial provides two exercises that give you complete end-to-end experiencefrom development to production. The exercises have been designed so you canexecute them independently of one another. You could proceed straight to Exercise2 if you only want to learn about WebSphere Portal administrative tasks.

In Exercise 1, you take the role of a developer to develop and test a portlet, calledMyFirstPortlet, that is expected to have the look and feel shown in Figure 4. Theportlet will have a form with two text boxes and a submit button. In the first text box,users are asked to enter their name. In the second text box, users are asked to entera special greeting to a special someone. Upon clicking Submit, the greeting will beprinted on the portlet page.

You will develop the portlet using Rational Application Developer and test the portletusing Rational Application Developer's WebSphere Portal Test Environment.

Figure 4. Look and feel of MyFirstPortlet

ibm.com/developerWorks developerWorks®

WebSphere Portal V6© Copyright IBM Corporation 1994, 2007. All rights reserved. Page 7 of 41

Page 8: Hola Mundo Con Websphere Portal 6

In Exercise 2, you take the role of the WebSphere Portal administrator to putMyFirstPortlet live in a production environment. You will first install MyFirstPortlet inWebSphere Portal, then customize the look and feel of the portlet. Finally, you willgrant permission to a new user to use the portlet.

Section 5. Exercise 1. Develop and test a portlet

In this exercise, you take the role of a developer to create a new basic JSR 168portlet, MyFirstPortlet, and test the portlet in Rational Application Developer'sWebSphere Portal Test Environment.

JSR 168 is a portlet specification standard for portlet development. In RationalApplication Developer, full support is provided for developing portlets using thisstandard, including automatically generating JSR 168 portlet projects simply byexecuting a wizard.

Step 1. Start Rational Application Developer

Launch Rational Application Developer if it is not up and running.

Would you like to see these steps demonstrated for you?

Show me

1. From Windows, click Start > Programs > IBM Software DevelopmentPlatform > IBM Rational Application Developer > Rational

developerWorks® ibm.com/developerWorks

WebSphere Portal V6Page 8 of 41 © Copyright IBM Corporation 1994, 2007. All rights reserved.

Page 9: Hola Mundo Con Websphere Portal 6

Application Developer.

2. A window opens asking for the workspace directory. Click OK to acceptthe default.

Step 2. Create a new portlet project

1. From the workbench, select File > New > Project.

2. Select Portlet Project, as shown in Figure 5, and click Next.Figure 5. Select a wizard

3. In the Portlet Project wizard, enter MyFirstPortlet for the Projectname. The EAR Project Name and Portlet name are auto-filled by thewizard upon your entry of Project name. For Target Runtime, chooseWebSphere Portal v6.0. For Portlet API, choose JSR 168 Portlet. Forthe Portlet type, choose Basic Portlet. Click Next.Figure 6. New Portlet Project features

ibm.com/developerWorks developerWorks®

WebSphere Portal V6© Copyright IBM Corporation 1994, 2007. All rights reserved. Page 9 of 41

Page 10: Hola Mundo Con Websphere Portal 6

4. Accept the default values in the Portlet Settings panel, as shown in Figure7, and click Next.Figure 7. Portlet Settings

developerWorks® ibm.com/developerWorks

WebSphere Portal V6Page 10 of 41 © Copyright IBM Corporation 1994, 2007. All rights reserved.

Page 11: Hola Mundo Con Websphere Portal 6

5. As shown in Figure 8, select the check boxes for Add action listener andAdd JSP form sample in the Action and Preferences panel. Click Next.Figure 8. Action and Preferences

ibm.com/developerWorks developerWorks®

WebSphere Portal V6© Copyright IBM Corporation 1994, 2007. All rights reserved. Page 11 of 41

Page 12: Hola Mundo Con Websphere Portal 6

6. In this exercise, you will not be using single sign-on. Accept the defaultvalues in the Single Sign On section, as shown in Figure 9, and clickNext.Figure 9. Advanced Settings

developerWorks® ibm.com/developerWorks

WebSphere Portal V6Page 12 of 41 © Copyright IBM Corporation 1994, 2007. All rights reserved.

Page 13: Hola Mundo Con Websphere Portal 6

7. Click Finish.

8. Observe that the MyFirstPortlet Project you just created was generated inthe Project Explorer pane.Figure 10. Project Explorer

ibm.com/developerWorks developerWorks®

WebSphere Portal V6© Copyright IBM Corporation 1994, 2007. All rights reserved. Page 13 of 41

Page 14: Hola Mundo Con Websphere Portal 6

Explore the files in your MyFirstPortlet project, and review the purpose of each fileusing Table 2 below. You will be modifying these files to create your own customizedportlet.

Table 2. Portlet files at a glanceFile Purpose

web.xml One of the two deployment descriptorsrequired for portlets. It provides informationto the server about all non-portlet resources.

portlet.xml The other deployment descriptor requiredfor portlets. It provides information to theserver about all portlet related resources.

MyFirstPortlet.java A Java file containing the methoddoView() which is the first method that isexecuted when a portlet renders.When a user interacts with the portlet (suchas selecting the Submit button), the methodprocessAction() is called to process theuser action that occurs.

MyFirstPortletSessionBean.java The session bean is used to pass data tothe JavaServer Pages (JSP) files.

MyFirstPortletView.jsp The view JSP file is used to edit the displayof a portlet in View mode. (In Portal, there isalso Edit mode and Help mode.)

Step 3. Modify the session bean in MyFirstPortlet

developerWorks® ibm.com/developerWorks

WebSphere Portal V6Page 14 of 41 © Copyright IBM Corporation 1994, 2007. All rights reserved.

Page 15: Hola Mundo Con Websphere Portal 6

Session beans are used to pass data to the JSP. In this step, create two newvariables called myName and greeting to store the user's name and greetingmessage.

1. In Project Explorer expand MyFirstPortlet > Java Resources: src >com.ibm.myfirstportlet and double click the fileMyFirstPortletSessionBean.java, as shown in Figure 11.Figure 11. MyFirstPortletSessionBean.java file

2. Delete all the class variables and methods from theMyFirstPortletSessionBean class, and create new private Stringsfor myName and greeting. The SessionBean class should now look likeas follows.

package myfirstportlet;

public class MyFirstPortletPortletSessionBean {private String myName = "";private String greeting = "";

}

3. Right-click in the MyFirstPortletSessionBean window and select Source >Generate Getters and Setters, as shown below.Figure 12. Generate Getters and Setters

ibm.com/developerWorks developerWorks®

WebSphere Portal V6© Copyright IBM Corporation 1994, 2007. All rights reserved. Page 15 of 41

Page 16: Hola Mundo Con Websphere Portal 6

4. Check the boxes for the variables greeting and myName, as shown inFigure 13. This wizard generates the getters and setters for bothvariables. Click OK.Figure 13. Select Getters and Setters to create

developerWorks® ibm.com/developerWorks

WebSphere Portal V6Page 16 of 41 © Copyright IBM Corporation 1994, 2007. All rights reserved.

Page 17: Hola Mundo Con Websphere Portal 6

5. Save the file by pressing Ctrl-S.

You can see errors in the other classes. Don't worry, you will fix these errors later.

Step 4. Modify the JSP in MyFirstPortlet

In this step, modify the JSP file and create a form with two text boxes and a submitbutton.

1. In Project Explorer, expand MyFirstPortlet > WebContent >MyFirstPortlet > JSP > html and double click the fileMyFirstPortletView.jsp.

2. Modify the JSP file with the code shown below, and save the changes.The sample code that is generated with the project is very similar to the

ibm.com/developerWorks developerWorks®

WebSphere Portal V6© Copyright IBM Corporation 1994, 2007. All rights reserved. Page 17 of 41

Page 18: Hola Mundo Con Websphere Portal 6

code you need to type in. To reduce the chances of making an error,focus on the items in bold in the code below.

• Change the variable FORM_TEXT to FORM_NAME

• Create a new variable similar to FORM_TEXT calledFORM_GREETING

• Change the if statement to also check if the strings storedsessionBeans are empty

As you type, you can also use the Code Assist (Ctrl-Space) function tohelp complete the keywords.

<%@ page session="false" contentType="text/html" import="java.util.*,javax.portlet.*,myfirstportlet.*" %>

<%@taglib uri="http://java.sun.com/portlet" prefix="portlet" %><portlet:defineObjects/><%MyFirstPortletPortletSessionBean sessionBean =(MyFirstPortletPortletSessionBean)renderRequest.getPortletSession().getAttribute(MyFirstPortletPortlet.SESSION_BEAN);%>

<DIV style="margin: 12px; margin-bottom: 36px">

<%String formName = sessionBean.getMyName();String formGreeting = sessionBean.getGreeting();if( formName.length()>0 && formGreeting.length() > 0) {%>'<%=formName%>' wants to wish you '<%=formGreeting %>'.<%}%>

<FORM method="POST" action="<portlet:actionURL/>">

<LABEL for="<%=MyFirstPortlet.FORM_NAME%>">Enter Your Name:</LABEL><BR><INPUT name="<%=MyFirstPortlet.FORM_NAME%>" type="text"/><BR><LABEL

for="<%=MyFirstPortletPortlet.FORM_GREETING%>">Greeting:</LABEL><BR><INPUT name="<%=MyFirstPortlet.FORM_GREETING%>"

type="text"/><BR><INPUT name="<%=MyFirstPortlet.FORM_SUBMIT%>" type="submit"

value="Submit"/>

</FORM>

</DIV>

3. Save the file by pressing Ctrl-S.

Step 5. Modify the MyFirstPortlet.java file

In this step, you'll modify the MyFirstPortlet.java file to support the changes we madein the JSP and the sessionbean in previous steps.

1. In Project Explorer, expand MyFirstPortlet > Java Resources: src >

developerWorks® ibm.com/developerWorks

WebSphere Portal V6Page 18 of 41 © Copyright IBM Corporation 1994, 2007. All rights reserved.

Page 19: Hola Mundo Con Websphere Portal 6

com.ibm.myfirstportlet and double click the file MyFirstPortlet.java.

2. Modify the code, as shown below.

• Add the FORM_NAME and FORM_GREETING variable.

• Delete the variable FORM_TEXT (this variable was part of thegenerated sample code).

public static final String VIEW_JSP = "MyFirstPortletPortletView";public static final String SESSION_BEAN = "MyFirstPortletPortletSessionBean";public static final String FORM_SUBMIT = "MyFirstPortletPortletFormSubmit";public static final String FORM_NAME = "MyFirstPortletPortletFormName";public static final String FORM_GREETING = "MyFirstPortletPortletFormGreeting";

• Modify the processAction() method, as shown below.

public void processAction(ActionRequest request, ActionResponse response)throws PortletException, java.io.IOException {

if( request.getParameter(FORM_SUBMIT) != null ) {// Set form text in the session beanMyFirstPortletPortletSessionBean sessionBean = getSessionBean(request);

if( sessionBean != null ) {sessionBean.setMyName(request.getParameter(FORM_NAME));sessionBean.setGreeting(request.getParameter(FORM_GREETING));

}}

4. Save the file by pressing Ctrl-S.

Step 6. Run MyFirstPortlet in the WebSphere Portal TestEnvironment

In Rational Application Developer, you can locally test and debug your portletapplications using the WebSphere Portal Test Environment. In this step, add theMyFirstPortlet Project in the WebSphere Portal v6.0 Test Environment (PTE) andthen run the project in the PTE.

1. In the Servers pane, right-click WebSphere Portal v6.0 Server and clickAdd and Remove Projects.Figure 14. Add and Remove Projects in PTE 6.0

ibm.com/developerWorks developerWorks®

WebSphere Portal V6© Copyright IBM Corporation 1994, 2007. All rights reserved. Page 19 of 41

Page 20: Hola Mundo Con Websphere Portal 6

2. Ensure that MyFirstPortlet is listed in the Configured Projects pane.

• If it is not, highlight MyFirstPortlet and click Add >, as shown below.Click Finish.Figure 15. Add MyFirstPortletEAR to PTE

developerWorks® ibm.com/developerWorks

WebSphere Portal V6Page 20 of 41 © Copyright IBM Corporation 1994, 2007. All rights reserved.

Page 21: Hola Mundo Con Websphere Portal 6

• In the Servers pane, observe that MyFirstPortlet is added to theWebSphere Portal v6.0 server @localhost.Figure 16. Servers

4. Start the WebSphere PTE on your local machine.

• From Servers, right-click WebSphere Portal v6.0 Server and clickPublish, as shown below. This starts the WebSphere Portal v6.0server, and publishes the MyFirstPortlet to the server. It might take afew minutes to complete this step.Figure 17. Start the PTE

• When the WebSphere PTE has started and the MyFirstPortlet ispublished, an indication in Servers in the Status section appears.Figure 18. PTE start status

ibm.com/developerWorks developerWorks®

WebSphere Portal V6© Copyright IBM Corporation 1994, 2007. All rights reserved. Page 21 of 41

Page 22: Hola Mundo Con Websphere Portal 6

6. You can test the MyFirstPortlet on the WebSphere PTE right here in yourlocal development environment.

• Right-click WebSphere Portal v6.0 Server in Servers and chooseOpen Portal.Figure 19. Open Portal

• MyFirstPortlet is launched in the IBM WebSphere PTE window inRational Application Developer.Figure 20. MyFirstPortlet launched in PTE

developerWorks® ibm.com/developerWorks

WebSphere Portal V6Page 22 of 41 © Copyright IBM Corporation 1994, 2007. All rights reserved.

Page 23: Hola Mundo Con Websphere Portal 6

8. Test the portlet by typing in your name, and a special greeting for aspecial someone. Since April first just passed, type in Happy AprilFool's Day!.

• In Enter Your Name, type your name. In Greetings, type HappyApril Fool's Day. Click Submit.Figure 21. Testing MyFirstPortlet in PTE

• Observe that the greeting is displayed in your portlet.Figure 22. MyFirstPortlet displays a message

ibm.com/developerWorks developerWorks®

WebSphere Portal V6© Copyright IBM Corporation 1994, 2007. All rights reserved. Page 23 of 41

Page 24: Hola Mundo Con Websphere Portal 6

10. Click Submit again in the form. Leave both text boxes blank this time.What happens?

11. Stop the Portal Test Server. Right-click WebSphere Portal v6.0 Serverand select Stop.

Step 7. Export MyFirstPortlet

At this point it's time to export your portlet.

1. In Project Explorer, right-click MyFirstPortlet. Select Export > WAR file.Figure 23. Export WAR file

developerWorks® ibm.com/developerWorks

WebSphere Portal V6Page 24 of 41 © Copyright IBM Corporation 1994, 2007. All rights reserved.

Page 25: Hola Mundo Con Websphere Portal 6

2. In Destination, browse to a directory of your choice, as shown in Figure24. Select the check box for Export source files, and click Finish.Figure 24. Export WAR file to specified destination

ibm.com/developerWorks developerWorks®

WebSphere Portal V6© Copyright IBM Corporation 1994, 2007. All rights reserved. Page 25 of 41

Page 26: Hola Mundo Con Websphere Portal 6

Section 6. Exercise 2. Deploy a portlet

In this exercise, you take the role of the WebSphere Portal administrator to installMyFirstPortlet in WebSphere Portal. Then, customize the look and feel of the portlet,and finally grant permission to a new user to use the portlet.

Step 1. Start WebSphere Portal

Start the WebSphere Portal Server if it is not already running.

Would you like to see these steps demonstrated for you?

Show me

To start the service on Windows, click Start > Settings > Control Panel >Administrative Tools > Services > IBM WebSphere Application Server V6 -WebSphere_Portal_ ...

Step 2. Log in to WebSphere Portal

1. Open a browser and enter the URLhttp://<hostname>:<port_number>/wps/portal where

developerWorks® ibm.com/developerWorks

WebSphere Portal V6Page 26 of 41 © Copyright IBM Corporation 1994, 2007. All rights reserved.

Page 27: Hola Mundo Con Websphere Portal 6

<hostname> is the fully qualified host name of the machine that isrunning WebSphere Portal, and <port_number> is the port number (it isdisplayed on the confirmation panel during your install).For example, http://www.ibm.com:10038/wps/portal

2. Log in using your WebSphere Portal administrator user ID and password.

Step 3. Install MyFirstPortlet in WebSphere Portal

1. Select Administration, from the top right.Figure 25. WebSphere Portal Welcome Page

2. In the left pane, select Portlet Management > Web Modules. ClickInstall on the Manage Web Modules page.Figure 26. Manage Web Modules

3. The Installing a Web Module wizard appears, as shown in Figure 27.Browse to the directory where you exported the MyFirstPortlet.war filefrom Exercise 1 of this tutorial, or where you downloaded theMyFirstPortlet.war from the Downloads section.Figure 27. Installing a Web Module

ibm.com/developerWorks developerWorks®

WebSphere Portal V6© Copyright IBM Corporation 1994, 2007. All rights reserved. Page 27 of 41

Page 28: Hola Mundo Con Websphere Portal 6

4. In Step 2 of the wizard, review the portlet application that is going to beinstalled. Click Finish.

5. Once the installation is complete, a message indicates the installationwas successful at the top of the page, as shown below. MyFirstPortlet.warnow appears in the list of Web modules shown on the page.Figure 28. Portlet successfully installed

Step 4. Add MyFirstPortlet to a WebSphere Portal page

Although you have successfully installed MyFirstPortlet in WebSphere Portal, youcan not see the portlet because it has not been added to a Portal page yet.

There are two ways to add a portlet to a Portal page: Portlet Palette or Edit PageLayout. In this step, add the portlet to a WebSphere Portal Welcome page using theEdit Page Layout.

1. In the left pane, select Portal User Interface > Manage Pages as shownbelow.Figure 29. Manage Pages

developerWorks® ibm.com/developerWorks

WebSphere Portal V6Page 28 of 41 © Copyright IBM Corporation 1994, 2007. All rights reserved.

Page 29: Hola Mundo Con Websphere Portal 6

2. In the Manage Pages window, select Context Root, then Home.

3. Locate the Welcome page in the list (it should be first) and click the EditPage Layout button corresponding to this page. By clicking , you can editthe layout of the page.Figure 30. Manage Welcome Page

4. Add MyFirstPortlet to the top right in the Welcome page by clicking onAdd Portlets in the right column in the layout.Figure 31. Edit Layout

ibm.com/developerWorks developerWorks®

WebSphere Portal V6© Copyright IBM Corporation 1994, 2007. All rights reserved. Page 29 of 41

Page 30: Hola Mundo Con Websphere Portal 6

5. A search screen renders on the page to let you search for the portlet youwant to add. As shown in Figure 32, type MyFirstPortlet in theSearch text box.Figure 32. Edit Layout search window

6. In the search results, select the MyFirstPortlet check box and click OK.Figure 33. Edit Layout search results

7. MyFirstPortlet portlet appears in the right column of the layout page.Figure 34. Edit Layout with MyFirstPortlet added

8. To further customize the Welcome page, move MyFirstPortlet to the top ofthe right column. Click the Move portlet up button to move the portlet upon the page until it appears at the very top of the column.

developerWorks® ibm.com/developerWorks

WebSphere Portal V6Page 30 of 41 © Copyright IBM Corporation 1994, 2007. All rights reserved.

Page 31: Hola Mundo Con Websphere Portal 6

9. Click Done.

10. At the bottom left of the page, click Home, as shown below, to exit theAdministration pages and go to the Welcome page.Figure 35. Go to Welcome Page

11. MyFirstPortlet appears at the top right.Figure 36. MyFirstPortlet added to Welcome Page

Step 5. Change the look and feel of MyFirstPortlet

In WebSphere Portal you can customize the look and feel of a Portal page byapplying a new theme and skin. A theme provides the layout and appearance of aportal, such as the color and fonts used. A skin represents the border surroundingthe portlet component.

In this step, apply a new skin type called Thin Skin to the MyFirstPortlet portlet.

1. Select Portal User Interface > Manage Pages.

ibm.com/developerWorks developerWorks®

WebSphere Portal V6© Copyright IBM Corporation 1994, 2007. All rights reserved. Page 31 of 41

Page 32: Hola Mundo Con Websphere Portal 6

2. In the Manage Pages window, locate the Welcome page in the list (itshould be first) and click the Edit Page Layout button corresponding tothis page. By clicking , you'll be able to edit the page, including theappearance.

3. Select Appearance in the upper left corner. You can see the layout of theWelcome page. In the MyFirstPortlet box, select Thin Skin as the skin, asshown below. Click Done.Figure 37. Appearance portlet

4. Exit the Administration pages by clicking Home at the bottom-left corner.Notice that the skin of MyFirstPortlet has now changed, as shown inFigures 38 and 39 below.Figure 38. MyFirstPortlet using Default Skin

Figure 39. MyFirstPortlet with Thin Skin

developerWorks® ibm.com/developerWorks

WebSphere Portal V6Page 32 of 41 © Copyright IBM Corporation 1994, 2007. All rights reserved.

Page 33: Hola Mundo Con Websphere Portal 6

5. Exit WebSphere Portal by clicking Log out in the upper-right corner.

Step 6. Access MyFirstPortlet as a new user

In this step, enroll in WebSphere Portal as a new user by filling out your own profileinformation, then log into Portal using the new ID.

1. Open a browser and enter the URLhttp://<hostname>:<port_number>/wps/portal where<hostname> is the fully qualified host name of the machine that isrunning WebSphere Portal, and <port_number> is the port number.For example, http://www.ibm.com:10038/wps/portal

2. Click the Sign up link above Log in, or the Sign up now link on the right.

3. Fill in your user profile information to enroll in WebSphere Portal. You canchoose your own user ID in Portal. In the example in Figure 40, the UserID registered is John.Figure 40. Sign up as new user in WebSphere Portal

ibm.com/developerWorks developerWorks®

WebSphere Portal V6© Copyright IBM Corporation 1994, 2007. All rights reserved. Page 33 of 41

Page 34: Hola Mundo Con Websphere Portal 6

4. Click OK. A message is displayed saying the user was createdsuccessfully.Figure 41. User created successfully in Portal

5. Log in to Portal using the newly created user John.

6. Do you see MyFirstPortlet on the Welcome page? MyFirstPortlet is not onuser John's Welcome page. When you installed the MyFirstPortlet inWebSphere Portal, you did not grant any users with access permission tothe portlet. That is why you can only view the portlet as the administrator.No other users can view MyFirstPortlet in the Welcome page at this point.

7. Exit WebSphere Portal by clicking Log out in the upper-right corner.

Step 7. Grant permission to All Authenticated Users to

developerWorks® ibm.com/developerWorks

WebSphere Portal V6Page 34 of 41 © Copyright IBM Corporation 1994, 2007. All rights reserved.

Page 35: Hola Mundo Con Websphere Portal 6

MyFirstPortlet

1. Log in to WebSphere Portal as the Administrator again.

2. Select Administration on your right.

3. Select Access > Resource Permissions.

4. In the Resource Permissions page, as shown below, click Portlets.Figure 42. Resource Permissions Portlet

5. Enter MyFirstPortlet as the search criteria. Click Search.Figure 43. Search for MyFirstPortlet in Resource Permissions

6. Click the Assign Access button displayed beside the MyFirstPortletresource.Figure 44. Assign access to MyFirstPortlet

ibm.com/developerWorks developerWorks®

WebSphere Portal V6© Copyright IBM Corporation 1994, 2007. All rights reserved. Page 35 of 41

Page 36: Hola Mundo Con Websphere Portal 6

7. Click the Edit Role button beside the Role User.Figure 45. Modify Access for a Role

8. There are currently no members in this role, as shown below. Thisexplains why you weren't able to see MyFirstPortlet when you logged inas a user that is not an administrator (for example, John).Figure 46. Members with access are shown

9. Click the Add button, as shown above, to add members to this role.

10. Select the All Authenticated Portal Users check box. Click OK.Figure 47. Give access to all Authenticated Portal Users

developerWorks® ibm.com/developerWorks

WebSphere Portal V6Page 36 of 41 © Copyright IBM Corporation 1994, 2007. All rights reserved.

Page 37: Hola Mundo Con Websphere Portal 6

11. Log out of Portal, and log in as a user that is not an administrator. Forexample, John.Figure 48. Log in as a user

12. What do you see in the Welcome Page?Figure 49. MyFirstPortlet accessible to all users

ibm.com/developerWorks developerWorks®

WebSphere Portal V6© Copyright IBM Corporation 1994, 2007. All rights reserved. Page 37 of 41

Page 38: Hola Mundo Con Websphere Portal 6

developerWorks® ibm.com/developerWorks

WebSphere Portal V6Page 38 of 41 © Copyright IBM Corporation 1994, 2007. All rights reserved.

Page 39: Hola Mundo Con Websphere Portal 6

Downloads

Description Name Size Download method

Sample for the exercises in this tutorial MyFirstPortlet.war10KB HTTP

Information about download methods

ibm.com/developerWorks developerWorks®

WebSphere Portal V6© Copyright IBM Corporation 1994, 2007. All rights reserved. Page 39 of 41

Page 40: Hola Mundo Con Websphere Portal 6

Resources

Learn

• New to WebSphere Portal provides a high level overview of WebSphere Portal.

• IBM WebSphere Portal Business Solutions: This catalog has news, informationabout solutions, samples, demos, and much more.

• Read the JSR 168: Portlet Specification.

• Gartner: Magic Quadrant for Horizontal Portal Products, 2006: Learn moreabout the horizontal portal product market.

• Opening the door to a service oriented architecture IBM Workplace, Portal andCollaboration products for an SOA.

• SOA describes SOA services and products from IBM.

• Learn more about the IBM SOA Foundation.

• One of IBM Redbooks, IBM Rational Application Developer V6 PortletApplication Development and Portal Tools, provides an overview and hands-onscenarios to help you design, develop and implement portlet applications usingRational Application Developer V6.0 and the provided Portal Tools.

• Read about the OASIS Web Services for Remote Portlet (WSRP) technicalcommittee, which is standardizing presentation-oriented Web services for useby aggregating intermediaries, such as portals.

• The IBM WebSphere Portal Version 6.0 Information Center explains HowWSRP works.

• "Architecting on demand solutions, Part 18: Use IBM WebSphere IntegrationDeveloper to assemble components" (developerWorks, Feb 2006) explains howto set up human tasks, business process integration, and security.

• IBM WebSphere Portlet Factory: Read about the features and benefits.

• A Portal May Be Your First Step to Leverage SOA: This Gartner ManagementUpdate explains that to implement a service-oriented architecture (SOA),companies must consider what steps and technologies are involved. Portalsrepresent a logical first step in the process.

Get products and technologies

• Download a free, trial version of Rational Application Developer V7 to use withthis tutorial.

• Download a free, trial version of WebSphere Portal Express V6 to use with thistutorial.

• Download IBM product evaluation versions and get your hands on applicationdevelopment tools and middleware products from DB2®, Lotus®, Rational®,Tivoli®, and WebSphere®.

developerWorks® ibm.com/developerWorks

WebSphere Portal V6Page 40 of 41 © Copyright IBM Corporation 1994, 2007. All rights reserved.

Page 41: Hola Mundo Con Websphere Portal 6

Discuss

• Participate in the discussion forum for this content.

• Check out developerWorks blogs and get involved in the developerWorkscommunity.

About the authors

Laura ChanLaura Chan is an Advisory Software Developer at the IBM Software Group ScenarioAnalysis Lab. Her current responsibility is to lead the team to deliver customerrelevant solutions to improve cross-brand integration capability of Software Groupproducts. Her past experiences also include product development, customer support,services and marketing.

Janet LeeJanet joined IBM full time after graduating with a Bachelor of Applied Science inComputer Engineering degree from the University of Waterloo. She has previouslyworked at various IBM software functions within the Toronto IBM Software lab,including the DB2 Regression team and the Java Just-in-Time CompilerDevelopment team. Janet is currently a part of Software Group Strategy, ScenarioAnalysis Lab, where she is implementing a customer-based scenario named theEmployee Workplace, using various IBM products such as DB2 Content Manager,DB2 Document Manager, DB2 Records Manager, WebSphere Information IntegratorOmniFind Edition, and WebSphere Portal.

Trademarks

ibm.com/developerWorks developerWorks®

WebSphere Portal V6© Copyright IBM Corporation 1994, 2007. All rights reserved. Page 41 of 41