2010/01/20

XPages Tutorial Part 51 : 検索バーにファンクションを設定する

Giving Function To The Search Bar {Original Source}

検索バーの基本は設計できましたので、実際の機能を追加していくことにします。
「layout_PlaceBar」カスタムコントロールを開いてください。

データベースの検索機能は全文索引が作成されている場合にだけ動作します。全文索引が作成されていない場合には検索バー全体を表示しないようにしたいと思います。
これを行うためには検索ボックスを含むパネルの表示を値の計算で判断させます。
ではパネルを選択し(ソースビューから選択すると簡単です)、「表示」プロパティのダイアモンドをクリックします。値の計算を選択し JavaScript のエディタを開き「database.isFTIndexed();」を入力してください。
このファンクションは全文索引が作成されていれば「true」、作成されていなければ「false」を返します。

検索用の編集ボックスに対して、このフィールドが検索ボックスだということをユーザーに分かってもらうためのヒントを提供したいと思います。
今回は「Search...」という言葉をデフォルト値として追加し、編集ボックスの中をクリックするとこのデフォルト値が消えるようにします。

編集ボックスを選択し、「すべてのプロパティ」セクションに切り替えてください。
「データ」カテゴリの中にデフォルト値を設定する場所があります。

デフォルト値を消すには「onfocus」イベントを使います。
イベントタブに切り替えて「フォーカス」カテゴリから「onfocus」イベントを探してください。
このイベントはユーザーのブラウザ上で動作するようにしたいため「クライアント」のスクリプトエディタで記述することになります。その JavaScript は下記になります。
document.getElementById("#{id:mySearchValue}").value = "";
document はブラウザで表示している現在の文書を参照します。
.getElementById でその ID 名で文書のエレメントにアクセスできます。
実行に生成されるまでエレメントの名前が分からないので、編集ボックスの ID 名が正しく設定されるように #{id:mySearchValue} を使用します。(これは mySearchValue の XPages 上の ID です)。
.value  "" はブランクを設定するという意味です。

ここまでのコードは非常に簡単なものです。フィールドの中をクリックするとそこにあったものを削ブランクに置き換えて削除するものです。
しかし、ここで問題になるのは何かの文字を入力した後で、ほかのフィールドに移りまたここに戻ってくると先ほど入力した文字は消えてしまいます。
この問題を解決するには onfocus イベントに次の JavaScript に変更してください。
var me = document.getElementById("#{id:mySearchValue}");

if (me.value === "Search...")
{
me.value = ""
}
このコードでデフォルト値がフィールドにある場合に限ってクリアするものです。このほうがエンドユーザーにとっても良さそうです。

ではエンドユーザーが入力した内容はどこに格納するのでしょうか?
スコープの値を利用するのです。
編集ボックスのプロパティで、データタブを選択してください。
値を取得しどこかに格納するためには、この編集ボックスと何かをバインドしなければなりません。
今回は viewScope の変数として値を保管したいので、「詳細」を選択し、使用を「スコープ変数」とし ビュースコープ (「表示の範囲」)を指定します。
最後に変数名を指定してください。今回は「searchValue」とします。

残る最後の機能はユーザー検索ボックスに文字を入力し、エンターキーを押されたら必要なアクションを実行させることです。これは次回に行うことにします。

0 件のコメント:

コメントを投稿