【第7回】タイムレコーダーアプリ作成~仕上げ~皆様、こんにちは!!いよいよ今週ですね。ちなみに会員である弊社は、当日午前に開催されますユーザー情報交換会にも参加させて頂きます。皆様とお会いできることが、今から楽しみでなりません!!さて本題に戻ります。前々回で凡そのアプリケーションの形は仕上がりました。今回は少し手を加えて、完成させたいと思います。トップページ【m_XpIndex】です。タイムカードアプリということですが、現時点ではカレンダーや時計表示がありません。正しくは右下に小さくクライアントの時計表示はありますが、実際にこちらを見て、打刻することはどうかと思います。そこで、時計表示を埋め込みたいと思います。iframeに対応しておらず、結局Javascriptのサンプル例を埋め込みました。恐れ入りますが、Javascriptのサンプルについてはご自身でお好みのものをお探しください。それでは設置手順です。m_XpIndexの先頭のラベルと出社・退社ボタンの中央あたりに、パネルコントロールを配置します。※特パネルは必要ありませんが、手を加える際にわかりやすいよう設置しました。続いてパネルを選択した状態で、ソースタブに切り替えます。<xp:panel></xp:panel>というタグがハイライトされますので、その間にJavascriptのサンプルを貼り付けます。※一部サンプルには、<head>タグ内にもスクリプトが必要なものがございます。今回は<body>タグ内にのみ記述するものとして記載しております。詳しくはサンプルの設置方法に従ってください。設計タブに戻り、パネルを選択し、フォントサイズや色等のプロパティを設定します。随時、m_XpIndexをプリビューしながら確認してください。バランスが悪いですが、私の設定では、下記のように表示ができました。次にアプリケーションのアイコンを変更してみましょう。今回は下記のような画像を準備してみました。お好きな画像をご準備いただければ構いませんが、32x32ピクセルのJPEGもしくはPNG、GIF、BMPファイルが利用可能です。左メニューの【リソース】内の【アイコン】をダブルクリックしてください。このような画面が開きます。上半分は、準備した画像ファイルを読み込む方法。下半分は、直接アイコンファイルを32x32のマスを利用し、下記のように編集するものになります。それでは上半分を利用し、アイコンを変更します。【参照...】ボタンをクリックし、準備した画像ファイルを呼び出してください。以上でアイコンが切り替わりました。ノーツクライアントのアイコンも変更されています。レイアウトやデザインはさておき、以上でアプリケーションとしては完成です。次回はこのアプリケーションをテンプレート化する手順を紹介させて頂きます。そのまま使っても構わないのですが、anonymousが使用できる権限を取得しているため、ファイル名を安易に推測できないものにすることで、少しでもリスクを減らそうというという意図もあります。2017が開催されます。現地時間ですが・・・。日本からもIBMチャンピオンはじめ、たくさんの方が参加されており、既にフェイスブックやツイッターを通じて、情報が飛び交っております!!ぜひ「いいね」や「コメント」等で盛り上げていきましょう!!さて実際の内容についてですが、サイトを見るかぎり、かなり濃厚なスケジュールのようですが、なにせ英文なもので・・・。2017も2週間を切りましたので、その際には多少なりとも情報が頂けるものと思います。2017もまだ参加できるのではないかと思いますので、ぜひお時間ございましたらご検討ください。本会はオープンになりますので、コンソーシアム会員の方以外でもご参加可能です。終了後に毎回大盛況の懇親会も予定されておりますので、こちらもあわせてご参加頂くことを強く推奨致します!!ということで、本日はConnect及びFESTAのご紹介とさせて頂きます。その3~皆様、こんにちは!!昨日はひさしぶりに神戸バレンタインラブランにて、たった3km走って筋肉痛と格闘中の筆者です。夜明けも早くなり、梅もほころびはじめ・・・。春が待ち遠しい限りです~。前回はカスタムコントロールを使用し、1部署のページを仕上げました。今回は残りのカスタムコントロールを作り、XPageへの埋め込みを行います。見ていただきたいのは、XPageの再利用によるカスタムコントロールの切り替え部分になります。XcWork_1をコピーし、XcWork_2という名称に変更します。XcWork_2をデザイナーで開き、まずはデータで関連付けられたフォームを変更します。プロパティのデータタブを開いてください。Work02】に変更します。続いて、先頭のラベルを【営業1部】から【営業2部】に変更します。以降、各個人ボタンの設定は前回と同様です。様、おはようございます。続いて退社のカスタムコントロールを作成します。XcWork_1をコピーして、XcLeave_1と名称変更します。そのままデザイナーで開いてください。冒頭のラベルですが、現在は出社の色にあわせた青になっていますが、同じように退社にあわせた茶色にします(もちろん必須ではありません)。続いて【戻る】ボタンのイベントが現在は出社ページに設定されていますので、退社ページに変更します。Leave01に変更します。各ボタンのイベントですが、それぞれ1ヶ所だけ変更します。様、お疲れさまでした。同様にXcWork_2からXcLeave_2も作成してください。以上で4つのカスタムコントロールが完成しました。それでは本日のメインである、XPageの再利用について、説明致します。m_XpWork_1をコピーし、新たにふたつのXPageを作成します。それぞれ名称はm_XpWork_2m_XpLeave_1とします。m_XpWork_2を開いてください。中央のカスタムコントロール部分(もしくはアウトラインのXcWork_1)を選択し、ソースタブに移動します。前回も見ていただきましたが、XPageのソースでは、カスタムコントロールの指定はたった1行、<xc:XcWork_1></xc:XcWork_1>で行われています。"ピン!"と来た方もいらっしゃると思いますが、このタグを<xc:XcWork_2></xc:XcWork_2>に変更し、設計タブに戻ってください。カスタムコントロール部分が営業2部のXcWork_2に変更されていることがわかります。(アウトライン部分も変更になっています)以上で完了です。m_XpLeave_1です。こちらは先頭の表内が「出社」となっており、背景も青になっていますので、「退社」・背景:茶色に変更します。同じようにソースタブで<xc:XcWork_1></xc:XcWork_1>を<xc:XcLeave_1></xc:XcLeave_1>に変更します。同様にm_XpLeave_1をコピーし、m_XpLeave_2を作成してください。以上で各部署のカスタムコントロールとXPageが完成しました。!それでは最後に出社・退社のページからそれぞれの部署ページにリンクを作成します。m_XpWorkを開いてください。営業1部のボタンにはイベントが作成済ですので、営業2部のボタンにイベントを追加します。m_XpWork_2続いてm_XpLeaveです。m_XpLeave_2それではすべて保存して閉じてください。次に起動時の設定を行います。左側のツリーから【アプリケーション構成】内、【アプリケーションのプロパティ】を開いてください。2番目の起動タブに移動します。m_XpIndexとし、保存して閉じます。これによりブラウザでnsfを直接指定した場合、m_XpIndexが開くようになりました。それでは設計からプリビューせずに、ブラウザのアドレスを直接指定してみましょう。作成された環境によってアドレスが異なりますが、私の環境ではDominoディレクトリ内のtestフォルダ内にtime-recorder.nsfという名称で作成しましたので、下記がURLになります。http://ノーツサーバー名/test/time-recorder.nsfこちらでトップページが開きます。以降の動きは、下記をご覧ください。最終にノーツビューへの表示確認まで行っております。以上で大まかな部分が完成しました。XPagesを使用すれば、意図的に少し直接タグを利用しましたが、プログラムレスでここまで表現できるんです。次回はもう少し手を加えて完成させる予定です。!!インフルエンザが猛威を振るっておりますが、感染されていませんか?まだしばらくはピークが続きそうですので、ぜひご注意ください。2月ということで、いよいよ1ヶ月を切りましたね。3月2日に東京の取引先様との打ち合わせを予定していたのですが、すっかり宿泊予約を忘れていました。予定より少し高くなりましたが、いいホテルは確保できましたが・・・。あとは移動の予約のみです。前回は部署ページということで、出社・退社それぞれについて、ボタンのみを設置したページを作成しました。今回はさらにそのページの部署ボタンからリンクされる部署の詳細ページを作成します。元となるフォームは4つ。前回まではカスタムコントロールは利用せず、直接XPageとして作成しましたが、今回は再利用するパーツが多くなりますので、カスタムコントロールを利用して、工数を減らすような設計手順を掲載するつもりです。それでは出社側から作成していきましょう。デザインに統一感を出すため、前回作成したm_XpWorkを再利用することにします。m_XpWork_1コピーしたXPageの名前を変更したら、デザイナーで開きます。先頭の「出社」とかかれた表部分と戻るボタンのみを再利用しますので、表と2個のボタンを削除してください。下記のようになるはずです。続いて、【戻る】ボタンのリンクを変更します。現在はトップページに戻るようになっておりまので、m_XpWorkに戻るように変更します。戻るボタンをクリックし、下部で「イベント」タブに切り替えます。ページ名:/m_XpIndex.xspと書かれた部分を選択し、【編集】ボタンを押してください。m_XpWorkとし、OKします。m_XpWork_1を保存して閉じておきます。つづいてこのm_XpWork_1に埋め込むカスタムコントロールを作成します。左メニューでカスタムコントロールをダブルクリックし、【新規カスタムコントロール】を押してください。XcWork_1とし、OKするとカスタムコントロールの新規作成画面が表示されます。次にカスタムコントロールにデータソースを関連付けます。プロパティのデータタブをクリックします。【追加】ボタンから、【Domino文書】をクリックします。続いて先頭にラベルコントールを配置します。青(こちらも自由です)ラベルコントロールの後ろから改行を5個ほど入れ、続いてボタンコントロールを配置します。ボタンの設定は「出社_営業1部」の内容に準じます。次に、ボタンコントロールにイベントを追加します。イベントタブに切り替え、アクションを追加します。正剛】という値を設定するというものです。デフォルト値にて「出社|1」が設定されます。続いてイベントを追加します。document1さらにイベントを追加します。様、おはようございます。このイベントにより、ボタンが押された際に確認ダイアログが表示されます。最後にもうひとつイベントを追加します。m_XpIndexこれにより、先の確認をOKすると、トップページに移動します。イベントが下記の順に並んでいることを確認してください。以上でボタンの設定がひとつ完了しました。それではこのボタンをコピーして、後ろにふたつ貼り付けます。それでは中央のボタンの内容を変更します。様、おはようございます。