slack

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

2009/12/28

XPages Tutorial Part 18: 2 つ目の XPage 作成

Building The Second XPage {Original Source}

アプリケーション開発のこの段階では電話帳アプリケーションの見栄えの良いホームページが作成できました。ブラウザで表示させると OneUI のレイアウト、左側にはロケーションのメニューリスト、メインの部分では全ロケーションの情報が電話番号、FAX 番号と一緒に表形式で表示されています。
しかしまだ表示しているだけで肝心なところはこれからです。
ホームページからこれから新しくつくる XPage にリンクさせることをやっていきたいと思います。

次の Xpage ではひとつのロケーションに所属する全スタッフの情報を表示させることをやっていきます。レイアウトはホームページと同様 OneUI をベースにします。唯一違う点はページに表示されるメインの部分だけです。
では早速 Domino Designer で新規のカスタムコントロールを作成しましょう。
このカスタムコントロールには「content_Location」という名前を付けます。

次にパネルコントロールをドラッグインして、そのプロパティで「lotusContent」のスタイルクラスを指定します。そしてパネルに何かテキストを入力します。
テキストを入力することでプリビューをしたときにこのコントロールが正しい場所に表示されるかどうかをすぐ確認できるのでとても有効だと思います。
下がこのコントロールのソースになります。

ではカスタムコントロールを保存してください。
次は新規の XPage を作成していきましょう。
前回の XPage を作成したときのように div を追加したり、カスタムコントロールをドラッグインしたりするのですが、今回は「home」XPage をコピーペーストして時間を短縮しましょう。
そうすると「home_1」が出来上がりますので名前を変更しなければなりません。
以前の Domino Designer であれば設計要素を開いてプロパティボックスから名前を変更できましたが XPage に関してはこの方法では名前の変更ができません。
そこでファイルメニューから名前変更を選ぶか F2 キーを押して名前の変更ダイアログを表示します。(注意:下のスクリーンでは Copy_of_home と出ていますが、8.5.1 では home_1 となります。)



ではここで「Location」という名前を付けたあとダブルクリックして編集モードにします。
「content_HomePage」のカスタムコントロールを削除し、その場所に「content_Location」をドラッグインします。
ソースコードは下のようになります。

ではこの XPage を保存してブラウザでプリビューしてみましょう。
以前作成した OneUI レイアウトと今回入力したテキストが下のように表示されるはずです。


次回は「content_Location」カスタムコントロールに繰り返しコントロールを追加していくことにします。

0 件のコメント:

コメントを投稿