IBM WebSphere Dashboard Framework V6.1　自習ガイド　応用編

IBM WebSphere Dashboard Framework V6.1

開発自習ガイド応用編

作成・更新日 2008 年 8 月 18 日 日本アイ・ビー・エム システムズ・エンジニアリング株式会社

2/88 <目次> 1 はじめに... 3 1.1 資料中の表記について... 3 2 レッスンの前提 ... 4 2.1 前提知識... 4 2.2 前提環境（想定環境）... 5 3 レッスンの進め方 ... 8 3.1 レッスンの一覧および概要... 8 4 レッスン... 9 4.1 ［レッスン12］WEBチャートの拡張およびポートレットでの設定... 9 4.1.1 事前準備... 10 4.1.2 基本となるportlet 作成手順 ... 11 4.1.3 portlet の拡張... 19 4.2 ［レッスン13］アラートの定義 ... 36 4.2.1 事前準備... 36 4.2.2 プロジェクトへの機能追加... 37 4.2.3 portlet の拡張... 39 4.2.4 WebSphere Portal 画面での作業... 42 4.3 ［レッスン14］DOJOを使ったデータテーブルの編集... 51 4.3.1 設定内容... 51 4.3.2 実行結果... 57 4.4 ［レッスン15］DOJOを使ったドラッグ・アンド・ドロップ... 60 4.4.1 設定内容... 60 4.4.2 実行結果... 74 4.5 ［レッスン16］AJAXを使ったテキスト先行入力... 76 4.5.1 設定内容... 76 4.5.2 実行結果... 86

1 はじめに

当資料は、IBM WebSphere Dashboard Framework V6.1.X(以下 Dashboard Framework) を用いて WebSphere Portal V6.0.X で使用する Portlet を開発する際の作業のうち、 Dashboard Framework 独自のビルダーを用いた Portlet 開発について、レッスンを通じて 自習していただくための資料です。

この資料は、別資料「Dashboard Framework 自習ガイド」の応用編として作られており、 前述の資料にて行ったレッスンにて習得した内容を組み合わせて使用するPortlet を作成す ることにより、実際のPortlet 開発の流れを理解していただけるよう構成されています。

なお、最終的な成果物としては、Dashboard Framework を使った Portlet が 1 つ作成され ます。

1.1 資料中の表記について

※ 説明文中の画面キャプチャについては、一部実際の使用者の表示結果と異なる場合があ ります。

※ 当資料はIBM WebSphere Portlet Factory の知識がある使用者を前提としているため、 すべての手順について記述があるわけではありません。場合に応じて使用者が手順を追 加してください。

※ 参考資料として以下の文献があります。当資料中に詳細な記述がない項目に関しては、 以下の資料を参考にしてください。

¾ IBM WebSphere Portal バージョン 6 Information Center

— http://publib.boulder.ibm.com/infocenter/wpdoc/v6r0/index.jsp

¾ IBM WebSphere Application Server 資料

— http://publib.boulder.ibm.com/infocenter/wasinfo/v6r0/index.jsp?topic=/co m.ibm.websphere.base.doc/info/welcome_base.html

¾ IBM WebSphere Portlet Factory Information Center

— http://publib.boulder.ibm.com/infocenter/wpfhelp/v6r0m2/topic/com.bowstr eet.designer.doc/designer/welcome.html

¾ IBM WebSphere Dashboard Framework

4/88

2 レッスンの前提

z IBM WebSphere Portlet Factory/Dashboard Framework についての知識

¾ Portlet Factory/Dashboard Framework を利用した Portlet 開発が出来ること ¾ Portlet を WebSphere Portal 上で利用できること。

「Dashboard Framework 自習ガイド」に記述のある前提知識 z WebSphere Portal V6 に関する一般知識 ¾ WebSphere Portal 構成についての概要 ¾ WebSphere Portal 管理についての概要 — ラベル/ページの作成/管理 ・・・ ※ — Portlet（アプリケーション）の配置/管理 ・・・ ※ — ユーザー/グループ管理 — アクセス権限管理

z WebSphere Application Server V6 に関する一般知識 ¾ サーバー/アプリケーションの管理 — サーバーの管理/設定 — アプリケーションの管理/設定 — データベースとの連携（データソースの設定） z Java に関する一般知識 ¾ Java コーディングに関する知識 ¾ アプリケーション/Servlet の仕組みについての知識 z IBM WebSphere Portlet Factory に関しての一般知識

¾ IBM WebSphere Portlet Factory の操作

— プロジェクト/モデル/プロファイルの作成/管理 ・・・ ※

— オートデプロイに関する知識 ・・・ ※

2.2 前提環境（想定環境）

IBM WebSphere Dashboard Framework は IBM WebSphere Portlet Factory の上で動作 します。そのため動作環境としてはIBM WebSphere Portlet Factory の動作環境と同じに なります。

IBM WebSphere Portlet Factory を用いて Portlet を開発する場合、構成のパターンとして 以下の４通りが考えられます。

z １ 台 の マ シ ン に IBM WebSphere Portal と IBM WebSphere Portlet Factory/Dashboard Framework を導入して構成する

図 1 １台にすべて導入

IBM WebSphere Portal Server IBM WebSphere Application Server IBM WebSphere Dashboard Framework IBM WebSphere Portlet Factory

開発時のプレビュー Portlet の自動デプロイ

6/88

z ２ 台 の マ シ ン に IBM WebSphere Portal と IBM WebSphere Portlet Factory/Dashboard Framework を別々に導入して構成する。

¾ Portlet の自動デプロイ先及び開発用サーバーとしてモートの IBM WebSphere Portal を指定する。（図２※１）

¾ Portlet の自動デプロイ先にリモートの IBM WebSphere Portal を指定し、開発用 サ ー バ ー と し て は ロ ー カ ル の WebSphere Application Server Community Edition(導入時に選択可能)を指定する（図２※２）

図 2 ２台に別々に導入 z 自動デプロイを行わない

IBM WebSphere Portal Server IBM WebSphere Application Server

IBM WebSphere Dashboard Framework IBM WebSphere Portlet Factory

※１開発時のプレビュー Portlet の自動デプロイ

※２開発時のプレビュー ローカル環境

基 本 的 に １ 台 の マ シ ン に IBM WebSphere Portal/IBM WebSphere Portlet Factory/Dashboard Framework を導入して構成して、自動デプロイ設定を行う方法が簡単 ですが、マシンリソースの関係でこの構成が取れない場合があります。その場合は IBM WebSphere Portal と IBM WebSphere Portlet Factory/Dashboard Framework を別々のマ シンに構成して開発を行います。

別々のマシンに構成する場合、１台のマシンで構成する場合に加えて、IBM WebSphere Portlet Factory プロジェクト作成の際に多少の追加手順が必要となります。方法について は以下のリンクを参照してください。

z Deploying a project to a remote server

¾ http://publib.boulder.ibm.com/infocenter/wpfhelp/v6r0m2/topic/com.bowstreet. designer.doc/designer/deploying_to_a_remote_server.htm

IBM WebSphere Application Server Community Edition の使用方法については、以下の リンクを参照してください。

z Quick start with WAS CE

¾ http://publib.boulder.ibm.com/infocenter/wpfhelp/v6r0m2/topic/com.bowstreet. designer.doc/tutorials/TutorialBasics_Quick_Start_WASCE.htm

またIBM WebSphere Portlet Factory プロジェクト作成の手順については、以下のリンク を参照してください。（前提知識のため、この資料には記述していません）

z Tutorial – Creating a Web Application Project

¾ http://publib.boulder.ibm.com/infocenter/wpfhelp/v6r0m2/topic/com.bowstreet. designer.doc/tutorials/TutorialBasics_Create_Project.htm

8/88

3 レッスンの進め方

Web Charts - Enhanced (Portlet Adapter) (Portlet Customizer) レッスン１３ アラートの定義 レッスン１２で作成したポ ートレットにアラートを追 加 し ま す 。 さ ら に WebSphere Portal の画面 からアラートの定義を行う 方法を学習します。 Excel Import

Web Charts - Enhanced Alert Data

(Portlet Adapter) (Portlet Customizer)

4 レッスン

本章では、さまざまなDashboard Framework 用ビルダーの使い方を理解するために演習 を実施します。

4.1 ［レッスン 12］Web チャートの拡張およびポートレットでの設定

Excel ファイルから取り込んだ値を Dashboard に表示します。さらにその値を基に各グラ フ(Web チャート)を表示します。Web チャートは GreenPoint WebCharts3D にて作成した チャート・スタイルをImport して表示します。グラフ表示については、Portlet の編集モ ードにて切り替えを行うようにします。外部から取り込んだ値を利用する場合は、モデル を2 つ作成する必要があり、さらに Portlet の編集モードを実装するために１つのモデルを 別途作成する必要があります。（計３つ） モデル一覧 z provider モデル: 外部から値を取り込むモデル

z consumer モデル: provider モデルから値を受け取り、Dashboard に表示 z customizer モデル: portlet の編集モードを実装

「provider モデル内の Service Definition ビルダー」と「consumer モデル内の Service Consumer ビルダー」が関連付けされることで、モデル間のアクセスが可能となっています。 また「customizer モデル内の Portlet Customizer ビルダー」にて「consumer モデル」と の関連付けを行います。

Excel ファイル provider モデル consumer モデル

10/88 4.1.1 事前準備 以下の設定でプロジェクト及びモデルを作成します。デプロイメントの設定は環境に合わ せて行ってください。 ============================================================ プロジェクト：

Portlet Factory プロジェクト名: DF_WebChartsEnhanced 追加する機能セット：

Dashboard Framework

GreenPoint Web Chart Builder（チャート作成の項目も自動的に選択されます） 各国語サポート Excel 拡張機能 作成しておくモデル： モデル名: provider（モデルタイプは空にする） モデル名: consumer（モデルタイプは空にする） モデル名: customizer（モデルタイプは空にする） ============================================================ <<<外部データの用意>>> プロジェクト内の /WebContent 直下に Excel ファイル（売上げ集計.xls）をコピーしてお きます。 表 2 Excel ファイル（集計シート）の内容 商品名 今年度 昨年度 一昨年度 テレビ 3000 2500 2000 洗濯機 1500 900 600 冷蔵庫 200 500 700 掃除機 1000 1200 1500 エアコン 100 800 500 ストーブ 50 1000 100 DVD レコーダー 4000 3000 1000 デジタルカメラ 8000 7000 6000

4.1.2 基本となる portlet 作成手順 1. WebCharts3D eclipse plugin の設定

まず、eclipse 開発環境に GreenPoint WebCharts3D の eclipse plugin を設定します。

1.Portlet Factory Designer を起動し、メニューの「ヘルプ」->「ソフトウェアの更新」-> 「検索及びインストール」を選択します。インストール/更新ダイアログが表示されるので、 「インストールする新規フィーチャーを検索」を選択して「次へ」ボタンを押します。

12/88 2.表示される画面で「新規リモート・サイト」を選択し、新規更新サイトを設定します。ダ イアログにて以下の値を設定してください。 名前 WebCharts3D URL http://www.gpoint.com/website/WebCharts50/download/eclipse_plugin インストールダイアログに設定した WebCharts3D サイトが登録されていることを確認し て「終了」ボタンを押します。 図 4 インストールダイアログ

3. 続 い て 表 示 さ れ る 更 新 ダ イ ア ロ グ に て 、 イ ン ス ト ー ル す る フ ィ ー チ ャ ー と し て 「WebCharts3D」を選択し、「次へ」ボタンを押します。 図 5 更新ダイアログ 4.使用条項に同意した後、インストールダイアログがでてきますので、「終了」ボタンを押 してインストールします。途中フィーチャーの検査ダイアログが表示される場合がありま すが、その場合「すべてインストール」ボタンを押してインストールを続行します。最後 にワークベンチを再起動するよう求められますので、再起動します。

14/88 5.再起動後、メニューの「ウィンドウ」->「設定」を選択し、設定ダイアログを表示したの ち、WebCharts3D 設定を選択し、ライセンス番号を入力します。ライセンス番号について はプロジェクトを追加した際に表示されるドキュメント（readme_dashboards_xx.txt）に 記述があります。 図 6 ライセンスの設定（プロパティダイアログ）

2. provider モデルの作成 Excel からデータを取り込むための provider モデルにビルダーを追加します。予め作成し ておいたprovider モデルを開きます。合計して３つのビルダーをこのモデルに追加します。 1.Service Definition ビルダーの追加 設定値 サービス名 ExcelProvider サービスを公開 チェック 2.Excel Import ビルダーの追加 設定値 名前 ExcelImport インポートするファイル /売上げ集計.xls スキーマを生成 Designer 再生成時 コンテンツ選択方法 自動（Builder にコンテンツを検索させる） シート 集計 ヘッダー行あり チェック 空の行を保持 非チェック セルのフォーマット設定を保持 チェック 3.Service Operation ビルダーの追加 設定値 データ・サービス ExcelProvider(入力済み) 操作名 getProductSales 呼び出すアクション DataServices/ExcelImport/execute 操作入力 入力処理構造 入力なし 結果構造処理 呼び出されたアクションからの構造を使用 操作結果 結果フィールド・マッピング 自動 これでprovider モデルの作成が終了しました。

16/88 3.consumer モデル作成 provider モデルを呼び出し、グラフを表示させるために consumer モデルにビルダーを追 加します。予め作成しておいたconsumer モデルを開きます。合計して６つのビルダーをこ のモデルに追加します。 1.Service Consumer ビルダーの追加 設定値 名前 ExcelConsumer プロバイダー・モデル provider すべてのプロバイダー操作を追加 チェック 2.Page ビルダーの追加 雛形のHTML は全て削除して、新たに HTML を書き直します。 設定値 名前 chartPage ページコンテンツ <html> <body> <h3>インポートした Excel ファイルを使ってテーブルやグラフを表 示</h3>

<div><span name="area_table" /></div> <hr>

<div><span name="area_chart" /></div> </body> </html> 3.Action List ビルダーの追加 設定値 名前 main アクション・リスト１ DataServices/ExcelConsumer/getProductSales アクション アクション・リスト２ chartPage

4.Data Page ビルダーの追加 設定値 名前 ExcelTable 変数 DataService/ExcelConsumer/getProductSales/res ults モデル内のページ chartPage ページ・タイプ HTML から推測 データからUI を作成 チェック 新規タグの場所 area_table H T M L テ ン プ レ ー ト・ファイル /factory/html_templates/gridtable.html 作 成 済 み エ レ メ ン ト の 設定値 ラベルを生成 チェック

5.Web Charts - Enhanced ビルダーの追加 設定値 名前 ExcelChart 位置指定の方法 名前付きタグ上 ページ chartPage ページの場所 タグ area_chart チャート・タイプ 棒 チャートスタ イルおよびデ ータ チャート・データ ${DataServices/ExcelConsumer/getProductSales/ results} データ形式変 更 Ｘ軸のタグ 商品名 ※その他はデフォルトのまま 6. Portlet Adapter ビルダーの追加 設定値 名前 WebChartsEnhanced ポートレットのタイトル Web チャート拡張 ポートレットの短いタイトル Web チャート拡張 デフォルト・ロケール ja

18/88 ここまでの設定で、Excel からデータを読み込み、テーブル/グラフを表示する Portlet が作 成されます。実際にポータルページ上に表示した画面は以下のようになります。 図 7 Web チャート拡張ポートレット なお、デフォルトのチャート・スタイルでは日本語がうまく表示できません。日本語を表 示するためにはチャート・スタイルファイル(xml)を編集する必要があります。編集方法に ついては「Dashboard Framework 自習ガイド」の「レッスン 2 Status Page」にある「チ ャート・スタイルファイルの変更」を参照してください。

4.1.3 portlet の拡張

1.WebCharts3D eclipse plugin でのチャート・スタイル作成

基本となるportlet を拡張して、さまざまなチャート・スタイルでグラフを表示できるよう にします。チャート・スタイルを作成するにはWebCharts3D eclipse plugin を利用します。

チャート作成手順：

1. eclipse 開 発 環 境 の メ ニ ュ ー か ら 「 フ ァ イ ル 」 ->「 新 規 」 ->「 そ の 他 」 を 選び 、 「WebCharts3D-Gallery」ウィザードを選択します。

20/88

2. Chart Gallery が表示されます。Gallery にはさまざまなタイプのグラフが用意されてい ますので、その中から作成したいチャートスタイルを選択します。

3.ここでは Chart Gallery 左側ペインからチャートのグループを選び、右側ペインに表示さ れるグラフを選択します。ここでは、まず3D Shape Charts の棒グラフを選択します（左 から３番目、上から２番目のもの）。その後「次へ」ボタンを押します。 図 10 チャート・スタイルの選択 4.コンテナ名/ファイル名を入力するダイアログが表示されますので、以下のように設定し て「終了」を押します。 Container ¥DF_WebChartsEnhanced

22/88 5.以下のような画面が表示され、チャート・スタイルエディターが開きます。 図 11 チャート・スタイルエディター 6.このグラフで日本語表示を可能にするために、フォントを変更します。eclipse 開発環境 のメニューから「ウインドウ」->「ビューの表示」->「その他」を選択し、「一般-プロパテ ィ」ビューを選択して表示させます。

7.チャート・スタイルエディターのタブで「XML Style」を選択します。プロパティビュー に表示されているfont を変更します。

変更部分 font: Arial-11 から MS-UI Gothic-11

図 12 フォントの変更

24/88 8.右下にある「Save」ボタンを押し、チャート・スタイルを保存します。保存先は、今回 開発しているプロジェクトの WebContent ディレクトリ以下にする必要があります。 (DF _WebChartsEnhanced/WebContent 以下)。ファイル名は barchart1.xml とします。 図 14 チャート・スタイルの保存 同様にして、チャート・スタイルをさらに３つ作成します。チャート・スタイルは以下の ような設定にて作成します。なおチャート・スタイルファイルはすべて先ほどと同じディ レクトリに保存してください。また日本語表示の設定も同様にしておきます。

①3D 折れ線グラフ

3D Line, Curve,Step,Area,and Stair Charts の右から４番目一番上のチャートスタイル ファイル名： 3DLinechart1.wcp

スタイルファイル名：3Dlinechart1.xml

図 15 3D 折れ線グラフ

②レーダーチャート

Radar,Polar and Star Charts の右から２番目、一番上のチャートスタイル ファイル名：Radar1.wcp

スタイルファイル名：radar1.xml

26/88 ③パイチャート

2D and 3D Pie and Doughnut Charts の右から４番目、上から２番目のチャートスタイル ファイル名：Pie1.wcp

スタイルファイル名：pie1.xml

ここまでで、新しいチャート・スタイルにてグラフをportlet に表示させる準備が整いまし た。

2. Web Charts - Enhanced ビルダーの編集

前節で作成したチャート・スタイルを基本Portlet 作成の際に利用した Web チャート拡張 ビルダーに定義します。consumer モデルを開きます。

1.Web Charts - Enhanced ビルダーにてカスタムのチャート・スタイルを設定します。Web チャート拡張ビルダーを開き、チャート・スタイルおよびデータの節で以下のように設定 します。 設定値 チャート・タイプ 棒 カスタム・スタイルを指定 チェック スタイル・データ /barchart1.xml ※その他は変更しません。 2.この状態で Portlet を表示します。売上げが積み上げ棒グラフ形式で表示されます。 図 17 Barchart1 スタイル 同様にスタイルデータを変更して先ほど作成したチャート・スタイルを設定し、表示しま す。

28/88 ①スタイルデータ：/3Dlinechart1.xml

図 18 3Dlinechart1 スタイル

②スタイルデータ：/radar1.xml

③スタイルデータ：/pie1.xml

図 20 pie1 スタイル

3.これですべてのチャートが表示できることを確認しました。続いてこれらのグラフスタイ ルをユーザーが切り替えることができるようにPortlet を構成します。

30/88 3. Portlet 編集モードのための Profile の作成 Portlet の編集モードにて表示するグラフを変更できるように追加の設定をします。先ほど のconsumer モデルの Web チャート拡張ビルダーを開きます。 1. スタイルデータをプロファイルから設定するように変更します。スタイル・データを設 定する入力エリアの左側のボタン を押します。 2.プロファイル入力ダイアログが開きます。プロファイルセット名はデフォルトのまま （consumerps）、プロファイル項目名もデフォルトのまま（DashboardCharts_ChartStyle） にしておき、プロファイル値を追加します。このダイアログは「OK」ボタンを押して閉じ ます。（この図では/pie1.xml を設定した状態でボタンを押しています） 図 21 プロファイル入力ダイアログ スタイル・データ部分がグレーアウトされていることを確認します。 図 22 グレーアウト表示

3.eclipse 開発環境のプロジェクト・エクスプローラービューにて、先ほどのプロファイル を選択します。プロファイルはDF_WebChartsEnhanced/profiles の下に consumerps.pset という名前で保存されています。consumerps.pset をダブルクリックしてプロファイル・エ ディターを開きます。 図 23 プロファイルエディター 4.プロファイル・エディターのタブで「項目」を選択し、項目編集画面に移動します。

32/88 設定されているDashboardCharts _ChartStyle 行をダブルクリックしプロファイル項目の 変更ダイアログを表示させます。 図 25 プロファイル項目変更ダイアログ ダイアログにて以下のように設定します。 設定値 UI タイプ Select 選択データ /barchart1.xml,/3Dlinechart1.xml,/radar1.xml,/pie1,xml デフォルト値 /barchart1.xml ※その他はデフォルトのままにします 5.プロファイルを設定したのち保存して、プロファイル・エディターを閉じます。

4. Portlet への編集モードの追加 前節で作成したプロファイルを編集画面に表示させるためのモデルを編集します。予め作 成してあるcustomizer モデルを開きます。 1. Portlet Customizer ビルダーを追加 設定値 名前 consumerCustomizer ポートレット consumer ※その他はデフォルトのまま 2. ポートレットの設定追加

consumer モデルを開き、Portlet Adapter ビルダー（名前：WebChartsEnhanced）を開き ます。プロファイル・セットの項目が追加されていることがわかります。以下のように設 定します。 設定値 consumerps 編集およびデフォルト編集で個々のプロファイ ル値を表示 カスタム編集タイプ カスタム・モデル カスタム編集モデル customizer カ ス タ ム 編 集 の デ フ ォルトタイプ カスタム・モデル 編集および構成 の設定 カ ス タ ム 編 集 の デ フ ォルトモデル customizer ※その他はデフォルトのまま 3.cusomizer モデルに戻り、再度保存します。（設定値が反映されない場合があるため）

34/88 以上で設定は終了です。

WebSphere Portal のページ上に配置されているポートレットにアクセスし、ポートレッ ト・メニューから「個別設定」を選択します。

個別設定画面にて、チャートスタイルを変更します。例えば/radar1.xml に変更した場合、 以下のように表示されます。

図 27 個別設定画面（編集モード）での設定変更

36/88 4.2 ［レッスン 13］アラートの定義 レッスン12 で作成した Portlet にアラートの定義を追加します。アラートとは、ユーザー が設定したデータがある値を超えた場合（例：年間売上げが目標値を超えた場合）などに、 データに直接アクセスして調べることなくユーザーに注意を促すことのできる仕組みのこ とです。 なおアラートについての詳細は、ヘルプファイル/InfoCenter に記述を参照してください。 ここでは簡単にアラートを定義して、ユーザーがカスタマイズする方法を紹介します。 4.2.1 事前準備 このレッスンでは、レッスン12 で作成したポートレットをカスタマイズします。よってレ ッスン12 が終了して Portlet が正常に利用できることが前提となります。

4.2.2 プロジェクトへの機能追加 アラートの機能を利用するには、レッスン12 で作成したプロジェクトに追加の機能を設定 する必要があります。 1.機能セットの追加 1.eclipse 開発画面にてプロジェクト(DF _WebChartsEnhanced)選び右クリックメニュー にてプロパティーを選択し、プロパティーダイアログを表示させます。 図 29 プロパティダイアログ表示

38/88

2.WebSphere Portlet Factory-機能情報を選択し、機能情報の追加画面を表示させます。

3.機能セットとして、アラート・スケジューラー、およびアラート・モジュールを追加して 「適用」し、「ＯＫ」を押します。 図 30 プロパティダイアログ 4. 既存ファイルを上書きするかの確認ダイアログがでるので、「はい」を押します。プロジ ェクトのデプロイも同時に行います。 以上でアラート機能を追加する準備が整いました。続いてポートレットを拡張します。

4.2.3 portlet の拡張 アラート用のデータを生成するためにportlet を拡張します。レッスン 12 で作成したプロ ジェクト（DF_WebChartsEnhanced）の provider モデルを開きます。 1.provider モデルの拡張 1. Action List ビルダーの追加 Excel シートからデータすべてを取得するメソッドを呼び出し、取得したデータを戻り値と します。このビルダーは、AlertData ビルダーから呼びます。 設定値 名前 actGetContentXml 戻りの型 IXml XML タイプ 型なしXML アクション アクション・リスト ExcelImport.getContentXml ※その他はデフォルトのまま 2.AlertData ビルダーの追加 アラート・データを定義するためにAlert Data ビルダーをモデルに追加します。アラート・ データとは、アラートの対象候補となるデータで、実際のアラートを作成する際のパラメ ーターとなります。開発者はこの時点で、いくつかのアラート対象候補となるデータを定 義しておき、アラート作成者/ユーザーへ提供することになります。 設定値 名前 ExcelAlert 名前 AlertParam 別個のアラート・ パラメーターの選 択（図 31 参照） デフォルト 500 アラート・データ・ メソッド actGetContentXml アラート・データ行 ExcelImport_Schema/ExcelContent/Row 名前 ThisYear 行１ ス キ ー マ・パス ExcelImport_Schema/ExcelContent/Row/今年 度 名前 ThisYearProduct テーブル・ベース のアラート・パラ メ ー タ ー の 選 択 （図 32 参照） 行２ ス キ ー マ・パス ExcelImport_Schema/ExcelContent/Row/商品 名 ※その他はデフォルトのまま

40/88

ここで設定する「別個のアラート・パラメーター」とは、Excel シート中にあるデータ以外 で、アラート定義の際に利用する値を定義します。

「テーブル・ベースのアラート・パラメーターの選択」については、アラート・データ・ メソッドがアラート対象データを取得するためのメソッドを指定します。ここでは、Excel シートからデータすべてを取得するAction List ビルダー actGetContentXml を指定して います。 アラート・データ行とは、上記メソッドの実行結果が保持されている変数で、次に設定す る実際のアラート・データが含まれています。ThisYear というアラート・パラメーターは アラート・データ行のなかで「今年度」という列のデータをThisYear というパラメーター で表す、という設定をしています。 図 31 別個のアラート・パラメータ選択 図 32 テーブル・ベースのアラート・パラメーターの選択

アラートの設定値が正しく反映されない場合があります（WDF の不具合？）。その場合は、 eclipse 開発環境のメニューから「プロジェクト」->「クリーン」を選択し、該当プロジェ クトを再ビルドして下さい。

以上で provider モデルの拡張は終了です。今回のレッスンでは、この状態で WebSphere Portal 画面にてアラートを設定します。

42/88 4.2.4 WebSphere Portal 画面での作業 前節で変更したポートレット、およびDashboard Framework で提供されるアラート管理/ アラート表示ポートレットを利用してアラートの定義/表示を行います。ここではスクリプ ト・ベースでのアラート定義を行いますが、その他の方法（カスタム・ロジック等）につ いては、ヘルプファイルを参照してください。 1.ポートレットの配置 1.レッスン 12 で作成したポートレットを配置したページに、２つのアラート関連ポートレ ットを配置します。配置するポートレットは以下のものです。

ポートレットのタイトル：Manage Alerts および My Alerts

図 33 ポートレット

なおこれらのポートレットは、プロジェクトにアラート・モジュール機能セットを組み込 んでデプロイした際にWebSphere Portal に自動的にデプロイされます。

※注意：Manage Alerts/My Alerts ポートレットはアラート・モジュール機能セットを組み 込んだプロジェクトごとにデプロイされます。よって、アラート・モジュール機能セット を組み込んだプロジェクトが２つある場合、Manage Alerts/My Alerts ポートレットはそれ ぞれ２つWebSphere Portal にデプロイされることとなります。アラートの定義を行う場合、 アラート・データを定義したポートレットと同じプロジェクトからデプロイされたManage Alerts/My Alerts ポートレットを利用してください。

2.アラートの設定 ページに配置したManage Alerts ポートレットを利用して、スクリプト・ベースのアラー トを定義します。 1.Manage Alerts ポートレットにてアラートを定義 ポートレット画面にて「新規アラート」ボタンを押すとID 設定画面に移動します。以下の 設定値を入力したら、「次へ」ボタンを押します。 設定値 アラート名 ThisYearAlert 新規作成 カテゴリ名 SalesAlerts ※注意：アラート名/カテゴリ名とも日本語は設定できません。 図 34 ID 設定画面

44/88 2.タイプの設定画面が表示されます。スクリプト・ベースのロジックを選択し、「次へ」ボ タンを押します。 図 35 タイプ設定画面 3.データ有効期限の設定画面が表示されます。有効期限を週に変更して、「次へ」ボタン押 します。 図 36 有効期限設定画面

4.ロジック設定画面が表示されます。ロジックとして以下のような値を設定します。ここで 設定したロジックに基づいてアラートが発生します。値の設定後「次へ」ボタンを押しま す。 設定値 アラート・アクティブの式 ThisYear –AlertParam<0 アラート優先度の式 if((ThisYear-AlertParam<-400),1,2) 図 37 ロジック設定画面 アラート・アクティブ式は、アラートの発生条件の設定式で ThisYear-AlertData（両パラ メータともポートレットで定義済み）の値が0 より小さい場合にアラートを発生させます。 アラート優先度の式はアラートの優先度の設定です。この設定ではパラメータThisYear で 示される今年度の値からAlertParam の値が-400 より小さい場合に優先度を１（高）、それ 以外の場合は優先度を２（通常）としています。

46/88 5.表示の設定画面が表示されます。以下のように設定します。ここでは実際にアラートが発 生した場合にMyAlerts ポートレット等に表示される文字列などの設定を行います。設定後 「次へ」ボタンを押します。 設定値 要約テキスト “今年度売上げ未達成” 詳細テキスト str(ThisYearProduct)+ “は今年度売上げが”+str(ThisYear)+ “で目 標値”+str(AlertParam)+ “未達成です。” 注：“（ダブル・クォーテーション）はすべて半角で入力します。 図 38 表示設定 6.パラメータの設定画面が表示されます。何も入力せず「次へ」ボタンを押します。 7.機能の設定画面が表示されます。何も入力せず「次へ」ボタンを押します。 8.検討画面が表示されます。「完了」ボタンを押してアラートの定義を終了します。 これでアラートの定義が完了しました。

3.アラートの表示 これまでの設定で、画面上のMy Alerts ポートレットには３つのアラートが表示されてい るはずです。表示されない場合は一度WebSphere Portal からログアウトして再度ログイン 後表示してください。 図 39 設定したアラートの表示画面 テキスト部分のリンクをクリックすると詳細な表示が可能になります。詳細テキストに設 定した文字列が表示されていることがわかります。 優先度の式判定結果設定にて値が変化 要約テキスト 詳細テキスト

48/88

このように、スクリプトベースのアラートを使用する場合は、まず開発者がアラートデー タの定義を行い（provider モデル）、実際のユーザーが WebSphere Portal の画面からアラ ートの定義を行うことになります。

また定義したアラートはユーザーごとに見せる/見せないの制御も行うことが出来ます。機 能設定画面にて、ユーザー許可チェックボックスにチェックをつけて「次へ」を押します。

ユーザー許可設定画面にて「ユーザーの検索」ボタンを押してユーザー検索ダイアログを 表示させます。

図 42 ユーザー許可設定画面

50/88

ダイアログにて設定したユーザー／グループがアラートを利用するユーザーとして設定さ れます。

4.3 ［レッスン 14］Dojo を使ったデータテーブルの編集

Excel ファイルから取り込んだ値を表示します。そして Dojo 系のビルダーを利用して table の値を直接変更します。さらに、table のタイトルにマウスカーソルを移動すると、ポップ アップ・テキスト・ボックスを表示する機能も追加します。外部から取り込んだ値を利用 するので、モデルを2 つ作成する必要があります。 モデル一覧 z provider モデル: 外部から値を取り込むモデル z consumer モデル: provider モデルから値を受け取り表示

「provider モデル内の Service Definition ビルダー」と「consumer モデル内の Service Consumer ビルダー」が関連付けされることで、モデル間のアクセスが可能となっています。

図：データの流れ

4.3.1 設定内容

============================================================ プロジェクト：

Portlet Factory プロジェクト名: DF_DojoInlineEdit 追加する機能セット： Dojo 拡張 - 1.x Excel 拡張機能 作成しておくモデル： モデル名: provider（モデルタイプは空にする） モデル名: consumer（モデルタイプは空にする） ============================================================ <<<外部データの用意>>> プロジェクト内の /WebContent 直下に Excel ファイル（売上げ集計.xls）をコピーしてお きます。

52/88 1. provider モデルの作成 Excel からデータを取り込むための provider モデルにビルダーを追加します。 1.Service Definition ビルダーの追加 設定値 サービス名 provider1 サービスを公開 チェック 2.Excel Import ビルダーの追加 設定値 名前 getProductSalesSource インポートするファイル /売上げ集計.xls スキーマを生成 Designer 再生成時 コンテンツ選択方法 自動（Builder にコンテンツを検索させる） シート 集計 ヘッダー行あり チェック 空の行を保持 非チェック セルのフォーマット設定を保持 チェック 3.Service Operation ビルダーの追加 設定値 データ・サービス provider1(入力済み) 操作名 getProductSales サ ー ビ ス 操 作 プ ロ パティー 呼び出すアクション DataServices/getProductSalesSource/execute 操作入力 入力構造処理 入力なし 結果構造処理 呼び出されたアクションからの構造を使用 操作結果 結果フィールド・マッピング 自動 これでprovider モデルの作成が終了しました。

2.consumer モデル作成 consumer モデルにビルダーを追加します。 1.Service Consumer ビルダーの追加 設定値 名前 consumer1 プロバイダー・モデル provider すべてのプロバイダー操作を追加 チェック

2.View & Form ビルダーの追加 table を表示します。 設定値 名前 form1 ビュー・データ操作 DataServices/consumer1/getProductSales ビュー・ページHTML /factory/pages/view_and_form_view.html HTML テンプレートファイル /factory/html_templates/gridtable.html ページ単位のデータ表示 チェック ビュー・ペ ージ・オプ ション ページあたりの行数 10 Main を生成 チェック 拡張 ページ送りボタンを追加する チェック 3.Text ビルダーの追加 table のタイトルを表示します。 設定値 名前 textTitle 位置指定の方法 名前付きタグ上 ページ form1_ViewPage ページの場所 タグ search_section テキスト 売上げ集計

54/88 4.Action List ビルダーの追加

デバッグ用です。Dojo を利用して値が変更されたことを確認する為に、System ログに変数 の中身を出力しています。このアクションは、Dojo Inline Edit ビルダーから呼ばれます。 設定値 名前 actDumpData アクション ア ク シ ョ ン・リスト SystemOut!${DataServices/consumer1/getProductSales/re sults} 5.Dojo Tooltip ビルダーの追加 table のタイトルにマウスカーソルを移動すると、ポップアップ・テキスト・ボックスを表 示されるようにします。 設定値 名前 dojoTooltip 位 置 指 定 の 方 法 名前付きタグ上 ページ form1_ViewPage ペ ー ジ の 場所 タグ search_section ツールチップ・タイプ テキスト ツールチップ・テキスト 今年度の金額を変更するには Edit アイコンをクリックして 下さい。 図 45 Dojo Tooltip ビルダー設定画面

6.Dojo Inline Edit ビルダーの追加 table 上の読み取り専用テキストを編集可能にします。ここでは「今年度」の列のみを対象 とします。 設定値 名前 dojoInlineEdit フィールド [form1_ViewPage]form1_ViewPage/ExcelContent/Row/今 年度 フォームをサブミット チェック アクション actDumpData 拡 張 オ プ シ ョンの表示 非チェック ア ク シ ョ ン 後の操作 アクション実行後に指定ページ場所を最新表示 ア ク シ ョ ン 後の操作 最 新 表 示 す る場所 ページ：form1_ViewPage タグ：data

56/88 7. Portlet Adapter ビルダーの追加 設定値 名前 samplePortlet ポートレットのタイトル dojoInlineEdit ポートレット ポートレットの短いタイトル dojoInlineEdit ポートレット デフォルト・ロケール ja 8. HTML テンプレートファイルの修正 対象ファイル /factory/html_templates/gridtable.html 【変更前】

<table name="Table" id="_table" width="100%" class="gridTable" cellspacing="0" cel lpadding="3">

【変更後】

<table name="Table" id="_table" width="100%" class="gridTable" cellspacing="0" cel lpadding="0">

gridtable.html ファイルの 39 行目の<table>タグの cellpadding 属性を"0"にします。追加 したDojo 系のビルダーの影響で table に余計な隙間が出来てしまいます（ブラウザが IE の場合のみ）。レイアウト微調整の対応なので、気にしなければこの修正はとばして構いま せん。

4.3.2 実行結果 図 47 dojoInlineEdit ポートレット（初期表示） 図 48 値の変更可能状態 Edit アイコンをクリッ クする 値が変更可能になる

58/88 図 49 値を変更した直後 図 50 ポップアップ・テキスト・ボックス表示 1. タ イ ト ル に マ ウ スカーソルを移動 2. ポップアップ・テキ スト・ボックスが表示

変更した値は一時的に保存されているだけです。ポータルからログアウトすると変更前に 戻ります。変更した内容を保持するには、更新処理を追加する必要があります。ここでは Dojo 系の説明から外れるため省略しました。

Action List ビルダー actDumpData において、Dojo を利用して値が変更されたことを確 認する為に、System ログに変数の中身を出力しています。

（例）

[08/08/12 18:07:15:984 JST] 0000005a SystemOut O *-- TIME: [2008-08-12 18: 07:15,984] --*

Category: bowstreet.system.out Priority: INFO

Msg: SystemOut: ${DataServices/consumer1/getProductSales/results} = <Excel Content><Row><商品名>テレビ</商品名> <今年度>1</今年度> <昨年度>2500</昨年度> <一昨年度>2000</一昨年度> </Row> <Row><商品名>洗濯機</商品名> <今年度>1500</今年度> <昨年度>900</昨年度> <一昨年度>600</一昨年度> </Row> ・・・途中省略・・・ <Row><商品名>デジタルカメラ</商品名> <今年度>8000</今年度> <昨年度>7000</昨年度> <一昨年度>6000</一昨年度> </Row> </ExcelContent> 変更した内容

60/88 4.4 ［レッスン 15］Dojo を使ったドラッグ・アンド・ドロップ ページでのドラッグ・アンド・ドロップ機能を実現します。モデルはドラッグ用とドロッ プ用に最低でも2 つ作成する必要があります。ここでは、Excel からのデータ取得用にもう 一つモデルを作成しています（計3 つ）。 モデル一覧 z provider モデル: 外部から値を取り込むモデル z source モデル: target モデルにドラッグ可能 z target モデル: source モデルからドロップ可能 図：データの流れ 4.4.1 設定内容 ============================================================ プロジェクト：

Portlet Factory プロジェクト名: DF_DojoDragAndDrop 追加する機能セット： Dojo 拡張 - 1.x Excel 拡張機能 作成しておくモデル： モデル名: provider（モデルタイプは空にする） モデル名: source（モデルタイプは空にする） モデル名: target（モデルタイプは空にする） ============================================================ <<<外部データの用意>>> プロジェクト内の /WebContent 直下に Excel ファイル（売上げ集計.xls）をコピーしてお きます。

Excel ファイル provider モデル source モデル

1. provider モデルの作成 Excel からデータを取り込むための provider モデルにビルダーを追加します。 1.Service Definition ビルダーの追加 設定値 サービス名 provider1 サービスを公開 チェック 2.Excel Import ビルダーの追加 設定値 名前 getProductSalesSource インポートするファイル /売上げ集計.xls スキーマを生成 Designer 再生成時 コンテンツ選択方法 自動（Builder にコンテンツを検索させる） シート 集計 ヘッダー行あり チェック 空の行を保持 非チェック セルのフォーマット設定を保持 チェック 3.Service Operation ビルダーの追加 設定値 データ・サービス provider1(入力済み) 操作名 getProductSales サ ー ビ ス 操 作 プ ロ パティー 呼び出すアクション DataServices/getProductSalesSource/execute 操作入力 入力構造処理 入力なし 結果構造処理 呼び出されたアクションからの構造を使用 操作結果 結果フィールド・マッピング 自動 これでprovider モデルの作成が終了しました。

62/88 2.source モデル作成 source モデルにビルダーを追加します。 1.Service Consumer ビルダーの追加 設定値 名前 consumer1 プロバイダー・モデル provider すべてのプロバイダー操作を追加 チェック 2.Page ビルダーの追加 雛形のHTML は全て削除して、新たに HTML を書き直します。 設定値 名前 sourcePage ページ・コンテンツ <html> <body> [Drag]

<form name="myForm" method="post"> <div><span name="drag_table" /></div> </form> </body> </html> 3.Action List ビルダーの追加 設定値 名前 main アクション・リスト１ DataServices/consumer1/getProductSales アクション アクション・リスト２ sourcePage

4.Data Page ビルダーの追加 設定値 名前 datapage1 変数 DataServices/consumer1/getProductSales/results モデル内のページ sourcePage ページ・タイプ HTML から推測 データからUI を作成 チェック 作成済みエレメントの設定値 新規タグの場所 drag_table 図 51 Data Page ビルダー設定画面

64/88 5.Data Column Modifier ビルダーの追加 設定値 名前 columnModifier コンテナー・フィールド [sourcePage]datapage1/ExcelContent/Row 追加列 dragImage 行の追加操作と行の削除操作の 設定値 列を管理 チェック 1 列名: dragImage 状況: 変更しない 列見出し: アイコン 2 列名: 商品名 状況: 変更しない 列見出し: 今年度 3 列名: 今年度 状況: 変更しない 列名: 今年度 4 列名: 昨年度 状況: 変更しない 列名: 昨年度 5 列名: 一昨年度 状況: 変更しない 列名: 一昨年度

図 52 Data Column Modifier ビルダー設定画面（一部） 追加した列を一番上にもってくる

6.Image ビルダーの追加

Data Column Modifier ビルダーで追加した列'dragImage'にドラッグ用の画像を配置しま す。 設定値 名前 image1 位置指定の方法 名前付きタグ上 ページ sourcePage ページの場所 タグ dragImage イメージ・ソース /factory/images/tree/closenode.gif 図 53 Image ビルダー設定画面

66/88 7.Dojo Drag Source ビルダーの追加

ドラッグ・タイプは、ドロップ・ターゲットに渡されるデータの名前です。任意の半角英 数字で指定します。また、Dojo Drop Target ビルダーで指定するドロップ・タイプと一致 している必要があります。 設定値 名前 dojoDragSource 位置指定の方法 名前付きタグ上 ページ sourcePage ページの場所 タグ dragImage ドラッグ・ソース・データ ${Variables/RowLoopVar/Row/商品名} ドラッグ・タイプ product

8.Portlet Adapter ビルダーの追加 設定値 名前 samplePortlet1 ポートレットのタイトル dojoDragSource ポートレット ポートレットの短いタイトル dojoDragSource ポートレット デフォルト・ロケール ja

68/88 3.target モデル作成 target モデルにビルダーを追加します。 1.Page ビルダーの追加 雛形のHTML は全て削除して、新たに HTML を書き直します。 設定値 名前 targetPage ページ・コンテンツ <html> <body> [Drop]

<div><span name="drop_area" /></div> <hr>

<div><span name="message_area" /></div> <hr> </body> </html> 2.Action List ビルダーの追加 設定値 名前 main アクション アクション・リスト targetPage

3.Variable ビルダーの追加 設定値 名前 varDropMessage タイプ String 初期値 何もDrop されていません。 図 55 Variable ビルダー設定画面 4.Text ビルダーの追加 設定値 名前 textMessage 位置指定の方法 名前付きタグ上 ページ targetPage ページの場所 タグ message_area テキスト ${Variables/varDropMessage}

70/88 5.Image ビルダーの追加 データを受け取る為に、ドロップ先の画像を配置します。 設定値 名前 image1 位置指定の方法 名前付きタグ上 ページ targetPage ページの場所 タグ drop_area イメージ・ソース /factory/images/peoplepicker/Search.gif 図 56 Image ビルダー設定画面

6.Action List ビルダーの追加

このアクションはDojo Drop Target ビルダーから呼ばれることを前提にしています。その 為、単一のストリング引数を受け取れるように定義します。この引数にはドラッグ・ソー スから受け取った値が格納されています。 設定値 名前 actSelectItem 名前 product 引数 データ型 String アクション・リスト１ Assignment!Variables/varDropMessage=${Ar guments/product} アクション アクション・リスト２ Assignment!Variables/varDropMessage+=が Drop されました。 図 57 Action List ビルダー設定画面

72/88 7.Dojo Drop Target ビルダーの追加

ドロップ・アクションで呼び出すメソッドは、単一のストリング引数を受け取れる必要が あります。ドロップされた際に呼ばれ、ドラッグ・ソースからデータを引数に渡します。 ドロップ・タイプは、ドラッグ・ソースから受け取るデータの名前です。任意の半角英数 字で指定します。また、Dojo Drag Source ビルダーで指定するドラッグ・タイプと一致し ている必要があります。 設定値 名前 dojoDropTarget 位置指定の方法 名前付きタグ上 ページ targetPage ページの場所 タグ drop_area ドロップ・アクション actSelectItem ドロップ・タイプ product 拡張オプションの表示 非チェック アクション後の操作 アクション実行後に指定ページ場所を最新表示 アクション後 の操作 最新表示する場所 ページ: targetPage タグ: message_area

8.Portlet Adapter ビルダーの追加 設定値 名前 samplePortlet2 ポートレットのタイトル dojoDropTarget ポートレット ポートレットの短いタイトル dojoDropTarget ポートレット デフォルト・ロケール ja

74/88 4.4.2 実行結果 図 59 ドラッグ・アンド・ドロップポートレット（初期表示） 図 60 アイコンをドラッグしている途中 フォルダアイコンを検索 アイコンにドラッグ

図 61 ドロップ直後 図 62 無効なドラッグ ドロップされたデータ （商品名）を表示 無関係な場所にドラッ グしている状態

76/88 4.5 ［レッスン 16］Ajax を使ったテキスト先行入力 Ajax を使ってテキスト入力における「先行入力」機能（入力補完機能とも言います）を実 装します。 ここでは仕組みを理解する為に、実際に入力した文字列と「先行入力」機能を 使ってテキストボックスに入力した文字列の両方をページ上に表示します。 4.5.1 設定内容 ============================================================ プロジェクト：

Portlet Factory プロジェクト名: DF_AjaxTypeAhead 追加する機能セット： なし 作成しておくモデル： モデル名: sample1（モデルタイプは空にする） ============================================================ 図 63 sample1 モデル設定画面

1. sample1 モデル作成 sample1 モデルにビルダーを追加します。 1.Variable ビルダーの追加 「先行入力」の候補一覧をあらかじめ作成しておきます。 設定値 名前 MonthList タイプ XML 初期値 <Rowset> <Row><Value>January</Value></Row> <Row><Value>February</Value></Row> <Row><Value>March</Value></Row> <Row><Value>April</Value></Row> <Row><Value>May</Value></Row> <Row><Value>June</Value></Row> <Row><Value>July</Value></Row> <Row><Value>August</Value></Row> <Row><Value>September</Value></Row> <Row><Value>October</Value></Row> <Row><Value>November</Value></Row> <Row><Value>December</Value></Row> </Rowset> 2.Variable ビルダーの追加 テキストボックスに対して実際に入力した文字列を格納します。 設定値 名前 varInput タイプ String 初期値 （空白のまま）

78/88 3.Variable ビルダーの追加 「先行入力」機能で選択した文字列、つまりテキストボックスに表示している文字列を格 納します。 設定値 名前 varTextBox タイプ String 初期値 （空白のまま） 4.Lookup Table ビルダーの追加 設定値 名前 lookupMonth データ・ソース XML データ XML データ ${Variables/MonthList/Rowset} 変数タイプ 値タグおよびラベル・タグ 値タグ Value ラベル・タグ Value 図 64 Lookup Table ビルダー設定画面

5.Page ビルダーの追加 雛形のHTML は全て削除して、新たに HTML を書き直します。 設定値 名前 startPage ページ・コンテンツ (HTML) <html> <body>

<form name="myForm" method="post">

<div>入力:<span name="area_input" /> <span name="ar ea_button" /></div> <hr> <div>実際に入力した文字列=<span name="area_result1" / ></div> <hr> <div>テキストボックスの文字列=<span name="area_result 2" /></div> </form> </body> </html> 6.Action List ビルダーの追加 設定値 名前 main アクション アクション・リスト startPage 7.Text Input ビルダーの追加 「先行入力」機能を利用するテキストボックスを作成します。 設定値 名前 textInput 位置指定の方法 名前付きタグ上 ページ startPage ページの場所 タグ area_input テキスト （空白のまま）

80/88 8.Ajax Type-Ahead ビルダーの追加 「先行入力」機能の本体です。フィルター・モードや比較タイプ等、任意の設定変更が可 能です。「先行入力」の候補一覧をルックアップ・テーブルで指定します。 設定値 名前 ajaxTypeAhead 位置指定の方法 名前付きタグ上 ページ startPage ページの場所 タグ area_input 使用されるルックアップ・テーブル lookupMonth フィルター・モード データで始まる値を表示 比較タイプ 大／小文字を区別しない 図 65 Ajax Type-Ahead ビルダー設定画面

9.Action List ビルダーの追加

「先行入力」機能で表示している文字列ではなく、実際に入力した文字列を取得する為に、 Ajax Type-Ahead ビ ル ダ ー の メ ソ ッ ド getCurrentUserData() を 実 行 し ま す 。 Ajax Type-Ahead ビルダーのフィルター・モードに「すべての値を表示」を指定して、独自のフ ィルタリング・ロジックを利用することが出来ます。その際、独自のフィルタリング・ロ ジックに引き渡す値として、メソッドgetCurrentUserData()の戻り値が最適です。 設定値 名前 actEvent アクション アクション・リスト Assignment!Variables/varInput=${MethodCall/aj axTypeAhead.getCurrentUserData} 図 66 Action List ビルダー設定画面

82/88 10.HTML Event Action ビルダーの追加 「先行入力」機能で表示している文字列を選択すると、このイベントが呼ばれます。ここ では、実際に入力した文字列を取得する為に、アクションactEvent を呼び出しています。 設定値 名前 htmlEventAction 位置指定の方法 名前付きタグ上 ページ startPage ページの場所 タグ area_input イベント名 onChange アクション・タイプ アクションへのリンク アクション actEvent 拡張オプションの表示 非チェック アクション後の操作 アクション実行後に指定ページ場所を最新表示 ページ: startPage アクション後 の操作 最新表示する場所 タグ: myForm 図 67 HTML Event Action ビルダー設定画面（一部）

11.Text ビルダーの追加 設定値 名前 result1 位置指定の方法 名前付きタグ上 ページ startPage ページの場所 タグ area_result1 テキスト ${Variables/varInput} 12.Action List ビルダーの追加 設定値 名前 actSubmit アクション・リスト１ Assignment!Variables/varTextBox=${Inputs/area _input} アクション アクション・リスト２ startPage 図 68 Action List ビルダー設定画面

84/88 13.Button ビルダーの追加 設定値 名前 buttonSubmit 位置指定の方法 名前付きタグ上 ページ startPage ページの場所 タグ area_button ラベル サブミット アクション・タイプ フォームをサブミットしてアクションを呼び出す アクション actSubmit 図 69 Button ビルダー設定画面（一部）

14.Text ビルダーの追加 設定値 名前 result2 位置指定の方法 名前付きタグ上 ページ startPage ページの場所 タグ area_result2 テキスト ${Variables/varTextBox} 15.Portlet Adapter ビルダーの追加 設定値 名前 samplePortlet ポートレットのタイトル AjaxTypeAhead ポートレット ポートレットの短いタイトル AjaxTypeAhead ポートレット デフォルト・ロケール ja

86/88 4.5.2 実行結果

図 70 AjaxTypeAhead ポートレット（初期表示）

図 72「先行入力」機能による選択直後

88/88 最終ページです。