チュートリアル > XPages Site Finder チュートリアル >
< 前へ

検索用の XPage を作成する

このページを使用して、検索パラメータを指定し、結果を表示します。 検索パラメータは、市区町村、都道府県、国、郵便番号の値です。 ユーザーは、どのパラメータにも値を入力してボタンをクリックすることができます。 ページが更新され、結果がビューとして表示されます。 ビューの検索プロパティでは、検索パラメータと一致する文書のみが表示されます。

以下の手順を実行します。
  1. XPage のリストの先頭で、[新規 XPage] をクリックします。 または、サイドペインで右クリックして [XPage] > [新規 XPage] を選択します。
  2. 新しい XPage に「サイトファインダー」という名前を付けて、[OK] をクリックします。
  3. 右ペインの [カスタムコントロール] で、[ヘッダー] カスタムコントロールを XPage にドラッグします。

    これは SiteList XPage に配置するのと同じイメージですが、保守しやすくするために、カスタムコントロールに配置されています。 カスタムコントロールは、サブフォームに似ています。

  4. 以下のようにして、スタイルシートをページに追加します。
    1. コントロールではなく実際のページをクリックして、ページをフォーカスします。
    2. 下部ペインの [プロパティ] で、[スタイル] をクリックします。
    3. 末尾までスクロールし、[スタイルシートをページに追加する] をクリックします。
    4. [スタイルシートをページに追加する] ボックスで、[styles.css] を選択します。
    5. [OK] をクリックします。
  5. 以下のようにして、タイトルを追加します。
    1. XPage のヘッダーの後の部分で Enter を押し、ページのタイトル (例えば、「サイトファインダー」) を入力して、もう一度 Enter を押します。
    2. テキストを強調表示します。
    3. 下部ペインで、[スタイル] をクリックします (まだフォーカスされていない場合)。
    4. [styles.css] の下のリストで、[.title] をクリックします。
    選択したスタイルに合わせてテキストの体裁が変更されます。
  6. タイトルテキストの下に、ユーザーへの説明 (例えば、「これらのフィールドのいずれかまたはすべてに入力して [検索] をクリックします」) を入力して、Enter を押します。
  7. 以下のようにして、4 つの行と 2 つの列を持つ表を作成します。
    1. 右ペインの [コンテナコントロール] から、[表] を XPage の説明の下にドラッグします。

      [表の挿入] ダイアログボックスが表示されます。

    2. [表の挿入] ダイアログボックスで、行に 4、列に 2 を指定します。
    3. [OK] をクリックします。
    4. グラブハンドルを使用して、表の幅を調整します。
  8. 列 1 の各セルで、以下の手順を実行します。
    1. 右ペインの [コアコントロール] から、[ラベル] をセルにドラッグします。
    2. 下部ペインで、コントロールのラベルを「市区町村」(行 1)、「都道府県」(行 2)、「国名」(行 3)、「郵便番号」(行 4) に変更します。
  9. 列 2 の各セルで、以下の手順を実行します。
    1. サイドペインの [コアコントロール] から、[編集ボックス] をセルにドラッグします。
    2. 下部ペインの [プロパティ] で、[編集ボックス] をクリックします。
    3. 名前を「市区町村の検索」(行 1)、「都道府県の検索」(行 2)、「国の検索」(行 3)、「郵便番号の検索」(行 4) に変更します。
    4. 下部ペインの [プロパティ] で、[データ] をクリックします。
    5. [次を使用してデータをバインド] で、[詳細情報] をクリックします。
    6. [使用] ドロップダウンメニューから、[スコープ付き変数] を選択します。
    7. [パラメータ] リストボックスから、[セッションスコープ] を選択します。
    8. 末尾までスクロールし、変数名に「市区町村の検索」(行 1)、「都道府県の検索」(行 2)、「国の検索」(行 3)、「郵便番号の検索」(行 4) を入力します。
    これらの編集ボックスをスコープ付き変数にバインドすると、データストアではなく JavaScript コードの値にアクセスできるようになります。 セッション変数は、サーバーでのユーザーセッションの存続期間中に複数のページにわたって値を保持します。
  10. 以下の手順を実行して、ページを送信および更新するためのボタンを作成します。
    1. サイドペインの [コアコントロール] から、[ボタン] を表の下の行にドラッグします。
    2. 下部ペインで、コントロールのラベルを「検索」に変更します。
    3. ボタンの種類のドロップダウンリストから、[送信] を選択します。
    このボタンをクリックすると、ページがサーバーに送信され、ユーザーが入力した値に基づいてページの内容が更新されます。
  11. 以下の手順を実行して、結果を取得するための照会を表示します。
    1. XPage の次の行に「照会ストリング:」とスペースを入力します。
    2. 右側の [コアコントロール] から、[計算結果フィールド] をページにドラッグします。
    3. 下部ペインの [プロパティ] で、[フォント] をクリックします。 色を青に変更します。
    4. 下部ペインの [プロパティ] で、[値] をクリックします。
    5. [次を使用してデータをバインド] で、[詳細情報] をクリックします。
    6. [使用] ドロップダウンメニューから、[スコープ付き変数] を選択します。
    7. [パラメータ] リストボックスから、[セッションスコープ] を選択します。
    8. 末尾までスクロールし、変数名に「ストリングの照会」と入力します。

      変数名は、任意の名前にすることができ、特別な意味はありません。 変数への値の割り当ては、後で行います。

    これで、後で計算した照会を表示できるようになります。 この表示は、実動アプリケーションではおそらく不要ですが、テストを行う場合には便利です。
  12. サイドペインの [コンテナコントロール] から、[ビュー] をページの次の行にドラッグします。
    1. [表示するデータのソース] の設定を [Domino ビュー] のままにしておきます。
    2. [アプリケーション] の設定を [現在の] のままにしておきます。
    3. [ビュー] ドロップダウンリストで、[SiteList] を選択します。
    4. データソース名として [view1] を受け入れます。
    5. 最後にある列のリストで、[サイト名]、[電話]、[住所]、[市区町村]、[都道府県] 以外のすべてのチェックマークを外します。 これは変更可能で、表示する列を選択できますが、[サイト名] は必ず選択してください。
    6. [OK] をクリックします。
  13. 下部ペインの [プロパティ] で、[ビュー] をクリックします。 [実行時に、選択した文書を次の設定を使用して開く] で、[サイト] を選択します。
  14. 下部ペインの [プロパティ] で、[データ] をクリックします。 ビューが [SiteList] に設定されていることを確認します。
  15. 次に、検索照会を設定して、ユーザーが検索フィールドに入力した内容を満たす文書のみがビューに表示されるようにします。 以下の手順を実行します。
    1. 下部ペインの [プロパティ] で、[すべてのプロパティ] をクリックします。
    2. 末尾までスクロールします。[データ] を展開してから、次に出現する [データ] を展開します。 [検索] プロパティを選択します。

      画面は、以下のようになります。

      [検索] プロパティ

    3. [検索] プロパティの横にあるひし形をクリックして [値の計算] を選択します。

      スクリプトエディタが開きます。

    4. 以下のコードをスクリプトエディタに入力します。 言語がサーバーサイドの JavaScript になっていること、および [動的に計算する] が設定されていることを確認してください。 
      var tmpArray = new Array("");
var cTerms = 0;
if(sessionScope.searchZip != null & sessionScope.searchZip != "") {
	tmpArray[cTerms++] = "(FIELD SearchZip = ¥"" + sessionScope.searchZip + "¥")";
}
if(sessionScope.searchCity != null & sessionScope.searchCity != "") {
	tmpArray[cTerms++] = "(FIELD SearchCity = ¥"" + sessionScope.searchCity + "¥")";
}
if(sessionScope.searchState != null & sessionScope.searchState != "") {
	tmpArray[cTerms++] = "(FIELD SearchState = ¥"" + sessionScope.searchState + "¥")";
}
if(sessionScope.searchCountry != null & sessionScope.searchCountry != "") {
	tmpArray[cTerms++] = "(FIELD Country = ¥"" + sessionScope.searchCountry + "¥")";
}
qstring = tmpArray.join(" AND ").trim();
sessionScope.queryString = qstring; // this just displays the query
return qstring // this is what sets the search property

      ここでは演習を行いませんが、このコードは関数の形式にしてスクリプトライブラリに入れることができます。 その後、スクリプトライブラリをリソースとしてページに追加し、単純参照によって関数にアクセスできるようになります。 これにより、コードを中央で保守しながら、複数の場所で使用できます。

    5. [OK] をクリックします。
    このコードは、これらの編集ボックスにバインドされたセッションスコープ変数を使用して、ユーザーがページに入力する値を取得します。 コードは、[searchZip]、[searchCity]、[searchState]、[国] の各フィールドの文書の値と一致する照会ストリングを作成して返します。

    便宜上、検索する文書で使用されているのと同じフィールド名を使用しますが、任意の名前を使用できます。

  16. 以下の手順を実行して、最初の列を調整し、ユーザーが文書を読み取りモードで開くことができるようにします。
    1. XPage で、ビューの最初の列の内部をクリックします。
    2. 下部ペインの [プロパティ] で、[表示] をクリックします。
    3. [列の値をリンクとして表示する]にチェックマークを付けます。
    4. [文書を開くモード] で、[読み取り専用] をクリックします。

    検索結果を見ている Web ユーザーは、リンク先の文書を編集することはできません。 実際のアプリケーションでは、アクセス制御リストを使用することもできます。

  17. 変更を保存して、新しい検索画面をプリビューします。
  18. 必要に応じてページをプリビューします。 検索を試行します。例えば、郵便番号を 02108 または 33432、市区町村を Boca Raton または Boston、都道府県を MA、国を France と指定します。
  19. 中央ペインの右上にある X をクリックして、SiteFinder XPage を終了します。
この時点で、XPage は、SiteFinderFinal (比較対象として開くことができる) と類似したページになっています。

ここで説明したプロセスは、1 つの方法であり、必ずしも検索機能を編成するための最善の方法ではありません。 [検索] ボタンには、JavaScript コードのデータソースの検索プロパティを割り当てることもできます。 この方法を使用すると、さらに容易に、ページ上で照会情報の複数のソースを用意したり、さまざまな検索のタイプごとに複数の検索ボタンを用意したりすることができます。

他のコントロールを使用して、結果の書式を整えることができます。例えば、[データ表] は、検索結果のレイアウトをより細かく制御することができるため、多くの場合、ビューの代わりに使用されます。ただし、[ビュー] コントロールは、非常にシンプルで使いやすいです。

< 前へ