設定内容 - レッスン - IBM WebSphere Dashboard Framework V6.1　自習ガイド　応用編

4 レッスン

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

<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

アクション後の操作