XPages モバイルコントロールを使ったモバイルアプリケーション開発 (後編)

IBM Lotus Notes/Domino 8.5.3 アップグレード・パック 1 に含まれている XPages モバイルコントロールを利用したモバイルアプリケーションの開発方法を前編と後編の 2回に分けて紹介します

本稿では、モバイルコントロールを利用しての、モバイルアプリケーションを開発する方法を前編と後編の 2回に分けて紹介します。この後編では、前編で画面を作成したモバイルアプリケーションで、Lotus Notes アプリケーションのビューや文書データを表示できるように拡張し、モバイルアプリケーション完成させます。

塚田 栄造, Lotus テクノロジー開発, IM & Lotus 開発/ソフトウェア開発研究所, IBM China

塚田 栄造は、日本アイ・ビー・エム株式会社のソフトウェア開発研究所に所属するソフトウェアエンジニアです。ロータス製品の開発や技術支援を行っています。



小峯 宏秋, Lotus テクノロジー開発, IM & Lotus 開発/ソフトウェア開発研究所, IBM

小峯 宏秋は、日本アイ・ビー・エム株式会社のソフトウェア開発研究所に所属するソフトウェアエンジニアです。ロータス製品の開発や技術支援を行っています。



2012年 5月 17日

本稿で紹介するモバイルアプリケーションは、本稿の巻末のダウンロード用リンクからダウンロードして試していただくことができます。

注: 完成したサンプルのモバイルアプリケーションは Lotus Notes/Domino 8.5.3 アップグレード・パック 1 が導入された Lotus Domino や Lotus Domino Designer の環境で試すことができます。利用する際には XPages の設計に署名を行なってください。

IBM Lotus Notes/Domino (以下、Lotus Notes/Domino) アップグレード・パックは、通常の製品のリリースサイクルとは別に、製品に対する新しい機能を提供するための Lotus Notes/Domino の新しいデリバリの仕組みです。初めてのアップグレード・パックとして、Lotus Notes/Domino8.5.3 アップグレード・パック 1 が 2011年 12月にリリースされました。このアップグレード・パックには OpenNTF.org で公開されている XPages Extension Library の一部などが含まれており、XPages アプリケーション開発で利用できる機能が大幅に増化しました。

XPages モバイルコントロールも、このアップグレード・パック 1 に含まれる新しい開発コンポーネントです。これまでの XPages でのモバイルアプリケーションを開発では、Dojo Mobile や jQuery Mobile などの外部ライブラリを独自に組み込んで開発することが一般的でした。しかしアップグレード・パック 1 では、XPages でモバイルアプリを作るための、Dojo Mobile をベースとした XPages モバイルコントロールが提供され、追加の開発フレームワーク無しでモバイルアプリケーションの開発が可能になりました。

本稿では、モバイルコントロールを利用しての、モバイルアプリケーションを開発する方法を前編と後編の 2回に分けて紹介します。この後編では、前編で画面を作成したモバイルアプリケーションで、Lotus Notes アプリケーションのビューや文書データを表示できるように拡張し、モバイルアプリケーション完成させます。

モバイルアプリケーションで Lotus Notes のデータを表示する

本稿の前編で、ホームページとビューページの 2つのページを持つモバイルアプリケーションを開発しました。しかしビューページにはヘッダーのタイトル以外はまだ何も表示されません。

後編では、このビューページで Lotus Notes アプリケーションの「All Memos」ビューの文書一覧を表示できるようにするとともに、文書一覧から選択された文書を表示するための文書ページも作成します。

ビューページで文書一覧を表示する

前編で作成したビューページに、「All Memos」ビューを元にした文書一覧を表示できるようにします。文書一覧の表示にはコントロールパレットの「Extension Library」セクションにある Data View コントロールを使用します。Data View コントロールはアップグレード・パック 1 で新たに提供された、ビューを表示する多機能なコントロールです。モバイルコントロールのグループではありませんが、モバイルアプリケーションとして使用できます。

「m_MobileApp」XPage を開き、ビューページ (「viewPage」コントロール) 内の「viewHeading」コントロールと同じ階層に、Data View コントロールを配置します (図 1)。

図 1. Data View コントロールの配置
Data View コントロールの配置

Data View コントロールを配置すると「Select Data Source for Data View」ダイアログボックスが表示されるので、「ビュー」として「All Memos」を選択します (図 2)。

図 2. 「Select Data Source for Data View」ダイアログボックス
「Select Data Source for Data View」ダイアログボックス

配置した Data View コントロールを選択し、「すべてのプロパティ」タブで「形式」セクションを開き「summaryColumn」プロパティを選択します。そして「summaryColumn」の横の「+」をクリックします (図 3)。

図 3. 「summaryColumn」への設定の追加
「summaryColumn」への設定の追加

「summaryColumn」が展開されるので、その中にある「columnName」に「Subject」と入力します (図 4)。

図 4. Data View コントロールで表示する列の設定
Data View コントロールで表示する列の設定

これでビューページが作成できました。ホームページからビューページに画面遷移をすると以下のように文書一覧が表示されます。しかしこの時点は文書を表示するページができていないので、文書一覧をクリックしても何も起こりません (図 5)。

図 5. 文書一覧が表示されたビューページ
文書一覧が表示されたビューページ

文書ページを作成する

ビューページで選択された文書を開き、タイトルや作成者など文書の詳細情報を表示するページを作成します。

すでに作成したホームページやビューページと同じ階層に、「Mobile」セクションから Mobile Page コントロールを追加します。配置した Mobile Page コントロールを選択し、「Mobile Page」タブで名前を「documentPage」に指定します。そして「すべてのプロパティ」タブで以下のプロパティ設定をします (図 6)。

「基本」セクション

  • 「PageName」: documentPageName
  • 「resetContent」: true
図 6. 文書ページの設定
文書ページの設定

文書ページでは、直前のビューページでの選択内容によって表示する文書が変わるため、「resetContent」に「true」を指定しています。

文書ページの中に、これまでのページと同様に「Mobile」セクションから Page Heading コントロールを追加します。「Page Heading」タブで名前を「documentHeading」にして、「すべてのプロパティ」タブで以下のプロパティ設定をします (図 7)。

「基本」セクション

  • back: 戻る
  • label: Mobile Discussion
  • moveTo: viewPageName
図 7. 文書ページのヘッダーの設定
文書ページのヘッダーの設定

「documentHeading」コントロールと同じ階層に「コンテナコントロール」セクションからパネルコントロールを追加します。配置後のコントロールの位置関係は図 8 のようになります。

図 8. パネルコントロールの配置
パネルコントロールの配置

配置したパネルコントロールの「データ」タブで「追加」ボタンをクリックして「Domino 文書」を選択します (図 9)。そして図 10 のようにデータソースを定義します。

  • フォーム: Memo
  • データソース名: memoDocument
  • デフォルトアクション: 文書を開く
図 9. パネルコントロールへデータソースを追加
パネルコントロールへデータソースを追加
図 10. 文書ページのパネルでの Domino 文書のデータソース定義
文書ページのパネルでの Domino 文書のデータソース定義

配置したパネルコントロールの中に、「Mobile」セクションから Rounded List コントロールを追加します。配置した Rounded List コントロールを選択し「Rounded List」タブで名前を「subjectRoundedList」にします。配置後のコントロールの位置関係は図 11 のようになります。

図 11. Rounded List コントロールの配置
Rounded List コントロールの配置

「subjectRoundedList」コントロールの内側に、「Mobile」セクションから Static Line Item コントロールを追加します。配置した Static Line Item コントロールを選択し「Static Line Item」タブで名前を「subjectLineItem」にします (図 12)。

図 12. Static Line Item コントロールの配置
Static Line Item コントロールの配置

配置した「subjectLineItem」コントロールの「すべてのプロパティ」タブを表示し、「label」プロパティで「値の計算」を選択します (図 13)。表示されるスクリプトエディタでリスト 1 のスクリプトを記述します。

リスト 1. 「subjectLineItem」コントロールの「label」プロパティに指定するスクリプト
memoDocument.getItemValueString("Subject");
図 13. Static Line Item コントロールの「label」プロパティで「値の計算」を指定
Static Line Item コントロールの「label」プロパティで「値の計算」を指定
図 14. スクリプトエディタでのタイトルを取得するスクリプトを指定
スクリプトエディタでのタイトルを取得するスクリプトを指定

先ほど配置した「subjectRoundedList」コントロールと同じ階層に、もうひとつ Rounded List コントロールを配置し、名前を「detailRoundedList」とします。

配置された「detailRoundedLIst」コントロール内に、Static Line Item コントロールを同じ階層に 3つ配置します。配置した Static Line Item コントロールの名前をそれぞれ「categoryLineItem」、「fromLineItem」、「createdLineItem」とします。配置されたコントロールは図 15 のようになります。

図 15. 「detailRoundedList」コントロールの構造
「detailRoundedList」コントロールの構造

配置した 3つの「Static Line Item」コントロールのそれぞれで「すべてのプロパティ」タブを表示し、「label」プロパティと「rightText」プロパティを表 1 のように設定します。

表 1. Static Line Item」コントロールのプロパティ設定
#コントロール ID「label」プロパティの値「rightText」プロパティの「値の計算」に指定するスクリプト
1categoryLineItemカテゴリmemoDocument.getItemValueString("Categories");
2fromLineItem作成者@Name("[CN]", memoDocument.getItemValueString("From"));
3createdLineItem作成日時@Created();

先ほど配置した「detailRoundedList」コントロールと同じ階層に、もうひとつ Rounded List コントロールを配置し、名前を「bodyRoundedList」にします。その「bodyRoundedList」コントロールの中に「コアコントロール」セクションから計算結果フィールドコントロールを追加します (図 16)。

図 16.「bodyRoundedList」コントロールの構造
「bodyRoundedList」コントロールの構造

計算結果フィールドコントロールの「値」タブで「単純データバインディング」を選択し、「データバインディング」を図 17 のように設定します。

  • データソース: memoDocument
  • バインド先: Body
図 17. 計算結果フィールドコントロールの値設定
計算結果フィールドコントロールの値設定

また、「すべてのプロパティ」タブで「escape」プロパティに「false」を設定し、リッチテキストの内容を示す HTML タグがそのままクライアントに送られるようにします (図 18)。

図 18. 計算結果フィールドコントロールのプロパティ設定
計算結果フィールドコントロールのプロパティ設定

これで文書ページが作成できました。

最後に、ビューページの文書一覧からクリックした際にこの文書ページが開かれるようにします。ビューページ内の Data View コントロールを選択し、「すべてのプロパティ」で図 19 のように設定します。

「基本」セクション

  • pageName: documentPageName
図 19. Data View コントロールから文書ページを開くための設定
Data View コントロールから文書ページを開くための設定

「m_MobileApp」XPage を保存して、プレビューします。トップページからビューページを開き、適当な文書をクリックすると、文書ページ詳細が表示されます。

図 20. 完成したモバイルアプリで文書ページを開く
完成したモバイルアプリで文書ページを開く

まとめ

前編に引き続き、後編ではモバイルアプリケーションで Lotus Notes アプリケーションのビューや文書のデータを表示できるように拡張しました。ビューページで文書の一覧を表示するために、XPages Extension Library に含まれる Data View コントロールを使用しました。そして文書の詳細を表示する文書ページを追加し、3つのページでビューの選択、文書一覧の表示と文書の選択、選択された文書の詳細表示といった一連の操作ができるモバイルアプリケーションが完成しました。

本稿の前編と後編をお読みいただき、IBM Lotus Notes/Domino 8.5.3 アップグレード・パック 1 で提供される XPages モバイルコントロールを使用することで、XPages でモバイルアプリケーションを簡単に作成できることがご理解いただけたと思います。


ダウンロード

内容ファイル名サイズ
サンプルコードXPagesMobileControlSimpleDiscussion.zip766KB

参考文献

コメント

developerWorks: サイン・イン

必須フィールドは(*)で示されます。


IBM ID が必要ですか?
IBM IDをお忘れですか?


パスワードをお忘れですか?
パスワードの変更

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


お客様が developerWorks に初めてサインインすると、お客様のプロフィールが作成されます。会社名を非表示とする選択を行わない限り、プロフィール内の情報(名前、国/地域や会社名)は公開され、投稿するコンテンツと一緒に表示されますが、いつでもこれらの情報を更新できます。

送信されたすべての情報は安全です。

ディスプレイ・ネームを選択してください



developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

必須フィールドは(*)で示されます。

3文字から31文字の範囲で指定し

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


送信されたすべての情報は安全です。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Lotus
ArticleID=813661
ArticleTitle=XPages モバイルコントロールを使ったモバイルアプリケーション開発 (後編)
publish-date=05172012