slack

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

2009/12/28

XPages Tutorial Part 21 : サイドバーをロケーション XPage にリンクさせる

Linking The Sidebar To The Location XPage {Original Source}

これまで「home」XPage と「Location」XPage を完成させてきましたが、それぞれはまだリンクした形になっていません。今回はサイドバーに表示されているリストをリンクに変更し、ユーザーがそれをクリックするとそのロケーション名を URL へ引き渡す処理を行っていきます。

「sb_LocationsList」カスタムコントロールを開いてください。
現在はデータベースの lookup¥locations ビュー を繰り返し表示しているだけで下のような内容になっています。
今回このリストの見栄えをちょっと変更してみたいと思います。なぜなら OneUI CSS のファイルの中に追加のコンポーネントがあることを見つけたのでこれを利用したいと思います。
ではメニューにタイトルを付けたいと思います。
新しいパネルを「lotusInner」の中にくるようドラッグインしてください。ソースを確認して正しい位置に配置されたかどうか確認してください。
「lotusInner」の真下に追加して、スタイルクラスを「lotusMenuSelection」と指定してください。そして<h3>タグしてメニュータイトルを入力します。
では保存してブラウザで表示させてみてください。
タイトルが表示されているのを確認してください。

では次にもう一つのパネルをドラッグインして「lotusMenuSubsection」というスタイルクラスを指定してください。
次にソースビューで繰り返しコントロールの部分(xp:repeat)が、今作成したパネルの内部に来るようにこのパネルの終了位置を修正します。

次に繰り返しコントロールの中にある h3 タグで囲まれた計算結果フィールドですか、今回はこの計算結果フィールドはもう使用しませんので、そのかわりリンクコントロールをドラッグインして置き換えてください。

リンクコントロールのプリパティのひとつである「ラベル」を探してください。
右端の計算プロパティメニューボタン(青いダイアモンド)をクリックし計算結果の値として rowData.getColumnValue("Location") をスクリプトエディタで指定します。
そしてリンクプロパティのオプションから「オープンページ」に Location を指定します。
この指定で Location XPage が開くことは指定できるようになりました。?Location= を URL へ追加するためにすべてのプロパティに切り替えてください。
データセクションの「parameters」オプションを探してください。入力エリアをクリックすると 2 つの小さなボタンが表示されます。最初のボタンがパラメーターを追加するためのボタンです。
parameter の name に「location」、value にJavaScript で rowData.getColumnValue("Location") と入力してください。
ではカスタムコントロールを保存して、home.xps をブラウザで開き、今回作ったリンク URL にパラメーターを引き渡して対象のロケーションだけが表示されるようになっているか確認してください。

<h3>タグのスタイリングにはあまり満足できないので、そのかわりに <li> タグを使うことにしました。同時に繰り返しコントロールを <ul> タグで囲むようにしました。
そうすると次のようにより見栄えのいいものになるはずです。
最新のダウンロードファイルを下に追加しておきます。その中には「Build Sample Data」というノーツクライアントで起動するエージェントが入っています。このエージェントはロケーションを 10 個、ランダムな Person 文書を 1000 個作ります。このエージェントは詳細の情報までは作成しませんが。
ダウンロードファイル xPhonep21.zip

0 件のコメント:

コメントを投稿