slack

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

2010/01/19

XPages Tutorial Part 47 : ロケーションをリストするためのビューコントロール

Using A View Control To List Locations {Original Source}

ロケーションの一覧をホームページに表示させる際、表の中に繰り返しコントロールを使ってきました。これは表の中のそれぞれの行にマウスを合わせると色を変えたりする効果を与えたり、行の中のどの行でもいいからクリックすると、その文書をクリックしたと認識させることができました。
今回は同じように情報を一覧表示させることができる「ビュー」コントロールをご紹介します。ではどのように設定していくかを見ていきましょう。

「content_LocationAdmin」カスタムコントロールを開いてください。
ここにはまでひとつのパネルしか存在しないブランクの状態です。ここのパネルに「ビュー」コントロールをドラッグインします。「ビュー」コントロール右側のコンテナコントロールにあります。

ドラッグしマウスを離すとダイアログボックスが表示されデータソースをビューコントロールへリンクさせることができます。
現在のアプリケーションから「vw_locations」ビューを選択します。
その下にこのビューで利用できるすべての列が表示されます。
もし XPage 上で表示させたくない列があればチェックをはずすだけです。

では OK をクリックし、ページャが既に組み込まれているビューコントロールを確認します。このカスタムコントロールを保存しブラウザでプリビューします。

この電話帳を編集できるユーザーには、ビューに表示されているロケーション文書をクリックすると自動的に編集モードでページが表示されるようにしたいと思います。
また各行にチェックボックスを追加して、一度に複数の文書を削除できるようにもしていきます。
では先ほどのビューコントロールに修正をしていきましょう。
まず、最初の列を選択し、ビューの列プロパティを見ます。
列表示のいくつかのプロパティがあると思います。

「チェックボックス」にチェックを入れ、「列の値をリンクとして表示する」にチェックを入れ、文書のオープンモードを上のように指定します。
この状態でプリビューすると表示はこのようになります。


リンクをクリックしたときに開く際の XPage を指定します。「ビュー」コントロールに戻り、「実行時に、次を使用して選択した文書を開く」に下のように指定してください。

ビューコントロールの表示をもう少し良くするために以下の CSS を custom.css に追加することにします。
#phonebookvc,.phonebookvc { 
width:100%; 
}
ではこのスタイルをビューコントロールに適用したいと思います。表のセクションでは以前使用したものを再利用します。

ブラウザでの表示は下のようになります。

次回はチェックボックスと削除のアクションボタンをリンクさせる方法を見ていきます。

0 件のコメント:

コメントを投稿