書ページの作成 (1)

by user

on 28 марта 2017

Category: Documents

>> Downloads: 0

views

Report

Comments

Description

Download 書ページの作成 (1)

Transcript

書ページの作成 (1)

テクてく Lotus 技術者夜会
ハンズオン・セッション：
Mobile Controls を用いたモバイルアプリケーション開発
2012/03/16
Yamato Software Development Lab
Lotus Technology Development
Lotus BP Technical Enablement Team
特記事項
本資料の記載内容は、できる限り正確を期すよう努めてはおりますが、
いかなる明⽰または暗黙の保証も責任も負いかねます。
本資料の情報は、使⽤先の責任において使⽤されるべきものである
ことを、あらかじめご了承ください。
掲載情報は不定期に変更されることもあります。他のメディア等に
無断で転載する事はご遠慮ください。
当資料をコピー等で複製することは、執筆者の承諾なしではできません。
また、当資料に記載された製品名または会社名はそれぞれの各社の
商標または登録商標です。
IBM、IBMロゴ、DB2、Lotus、Lotus Notes、Lotus Domino、Quickr、Sametime、Workplace、WebSphereは、International Business Machines Corporationの⽶国およびその他の国における商標。
JavaおよびすべてのJava関連の商標およびロゴは Sun Microsystems, Inc.の⽶国およびその他の国における商標。
Microsoft, Windowsは Microsoft Corporationの⽶国およびその他の国における商標。
Linuxは、Linus Torvaldsの⽶国およびその他の国における商標。
他の会社名、製品名およびサービス名等は、それぞれ各社の商標。
この資料について
Lotus Notes/Domino Upgrade Pack 1 に含まれる Mobile Controls を
⽤いて、既存の Lotus Notes アプリケーションに、スマートフォン⽤の
XPages アプリケーションを作る⼿順について説明しています。
ベースとなる Lotus Notes アプリケーションは、社員の情報を保持し参
照する機能を提供するプロフィールアプリケーションです。
今⽇の実習環境
Notes/Domino
– Lotus Domino Designer 8.5.3
– Lotus Notes/Domino Upgrade Pack 1
Web ブラウザ
–
–
–
–
Internet Explorer
FireFox
Safari
（iPhone のエミュレータとして使⽤）
Mobilizer
Safari ブラウザを iPhone エミュレータとして使うための設定
以下の⼿順で Safari ブラウザの発⾏するユーザーエージェントを変える
ことで、Mobile Controls の iPhone の画⾯をテストすることができる。
⼿順
– Safari ブラウザを起動し、メニュー
から「編集」→「設定」を選択。
– 「設定」ダイアログボックスで、
「メニューバーに“開発”メニューを
表⽰」を選択して閉じる。
– メニューから「開発」→「ユーザー
エージェント」→「Safari iOS 4.3.3 - iPhone」を選択。
※ ユーザーエージェントの変更前に
XPages を開くと、最初のユーザーエー
ジェントがセッションに記録される。そ
のときは Safari ブラウザを再起動する。
※ Safari ブラウザを再起動するとユーザー
エージェントがリセットされるので注意。
使⽤する Lotus Notes アプリケーション
Lotus Domino アプリケーション
–
–
–
–
Title:
Profiles
File name:
profiles.nsf
社員情報を保持するシンプルな Lotus Notes アプリケーション。
このアプリケーションのビューと⽂書を、モバイル端末に表⽰する。
Lotus Notes アプリケーションを開く⼿順
– Domino Designer クライアント上でメニューより「フィル」→「アプリケー
ション」→ 「開く」を選択し、「アプリケーションを開く」ダイアログボッ
クスを開く。
– サーバーに「ローカル」を
選択し、Profiles を選択して
開く。
このステップはハンズオン環境で
すでに完了しています。
Mobile Controls を使⽤するための事前準備 (1)
1. アプリケーションビューで「アプリケーションプロパティ」をクリック
して開く。「詳細」タブの「XPages ライブラリ」セクションの
com.ibm.xsp.extli.library をチェックして保存する。
このステップはハンズオン環境で
すでに完了しています。
Mobile Controls を使⽤するための事前準備 (2)
1. メニューから「ウィンドウ」→「Eclipse ビューの
表⽰」→「パッケージ・エクスプローラー」を選択
してパッケージ・エクスプローラーを開く。
2. パッケージエクスプローラーで profiles.nsf プロ
ジェクトの WebContent/WEB-INF フォルダにあ
る xsp.properties を開く。
このステップはハンズオン環境で
すでに完了しています。
Mobile Controls を使⽤するための事前準備 (3)
1. xsp.properties の「Source」タブを選択して、以下の⾏を追加する。
xsp.theme.mobile.pagePrefix=m_
参考：
Mobile XPage name prefix
http://www-10.lotus.com/ldd/ddwiki.nsf/dx/Mobile_XPage_name_prefix_ddxl853
※ パッケージ・エクスプローラーはこれ以降は使わないので、閉じてしまって構わない。
モバイルアプリケーション⽤の XPage の作成
1. 左側のアプリケーションナビ・ゲーターで「XPage」を選択し、
中央のメイン・エディターの「新規 XPage」ボタンで、
新規 XPage を作成する。
–
XPage の名前は「m_profiles」とする。
※ 先の xsp.properties の設定にあわせて、
m_ ではじまる名前をつけることに注意。
トップページの作成 (1)
1. コントロールパネルの「Mobile」カテゴリから Single Page
Application コントロールをドラッグ＆ドロップして XPage 内に
配置する。
トップページの作成 (2)
1. コントロールパネルの「Mobile」カテゴリから Mobile Page コント
ロールを、作成した「Single Page Application 」の中にドラッグ&ド
ロップして配置する（編集可能領域を⽰す緑⾊の丸に落とす）。
※ 作成した Mobile Page コントロールの名前
は「appPage1」のまま変更しない。
トップページの作成 (3)
1. 作成した「appPage1」 Mobile Page コントロールを選択し、プロパ
ティビューの「すべてのプロパティ」で以下の設定をする。
–
–
「基本」→「pageName」に「topPage」とタイプする。
「基本」→ 「resetContent」で「false」を選択する。
※ このページには固定的な内容を表⽰するので resetContent プロパティを false に
している。
トップページに表⽰するヘッダーの作成 (1)
1. 作成した「appPage1」 Mobile Page コントロールの中に Page
Heading と Static Line Item コントロールを同じレベルで配置する。
※ 作成した Page Heading と Static Line Page コント
ロールの名前はそれぞれ「djxmHeading1」と
「djxmLitenItem1」のまま変更しない。
トップページに表⽰するヘッダーの作成 (2)
1. 作成した Page Heading コントロールを選択し、プロパティビューの
「すべてのプロパティ」の「基本」→「label」で「値の計算」を
選択して以下のスクリプトを記述する。
return "モバイルプロフィール";
トップページに表⽰するヘッダーの作成 (3)
1. 作成した Static Line Item コントロールを選択し、プロパティビューの
「すべてのプロパティ」の「基本」→「label」で「値の計算」を選択
して以下のスクリプトを記述する。
return "すべてのプロフィール";
最初にトップページを表⽰するよう設定する
1. .表⽰するページができたので、最初に作成した Single Page
Application コントロールを選択し、プロパティビューの「すべての
プロパティ」タブで「基本」→「selectedPageName」に
「topPage」とタイプする。
作成したトップページを確認する (1)
1. メニューより「ファイル」→「保存」を選択して「m_profiles」
XPage を保存し、「設計」→「Web ブラウザでプレビュー」→
「Firefox」を選択して、表⽰される内容を確認する。
※ Firefox からプレビューすると
Android ⽤の画⾯が表⽰される。
作成したトップページを確認する (2)
1. Safari ブラウザを起動し、メニュー
から「開発」→「ユーザーエージェ
ント」→「Safari iOS 4.3.3 iPhone」を選択する。
2. 以下のアドレスを指定して開き、
iPhone ⽤の画⾯が表⽰されることを
確認する。
http://localhost/profiles.nsf/m_profiles.xsp
※ Mobile Controls を使⽤して作成した XPage では、
ブラウザのユーザーエージェントを⾒て⾃動的に
iPhone ⽤と Android ⽤の画⾯を切り替えている。
ビューページの作成 (1)
1. 最初に作成した Single Page Application コントロールの中に、
もうひとつ Mobile Page コントロールを配置する。
※ 作成した Mobile Page コントロールの名前
は「appPage2」のまま変更しない。
ビューページの作成 (2)
1. 作成した Mobile Page コントロールを選択し、プロパティビューの
「すべてのプロパティ」で以下の設定をする。
–
–
「基本」→「pageName」に「 viewPage 」とタイプする。
「基本」→ 「preLoad」で true を選択する。
ビューページのヘッダーの作成 (1)
1. 「appPage2」コントロールの中に Page Heading コントロールを
配置する。
※ 作成した Page Heading コントロールの名前は
「djxmHeading2」のまま変更しない。
ビューページのヘッダーの作成 (2)
1. 作成した Page Heading コントロールを選択し、プロパティビューの
「すべてのプロパティ」で以下の設定をする。
–
「基本」→「label」で「値の計算」を選択して以下のスクリプトを記述す
る。
return "すべてのプロフィール";
ビューページのヘッダーの作成 (3)
1. 作成した Page Heading コントロールを選択し、プロパティビューの
「すべてのプロパティ」で以下の設定をする。
–
「基本」→「back」で「値の計算」を選択して以下のスクリプトを
記述する。
return "戻る";
–
「基本」→「moveTo」で「topPage」とタイプする。
トップページからビューページへの遷移をさせる (1)
1. 1番⽬のページである「appPage1」コントロールの中に作成した
「djxmLineItem1」を選択し、「プロパティビューの「すべての
プロパティ」で以下の設定をする。
– 「基本」→「moveTo」に「viewPage」とタイプする。
– 「基本」→ 「transition」で「flip」を選択する。
トップページからビューページへの遷移をさせる (2)
1. 「m_profiles」 XPage を保存し、ブラウザからプレビューして
以下を確認する。
トップページの「すべてのプロフィール」をクリックして
ビューページへ遷移する。
– ビューページでヘッダーの「戻る」ボタンを押して、
トップページへ遷移する。
–
トップページ
ビューページ
ビューページでのビューデータの表⽰ (1)
1. コントロールパネルの「Extension Library」セクションから Data
View コントロールをドラッグ&ドロップし、「appPage2」コントロー
ルの中の「djxmHeading2」コントロールの直後に、同じレベルで
配置する。
ビューページでのビューデータの表⽰ (2)
1. 「データソースの選択ダイアログ」ボックスが表⽰されるので、
以下のように設定して「OK」ボタンをクリックする。
– Show data from：
– アプリケーション：
– ビュー：
– データソース名：
「Domino ビュー」を選択
「現在」を選択
「profiles」を選択
「profilesView」とタイプ
ビューページでのビューデータの表⽰ (3)
1. 作成した Data View コントロール
を選択する。
「すべてのプロパティ」で
「形式」→「summaryColumn」
を選択して [+] をクリックする。
2. 「summaryColumn」プロパティの
⼦要素ができるので、それを展開し
て「columnName」に
「FullName」とタイプする。
ビューデータが表⽰されることを確認
1. 「m_profiles」 XPage を保存し、ブラウザからプレビューして
以下を確認する。
–
トップページからビューページに遷移して、登録されている⼈の⼀覧が
表⽰される。
※ 確認するときにページをリロードして
内容を更新する。
ページの遷移だけでは、XPage のリ
ロードは⾏われない。
⽂書ページの作成 (1)
1. 最初に作成した Single Page Application コントロールの中に、もうひと
つ Mobile Page コントロールを配置する。
※ 作成した Mobile Page コントロールの
名前は「appPage3」のまま変更しない。
⽂書ページの作成 (2)
1. プロパティビューの「すべてのプロパティ」で以下の設定を⾏う。
– 「基本」→「pageName」に「documentPage」とタイプする
– 「基本」→ 「preLoad」で「true」を選択する。
– 「基本」→ 「resetContent」で「true」を選択する。
⽂書ページのヘッダーの作成 (1)
1. 「appPage3」コントロールの中に Page Heading コントロールを
配置する。
※ 作成した Page Heading コントロールの
名前は「djxmHeading3」のまま変更し
ない。
⽂書ページのヘッダーの作成 (2)
1. 作成した Page Heading コントロールを選択し、プロパティビューの
「すべてのプロパティ」で以下の設定をする。
–
「基本」→「label」で「値の計算」を選択して以下のスクリプトを
記述する。
return "プロフィール";
⽂書ページのヘッダーの作成 (3)
1. 作成した Page Heading コントロールを選択し、プロパティビューの
「すべてのプロパティ」で以下の設定をする。
–
「基本」→「back」で「値の計算」を選択して以下のスクリプトを
記述する。
return "戻る";
–
「基本」→「moveTo」で「viewPage」とタイプする。
トップページからビューページへの遷移をさせる (1)
1. 2番⽬ページである「appPage2」コントロールの中に作成した
Data View コントロールを選択し、「すべてのプロパティ」で
「基本」→「pageName」に「documentPage」とタイプする。
トップページからビューページへの遷移をさせる (2)
1. 「m_profiles」 XPage を保存し、
ブラウザからプレビューして以
下を確認する。
–
「topPage」、「viewPage」、
「documentPage」のそれぞれ
のページの間で画⾯遷移できる
ことを確認する。
–
ビューページに表⽰される⼈の
名前をクリックして⽂書ページ
へ遷移する。
–
⽂書ページでヘッダーの「戻
る」ボタンを押して、ビュー
ページへ遷移する。
⽂書ページでプロフィールデータの表⽰ (1)
1. 「appPage3」コントロールの中の「djxmHeading3」の直後に、パネ
ルコントロールを同じレベルで配置する。
⽂書ページでプロフィールデータの表⽰ (2)
1. 作成したパネルを選択したまま、プロパティビューの「データ」タブで
「追加」→「Domino ⽂書」を選択してデータソースを定義する。
データソースの定義は以下のようにする。
– アプリケーション：
– フォーム：
– データソース名：
「現在」を選択
「profile」を選択
「profilesDoc」とタイプ
⽂書ページでプロフィールデータの表⽰ (3)
1. 作成したパネルの中に Mobile コントロールから Rounded List コント
ロールを配置する。
⽂書ページでプロフィールデータの表⽰ (4)
1. 配置した Rounded List コントロールの中に Mobile コントロールから
Static Line Item コントロールを配置する。
⽂書ページでプロフィールデータの表⽰ (5)
1. Static Line Item コントロールを選択し、プロパティビューの
「すべてのプロパティ」で以下の設定をする。
–
「基本」→「label」で「値の計算」を選択して以下のスクリプトを
記述する。
return "姓:";
⽂書ページでプロフィールデータの表⽰ (6)
1. Static Line Item コントロールを選択し、プロパティビューの
「すべてのプロパティ」で以下の設定をする。
–
「基本」→「rightText」で「値の計算」を選択して以下の
スクリプトを記述する。
return profilesDoc.getItemValueString("LastName");
⽂書ページでプロフィールデータの表⽰ (7)
1. 同じく Rounded List の中に、さらに Static Line Item を３つ同じ
レベルで配置し、同じように label プロパティと rightText プロパ
ティを以下のように設定する。
「label」プロパティの計算式
「rightText」プロパティの計算式
1 return "姓:";
return profilesDoc.getItemValueString("LastName");
2 return "名:";
return profilesDoc.getItemValueString("FirstName");
3 return "メール:";
return profilesDoc.getItemValueString("Email");
4 return "⽣年⽉⽇:";
return profilesDoc.getItemValueDateTime("DOB");
※ 「⽣年⽉⽇」のデータ取得に getItemValueDateTime() を使⽤していることに注意！
⽂書ページでプロフィールデータの表⽰ (8)
1. パネルの中に、先ほど配置した Rounded List と同じレベルでもうひとつ
Rounded List コントロールを配置する。
⽂書ページでプロフィールデータの表⽰ (9)
1. 作成した Rounded List コントロールの編集可能領域に計算結果
フィールドを配置する。
⽂書ページでプロフィールデータの表⽰ (10)
1. 作成した計算結果フィールドを選択し、「値」タブで以下のように
設定する。
– 使⽤するデータバインディング：
– データソース：
– バインド先：
※ 配置したコント
ロールの位置
関係も確認する。
「単純データバインディング」を選択
「profilesDoc」を選択
「AboutMe」を選択
⽂書ページでプロフィールデータの表⽰ (11)
1. 計算結果フィールドを選択し、プロパティビューの「すべてのプロパ
ティ」の「基本」→「escape」で「false」を選択する。
作成した⽂書ページを確認する
1. 「m_profiles」 XPage を保存し、ブラウザからプレビューして、⽂書
ページでプロフィールの詳細情報が表⽰されることを確認する。
iPhone ⽤の画⾯
Android ⽤の画⾯
参考⽂献
Lotus Notes and Domino 8.5.3 & Upgrade Pack 1
– http://www.ibm.com/software/lotus/notesanddomino/nd85UpgradePack853-1.html
Domino Designer XPages Extension Library
– http://www.lotus.com/ldd/ddwiki.nsf/xpViewCategories.xsp?lookupNa
me=Domino%20Designer%20XPages%20Extension%20Library
XPages Mobile Controls Tutorial
– http://www.lotus.com/ldd/ddwiki.nsf/dx/XPages_Mobile_Controls_Tuto
rial_