XPagesでLotus Notes/Dominoアプリ開発入門（2）

Javaサンプルの定番ショップカートをXPagesで作る

日本アイ・ビー・エム株式会社 ソフトウェア開発研究所
Lotusテクノロジー開発 ソフトウェアエンジニア 小峯 宏秋
2012/6/19

XPagesでのデータソースとUI

　XPagesアプリケーションでは、用意されたコントロールを配置することで画面を構成します。そしてXPage全体やコントロール単位でデータソースを定義し、Lotus Notes／Dominoアプリケーションに格納されたデータを操作できます。

　アプリケーション開発者は「編集ボックス」「リストボックス」「リッチテキスト」といったさまざまなコントロールを自由に配置し、それぞれにデータソースのデータとバインドすることで自由に画面を設計できます。

　また「ビュー」「フォーム」によるデータソースはデータの入出力ばかりではなく、XPagesのUIの設計のひな型として使用することもできます。先に述べたように「ビュー」「フォーム」はLotus Notesで使用されるアプリケーションのUIとしても使用されており、例えばカテゴリ表示や列のソートの設定など、「ビュー」「フォーム」の設計自体にUIを考慮した実装が含まれていることがあります。

　XPagesアプリケーションの開発でも、そのような特性を考慮して、「フォーム」「ビュー」の設計をXPagesのUIに取り込むことが可能になっています。

　この記事で紹介しているショッピングカートアプリケーションの「1. 商品の一覧を示すカタログと商品の詳細を表示する機能」をXPagesでどのように実装しているかを見てみましょう。

商品カタログの開発

　商品カタログは、ショッピングカートアプリケーションで購入できる商品一覧を表示する画面です。商品一覧を表示する「ビュー」はすでに用意されており、図4に示したようにLotus Notesで表示できます。

　商品カタログを表示するXPageは、この「ビュー」をデータソースとするだけではなく、画面設計も「ビュー」を基にして構成しました。XPageの設計画面で新たにデータソースの定義を行うと、図5のようなダイアログボックスが表示され、データソースとして「ビュー」か「フォーム」を選べます。ここで「Domino ビュー」を選択し、使用するビューを指定するとともに、XPageの中での参照名であるデータソース名を指定します。

図6　「ビュー」をデータソースとして定義する

　データソースが定義されると、Lotus Domino Designerの右側のデータパレットにビューに含まれる列が、バインドできるデータとして表示されます。

図7　作成された「ビュー」のデータソース

　次に、このデータソースからXPageの画面を作成します。データパレットから、画面に表示したいデータ項目を選択し、そのままXPageの画面へドラッグ＆ドロップすると、自動的にXPageの中にビューを表示するための表が構成されます。

図8　データソースをドラッグ＆ドロップしてビューの作成

　XPageの編集画面で自動的に生成されたビューの画面は図9のようになります。あとは、表示する表や列の幅をプロパティで設定することで、見栄えが良くすぐに使用できるXPageの画面が出来上がります。

図9　「ビュー」を元に作成されたXPage

　出来上がった商品カタログのページは図10のようになります。

図10　「ビュー」をデータソースとして使用したXPage画面の例

　データソースとして使用している元のビューで設定されていた列のタイトルやカテゴリ別のセクション表示も反映されています。表示する商品がたくさんあって一度に表示できないときにページめくりをするためのページャも自動的に生成されている点が注目です。また、配置された「ビュー」のプロパティの追加設定で、表示している商品名をリンクにし、商品の詳細情報ページを開けるように設定しています。このような設定も、「ビュー」のプロパティ設定で簡単に追加できます（図11）。

図11　「ビュー」の列をリンクとして表示する設定

商品の詳細情報画面の開発

　同じように商品の詳細情報を表示するXPageも、「フォーム」をデータソースとして使用して開発できます。図12はフォームをデータソースとして定義しているダイアログです。データソースとして「Domino 文書」を選択し、使用するフォーム名とデータソース名、そして「フォーム」を通じて「文書」を開くときのモードの設定をします。

図12　「フォーム」をデータソースとして定義するダイアログ

　データソースが定義されると、Lotus Domino Designerの右側のデータパレットに「フォーム」に含まれている「フィールド」が、バインドできるデータとして表示されます。

図13　作成された「フォーム」のデータソース

　そのデータソースからにXPage内にドラッグ＆ドロップしてフォームテーブルを配置することで、「文書」の内容を表示する画面を作成できます（図14）。

図14　「フォーム」をデータソースとして使用したXPage画面

　Lotus Notesフォームやビューをデータソースとして使用することで、Lotus Notesクライアントで表示するのと同じような画面をXPagesで実装できます。

　さらに、単に見栄えを同じにするだけではなくLotus Notesビューであれば、カテゴリごとのセクションの展開、一覧のソート、検索などの機能もプロパティ設定などで追加できます。

　また、Lotus Notesフォームを使用したXPagesでも文書の詳細を表示するばかりではなく、編集や削除、あるいは新規の文書作成など、一通りの文書操作ができるようにすることも可能です。

次回は、Lotus Notes／Dominoデータへアクセス

　XPagesは、さまざまなコントロールを部品として提供し、それらを組み合わせてアプリケーションを開発できます。その一方で、Lotus Notes／Dominoの技術をベースにしているため「フォーム」「ビュー」を利用して簡単にページを作成できます。

　その例として、ショッピングカートアプリケーションの商品の一覧を示すカタログと商品の詳細を表示する機能を紹介しました。次回の連載では、以下の2つの機能のXPagesによる実装方法を紹介します。

• 2. 購入予定の商品を一時的に保持し、ショッピングカートで表示する機能
• 3. 購入者の情報を入力し、ショッピングを完了する機能

　これらの機能にはサーバサイドJavaScriptを使用します。XPagesのために拡張されたサーバサイドJavaScriptで利用できるスコープ変数やLotus Notes／Dominoアプリケーションのデータへのアクセス方法を紹介します。

■ ＠IT関連記事

Javaの常識を変えるPlay framework入門 サーブレット／JSPを基にする重厚長大なJavaのWeb開発のイメージを変える軽量フレームワーク「Play」について解説し、Webアプリの作り方を紹介する入門連載

Rooでアプリ開発をRapidしようぜ！ コマンドベースのSpringのRADツールを使って、超迅速にWebアプリを作る方法を紹介します

企業システムの常識をJBossで身につける 企業向けアプリケーションのさまざまな“常識”をJavaのオープンソース・フレームワーク群である「JBoss」から学んでいきましょう。企業システムを構築するうえでの基礎となる知識をリファレンス感覚で説明していきます。初心者から中堅、ベテランまで大歓迎！

Java初心者が超俊敏にWebアプリを作る方法 Eclipseプラグイン「Dolteng」のScaffoldという自動生成機能やSeasar 2.4のHOT deploy機能を利用して、DBの参照・更新・削除ができるSAStrutsのWebアプリを作ります。Java初心者だけでなくStrutsに慣れた開発者も必見です

オープンソースTERASOLUNAで作るWebアプリ WebアプリをStrutsで構築する際の種々の問題点。そして、それを解決するSpring、iBATIS連携のオープンソースフレームワークTERASOLUNAのさまざまな機能を紹介していく

実用レベルに達したJRubyを体感してみよう もはやJava技術者にとって無視できない存在になったRuby。Javaと融合したJRubyの特徴や利点について解説します。実用レベルになったといわれる、その実力を体感してみよう

1-2

Index

第2回　Javaサンプルの定番ショップカートをXPagesで作る   Page1 Webアプリの定番「ショッピングカート」を作る XPagesアプリケーションの開発イメージ ショッピングカートアプリケーションとは？ Lotus Notesアプリケーションのデータ構造 Page2 XPagesでのデータソースとUI 商品カタログの開発 商品の詳細情報画面の開発 次回は、Lotus Notes／Dominoデータへアクセス

Java Solution全記事一覧

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）