当ブログに掲載しているサンプルは、すべて利用者の自己責任という形でお願いします。
ただし、明らかな不具合がある場合、ご連絡いただければ、訂正記事を出します。
また、こちらのサンプルは、別のサイト等への公開、転載は一切禁止しています。
どうしてもと言う場合は、筆者にあらかじめご連絡ください。
記事そのもののリンクについてはご自由に行っていただいてよいです。

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

2011年11月29日火曜日

イケヤマくんを応援します

筆者もXPagesの記事を書いていますが、IBMのイケヤマくんもXPagesの情報を発信しています。
もし、知らないという方がいましたら、是非アクセスしてみましょう!
きっと役に立ちます!

かく言う筆者も、イケヤマくんにはお世話になっております。


アクセスはこちらから!
IBM Xpages Japan


2011年11月26日土曜日

おじさんSEが学ぶXPages(8)

本当は11/23に続きを書こうと思いましたが、気力が持ちませんでした・・・
ということで、続きです。


その前に、筆者の気力を回復させるボタンをクリックしてくださいね。
にほんブログ村 IT技術ブログへ





さて、前回は「蔵書」フォームをXPageのカスタムコントロールとして作成しました。
今回は、実際にXpageに組み込んで編集や表示が出来るようにしましょう。


基本的には、他のXPageと同じ方法になります。(今回の連載では、基本的な事を書きたいので、複数の方法については触れないようにします。他の方法は今後、Tipsと言う形で掲載するようにしますのでご了承ください。)

まず、「BookResource」Xpageを開きます。
何も記述されていない状態のはずなので、「コントロールビュー」の「カスタムコントロール」から「container」を選択してドラッグ&ドロップします。

「container」カスタムコントロールが画面上に表示されたら、編集可能領域である「contentData」の箇所に緑色のが表示されているのが分かりますね。

今度は、そこに向けて、同じく「コントロールビュー」の「カスタムコントロール」から「BookResource」を選択して、ドラッグ&ドロップします。
BookResourceを編集可能領域に追加

ここで、「BookResources」XPageを保存して閉じます。簡単ですね。

「container」カスタムコントロールには、「蔵書一覧」と「貸し出し一覧」のタブがあるので、そこをクリックする事で、それぞれのビューへと移動する事が出来ます。
しかし、画面遷移で示してあるような、「蔵書一覧」からこの「蔵書登録/編集画面」へのリンクがありません。

ということで、「蔵書一覧」の画面から蔵書登録が出来るようにしましょう。
「BooksCollectionView」カスタムコントロールを開きます。
蔵書一覧ビューが表示されているので、先頭でEnterキーを押して改行します。
※先頭に改行が挿入できないという方へ 画面を開いた直後に、Enterキーを押すとうまくいきます

改行で空いた箇所に、「ボタン」コントロールを選択してドラッグ&ドロップします。

蔵書登録用のボタンを配置

ボタンのラベルを「蔵書登録」に変更します。
次に「イベント」ビューを開きます。
シンプルアクションで「アクションの追加...」をクリックします。
「シンプルアクションの追加」ダイアログが表示されるので、内容を入力します(下図参照)。
シンプルアクションの追加

これだけで良いのですが、せっかくなのでボタンのデザインを変更してみましょう。

まずは、ボタンのフォントを変更します。
フォントタブ

次にボタンの背景を変更します。
背景タブ


他にも、ボタンの幅や高さを変更したり、 背景に色ではなく画像を選択したりする事も出来ます。
このようにCSSを使わなくても、ある程度はLotus DominoDesignerだけでもデザインを変更する事が出来ます。
もちろん、CSSでスタイルを設定する方が変更の自由度も高いので機会があればチャレンジしてください。


ここまで出来たら、「BooksCollectionView」カスタムコントロールを保存します。

ということで今回はこれで終わります。
次回は、「貸し出し画面」の作成をします。

やっと完成が見えてきましたね。
ではでは。


Lotus Notes/Domino カスタマイズとセキュリティ強化 - 株式会社エフ

2011年11月17日木曜日

おじさんSEが学ぶXPages(7)

もう11月も半ばです・・・
この連載(Xpages)を始めてから、なぜか月日が経つのが早く感じてしまいます。なぜでしょう???

それはそうなんですね。
この連載、9月に始めてるんですね、もう3ヶ月ですよ、3ヶ月。いい加減、終わらせないと・・・

しかし、慌てずに、まずはこちらをクリック!
にほんブログ村 IT技術ブログへ


始める前に、一言。
みなさんもご存じの通り、Lotus Notes/Domino 8.5.3がリリースされました。
と言う事で、筆者の環境も8.5.3に格上げしました。
今回の記事からは、8.5.3がベースになります。
8.5.2と違う点が分かったら、その場でコメントを入れるようにしますので、ご了承ください。


それでは・・・前回までについては、過去の記事を参照してください。
今回からはようやく、フォームをXPages化していきます。

と言っても、基本的な事は変わりません。
まずは、フォームの核となる部分を作成するので、「BookResource」という名前でカスタムコントロールを作成します。
ここで気をつける必要があるのは、カスタムコントロールの名前とXPageの名前は同じにしてはいけないという事です。
ですので、XPageに使った「BookResources」ではなく、「BookResource」とします(最後の"s"をなくします)。
重複した名前をつけるとエラーになる

この作成したコントロールに、フォームの情報を埋め込みます。

ビュー情報を埋め込む場合は、コントロールビューから、「ビュー」をドラッグ&ドロップしました。
フォームの場合はどうでしょう?

フォームというコントロールは見あたりませんね。
はい。ありません。
次の手順で操作します。

1.[ウィンドウ][Eclipseビューの表示][データ]メニューから「データ」ビューを開きます。
2.データソースの横にあるボックスをクリックして、「データソースの定義」を選択します。

3. 「データソースの定義」ダイアログボックスが表示されるので、「データソース」から「Domino文書」を選択して[OK]をクリックします。
データソースの選択

4.データソースの詳細を定義する画面に移行するので、必要な情報を入力して、[OK]をクリックします。
アプリケーションは自分自身がデフォルトで設定されているので、ここでは、フォーム名に「蔵書 - BookResources」 を選択します。
データリソース名は、デフォルトの「document1」のままで構いません。
データソースの詳細定義

5.「データ」ビューにフォームのフィールド情報が追加されました。
ただし、このままでは使えないので、左上にあるアイコンをクリックして、「×」マークを外してください。

Domino文書のデータソース

6.表示されている4つのフィールドを選択します(Ctrlキーを押しながら、クリックすると複数選択できます)。

7.選択したら、「BookResource」カスタムコントロール上にドラッグ&ドロップします。
フィールド情報をドラッグ&ドロップ

8.「データバインドコントロールの選択」ダイアログが表示されるので、ラベルを次のように変更します。
Published by:  → 出版社:
Writer:      → 著者名:
Book name:   → 蔵書名:
Purchase time: → 購入日:
変更が出来たら、[OK]をクリックします。
データバインドコントロールの選択

9.カスタムコントロール上にフォーム情報が追加されたのを確認できたら、その表をマウスで右クリックします。
カスタムコントロール上に追加されたフォーム情報
10.コンテキストメニューが表示されるので、「行の追加」を選択します。
コンテキストメニュー

11.「行の追加」ダイアログが表示されるので、「2」と入力して[OK]をクリックします。
行の追加ダイアログ

12.表に行が追加されるので、ボタンを3つ追加します。
ボタンは、「コントロール」ビューの「コアコントロール」からドラッグ&ドロップします。
ボタンのラベルは、それぞれ「保存」「編集」「キャンセル」とします。
ボタンのラベルを変更

13.各ボタンのイベントを設定します。
まずは、「保存」ボタンを選択した状態で、「イベント」ビューを開きます。

[アクションの追加...]ボタンをクリックします。
保存ボタンのイベント


14.「シンプルアクションの追加」ダイアログが表示されるので、アクションで「文書の保存」を選択して、[OK]をクリックします。
シンプルアクションの追加

15.再度、[アクションの追加...]ボタンをクリックして、今度は「ページを開く」アクションを選択して、[OK]をクリックします。
シンプルアクションの追加(ページを開く)

16.次に、「編集」ボタンをクリックして、アクションを追加します。
アクションは「文書モードの変更」、文書モードは「編集モード」にします。
シンプルアクションの追加(文書モードの変更)

17.今度は、「キャンセル」ボタンをクリックして、アクションを追加します。
キャンセルなので、「home」ページに戻るようにします。
アクションは、「ページを開く」で、開くページの名前を「home」にします。


このままでも良いのですが、これではボタンが常に表示されたままになってしまいます。
表示/非表示の設定を行いましょう。
「保存」ボタンは、編集モードの時だけ表示します。
「編集」ボタンは、読み込みモードの時だけ表示します。
「キャンセル」ボタンは、常に表示します。

18.「保存」ボタンを選択して、「プロパティ」ビューを開きます。
「可視」という項目(バージョンによっては、「表示」になっていることもあります)があるので、右にある◇をクリックすると、選択肢が表示されるので「値の計算...」を選択します。
可視の編集
19.スクリプトエディタが起動するので、表示条件を記述します。
文書が編集モードの時だけ表示したいので、
document1クラスのisEditable()を選択して、ダブルクリックします。
※この際、左側のペインは「参照」タブをクリックしておきます。
※document1は、4.でデータソースを定義した際の名前です。
スクリプトエディタ

右側のペインに、「document1.isEditable()」と表示されたら、[OK]をクリックします。
すると、「可視」のボタンの右側に「{計算済み}」と表示されるようになります。


20.同じく、「編集」ボタンを選択して、「可視」の右の◇をクリックして、「値の計算...」を選択します。
 スクリプトエディタで、「! document1.isEditable()」と記述します。
「!」は否定を表しますので、編集でない時(つまりは読み込みモード時)に表示されます。
記述できたら[OK]をクリックします。


ここまで出来たら、「BookResource」カスタムコントロールを保存します。


と、今回はここまでにしましょう。
次回は、作成したカスタムコントロールをXPageに埋め込んで利用できるようにします。


果たして、年内にXPagesアプリケーションはできあがるのでしょうか・・・
かなり不安ではありますが、頑張りますので応援をお願いします。



Lotus Notes/Domino カスタマイズとセキュリティ強化 - 株式会社エフ

2011年11月7日月曜日

おじさんSEが学ぶXPages(6)

昨日の状態では中途半端だったので続きです。

でも、これをクリックしてね。
にほんブログ村 IT技術ブログへ




では、早速。
「貸し出し一覧」のビューを作りましょう。
今回は、ノーツではよく見かける「カテゴリ別」のビューにしてみます。

ビュー名/別名 「貸し出し一覧/LendByStatus」
ビューの選択式 SELECT Form ="Lending"
1列目の列の値/タイトル 「Status/」(昇順、カテゴリ別)
2列目の列の値/タイトル 「BookName/蔵書名」(昇順)
3列目の列の値/タイトル 「LendBy/利用者」
4列目の列の値/タイトル 「LendingTerm/返却期限」
ビューの列幅やフォントはご自分の環境に合わせてください。

このビューをXPageに取り込んでみます。

「LendingView」という名前でカスタムコントロールを作成します。
前回と同じように、コントロールビューから「ビュー」を選択して、ドラッグ&ドロップします。
すると、「ビューのデータソースの選択」というダイアログボックス(下図参照)が表示されるので、次のように設定します。
貸し出し一覧のビュー設定

その他の設定についても、前回同様に設定しましょう。

ビューの幅を100%にします。
蔵書名の列をリンクにして、読み込み専用で文書を開くようにします。
返却期限の列は、日付/時刻型の表示にします。

前回と違う点は次。
「Status」の列を選択して、幅を決めます。
ここはカテゴリ列なので、少なくて良いですから、50ピクセルにしましょう。
さらにフォントも目立たせる意味で、太文字にします。
列ヘッダーではなく、列を選択して行ってください。
フォントタブを選択して、「B」と書いてある箇所をクリックすると、太文字になります。
ついでに色も変えてみましょう。筆者は紺色が好きなので、紺色にしています(下図参照)。
Statusのフォント設定

これで、「LendingView」コントロールを保存します。
今度は、これをXPageに設定します。

XPageの「Issueguides」を開きます。
連載の(4)で、このXPageにも編集可能領域を設定してありますので、そこに今し方作成した「LendingView」コントロールをドラッグ&ドロップします。

一見すると、単純にビューが設定されただけのように見えますが、きちんとカテゴリ別のビューになっています。文書が登録されると分かるようになりますので、それまでのお楽しみという事にしておきましょう。

そうしたら、「Issueguides」を保存します。

この状態で、XPageをプリビューすると、「蔵書一覧」と「貸し出し一覧」のタブをクリックしたときの動きがトレースできるようになっています。
貸し出し一覧のビュー


ということで、XPageでビューを作るのは今回でお終いです。
ビューを作る際の細かいオプションなどもたくさんあるのですが、それはまた別の機会に・・・




次回は、いよいよフォームをXPageで作っていきます。






Lotus Notes/Domino カスタマイズとセキュリティ強化 - 株式会社エフ

おじさんSEが学ぶXPages(5)

あ・・・なんと3週間も空いてしまいました。いえ、でも色々とあったんですよ。
だから、前回はLotus Scriptネタ書いたじゃないですか。
ちゃんとこちらも続けるので許してください、ホント。


許してくれるなら、このボタンをクリックして先へ進んでください。
にほんブログ村 IT技術ブログへ


許せないという方は、ここで読むのを止めていただいて結構です。あ、ウソです。読んでください。
お願いします。


さて・・・
前回はcontainerコントロールの作成が完了しました。
今回は、各Xpageに表示するコントロールの中身を作ります。
まずは、登録した(する)蔵書の一覧を表示するビューに該当するコントロールを作成します。

ビューをXPageで表現するには、いくつかの方法がありますが、もっとも簡単なのは、Lotus Domino Designerでビューを作って、それを流用するというものです。

このブログの読者の方なら、ノーツのビューを作る事くらいならなんてことはないでしょう。
ということで、蔵書一覧のビューを作ります。

ビュー名/別名 「蔵書一覧/BooksCollectionView」
ビューの選択式 SELECT Form ="BookResources"
1列目の列の値/タイトル 「BookName/蔵書名」(昇順)
2列目の列の値/タイトル 「PublishedBy/出版社」
3列目の列の値/タイトル 「Writer/著者名」
4列目の列の値/タイトル 「PurchaseTime/購入日」(日付のみの表示)
ビューの列幅やフォントはご自分の環境に合わせてください。

BooksCollectionViewをノーツで開いた画面

では、今作成したビューをXPagesに取り込みます。
カスタムコントロールを作成します。
名称はビューと同じでBooksCollectionViewとします。

作成したらDesignerのコントロールビューから「ビュー」を選択して、ドラッグ&ドロップします。
すると、「ビューのデータソースの選択」というダイアログボックス(下図参照)が表示されるので、次のように設定します。

アプリケーションは「現在」(デフォルト値)を選択します。
ビューは、さきほど作成した「蔵書一覧」を選択します。
すると、下に「表示するLotus Dominoビュー列を選択」という箇所にビューの列が表示されるので、すべてチェックをつけたまま(デフォルト値)にしておきます。

ビューコントロールの設定

設定したら、[OK]をクリックします。
ビューコントロールで作成したビュー

ごらんの通り、ビューのようなものが表示されました。
上の方を見ると、ページャが付いています。
つまり、文書数が多くなったときに、次のページを表示するためのアクションが自動で作成されているわけです。ちょっと嬉しくなりますね。   *1

ただ、これではビューの幅が画面に比べて狭すぎますので、調整しましょう。

アウトラインビューで、ビュー(名称はviewPanel1になっているはず)を選択して、プロパティビューを開きます。
そうしたら、「単位」を「パーセント」にして、幅を「100」にします。
これで、ビューの幅が画面いっぱいに広がりました。
ビューパネルの設定

今度は、文書が選択されたときに、フォームが表示されるように設定します。
BookName 列のプロパティビューを開きます。
「表示」タブにある「列の値をリンクとして表示する」にチェックを入れます。
するとその下にある「文書のオープンモード」が選択できるようになるので、「読み込み専用」にチェックをつけます。

文書のオープンモードの選択


次にPurchaseTime列のプロパティビューを開きます。
「データ」タブの表示タイプが「文字列」になっていますが、日付データなので「日付/時刻」を選択します。
表示タイプの変更(日付/時刻)


ここまで出来たら、「BooksCollectionView」を一度保存します。

この「BooksCollectionView」をXPageに取り込むので、「home」XPageを開きます。
すると、前回作成した編集可能領域が設定されていますが、緑色の○が表示されているのが分かります。
これは、まだ編集可能領域に何もコントロールが設定されていない状態を表しています。
編集可能領域に何も設定されていない状態

コントロールビューの「カスタムコントロール」の欄を見ると、今し方作成した「BooksCollectionView」が追加されているので、選択して、この緑色の○の箇所にドラッグ&ドロップします。

カスタムコントロールをドラッグ&ドロップする

すると、BooksCollectionViewコントロールの内容がXPageに追加されました。
では、homeXpageを保存して、ここまでの状態を実際に見てみましょう。
XPageをノーツクライアントでプリビューするボタンをクリックします。

XPageをノーツクライアントで表示






まだ文書が登録されていないので、寂しいですがなんとなくアプリケーションっぽくなってきたのではないでしょうか?

今回はここまでです。
次回は、貸し出し一覧のビューを作成して、XPageに反映させます。




*1 1つのページに表示する文書数は変更する事が出来ます。
ビューパネルのプロパティ「表示」の中に「ページごとの最大行数」で変更できます(デフォルト値は30)



【PR】ノーツ/ドミノに関するお問い合わせは下記まで【PR】

単純なDBのカスタマイズから他アプリケーションとの連携までご要望にお応えします

Lotus Notes/Domino カスタマイズとセキュリティ強化 - 株式会社エフ