slack

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

2010/01/05

XPages Tutorial Part 27 : ブレッドクラムに名前を実装

Naming The Breadcrumbs {Original Source}

前回固定文字のラベルとリンクを使って簡単なブレッドクラムを作成しました。
今回はそのブレッドクラムを修正して動的にラベルに文字を割り当てたり、CSS のクラスを適用してレイアウトを適用していきます。

現在のブレッドクラムは「Home > Location > Person」のようになっています。
Home に変更はありませんが、Location には実際ユーザーが見ているロケーションの名前を、Person には実際開いている人の名前を出したいと思います。

既に作成してあるコードのひとつをちょっとここで振り返ってみたいと思います。
それはページがロードされる前に実行される「Location=」の URL の部分をスクリプトでセッションスコープの変数に置き換えた時のコードです。そのときのコードを思い出してみてください。
var cgi = new CGIVariables();
var param = cgi.getURLParam("location");
if (param) {
if (param != "" ) 
sessionScope.locationfilter = param;
} 
現在のビューや文書を参照する代わりにセッションの変数を使ってラベルの文字列を割り当てることができます。では「layout_PlaceBar」カスタムコントロールを開いてブレッドクラムの「Location」と設定したラベルを選択してください。プロパティの中で「ラベル」というプロパティの右端にある青いダイアモンドをクリックして値の計算を選択します。

スクリプトエディタで下のように入力してください。

次にリンクですが、「Location」リンクに対しても同じようにすることができますが、リンクに関してはオープンするページの指定をすることにします。
リンクのプロパティの右側になるオプションからオープンページに「Location」XPage を指定してください。

では ?Location= の部分はどうなるのでしょうか?実際にはこの指定で必要なくなります。
セッションスコープの変数が書かれた「beforePageLoads」スクリプトは URL 上の URL パラメータがあるときだけ置き換えられるだけです。つまり、今回の方法はより安全に「Location」XPage をオープンすることができ、かつ現在のセッションスコープの値も再利用できるようになります。
ではこのカスタムコントロールを保存したのちに XPage を再読み込みして確認してください。

ブレッドクラムの最後の部分は「Person」文書の人の名前を参照することです。そこで再び sessionScope 変数を利用することにします。
「content_Location」カスタムコントロールを開いてソースビューの中で <xp:tr> タグを見つけてください。このタグは繰り返しコントロールの中にあります。Part 25 で 表の行に onClick イベントをスクリプトを書いた部分になります。


今回その部分に下のスクリプトを変更します。
sessionScope.personName = rowData.getColumnValue("First Name") + " " + rowData.getColumnValue("Last Name");
sessionScope.personDocID = rowData.getUniversalID();
context.redirectToPage("Person.xsp"); 

personName という新しい sessionScope の変数を作成し、名と姓をスペースを間に挟んだ値を設定しています。
これでブレッドクラムの最後の部分に表示する名前の部分が作成できました。

「layout_PlaceBar」を保存して閉じる前に、パネルを選択し「phonebookBreadcrumb」のスタイルクラスを設定します。ソースは以下のようになるはずです。


それぞれ作業した内容を保存して XPage 表示する前に先ほど追加してスタイルクラスの定義を「custom.css」に追加します。
その後にブラウザでページを再読み込みしてください。結果は下のスクリーンのようになるはずです。

#phonebookBreadcrumb, .phonebookBreadcrumb{
margin-left:10px;
margin-top:10px;
font-size:20px;
color:#000000;
}
#phonebookBreadcrumb a, .phonebookBreadcrumb a{
color:#000000;
}

#phonebookBreadcrumb a:hover, .phonebookBreadcrumb a:hover{
color:#000000;
}

#phonebookBreadcrumb a:visited, .phonebookBreadcrumb a:visited{
color:#000000;
}


0 件のコメント:

コメントを投稿