# Step 4: Create Portlets that Communicate

In this step, you will use Page Flows to create one portlet that listens to another portlet. This particular example shows two ways of passing information from one portlet to the next: using a Form or using the Request Parameter. They both use the Page Flow as the means of connecting two portlets. By configuring the portlets to listen to one another, forms and requests instantiated by a JSP in one Page Flow can be sent to both Page Flows. This allows the listening portlet to update itself.

The tasks in this step are:

- Create two Page Flows
- Edit Page Flows
- Create and Place Portlets in Portal
- Set Properties on Portlets

Note: Case sensitivity in naming directories and files in this step is important, especially if you are copying and pasting the code samples from this step.

Create two Page Flows

In this task, two Page Flows are created within the portlets directory; one called j1, the other called j2.

1. Right-click on the portlets directory, and select Create New Page Flow.
2. Name the Page Flow j1, and select Basic Page Flow (with no Java Controls.)
3. Repeat this step, creating a Page Flow called j2.

> NOTE: WebLogic Workshop automatically creates the Page Flow controller class, prepending the name of the Page Flow to the Controller.jpf filename.

Edit Page Flows

This example requires modifying the Page Flows so that they can be notified by the listening portlet. The j1 Page Flow will receive form data from its simpleForm.jsp. The j2 Page Flow (in a listening portlet) will also receive notifications, and store the data, so its portlet can retrieve and display it.

Note: Use Flow View to set up actions, then touch up the code using the Source View.

#### Edit j1 Page Flow

In the following steps, you will add a reference to a JSP that does not yet exist. You will create this JSP later in this topic.

1. Open the j1Controller.jpf and make sure the package declaration is correct:

   >     package portlets.j1;

2. Edit the begin method, adding a forward named simpleForm:

   >           /**
   >             * @jpf:action
   >             * @jpf:forward name="simpleForm" path="simpleForm.jsp"
   >             */
   >             protected Forward begin()
   >             {
   >             return new Forward( "simpleForm" );
   >             }

3. Add the following three actions to the Page Flow, in front of the Page Flow's closing bracket "}":

   >           /**
   >           * @jpf:action
   >           * @jpf:forward name="simpleForm" path="simpleForm.jsp"
   >           */
   >           protected Forward passString1( Form form )
   >           {
   >           String passedText = form.getText();
   >           	return new Forward( "simpleForm" );
   >           }

   >     		/**
   >           * @jpf:action
   >           * @jpf:forward name="simpleForm" path="simpleForm.jsp"
   >           */
   >           protected Forward passString2()
   >           {
   >           	return new Forward( "simpleForm" );
   >           }

   >           /**
   >           * @jpf:action
   >           * @jpf:forward name="simpleForm" path="simpleForm.jsp"
   >           */
   >           protected Forward passString3()
   >           {
   >           	return new Forward( "simpleForm" );
   >           }

4. Make sure the following Form inner class appears at the end of the Page Flow file, in front of the Page Flow's closing bracket "}":

           public static class Form extends FormData
       	    {
       			private String text;
       			public void setText( String text )
               	{
               		this.text = text;
               	}
               	public String getText()
               	{
               		return this.text;
               	}
               }

5. Press Alt+Enter to add an import statement for the com.bea.wlw.netui.pageflow.FormData class.

#### Edit j2 Page Flow

In the following steps, you will add a reference to a JSP that does not yet exist. You will create this JSP later in this topic.

1. Open the j2Controller.jpf and make sure the package declaration is correct:

   >     package portlets.j2;

2. This Page Flow receives data from the j1 portlet and stores it so it can be displayed in the j2 portlet. This directs the j2 portlet to listen to the j1 portlet. Add a variable declaration to the beginning of the class to hold the text from the j1 Page Flow:

   >     public String thePassedText = "";

3. Edit the begin method, adding a forward named listening, which points to the listening.jsp we'll create later. The listening.jsp will display in the j2 portlet the data received from the j2 Page Flow.

   >           /**
   >             * @jpf:action
   >             * @jpf:forward name="listening" path="listening.jsp"
   >             */
   >             public Forward begin()
   >             {
   >            	return new Forward( "listening" );
   >             }

4. The first action we'll now add to the Page Flow has the same signature as the j1 passString1 method. When the j2 portlet is listening to j1, both the j1.passString1 method and the j2.passString1 methods are called.

   >           /**
   >           * @jpf:action
   >           * @jpf:forward name="listening" path="listening.jsp"
   >           */
   >           public Forward passString1(portlets.j1.J1Controller.Form form)
   >           {
   >           thePassedText = form.getText();
   >           return new Forward( "listening" );
   >           }

5. If prompted by the tooltip, press Alt+Enter to import javax.servlet.http.HttpServletRequest.
6. To illustrate other ways to pass strings between Page Flows, add passString2 and passString3 to the Page Flow for portlet j2.

- The passString2 method uses a request to send the data.
- The passString3 method uses the same portlet communication approach as passString2; the only difference is that the j2 Page Flow sends data to its JSP portlet using an attribute.

>     		/**
>             * @jpf:action
>             * @jpf:forward name="listening" path="listening.jsp"
>             */
>             public Forward passString2()
>             {
>     			thePassedText = getRequest().getParameter("string2");
>             	return new Forward( "listening" );
>             }

>             /**
>             * @jpf:action
>             * @jpf:forward name="listening" path="listening.jsp"
>             */
>             public Forward passString3()
>             {
>     			HttpServletRequest request = getRequest();
>     			String attribValue = request.getParameter("string3");
>     			request.setAttribute("string3", attribValue);

>     			return new Forward( "listening" );
>             }

Create Additional JSPs

In this step, we'll create the "From" JSP for the j1 portlet, and the "To" JSP used by the j2 portlet.

#### Create listening.jsp

1. In the Application palette, right-click on the portlets/j2 folder and select New JSP file.
2. Name the file listening.jsp.
3. Open the source view, and insert the following code:

   >     <%@ page contentType="text/html;charset=UTF-8" language="java" %>
   >     <%@ taglib uri="netui-tags-html.tld" prefix="netui" %>
   >     <h3>"To" JSP</h3>
   >     Get text from jpf form = <b><netui:label value="{pageFlow.thePassedText}"/></b>
   >     <br/>
   >     <br/>
   >     Using {request.string3} databinding = <b> <netui:label value="{request.string3}"/>
   >     </b> <br/>
   >     <% String attribName = "string3"; %>
   >     Using request.getAttribute() = <%=request.getAttribute(attribName)%>
   >     <br/>
   >     <br/>

4. Save listening.jsp.

#### Create simpleForm.jsp

1. In the Application palette, right-click on the portlets/j1 folder and select New JSP file.
2. Name this new JSP file simpleForm.jsp.
3. Switch to Source View.
4. Delete the "New Web Application Page" text.
5. From the NetUI Palette, drag a TextBox object into the paragraph, then a Button object right below it. In the New Button dialog box that appears, enter a Value of Submit.
   Manually enter opening and closing <netui:form> tags around the text box and button (selecting an action of "none"). Initially, the source for this portion of the jsp will look something like this:

   >         <netui:form action="none">
   >         <netui:textBox></netui:textBox>
   >         <netui:button>Submit</netui:button>
   >         </netui:form>

6. Edit the source of the fragment you created: Add the passString1 action to the form, and designate a dataSource attribute for the textBox:

   >         <netui:form action="passString1">
   >         <netui:textBox dataSource="text"/>
   >         <netui:button>Submit</netui:button>
   >         </netui:form>

> Note: You can click in each tag and type the action and dataSource attribute values in the Property Editor window.

7. From the NetUI Palette, drag an anchor element just after the closing </p> (but before the closing </body> tag). The Form Wizard appears. Invoke the passString2 action, labeling it "PassString2".
8. From the NetUI Palette, drag a parameter element just in front of the closing </netui:anchor> tag. Change the name to "string2" and the value to "STRING 2". The tags should look like this:

> >     <netui:anchor action="passString2">Pass String 2
> >     <netui:parameter name="string2" value="STRING 2"/>
> >     </netui:anchor>

9. Copy the previous code block and paste it below the previous code block and in front of the closing </body> tag. Change the values from 2 to 3 to look like the following code:

   >     	  <netui:anchor action="passString3">Pass String 3
   >     	  <netui:parameter name="string3" value="STRING 3"/>
   >     	  </netui:anchor>

10. At the top of the JSP content area, add the following HTML:
    <h3>"From" JSP</h3>
11. The Design View of simpleForm.jsp should now look something like this:

NOTE: As you edit the page flow, you can verify the navigation by opening a viewer that will preview the pages without the portal. To do this, click on the Start arrow from the WebLogic Workshop toolbar, or press CTRL+F5.

Create and Place Portlets in the Portal

To view the portlets, they need to be placed in a portal.

1. Open the portal created in Step 1 in Design View, select a placeholder, and drag the Page Flows into placeholders on a page, using the Portlet Wizard to create new portlets from each Page Flow.
2. Use the Property designer to edit the Title attribute for each portlet.
3. From the Portal designer, the portal should now look something like this:

Set Properties on Portlets

When a portlet is placed inside a portal, it is assigned an instanceLabel which the framework uses to keep track of individual portlet placement. In order to make this sample work, the listenTo attribute on portlet j2 needs to be set to the instanceLabel of the j1 portlet on your portal.

1. Open the portal, select the j1 portlet and verify its instanceLabel. In this example, it is portlet_4_4.

2. Now open the j2 portlet by double-clicking on it within the portal. The listenTo attribute for this portlet needs to be set to the instanceLabel for the j1 portlet in your portal.
3. Save all files and start the server.
4. Preview the portal by navigating to http://<host>:<port>YourWebappp/portal.portal.
5. The resulting portal should look something like this:

Click one of the following arrows to navigate through the tutorial: