ここ数日の寒さ、こたえますね。
幸い神戸も六甲山以南はそれほど雪も降らず、なんとか平常通りの生活ができています。
・・・個人的には今週末に、姫路の西、新舞子で行われる1泊2日の新年会が楽しみで、ちょっとハイになってます !
さて前回までで、いわゆるレガシーノーツ部分の準備が完了しました。
いよいよXPagesの要素を加えていきますが、その前に少し準備が必要です。
ちなみに私の環境ですが、ドミノデザイナーは【リリース 9.0.1FP7 】
サーバーは【9.0.1FP2 】を利用しております。
まずはモバイル用のテーマを設定します。
【アプリケーション構成】内の【Xspプロパティ】をダブルクリックで開いてください。
【一般】タブにある【XPages用モバイルテーマの使用】について、
プレフィックス：m_
モバイルのテーマ：モバイルのデフォルト
※すいません、後から気付きました。画像では OneUIが選択されていますが、「モバイルのデフォルト」で進めます。
とします。
続いてその下にあるエラー処理について
【XPage実行時エラーページを表示】にチェックしておきます。
これにより、何かしらエラーが発生した場合のヒントが表示されます。
続いて【ページの生成】タブの右にある
【XPage ライブラリ】にて、
ライブラリID:com.ibm.xsp.extlib.library にチェックします。
以上でXspプロパティを保存して閉じます。
続いて【プロジェクト】メニューから【自動的にビルド】をチェックします。
既にチェックされているようでしたら、そのままで構いません。
これにより、デザイナーで要素を保存した際に、各ページが生成あるいは更新され、即座にWEB画面が表示可能になります。
次に今回はブラウザでからノーツIDを使用せずにアクセスさせます(入り口に置いたタブレットを想定)ので、アクセス制御に【anonymous】を追加します。
アクセス制御リストを開き、【追加】ボタンをクリックします。
ユーザー、サーバー、グループ(P)にanonymousと入力し、【OK】します。
属性のアクセス権：作成者
パブリック文書[作成者]と文書を複製またはコピーのチェックは外しておきます。
それではXPages設計要素を作成していきましょう。
Xpagesに関する主な要素はふたつ。
【Xpage】と【カスタムコントロール】があります。
Xpageは実際にWebブラウザに表示されるページになります。
カスタムコントロールはXpageのコントロール類が扱える、いわゆるサブフォームのようなものになります。
もちろんXpageのみで開発することも可能ですが、要素の再利用などに有効なため、主な要素はカスタムコントロールに作成し、Xpageで取りまとめるという手法で作成して参ります。
まずはトップページです。
こちらは単純に出社と退社のボタン表示を行うだけですので、直接Xpageに作成します。
それでは新規XPageボタンをクリックし、新規XPageダイアログを開きます。
名前：m_XpIndex
以上で【OK】します。
命名ですが、"m_"が先ほど設定しましたテーマを使用するための接頭文字になります。
以降は本来自由なのですが、カスタムコントロールと区別できるよう、"Xp"を付けました。
それでは中身を加えています。
まずはタイトルです。
右側の【コアコントロール】から【ラベル】をドラッグアンドドロッブします。
続いて設置したラベルのプロパティを変更します。
プロパティは画面下のプロパティタブで設定します。
その中のスタイルタブで
ラベル：タイムレコーダー(特に指定はありません)
フォントタブで
サイズ：24(こちらも自由です)
色やスタイルも自由に変更してください。
画面上、設計タブで確認しながら変更が可能です。
ラベルからいくつか改行を入れてください。
次に、【コンテナコントロール】から【表】をドラッグアンドドロッブします。
行数：1
列数：2
表の幅：自動サイズ
下記のように表が追加されました。
それでは表の中に、ボタンを配置しましょう。
【コアコントロール】から【ボタン】をまずは表の左側のセルにドラッグアンドドロッブします。
プロパティでは、
ラベル：出 社
高さ：100ピクセル(特に指定ではありません)
幅：250ピクセル(こちらも自由です)
その他、フォントや背景などは自由に設定してください。
同じように右側のセルに退社ボタンを作成します。
先の出社ボタンをコピーして、右側のセルに貼り付けます。
プロパティを
ラベル：退 社
フォントや背景は、出社と区別しやすいものにしてください。
以上でまずはトップページが仮で完成しました。
せっかくですので、ブラウザでプリビューしてみましょう。
【設計】-【Webブラウザでプリビュー】-【Internet Explorer】をクリックしてください。
Internet Explorerが起動し、下記のようなページが表示されるはずです。
それではせっかくなので、ソースを見てみましょう。
デザイナーの【設計】タブから【ソース】タブに切り替えてみてください。
端末より多少異なりますが、下記のような表示がされるはずです。
"xp"と書かれたタグがたくさんありますが、これがXPagesで書かれた内容になります。
4行目がタイトルの設定内容。
xp:table以下が設置した表とボタンコントロール2個の設定となります。
合わせてWEBブラウザでもソースをみてみましょう。
ちなみにブラウザ側のソースは書きのようになります。
今回は以上とさせて頂きます。まったくプログラミングらしき作業はありませんでしたね。
年度末ということで、本業の案件がかなり立て込んできました。
スローペースになるかと思いますが、続けて参りますので、今後もよろしくお願いします。
次回は部署別のページ作成から続けさせて頂きますが、こちらでは本日のページからのリンク程度の作成の予定です。
0 件のコメント:
コメントを投稿