2010/01/05

XPages Tutorial Part 28 : タブ付きパネルの作成

Creating a Tabbed Panel {Original Source}

Person Details のページを表示したときは単純なラベルと値が表形式で表示されているだけです。今回、丸い枠のなかに写真を表示させたりしたがら少し格好のよいページにしたいと思います。
では、「content_Person」を開いてください。

ところで CSS を使って丸い枠を作る方法としていくつかあるようです。実際グーグルで探してみてもいくつかのサンプルが見つかりました。
今回使用するものは「Spiffy Corner」というもので、特別なイメージや JavaScript は必要ないので実装するにはとても簡単です。
このサイトでは自分の好きな背景色と前景色を指定すると、その CSS と HTML を生成してくれるサービスを提供しています。
ここの CSS を「custom.css」にコピーして、HTML は XPage の適切な場所で定義すればいいだけです。


CSS の定義と HTML の用意が完了したら早速今回のページの作業に取りかかりましょう。
丸い枠の中に表を作成してその中に基本的な情報を作成することにします。
それは下のようなページとして現れてきます。

「No Image Available」はしばらくの間は単なるテキストを入力しておき、上のスクリーンのように Person Details のヘッダー部分となる表の中に、氏名、ロケーションの基本情報を移動させます。
次に丸い枠の下に、タブ付きパネルを作成します。
Designer の右のコンテナコントロールからタブ付きパネルをドラッグして設計ビューの上に貼付けます。

ドラッグインできたらプロパティを見てください。タブ付きパネルはこのタブ付きパネル全体に対するプロパティを設定する箇所とそれぞれのタブごとに設定できるプロパティがありあります。タブ付きパネルのプロパティでは使用するタブを設定したり、デフォルトで開くタブを決めたりすることができます。まらタブを移動させたり、削除したりすることも可能です。

ここのタブプロパティではタブの名前や表示させるかなどのオプションがあります。

ほとんどのプロパティは右側に青いダイアモンドがあります。つまり必要であれば値を計算させることもできる訳です。ではタブの名前にそれぞれ「Work Details」、「Home Details」と設定し、すべてのプロパティを覗いてみてください。タブ付きパネルのスタイルとして styleClass には「lotusTabs」、containerStyleClass には「lotusTabContainer」を指定します。これは OneUI のスタイルを使用することを意味します。

ではこのカスタムコントロールを保存してブラウザで再読み込みし今回行った内容を確認してみましょう。


タブ付きパネルの中のそれぞれのタブに必要なラベルとフィールドの配置はみなさんにお任せしたいと思います。

0 件のコメント:

コメントを投稿