2010/01/05

XPages Tutorial Part 26 : ブレッドクラムの作成

Dropping Some Breadcrumbs {Original Source}

このアプリケーションの中で、「PaceBar」に関してはこれまで何もしてきませんでした。
アプリケーションのレイアウトをデザインしたとき以来、まだその場所にはテキストが表示されているだけです。

このセクションにブレッドクラムを表示させていきたいと思います。
ブレッドクラムはナビゲーションのひとつの方法としてよく website で使用されています。
アプリケーションの構造や今自分はどのページをみているかを把握できるようにブレッドクラムが使用されます。その構造は普通「Homepage > Section > Subsection」のような形で表現され、このアプリケーションでいえば「Home > Location > Person」という構造になります。「>」はそれぞれのセクションを分けるシンボルとして使われます。

ではブレッドクラムを作成していきましょう。実際のコンテンツを表示させるのは次回にしますが、今回は ブレッドクラムのセクションを PlaceBar のカスタムコントロールに配置し表示/非表示させる方法を見ていきます。

では「layout_PlaceBar」カスタムコントロールを開いてください。
ソースビューを開き暫定的に入力してあるテキストを削除します。
次に、設計ビューに切り替えて新しいパネルをドラッグインして、またその中にラベルとリンクのコントロールをドラッグインしてください。

ドラッグインしたらソースビューに切り替え、上のスクリーンを参考にして「lotusPlaceBar」div の間にパネルが入っていることを確認します。
また「Home」と「Location」のブレッドクラムのセクションには、ともにラベルとリンクが配置されています。
ブレッドクラムの本来の見え方としては、たとえば現在「Location」のページを見ているのであればホームページへのリンクだけを表示させることが必要です。

ではここでラベルとリンクが配置されたので、次はブレッドクラムで必要なものだけが表示されるようにします。
これにはいろいろな方法がありますが、今回は次のような方法を使うことにしました。

「layout_PlaceBar」のプロパティで、「プロパティ定義」を見てください。



ここで定義するプロパティでこのカスタムコントロールが配置されている XPage に引き渡す値を設定することができます。
今回 2 つのプロパティを作成し、それぞれ「showLocCrumb」と「showPerCrumb」の名前を付けます。それぞれはともに値が文字列のタイプになります。



プロパティが作成できたら「layout_PlaceBar」を保存して閉じてください。

今度は「home」XPage を開いてください。
この PlaceBar のカスタムコントロールを見ると、すべてのプロパティタブにカスタムプロパティとして先ほど作成したプロパティが表示されているはずです。



ここではこのプロパティの値としていづれも「No」という文字を入力します。
入力が終わったらソースビューで下のようなコードになっているか確認してください。


ではこの XPage を保存して閉じてください。
同じことを「Location」Xpage と「Person」XPage にも行います。
ただし「Location」Xpage には「Yes」、「No」を指定します。
「Person」XPage は「Yes」、「Yes」を指定します。

ここまで完了したら再度「layout_PlaceBar」カスタムコントロールに戻ります。

ブレッドクラムの終わりの方から始めましょう。「Person」のラベルを選択し、プロパティの中の「表示」が選択されていると思います。デフォルトでは選択がされています。
この表示プロパティの右端にある青いダイアモンドを選択し値の計算を使って表示させるか非表示にするかを設定したいと思います。


典型的なドミノ開発でよく非表示式を使うことがあると思いますが、これはいわばその逆で表示式として使用することになります。つまり先ほどの「showPerCrumb」が「Yes」にセットされたときにのみ表示させるよう JavaScript を使って計算します。では値の計算からスクリプトエディタを呼び出します。

compositeData はカスタムコントロールに引き渡されるプロパティを参照することができ、条件の結果の真または偽によって「Person」のラベルを表示させるかどうかを決定させることができます。

その他のラベルやリンクに関しても表示の条件を上記のようにして設定することができます。AND 条件で 2 つの式を結びたいときは 2 つの & シンボルで、OR 条件で結びたいときは 2 つの | シンボルで条件を作成することができます。

下のコードはすべての表示式コードの最終コードです。

<xp:label value="Home" id="label1">
<xp:this.rendered><![CDATA[#{javascript:compositeData.showLocCrumb == "No" && compositeData.showPerCrumb == "No"}]]>
</xp:this.rendered>
</xp:label>
<xp:link escape="true" text="Home" id="link1">
<xp:this.rendered><![CDATA[#{javascript:compositeData.showLocCrumb == "Yes" || compositeData.showPerCrumb == "Yes"}]]>
</xp:this.rendered>
</xp:link>
<xp:label value="  >  " id="label2">
<xp:this.rendered><![CDATA[#{javascript:compositeData.showLocCrumb == "Yes"}]]>
</xp:this.rendered>
</xp:label>
<xp:label value="Location" id="label4">
<xp:this.rendered><![CDATA[#{javascript:compositeData.showLocCrumb == "Yes" && compositeData.showPerCrumb == "No"}]]>
</xp:this.rendered>
</xp:label>
<xp:link escape="true" text="Location" id="link2">
<xp:this.rendered><![CDATA[#{javascript:compositeData.showPerCrumb == "Yes"}]]>
</xp:this.rendered>
</xp:link>
<xp:label value="  >  " id="label3">
<xp:this.rendered><![CDATA[#{javascript:compositeData.showPerCrumb == "Yes"}]]>
</xp:this.rendered>
</xp:label>
<xp:label value="Person" id="label5">
<xp:this.rendered><![CDATA[#{javascript:compositeData.showPerCrumb == "Yes"}]]></xp:this.rendered>
</xp:label>

ではカスタムコントロールを保存して、XPage をブラウザから再読み込みしてください。
ブレッドクラムが表示され必要なラベルとリンクだけが表示されていると思います。









次回はリンクとラベルに実際の値を使っていきたいと思います。

0 件のコメント:

コメントを投稿