slack

テクてく Lotus 技術者 Slack に参加しよう!

2010/01/20

XPages Tutorial Part 50 : 検索機能の作成

Creating A Search Function {Original Source}

現在の電話帳アプリケーションは当初設定した目的を達成し完成している状態です。
当初設定した目的のうち残り 2 つに関しては XPages に関連した項目ではないのでこのシリーズでは取り扱いません。
これを完成として OpenNTF にリリースできる状態ではありますが、その前にもうひとつだけ機能を追加しておきたいと思います。

それは XPages アプリケーションに検索機能を追加することです。この機能ではユーザーが検索したい言葉を入力しボタンを押すと検索のプロセスを始めるものです。検索バーを画面の右側に追加したいと思います。

タイトルバーのエリアに検索バーを追加しようと思いますが、ユーザーの視点からアプリケーションのタイトルの一部ではないことはもちろん、サイドバーの一部ではないこと、また現在表示されているデータから検索をしているのかアプリケーション全体を検索しているのかが分かるような場所がふさわしいと思います。

では検索バーを追加していきましょう。「layout_PlaceBar」カスタムコントロールを開き、画面右側のコントロールペインから新しいパネルをドラッグインしてください。
ソースビューに切り替え、このパネルの記述をページの上部移動させます。
ちょうど DIV の下に配置し、下のように名前を付けて「lotusSearch」のスタイルクラスを指定します。


このパネルの中にもう 2 つのコントロールをドラッグインします。
編集ボックスコントロールとリンクコントロールです。
編集ボックスコントロールには「mySearchValue」という名前を指定し、幅を 200px に指定します。


リンクコントロールには、ラベルには分かりやすい名前を入力しておいてください。


ラベルに関しての理由は、文字の代わりにイメージを指定したいからです。
このイメージは、イメージリソースから指定するものです。お好きなイメージをアプリケーションにインポートして指定してください。


検索バーのレイアウトのソースは次のようになります。

パネルコントロール全体に対して右端に来るように top と right のマージンをしたのに注意してください。

次回はこれらのコントロールにイベントを追加することをやっていきます。

0 件のコメント:

コメントを投稿