2009/12/13

XPages Tutorial Part 4: 部品を考える

Breaking Up Is Easy To Do {Original Source}

XPages アプリケーションの開発においてひとつの XPage にすべてを集約することもできますが、XPage をいくつも作成していくうちに Look & Feel が統一されなくなります。具体的にいうと、この電話帳アプリケーションではホームページとなる XPage、Location の XPages、People の XPage を作ることになります。いづれも同じ基本レイアウトになり、ひとつひとつの XPage に直接レイアウトを構成していくことは共通のレイアウトの中の一部分を修正する必要が出てきた場合、それぞれ 3 つの XPage を修正しなければなりません。

そこで XPage を構成するパーツをカスタムコントロールとして作成してから XPage に貼付けていくことにします。今回必要となるカスタムコントロールの基盤として OneUI を使用します。 HTML に書かれる内容と DIV 名を見てみましょう。
<div id="lotusFrame">
<div class="lotusBanner">Banner Contents Here</div>
<div id="lotusTitleBar">Titlebar Here</div>
<div id="lotusPlaceBar">PlaceBar Here</div>
<div id="lotusMain">
<div id="lotusColLeft">Left Sidebar Here</div>
<div id="lotusContent">Main Content Here</div>
</div>
<div id="lotusfooter">Footer Contents Here</div>
</div>
それぞれの DIV はコンポーネントや領域といった理論的に分割できる単位にカスタムコントロールに組み込んでいきます。lotusFrame や lotusMain に対してもカスタムコントロールを作らなければと思うかもしれませんがその必要はありません。この 2 つはコンテナとしての役割を持ち変更されることは滅多にないため、カスタムコントロールを作成しなくても XPage 上に直接記述して大丈夫だと思います。

まずはじめにカスタムコントロールの一覧を出し、「新規カスタムコントロール」のボタンを押してください。カスタムコントロールに名前を付けます。指定する名前は基本的に皆さんの自由ですが、命名規則などを考量してここでは「layout_Banner」と名前を付けます。
空のカスタムコントロールが開いたら「ソース」ビューに切り替え「lotusBanner」の div を記述します。記述し終わったら保存して閉じます。「ソース」に記述した内容は以下のようになります。

修正:上のスクリーンでは id="lotusBanner" となっていますが、class="lotusBanner" が正解です。OneUI には lotusBanner に対する DIV セクションはありません。正しくは class スタイルとなります。

同様に以下のカスタムコントロールをそれぞれ作成していき、該当する DIV をそれぞれに記述していきます。
  • layout_TitleBar
  • layout_Banner
  • layout_Footer
  • layout_PlaceBar
  • layout_LeftSidebar
content_HomePage は少し違っていて lotusContent を DIV として割り当てます。
このデモで使用するカスタムコントロールは以下のようになります。













次に 「home」XPage を開き。右側のカスタムコントロールペインからカスタム作成したカスタムコントロールをドラッグアンドドロップで配置し、次に「ソース」タブに切り替え正しい位置に配置されているか確認します。下の図の通りに記述してください。


ここで Web ブラウザでプリビューすると以前ご紹介したページと同じ画面が出てくるはずです。このようにページの構成を小さな部品の集合と考えると作業が簡単に済みます。次回以降はそれぞれのカスタムコントロールを見ていき実際に即して内容を追加していくことにします。

0 件のコメント:

コメントを投稿