1. チュートリアル

1.1. 基本型ポートレットの作成

1.1.1. ポートレットプロジェクトの作成

メニューから、ファイル新規プロジェクト を選択し、新規プロジェクトダイアログを表示します。


図1.1.1-1


新規プロジェクトダイアログの一覧中から ポータルポートレットプロジェクト を選択し、 次へ をクリックします。


図1.1.1-2



新規ポットレートプロジェクトページで以下のように指定し、完了 をクリックします。ポートレットプロジェクトが生成されます。
表1.1.1-1
項目
プロジェクト名 JSPPortlet
ターゲット・ランタイム WebOTX Portal V9(Local Default)
ポートレットバージョン V2.0(JSR286)


図1.1.1-3



1.1.2. ポートレットの作成

JSPPortlet プロジェクトの右クリックメニュー 新規その他 を選択し、新規ダイアログを表示します。


図1.1.2-1



新規 ダイアログで ポータルポートレット を選択し、次へ をクリックします。


図1.1.2-2



ポートレットの作成 ページで以下の内容を指定し、次へ をクリックします。
表1.1.2-1
項目
ポートレット名 JSPPortlet
ポートレット型 JSP/HTMLポートレット
パッケージ com.nec.portlet
クラス名 JSPPortlet


図1.1.2-3

ポートレットの基本情報設定 ページで個人設定ONにし、 完了 をクリックします。


図1.1.2-4

以下のような構成のポートレットが生成されます。


図1.1.2-5

JSPPortletEdit.jspファイルは以下のように編集します。
<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet"%>
<%@taglib uri="http://www.nec.com/webotx/portlet" prefix="otxp"%>
<%@ page language="java" contentType="text/html;charset=utf-8"
session="false" import="java.util.*,javax.portlet.*,com.nec.portlet.*"%>
<portlet:defineObjects />
<portlet:actionURL var="url" portletMode="view"/>
<form action="${url}" method="post">
Input message:
<input type="text" name="message"/>
<input type="submit" name="send" value="Send"/>
</form>

JSPPortletView.jspファイルは以下のように編集します。
<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet"%>
<%@taglib uri="http://www.nec.com/webotx/portlet" prefix="otxp"%>
<%@ page language="java" contentType="text/html;charset=utf-8" session="false" import="java.util.*,javax.portlet.*,com.nec.portlet.*"%>
<portlet:defineObjects/>
<%
String message = renderRequest.getParameter("message");
if (message != null) {
%>
<p><%=message %></p>
<%
}
%>

JSPPortlet.javaファイルは以下のように編集します。

package com.nec.portlet;
import java.io.IOException;
import javax.portlet.ActionRequest;
import javax.portlet.ActionResponse;
import javax.portlet.PortletException;
import javax.portlet.PortletRequestDispatcher;
import javax.portlet.RenderMode;
import javax.portlet.RenderRequest;
import javax.portlet.RenderResponse;

public class JSPPortlet extends javax.portlet.GenericPortlet {
  public void doView(RenderRequest request, RenderResponse response) throws PortletException, IOException {
    response.setContentType(request.getResponseContentType());
    String viewpage = "";
    viewpage = getPortletConfig().getInitParameter("ViewPage");
    PortletRequestDispatcher rd = getPortletContext().getRequestDispatcher(viewpage);
    rd.include(request, response);
  }
  
  public void doEdit(RenderRequest request, RenderResponse response) throws PortletException, IOException {
    response.setContentType(request.getResponseContentType());
    String editpage = getPortletConfig().getInitParameter("EditPage");
    PortletRequestDispatcher rd = getPortletContext().getRequestDispatcher(editpage);
    rd.include(request, response);
  }
 
  @Override
  public void processAction(ActionRequest request, ActionResponse response) throws PortletException, IOException {
    String message = request.getParameter("message");
    if (message == null) {
      message = "";
    }
    response.setRenderParameter("message", message);
  }
}

1.1.3. ポートレットの配備

JSPPortletプロジェクトの右クリックメニュー 実行サーバーで実行 を選択します。


図1.1.3-1



設定が済んだポータルサーバを利用したい場合、既存のサーバーを選択 を指定し、 使用するサーバーの選択 でポータルサーバを選択し、完了 をクリックします 。


図1.1.3-2



新規にポータルサーバーを作成したい場合、手動で新規サーバーを定義 を指定し、 サーバーのタイプを選択 でポータルサーバを選択し、次へ をクリックします。


図1.1.3-3


Memo
サーバの設定については 1.2.5. テスト用サーバの設定 をご参照下さい。


WebOTX ポータルサーバーの新規作成 ページにで以下の内容を指定し、完了 をクリックします。
表1.1.3-1
項目
サーバーユーザー名 admin
サーバーパスワード adminadmin
ユーザードメイン名 domain1
ユーザードメインポート 6212
サーバー接続用プロトコル rmi
ユーザードメインのHTTPポート番号 80


図1.1.3-4



Developer's Studioの内蔵するWebブラウザーが立ち上がり、ポータルログイン画面が表示されます。


図1.1.3-5


Caution
ログイン画面が立ち上がらない場合は、http://<サーバ名>/webotxportal/login/ へアクセスして下さい。

1.1.4. ポートレットの実行

ログイン画面でユーザIDとパスワードを入力し、ログイン をクリックします。 WebOTX Portal テスト用サーバの場合のユーザIDとパスワードは以下になります。
表1.1.4-1
項目
ユーザID USER0000
パスワード 空白以外の任意文字


図1.1.4-1


ログインに成功するとポータルサイト画面が表示されます。初期状態はページがない状態ですので、サイト画面で編集 ボタンを押下して「編集モード」に移行します。


図1.1.4-2



追加 タブを押下して新規ページを追加を選択すると 新規ページの作成 ダイアログボックスが表示されるので、 ページ名を入力し 作成 ボタンを押下します。


図1.1.4-3


ポートレットライブラリ をクリックし、カタログ作成ポートレット新規ポートレット作成 をクリックします。


図1.1.4-4


新規ポートレットのプロパティダイアログ でテンプレートにJSPPortlet を選択し OK をクリックします。
作成ポートレット一覧に追加されたら 「+」 をクリックしてポータルページにJSPPortletを追加します。


図1.1.4-5


個人設定 を選択し、個人設定モードを表示します。


図1.1.4-6


Input messageHello world!を入力して、Sendボタンをクリックすると、表示モードに戻ります。


図1.1.4-7


表示モードで個人設定モードで設定した Hello world! が表示されます。


図1.1.4-8


ここまでは、ポートレットの作成からポートレットの実行に渡る一連のチュートリアルです。この他、ポートレットにさまざまな機能を追加することもできます。

1.2. ポートレットフィルターの作成

1.2.1. ポートレットプロジェクトの作成

1.1. 基本型ポートレットの作成 を参照し、FilterPortletというポートレットプロジェクトを作成します。

1.2.2. ポートレットの作成

FilterPortletプロジェクトの右クリックメニュー 新規その他 を選択し、選択画面から ポータルポートレット を選択し、次へ をクリックします。


図1.2.2-1



ポートレットの作成 ページで以下の内容を指定し、完了 をクリックします。
表1.2.2-1
項目
ポートレット名 FilterPortlet
ポートレット型 JSP/HTMLポートレット
パッケージ com.nec.portlet
クラス名 FilterPortlet


図1.2.2-2



1.2.3. ポートレットフィルターの作成

FilterPortletプロジェクトの右メニュー 新規その他 を選択し、選択画面から ポータルポートレットフィルター を選択し、次へ をクリックします。


図1.2.3-1



ポートレットフィルターの作成 ページで以下の内容を指定し、次へ をクリックします。
表1.2.3-1
項目
パッケージ名 com.nec.portlet
名前 Filter


図1.2.3-2



ポートレットフィルターの作成 ページに以下の内容を指定し、完了 をクリックします。
表1.2.3-2
項目
名前 showMes
描画 ONにする
フィルターマッピング filterportlet


図1.2.3-3


 
Filter クラスソースが生成されますので、そのクラスにJavaエディタで以下のコードを追加します。
request.setAttribute("filterMessage", "This is a fiter message!");

追加後のソースは以下のようになります。(追加したソースを太字で示しています)
package com.nec.portlet;
import java.io.IOException;
import javax.portlet.*;
import javax.portlet.filter.*;
public class Filter implements RenderFilter {
    public void init(FilterConfig filterConfig) throws PortletException {
    }
	
    public void doFilter(RenderRequest request, RenderResponse response, FilterChain chain) throws IOException, PortletException {
        request.setAttribute("filterMessage", "This is a fiter message!");
        chain.doFilter(request, response);
    }
	
    public void destroy() {
    }
}

WebContent\jsp\html\FilterPortletView.jspファイルを下記のように変更します。
<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet"%>
<%@ page language="java" contentType="text/html;charset=utf-8" session="false" import="java.util.*,javax.portlet.*,com.nec.portlet.*"%>
<%@ taglib uri="http://www.nec.com/webotx/portlet" prefix="otxp"%>
<portlet:defineObjects/>
<%=renderRequest.getAttribute("filterMessage") %>

1.2.4. ポートレットの配備

配備方法は 1.1.3. ポートレットの配備 を参照してください。

1.2.5. ポートレットの実行

実行方法は 1.1.4. ポートレットの実行 を参照してください。FilterPortletポートレットをポータルページに追加します。
実行後、画面に「This is a filter message!」が表示されます。
         


図1.2.5-1

Memo
ポートレットフィルターとは、ポートレットリクエストとポートレットレスポンスのコンテンツ変換ができる再利用可能なコードです。詳細については、JSR 286: Portlet Specificationより仕様書をダウンロードし、参照してください。


1.3. ポートレットイベントの作成

1.3.1. ポートレットプロジェクトの作成

1.1. 基本型ポートレットの作成 を参照し、 を参照し、EventPortletというポートレットプロジェクトを作成します。

1.3.2. ポートレットの作成

EventPortletプロジェクトの右メニュー 新規その他 を選択し、選択画面から ポータルポートレット を選択し、 次へ をクリックします。


図1.3.2-1


 
ポートレットの作成 ページに以下の内容を指定し、 完了 をクリックします。
表1.3.2-1
項目
ポートレット名 CustomerPortlet
ポートレット型 JSP/HTMLポートレット
パッケージ com.nec.portlet
クラス名 CustomerPortlet


図1.3.2-2


 
上記の手順どおりに、 ポートレットの作成 ページに以下の内容を指定し、2つのポートレットを作成します。
表1.3.2-2
項目
ポートレット名 VoucherPortlet
ポートレット型 JSP/HTMLポートレット
パッケージ com.nec.portlet
クラス名 VoucherPortlet


図1.3.2-3


上記の手順どおりに、 ポートレットの作成 ページに以下の内容を指定し、3つのポートレットを作成します。
表1.3.2-3
項目
ポートレット名 StockPortlet
ポートレット JSP/HTMLポートレット
パッケージ com.nec.portlet
クラス名 StockPortlet


図1.3.2-4


 

1.3.3. ポートレットイベントの作成

メニューから ウィンドウポートレット間連携定義エディタ を選択して、ポートレット間連携定義エディタ画面が表示されます。


図1.3.3-1


 
ポートレットデプロイメント記述子から展開して表示した customerportletvoucherportletstockportlet との3つのポートレットをドラッグ&ドロップでポートレット間連携定義エディタへ追加します。


図1.3.3-2


 
customerportletポートレットの追加ボタン +イベント を選択し、送信イベントを追加します。


図1.3.3-3



図1.3.3-4


 
プロパティビューで以下のようにイベント名を指定します。
表1.3.3-1
項目
イベント名 Customer


図1.3.3-5



Customerの送信イベントの右クリックメニュー 送信イベントの処理の生成 を選択し、表示した 送信イベントに処理の生成 ダイアログで以下の内容を指定します。 はい をクリックします。
表1.3.3-2
項目
「新規メソッドを生成」の「メソッド名」 processAction


図1.3.3-6


 
生成したCustomerPortlet クラスに以下のように変更します。
package com.nec.portlet;

import java.io.*;
import java.util.ArrayList;
import java.util.List;

import javax.portlet.*;

public class CustomerPortlet extends javax.portlet.GenericPortlet {

	public void doView(RenderRequest request, RenderResponse response)
			throws PortletException, IOException {
		response.setContentType(request.getResponseContentType());
		String viewpage = "";

		viewpage = getPortletConfig().getInitParameter("ViewPage");

		String name = request.getParameter("customerName");
		List<CustomerData> data = getCustomerData(name);
		
		request.setAttribute("customerData", data);
		PortletRequestDispatcher rd = getPortletContext().getRequestDispatcher(
				viewpage);
		rd.include(request, response);
	}

	public void processAction(ActionRequest request, ActionResponse response) {
		try {
			String event = "Customer";
			java.lang.String data = null;
			data = request.getParameter("customerName");
			response.setRenderParameter("customerName", data);
			response.setEvent(event, data);
		} catch (Exception e) {
			e.printStackTrace();
		}
	}

	private List<CustomerData> getCustomerData(String name) {
		List<CustomerData> list = new ArrayList<CustomerData>();

		if(name == null || name.equals("")) {
			list.add(new CustomerData(110011,"日電太郎","tarou@nec.co.jp","日本電気株式会社",3));
			list.add(new CustomerData(110022,"玉川花子","hanako@tamagawa.co.jp","玉川精工",1));
			list.add(new CustomerData(110033,"田町次郎","jiro@tamachi.co.jpp","株式会社田町",2));
			
		}else if(name.equals("日電太郎")){
			list.add(new CustomerData(110011,"日電太郎","tarou@nec.co.jp","日本電気株式会社",3));
			
		}else if(name.equals("玉川花子")){
			list.add(new CustomerData(110022,"玉川花子","hanako@tamagawa.co.jp","玉川精工",1));
			
		}else if(name.equals("田町次郎")){
			list.add(new CustomerData(110033,"田町次郎","jiro@tamachi.co.jpp","株式会社田町",2));
		}
		return list;
	}
}

この中、CustomerData クラスを以下のように作成します。
package com.nec.portlet;

public class CustomerData {

	private String name;
	private int id;
	private String email;
	private String companyName;
	private int voucherNum;
	/**
	 * @return the name
	 */
	public String getName() {
		return name;
	}
	/**
	 * @param name the name to set
	 */
	public void setName(String name) {
		this.name = name;
	}
	/**
	 * @return the id
	 */
	public int getId() {
		return id;
	}
	/**
	 * @param id the id to set
	 */
	public void setId(int id) {
		this.id = id;
	}
	/**
	 * @return the email
	 */
	public String getEmail() {
		return email;
	}
	/**
	 * @param email the email to set
	 */
	public void setEmail(String email) {
		this.email = email;
	}
	/**
	 * @return the companyName
	 */
	public String getCompanyName() {
		return companyName;
	}
	/**
	 * @param companyName the companyName to set
	 */
	public void setCompanyName(String companyName) {
		this.companyName = companyName;
	}
	/**
	 * @return the voucherNum
	 */
	public int getVoucherNum() {
		return voucherNum;
	}
	/**
	 * @param voucherNum the voucherNum to set
	 */
	public void setVoucherNum(int voucherNum) {
		this.voucherNum = voucherNum;
	}
	
	public CustomerData(int id,String name,String mail,String company,int num){
		this.id = id;
		this.name = name;
		this.email = mail;
		this.companyName = company;
		this.voucherNum = num;
	}
	
}
CustomerPortlet ポートレットのイベントから VoucherPortlet ポートレットへドラッグ&ドロップします。 VoucherPortlet ポートレットの直下にCustomerの受信イベントが生成されます。
 


図1.3.3-7


 
Customerの受信イベントの右メニュー 受信イベントの処理の生成 を選択し、表示した 受信イベントに処理の生成 ダイアログで以下の内容を指定します。 はい をクリックします。
表1.3.3-3
項目
メソッド名 receiveEvent


図1.3.3-8


 
VoucherPortlet クラスは以下のように生成します。
 
package com.nec.portlet;
import java.io.*;
import javax.portlet.*;
public class VoucherPortlet extends javax.portlet.GenericPortlet {
    public void doView(RenderRequest request, RenderResponse response) throws PortletException, IOException {
	    response.setContentType(request.getResponseContentType());
        String viewpage = "";
        viewpage = getPortletConfig().getInitParameter("ViewPage");
        PortletRequestDispatcher rd = getPortletContext().getRequestDispatcher(viewpage);
        rd.include(request, response);
    }

    public void processAction(ActionRequest request, ActionResponse response) throws IOException {
    }

    @ProcessEvent(name = "Customer")
    public void receiveEvent(EventRequest request, EventResponse response) throws PortletException, IOException {
        Event event = request.getEvent();
        java.lang.String data = (java.lang.String) event.getValue();
    }
}

 
VoucherPortletポートレットの追加ボタン +イベント を選択し、送信イベントを追加します。


図1.3.3-9



図1.3.3-10


 
プロパティビューで以下のようにイベント名を指定します。
表1.3.3-4
項目
イベント名 Voucher


図1.3.3-11


 
送信イベント Voucher の右メニュー 送信イベントの処理を生成 を選択し、表示した 送信イベントに処理の生成 ダイアログで以下の内容を指定します。 はい をクリックします。
表1.3.3-5
項目
「新規メソッドを生成」の「メソッド名」 processAction


図1.3.3-12


 
生成したVoucherPortletクラスに以下のように変更します。
package com.nec.portlet;

import java.io.*;
import java.util.ArrayList;
import java.util.List;

import javax.portlet.*;

public class VoucherPortlet extends javax.portlet.GenericPortlet {

	public void doView(RenderRequest request, RenderResponse response)
			throws PortletException, IOException {
		response.setContentType(request.getResponseContentType());
		String viewpage = "";

		String name = request.getParameter("ViewParam");
		List<VoucherData> data = getVoucherData(name);
		request.setAttribute("voucherData", data);
		viewpage = getPortletConfig().getInitParameter("ViewPage");

		PortletRequestDispatcher rd = getPortletContext().getRequestDispatcher(
				viewpage);
		rd.include(request, response);
	}

	@ProcessEvent(name = "Customer")
	public void receiveEvent(EventRequest request, EventResponse response)
			throws PortletException, IOException {
		Event event = request.getEvent();
		response.setRenderParameter("ViewParam", (java.lang.String) event
				.getValue());
	}

	public void processAction(ActionRequest request, ActionResponse response) {
		try {
			String event = "Voucher";
			java.lang.String data = null;
			data = request.getParameter("voucherId");
			response.setRenderParameter("voucherId", data);
			String hidCustomer = request.getParameter("hidCustomer");
			response.setRenderParameter("ViewParam", hidCustomer);
			response.setEvent(event, data);
		} catch (Exception e) {
			e.printStackTrace();
		}
	}
	
	private List<VoucherData> getVoucherData(String name){
		List<VoucherData> list = new ArrayList<VoucherData>();

		if(name == null || name.equals("")) {
			
		}else if(name.equals("日電太郎")){
			list.add(new VoucherData(1001,"VersaPro J",3,"台",43000));
			list.add(new VoucherData(1002,"LaVie G",2,"台",99435));
			list.add(new VoucherData(1003,"LifeTouch",1,"台",5));
			
		}else if(name.equals("玉川花子")){
			list.add(new VoucherData(1004,"Express Server",3,"台",100000));
			
		}else if(name.equals("田町次郎")){
			list.add(new VoucherData(1005,"WebOTX Portal",1,"ライセンス",3000000));	
			list.add(new VoucherData(1006,"N-07C",4,"台",50000));	
		}
		return list;
		
	}

}

この中、VoucherData クラスを以下のように作成します。
package com.nec.portlet;

public class VoucherData {
	private int id;
	private String name;
	private int num;
	private String unit;
	private int price;
	private int total;
	/**
	 * @return the id
	 */
	public int getId() {
		return id;
	}
	/**
	 * @param id the id to set
	 */
	public void setId(int id) {
		this.id = id;
	}
	/**
	 * @return the name
	 */
	public String getName() {
		return name;
	}
	/**
	 * @param name the name to set
	 */
	public void setName(String name) {
		this.name = name;
	}
	/**
	 * @return the num
	 */
	public int getNum() {
		return num;
	}
	/**
	 * @param num the num to set
	 */
	public void setNum(int num) {
		this.num = num;
	}
	/**
	 * @return the unit
	 */
	public String getUnit() {
		return unit;
	}
	/**
	 * @param unit the unit to set
	 */
	public void setUnit(String unit) {
		this.unit = unit;
	}
	/**
	 * @return the price
	 */
	public int getPrice() {
		return price;
	}
	/**
	 * @param price the price to set
	 */
	public void setPrice(int price) {
		this.price = price;
	}
	/**
	 * @return the total
	 */
	public int getTotal() {
		return total;
	}
	/**
	 * @param total the total to set
	 */
	public void setTotal(int total) {
		this.total = total;
	}
	
	public VoucherData(int id, String name,int num,String unit,int price){
		this.id = id;
		this.name = name;
		this.num = num;
		this.unit = unit;
		this.price = price;
		this.total = price * num;
	}

}

VoucherPortlet ポートレットの Voucher イベントから ScockPortlet ポートレットへドラッグ&ドロップします。 StockPortlet ポートレットの直下にVoucherの受信イベントが生成されます。


図1.3.3-13


 
StockPortlet イベントの右メニュー 受信イベントの処理を生成 を選択し、表示した 受信イベントに処理の生成 ダイアログで以下の内容を指定します。 はい をクリックします。
表1.3.3-6
項目
メソッド名 receiveEvent


図1.3.3-14


 
StockPortletクラスのコードは以下のように変更します。
package com.nec.portlet;

import java.io.*;
import java.util.ArrayList;
import java.util.List;

import javax.portlet.*;

public class StockPortlet extends javax.portlet.GenericPortlet {

	public void doView(RenderRequest request, RenderResponse response)
			throws PortletException, IOException {
		response.setContentType(request.getResponseContentType());
		String viewpage = "";

		String id = request.getParameter("stockId");
		if(id == null || id.equals("")){
			id = "0";
		}
		List<StockData> data = getVoucherData(Integer.valueOf(id));
		request.setAttribute("stockData", data);
		viewpage = getPortletConfig().getInitParameter("ViewPage");

		PortletRequestDispatcher rd = getPortletContext().getRequestDispatcher(
				viewpage);
		rd.include(request, response);
	}

	@ProcessEvent(name = "Voucher")
	public void receiveEvent(EventRequest request, EventResponse response)
			throws PortletException, IOException {
		Event event = request.getEvent();
		response.setRenderParameter("stockId", (java.lang.String) event.getValue());
	}

	private List<StockData> getVoucherData(int id){
		List<StockData> list = new ArrayList<StockData>();

		if(id == 1001){
			list.add(new StockData("VersaPro J",10,"○在庫あり"));
		} else if(id == 1002) {
			list.add(new StockData("LaVie G",20,"○在庫あり"));
		} else if(id == 1003) {
			list.add(new StockData("LifeTouch",1,"△要問い合わせ"));
			
		} else if(id == 1004) {
			list.add(new StockData("Express Server",0,"×在庫なし"));
			
		} else if(id == 1005) {
			list.add(new StockData("WebOTX Portal",3,"○在庫あり"));	
		} else if(id == 1006) {
			list.add(new StockData("N-07C",25,"○在庫あり"));	
		}
		return list;
		
	}


}

この中、StockData クラスを以下のように作成します。
package com.nec.portlet;

public class StockData {
	private String name;
	private int num;
	private String desc;
	/**
	 * @return the name
	 */
	public String getName() {
		return name;
	}
	/**
	 * @param name the name to set
	 */
	public void setName(String name) {
		this.name = name;
	}
	/**
	 * @return the num
	 */
	public int getNum() {
		return num;
	}
	/**
	 * @param num the num to set
	 */
	public void setNum(int num) {
		this.num = num;
	}
	/**
	 * @return the desc
	 */
	public String getDesc() {
		return desc;
	}
	/**
	 * @param desc the desc to set
	 */
	public void setDesc(String desc) {
		this.desc = desc;
	}
	
	public StockData(String name, int num, String desc){
		this.name = name;
		this.num = num;
		this.desc = desc;
	}

}
WebContent\jsp\html\CustomerPortletView.jspファイルを下記のように変更します。
<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet"%>
<%@ page language="java" contentType="text/html;charset=utf-8" session="false" import="java.util.*,javax.portlet.*,com.nec.portlet.*"%>
<%@ taglib uri="http://www.nec.com/webotx/portlet" prefix="otxp"%>
<%@ taglib uri="http://java.sun.com/jstl/core" prefix="c"%>
<portlet:defineObjects/>
<form action="<portlet:actionURL />" method="post">
<table width="100%" border="0" cellpadding="0" 
cellspacing="0" style="text-align: center;">
<tr style="background-color:#0e51ac">
<td align="left" width="10" height="40" style="background-color:#0e51ac"></td>
<td colspan="8" align="left" 
style="font-family: HGP創英角ゴシックUB;color: white;font-size: 16px;vertical-align:middle;">顧客情報</td></tr>
<tr 
style="background-color:#c8e3ff">
<td colspan="9" height="20">
<otxp:drop id="customer01" model="client">
	顧客名 <input type="text" name="customerName" class="otxpDndItem" value="<%=renderRequest.getParameter("customerName") == null? "" : renderRequest.getParameter("customerName")%>"><input type="submit" value="検索">
</otxp:drop>
</td>
</tr>
<tr style="background-color:#5b82e1">
<td height="18" width="10%">ID</td>
<td>|</td><td width="25%">顧客名</td>
<td>|</td><td width="20%">会社名</td>
<td>|</td><td width="25%">メールアドレス</td>
<td>|</td><td width="20%">伝票数</td>
</tr>

<c:forEach var="entry" items="${customerData}" varStatus="status" >
<tr>
  <td>${entry.id}</td><td></td>
  <td><otxp:drag id="dragItem${status.index}" model="client"><div class="otxpDndItem">${entry.name}</div></otxp:drag></td><td></td>
  <td>${entry.companyName}</td><td></td>
  <td>${entry.email}</td><td></td>
  <td>${entry.voucherNum}</td>
</tr>
</c:forEach>

</table>

</form>
WebContent\jsp\html\VoucherPortletView.jspファイルを下記のように変更します。
<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet"%>
<%@ page language="java" contentType="text/html;charset=utf-8"
	session="false" import="java.util.*,javax.portlet.*,com.nec.portlet.*"%>
<%@ taglib uri="http://www.nec.com/webotx/portlet" prefix="otxp"%>
<%@ taglib uri="http://java.sun.com/jstl/core" prefix="c"%>
<portlet:defineObjects />
<form action="<portlet:actionURL />" method="post">
<table width="100%" border="0" cellpadding="0" cellspacing="0"
	style="text-align: center;">
	<tr style="background-color: #0e51ac">
		<td align="left" width="10" height="40"
			style="background-color: #0e51ac"></td>
		<td colspan="10" align="left"
			style="font-family: HGP創英角ゴシックUB; color: white; font-size: 16px; vertical-align: middle;">伝票情報</td>
	</tr>
	<tr style="background-color: #c8e3ff">
		<% String customer = "";
if (renderRequest.getParameter("ViewParam") == null) { 
    if (renderRequest.getParameter("hidCustomer") != null) {
        customer = renderRequest.getParameter("hidCustomer");
    }
} else {
    customer = renderRequest.getParameter("ViewParam");
}
%>
		<td colspan="11" align="left" height="20">顧客名:<%=customer %> <input
			type="hidden" name="hidCustomer" value="<%=customer %>"></input></td>
	</tr>
	<tr style="background-color: #c8e3ff">
		<td colspan="11" height="20"><otxp:drop id="voucher02"
			model="client">
	伝票番号 <input type="text" name="voucherId" class="otxpDndItem"
				value="<%=renderRequest.getParameter("voucherId") == null? "" : renderRequest.getParameter("voucherId")%>">
			<input type="submit" value="在庫検索">
		</otxp:drop></td>
	</tr>
	<tr style="background-color: #5b82e1">
		<td height="18" width="10%">ID</td>
		<td>|</td>
		<td width="20%">品名</td>
		<td>|</td>
		<td width="15%">数量</td>
		<td>|</td>
		<td width="15%">単位</td>
		<td>|</td>
		<td width="20%">単価</td>
		<td>|</td>
		<td width="20%">金額</td>
	</tr>
	<c:forEach var="entry" items="${voucherData}" varStatus="status" >
<tr>
  <td><otxp:drag id="dragItem${status.index}" model="client"><div class="otxpDndItem">${entry.id}</div></otxp:drag></td><td></td>
  <td>${entry.name}</td><td></td>
  <td>${entry.num}</td><td></td>
  <td>${entry.unit}</td><td></td>
  <td>${entry.price}</td><td></td>
  <td>${entry.total}</td>
</tr>
</c:forEach>
	
</table>
</form>
WebContent\jsp\html\StockPortletView.jspを下記のように変更します。
<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet"%>
<%@ page language="java" contentType="text/html;charset=utf-8" session="false" import="java.util.*,javax.portlet.*,com.nec.portlet.*"%>
<%@ taglib uri="http://www.nec.com/webotx/portlet" prefix="otxp"%>
<%@ taglib uri="http://java.sun.com/jstl/core" prefix="c"%>
<portlet:defineObjects/>
<form action="<portlet:actionURL />" method="post">
<table width="100%" border="0" cellpadding="0" 
cellspacing="0" style="text-align: center;">
<tr style="background-color:#e0f7af">
<td align="left" width="10" height="40" style="background-color:#e0f7af"></td>
<td colspan="4" align="left" style="font-family: HGP創英角ゴシックUB;font-size: 16px;vertical-align:middle;">在庫情報</td></tr>
<tr>
<td colspan="5" align="left" height="20"> 
    伝票番号: <%=renderRequest.getParameter("stockId") == null? "" : renderRequest.getParameter("stockId") %>
</td>
</tr>
<tr>
<td colspan="5" align="left" height="20">在庫:○在庫あり △要問合せ −欠品中</td>
</tr>
<tr 
style="background-color:#e0f7af">
<td height="16" width="16%" style="vertical-align:middle;">品名</td>
<td style="vertical-align:middle;">|</td>
<td width="40%" style="vertical-align:middle;">在庫</td>
<td style="vertical-align:middle;">|</td>
<td width="44%" style="vertical-align:middle;">説明</td>
</tr>

<c:forEach var="entry" items="${stockData}" varStatus="status" >
<tr>
  <td>${entry.name}</td><td></td>
  <td>${entry.num}</td><td></td>
  <td>${entry.desc}</td>

</tr>
</c:forEach>
</table>
</form>

1.3.4. ポートレットの配備

配備方法は 1.1.3. ポートレットの配備 を参照してください。

1.3.5. ポートレットの実行

実行方法は 1.1.4. ポートレットの実行 を参照してください。CustomerPortletポートレット、VoucherPortletポートレット及びStockPortletポートレットをポータルページに追加します。


図1.3.5-1


CustomerPortlet ポートレットに顧客名 日電太郎 を入力して、 検索 をクリックします。


図1.3.5-2



VoucherPortlet ポートレットに顧客名が 日電太郎 であることを表示します。
VoucherPortlet ポートレットに伝票番号 1001 を入力して、検索 をクリックします。


図1.3.5-3



画面を再表示して、StockPortlet ポートレットに伝票番号が 1001 であることを表示します。


図1.3.5-4

Memo
ポートレットイベントとは、ポートレットが、ユーザとポートレットの対話に直接関連づけられていないアクション または状態変更に対応できるようにするためのものです。詳細については、 JSR 286: Portlet Specificationより 仕様書をダウンロードし、参照してください。



1.4. ポートレットパブリックレンダーパラメータの作成

1.4.1. ポートレットプロジェクトの作成

1.1. 基本型ポートレットの作成 を参照し、ParameterPortletというポートレットプロジェクトを作成します。

1.4.2. ポートレットの作成

ParameterPortletプロジェクトの右メニュー 新規その他 を選択し、選択画面から ポータルポートレット を選択し、 次へ をクリックします。


図1.4.2-1


 
ポートレットの作成 ページに以下の内容を指定し、 完了 をクリックします。
表1.4.2-1
項目
ポートレット名 GoodsPortlet
ポートレット型 JSP/HTMLポートレット
パッケージ com.nec.portlet
クラス名 GoodsPortlet


図1.4.2-2


上記の手順どおりに、 ポートレットの作成 ページに以下の内容を指定し、2つのポートレットを作成します。
表1.4.2-2
項目
ポートレット名 StockPortlet
ポートレット JSP/HTMLポートレット
パッケージ com.nec.portlet
クラス名 StockPortlet


図1.4.2-3


 

1.4.3. パブリックレンダーパラメータの作成

メニュー ウィンドウ> ポートレット間連携定義エディタ を選択し、 ポートレット間連携定義エディタ画面 を表示します。


図1.4.3-1



ポートレットデプロイメント記述子から展開して表示した GoodsPortletStockPortlet の2つのポートレットをドラッグ&ドロップでポートレット間連携定義エディタへ追加します。


図1.4.3-2



GoodsPortletポートレットの追加ボタン +パブリックレンダーパラメータ を選択し、 パブリックレンダーパラメータ を追加します。


図1.4.3-3



図1.4.3-4


プロパティビューで以下の内容を指定します。
表1.4.3-1
項目
パブリックレンダーパラメータ名 goodsid
識別子 id

パブリックレンダーパラメータ名を goodsid に設定して、識別子を id に設定します。


図1.4.3-5


GoodsPortlet でパブリックレンダーパラメータの右クリックメニュー パブリックレンダーパラメータに処理の生成 を選択します。


図1.4.3-6



GoodsPortletクラスのコードは以下のように生成されます。
package com.nec.portlet;
import java.io.*;
import javax.portlet.*;
public class GoodsPortlet extends javax.portlet.GenericPortlet {
    public void doView(RenderRequest request, RenderResponse response) throws PortletException, IOException {
        response.setContentType(request.getResponseContentType());
        String viewpage = "";
        viewpage = getPortletConfig().getInitParameter("ViewPage");
        PortletRequestDispatcher rd = getPortletContext().getRequestDispatcher(viewpage);
        rd.include(request, response);
    }

    public void processAction(ActionRequest request, ActionResponse response) throws IOException {
        String publicRenderParamValue = request.getParameter("id");
        response.setRenderParameter("id", publicRenderParamValue);
    }
}


GoodsPortlet ポートレットのイベントから StockPortlet ポートレットへドラッグ&ドロップします。 StockPortlet ポートレットの直下にgoodsidパブリックレンダーパラメータが生成されます。


図1.4.3-7



StockPortlet でパブリックレンダーパラメータの右クリックメニュー パブリックレンダーパラメータに処理の生成 を選択します。


図1.4.3-8



StockPortletクラスのコードは以下のように生成されます。
package com.nec.portlet;
import java.io.*;
import javax.portlet.*;
public class StockPortlet extends javax.portlet.GenericPortlet {
    public void doView(RenderRequest request, RenderResponse response) throws PortletException, IOException {
        response.setContentType(request.getResponseContentType());
        String viewpage = "";
        viewpage = getPortletConfig().getInitParameter("ViewPage");
        PortletRequestDispatcher rd = getPortletContext().getRequestDispatcher(viewpage);
        rd.include(request, response);
    }

    public void processAction(ActionRequest request, ActionResponse response) throws IOException {
        String publicRenderParamValue = request.getParameter("id");
        response.setRenderParameter("id", publicRenderParamValue);
    }
}

 
ファイルWebContent\jsp\html\GoodsPortletView.jspを下記のように変更します。
<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet"%>
<%@ page language="java" contentType="text/html;charset=utf-8" session="false" import="java.util.*,javax.portlet.*,com.nec.portlet.*"%>
<%@ taglib uri="http://www.nec.com/webotx/portlet" prefix="otxp"%>
<portlet:defineObjects/>
<form action="<portlet:actionURL />" method="post">
<table width="100%" border="0" cellpadding="0" 
cellspacing="0" style="text-align: center;">
<tr style="background-color:#0e51ac">
<td align="left" width="10" height="40" style="background-color:#0e51ac"></td>
<td colspan="4" align="left" style="font-family: HGP創英角ゴシックUB;color: white;font-size: 16px;vertical-align:middle;">
商品情報</td></tr>
<tr style="background-color:#c8e3ff">
<td colspan="5">製品型番<input type="text" name="id" 
value="<%=renderRequest.getParameter("id") == null ? "" : renderRequest.getParameter("id") %>" />
<input type="submit" value="検索"></td>
</tr>
<tr style="background-color:#5b82e1">
<td height="18" width="15%">製品型番</td><td>|</td><td width="40%">製品名</td>
<td>|</td><td width="45%">価格</td>
</tr>
<tr><td>001</td><td></td><td>VersaPro J</td><td></td><td>88200</td>
</tr>
</table>
</form>
WebContent\jsp\html\StockPortletView.jspファイルを下記のように変更します。
<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet"%>
<%@ page language="java" contentType="text/html;charset=utf-8" session="false" import="java.util.*,javax.portlet.*,com.nec.portlet.*"%>
<%@ taglib uri="http://www.nec.com/webotx/portlet" prefix="otxp"%>
<portlet:defineObjects/>
<form action="<portlet:actionURL />" method="post">
<table width="100%" border="0" cellpadding="0" 
cellspacing="0" style="text-align: center;">
<tr style="background-color:#e0f7af">
<td align="left" width="10" height="40"></td>
<td colspan="6" align="left" style="font-family: HGP創英角ゴシックUB;font-size: 16px;vertical-align:middle;">
在庫情報</td></tr>
<tr>
<td colspan="7" height="20">製品型番  <input type="text" name="id" 
        value="<%=renderRequest.getParameter("id") == null? "" : renderRequest.getParameter("id")%>" />
<input type="submit" value="検索"></td>
</tr>
<tr>
<td colspan="7" align="left" height="20">在庫:○在庫あり △要問合せ −欠品中</td>
</tr>
<tr style="background-color:#e0f7af">
<td height="16" width="10%" style="vertical-align:middle;">製品型番</td>
<td style="vertical-align:middle;">|</td>
<td width="30%" style="vertical-align:middle;">製品名</td>
<td style="vertical-align:middle;">|</td>
<td width="30%" style="vertical-align:middle;">在庫</td>
<td style="vertical-align:middle;">|</td>
<td width="30%" style="vertical-align:middle;">説明</td>
</tr>
<tr><td>001</td><td></td><td>VersaPro J</td><td></td><td>○</td><td></td><td>新発売</td>
</tr>
</table>
</form>

1.4.4. ポートレットの配備

配備方法は 1.1.3. ポートレットの配備 を参照してください。

1.4.5. ポートレットの実行

実行方法は 1.1.4. ポートレットの実行 を参照してください。 GoodsPortletポートレット及びStockPortletポートレットをポータルページに追加します。


図1.4.5-1



GoodsPortlet ポートレットに製品型番 001 を入力して、検索 をクリックします。


図1.4.5-2


画面を再表示して、StockPortlet ポートレットに製品型番が 001 であることを表示します。


図1.4.5-3

 

Memo
パブリックレンダーパラメータとは、ポートレット間でパラメータを共有するためのものです。 詳細については、JSR 286: Portlet Specification より仕様書をダウンロードし、参照してください。