2009/12/07

これから Xpages のコーディングを始める前に考えたいこと

XPages に興味があってこれから始めてみようかなと思われている方に、まず考えていただきたいことは XPages で作成するページの構成です。

従来の Notes 開発環境に慣れ親しんできた方にはこの Eclipse ベースの開発環境に多少戸惑いがあるかもしれませんが、すぐに慣れると思います。最初は従来の設計要素に関して、新しい開発環境でどのように作成したり変更したりできるかを確認してください。

確認が終わったらいよいよ新しい設計要素を XPages を見てみましょう。新規の XPages を作成すると今までの設計要素とときと異なり「アウトライン」、「コントロール」といったパースペクティヴが追加で内容表示されます。
Xpages の開発ではこのパースペクティヴが非常に重要な役割を担います。XPages の設計は XML ベースで保持しているので、上級者であれば XML をダイレクトにコーディングすることも可能です。ほとんどの場合は「コントロール」パースペクティヴにある

  • 「コアコントロール」
  • 「コンテナコントロール」
  • 「カスタムコントロール」(自作のコントロール)

から必要な部品をドラッグアンドドロップしてその XPage のページを構成していきます。
ちなみにカスタムコントロールと XPage の関係はちょうどフォームとサブフォームの非常関係に似ています。共通部品としてのサブフォームをいくつか完成させたあと、フォーム上にそのサブフォームを挿入することでフォーム全体を完成させることに似ています。カスタムコントロールでは XPage と同様にコアコントロール、コンテナコントロール、場合によっては他のカスタムコントロールも使用できます。

では実際それらはどのようになっているかを 8.5.1 で標準で提供されている「ディスカッション」テンプレートを見ていきましょう。まずは、テンプレートからデータベースをローカルに作成してノーツクライアント、ブラウザからの動きを見てください。ブラウザでの表示を確認するためには、「allDocuments」XPage 設計を選択してから[メニュー] - [設計] - [Web ブラウザでプリビュー]を使用します。



Web2.0 ライクなユーザーインターフェースです。ここで注目したいのは、赤枠で示した部分はこのページの主要なフレームやコンポーネントです。

たとえば、新規文書を作成したり、違うビューを表示させたりしても下のスクリーンで見るようにコンテンツの部分だけが変わって他のフレームやコンポーネントの内容に変化はありません。


最初にみた「allDocuments」XPage設計を開いてみると下のスクリーンになります。

この XPage の設計のほとんどはカスタムコントロールを張り付けたものです。
「すべての文書」ビューを表示する XPage と「作成者別」ビューを表示する XPaesではコンテンツ部分だけ違うものにして他のフレームに関するものは全く同じにしていることが分かります。

上のスクリーンショットでは実態がどうなっているか非常に実際のブラウザで見るページと比較していただけるとかなり異なることがお分かりになるでしょう。これは後で触れますが、スタイリングに関するテクニックとローカライズに関するテクニックがまだこの段階で把握できていないとほとんど解読できません。


そうはいうものの、下のアウトラインのパースペクティヴを見ていただくと今回の2番目のスクリーンショットでご紹介したページの構成がなんとなくお分かりだと思います。フレームそのものはフレーム内のパーツには「パネル」というコンテナコントロールが使用されます。理由は、このパネルに css などで定義したスタイルを適用するためです。

パネルの中にパネルがあり入り子のような構成をしています。通常はドラッグアンドドロップでカスタムコントロールを追加していく中で誤った場所に配置してしまった場合、あるいは削除したといった場合は、特にアウトラインでの操作が必要になり、かつ正確にできます。

今日見てきた内容から XPages のページ作成のポイントと実際のコーディングを始める前に考えたいことは

  • ページ表示させる内容を整理、イメージしてそれぞれフレームやコンポーネントをまとめておく
  • それをカスタムコントロールとして作成。どの Xpage にも再利用できるようにしておく = 効率と一貫性に大きく貢献
  • カスタムコントロールや XPages のレイアウトには「パネル」を使用する
  • Xpage はカスタムコントロールから張り付けて構成する
  • 構成の際は、アウトラインをうまく使用する

となります。今回出てきましたレイアウトに関するもので OneUI という標準があります。ここでは触れませんが次回以降でお話ししたいと思います。またアプリケーションのローカライズ方法なども機会があればチャレンジしてみたいと思います。

0 件のコメント:

コメントを投稿