!!今週から2月ということで、いろいろと仕事が積みあがりつつあるのですが、なんとか今日は記事公開に漕ぎ着けました(汗。それでは続けさせて頂きます。前回は単純なボタン配置のみのトップページを作成しました。引き続き今回も実はボタン配置のみのページになります・・・。単純なページですので、カスタムコントロールは使用せず、XPageのみで作成して参ります。【新規XPage】ボタンをクリックます。m_XpWork以上でOKします。新規のXPageが開きますので、先頭にコンテナコントロールから【表】を配置します。自由に設定してください。前回のトップページの出社ボタンに合わせると、統一感が出ます。表が選択されたか、表の行やセルが選択されたかわかりにくい場合は、左に表示されているアウトラインにて対象をクリックすると分かり易いかもしれません。続いて表のセル内にコアコントロールより【ラベル】を配置します。白(こちらも自由)続いて部署のボタンを作成します。以前に作成しました2部署分のボタンになります。先の表に続いて、いくつか改行しておきます。その下に【表】を配置します。2幅に合わせるで作成します。部署数に合わせて配分してください。一般的な画面では、4列くらいまでが見やすいかと思います。続いて作成された表の左側のセルにコアコントロールから【ボタン】を配置します。【ボタン】を配置します。自由(私はグレーにしました)このままでもいいのですが、戻るボタンを右寄せしてみます。表の中に配置した場合、表のセルのオプションで【セルの横位置】が選択できるのですが、今回は表に入れていません。直接ソースに書き加えてみましょう。【戻る】ボタンを選択した状態で、【ソース】タブに切り替えてください。選択した【戻る】ボタン部分のソースがハイライトされて、ソースが表示されます。align="right">下に</div>と直接書き込みます。※注意ハイライトされた行の最終に</xp:view>というタグがありますので、このタグの手前にで<div>タグを閉じてください。【戻る】ボタンが右寄せされました。レイアウト等に関する部分ですので、お気に召さない場合は、表内に配置するなど、試してみてください。それではブラウザでプリビューしてみましょう。間延びしたページになってしまいましたが、見た目は自由に変更ください。今回はこのまま進めます。このページはトップページの【出社】ボタンを押した際に表示されます。【戻る】ボタンが押された際には、トップページに戻る必要がありますので、ボタンにリンクを設定します。【戻る】ボタンを選択し、下部より【イベント】タブを選択してください。m_XpIndexとし、OKします。アクションが追加されました。それでは一旦、m_XpWorkを保存して閉じます。続いてこのm_XpWorkをコピーして、退社用のm_XpLeaveを作成します。m_XpLeaveを開き、先頭の表を選択します。背景をトップページの【退社】ボタンに合わせ、ラベルの文字列を「出社」から「退社」に変更します。以上で退社用のページは準備できました。最後にトップページから両ページへのリンクを作成します。m_XpIndexを開いてください。先ほどと同様にふたつのボタンにイベントを追加します。m_XpLeave最後にブラウザで動きを確認しましょう。ブラウザでプリビューしてください。現時点のイメージは下記となります。今回は出社・退社ページを作成し、それぞれトップページからのリンクまでを組んでみました。意図的にソースそのものにも直接手を加えてみましたので、ご興味ある方はいろいろとお試しください。次回は各部署のページを作成します。【第3回】タイムレコーダーアプリ作成~XPages作成の準備とトップページの作成~皆様、こんにちは!!ここ数日の寒さ、こたえますね。神戸も六甲山以南はそれほど雪も降らず、なんとか平常通りの生活ができています。!さて前回までで、いわゆるレガシーノーツ部分の準備が完了しました。XPagesの要素を加えていきますが、その前に少し準備が必要です。】を利用しております。モバイル用のテーマを設定します。【アプリケーション構成】内の【Xspプロパティ】をダブルクリックで開いてください。【一般】タブにある【XPages用モバイルテーマの使用】について、プレフィックス:m_モバイルのテーマ:モバイルのデフォルト※すいません、後から気付きました。OneUIが選択されていますが、「モバイルのデフォルト」で進めます。続いてその下にあるエラー処理について【XPage実行時エラーページを表示】にチェックしておきます。これにより、何かしらエラーが発生した場合のヒントが表示されます。以上で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ピクセル(こちらも自由です)その他、フォントや背景などは自由に設定してください。同じように右側のセルに退社ボタンを作成します。先の出社ボタンをコピーして、右側のセルに貼り付けます。社フォントや背景は、出社と区別しやすいものにしてください。以上でまずはトップページが仮で完成しました。ブラウザでプリビューしてみましょう。Explorer】をクリックしてください。Explorerが起動し、下記のようなページが表示されるはずです。それではせっかくなので、ソースを見てみましょう。デザイナーの【設計】タブから【ソース】タブに切り替えてみてください。端末より多少異なりますが、下記のような表示がされるはずです。"xp"と書かれたタグがたくさんありますが、これがXPagesで書かれた内容になります。4行目がタイトルの設定内容。xp:table以下が設置した表とボタンコントロール2個の設定となります。合わせてWEBブラウザでもソースをみてみましょう。ちなみにブラウザ側のソースは書きのようになります。今回は以上とさせて頂きます。プログラミングらしき作業はありませんでしたね。年度末ということで、本業の案件がかなり立て込んできました。スローペースになるかと思いますが、続けて参りますので、今後もよろしくお願いします。次回は部署別のページ作成から続けさせて頂きますが、こちらでは本日のページからのリンク程度の作成の予定です。【第2回】タイムレコーダーアプリ作成~フォームの追加~皆様、こんにちは!!週末、寒かったですね。私は神戸の南部に住んでおりますので、滅多に雪が積もるようなことはないのですが、うっすらとベランダに積もっており、子供が震えながら雪だるま(らしきもの)を作ってました。ちなみに次女は舞鶴にいるのですが、40cmの積雪とか。いう訳か、楽しそうな雪かき作業の写真が送られてきました(汗インフルエンザも流行っているようですので、皆様ご注意ください。前回は出社・退社のフォームを各ひとつずつ作成し、ビューもひとつ作成しました。最後に少し書きましたが、社員数が多い場合、1ページに収まらず、自分の名前を探すという無駄が生じてしまいますので、今回はフォームを追加して、拡張性を持たせます。申し訳ありませんが、今回まではXPagesの設計要素は触りませんので、ご了承ください。それでは早速はじめましょう。営業2部の出社フォームを作成します。フォーム一覧より、【出社_営業1部】をコピーします。続いてフォーム名を変更します。別名:Work02としました。それでは【出社_営業2部】を変更しますので、デザイナーで開いてください。前回の帰社フォームと同様、ボタンのラベルと式内の名前をそれぞれ変更してください。続いてbushoフィールドを変更します。フィールド【busho】をクリックし、デフォルト値を「営業2部」に変更します。以上で【出社_営業2部】が完成です。【退社_営業2部】です。こちらもフォームをコピーして作成するのですが、【退社_営業1部】と【出社_営業2部】、いずれからコピーするほうが早いでしょうか。前回、【出社_営業1部】から【退社_営業1部】を作成した際の手順はこちら。【退社_営業1部】からコピーした場合は、3ボタンの修正とbushoフィールドの修正が必要です。【出社_営業2部】の場合、stampフィールドのデフォルト値を変更するだけになります。どちらが早いかは一目瞭然ですね。別名:Leave02を作成。stampフィールドのデフォルト値を"2"に変更してください。以上でフォームの準備は完了しました。これ以上にたくさんの部署が必要でしたら、同じようにどんどんコピーして作っていってください。別名の数値を03・04を増やして頂くことで、後に作成しますXPagesの設計も簡単に反映することが可能です。短いですが、今回は特にフォームのコピーという点に着目して書かせて頂きました。先日も記載しましたが、ノーツの設計要素のコピーは便利ですので、いろいろとお試しください。【第1回】タイムレコーダーアプリ作成~アプリケーションの準備~新年、あけましておめでとうございます!!旧年中はたいへんお世話になり、本当にありがとうござました。本年も私は相変わらずかと思いますが、マイペースながら一歩ずつ進んで参りますので、よろしくお願い致します。大阪】が今月20日(金曜)に開催されます。私はもちろん参加させて頂きます!お近くの方、ぜひご参加ください!!さて年末に少し書きましたが、年も変わったことですので、新たなテーマ【タイムレコーダーアプリ】の作成ということで継続させて頂きます。背景についてはお手数ですが、前回記事をご覧ください。本テーマではどうも順序を追った説明に少し自身がありません。数回目に「あーーーっ」と修正するような事が発生するかもしれませんので、予めご了承ください。今回はアプリケーションの作成を行います。デザイナーで【新規アプリケーション】作成を行います。手順不明な方は、昨年の【第1回】ノーツアプリ作成~アプリケーションの作成~をご覧ください。今回はXPagesでの構築になりますので、直接サーバーに作成することとします。ダイアログの設定ですが、サーバー名:貴社サーバーを選択してください。タイトル:タイムレコーダー(特に指定ではありません。)ファイル名:test\time-recorder.nsf(こちらも自由です。私のほうではtestフォルダ内に作成しました。以上で【OK】します。続いてフォームを作成します。今回は出社・退社のみを記録するタイムレコーダーを作成しますので、それぞれについてフォームを作成します。名前:出社_営業1部(部署名は貴社に合わせてください)別名:Work01今回は別名が重要になりますので、今後の設定内容についても記載通りに作成されることを推奨致します。XPagesをフロント画面として使用することを前提としておりますので、本来は見栄えなど必要ないのですが、先々ノーツクライアントから利用するかもという事も踏まえ、少しだけ体裁を整えております。登録する社員のボタンを作成します。【作成】-【ホットスポット】-【ボタン】をクリックします。正剛】)幅:6cm(適当で構いません。勝手に6.001cmになりました。)フォントサイズ:28(こちらも適当、もちろんデフォルトでも構いません。正剛");@Command([FileSave]);@Command([FileCloseWindow]);@Command([FileCloseWindow])※もちろん氏名のところには、社員名を設定してください。続いてこのボタンをコピーして、下にふたつ貼り付けます。それぞれのプロパティについて、ラベル及び式の社員名を変更してください。友一】)※もちろんこちらは必要な社員数分作成してください。次にもうひとつボタンを配置します。ラベル:戻る幅:6cm(適当で構いません。勝手に6.001cmになりました。)フォントサイズ:28(こちらも適当、もちろんデフォルトでも構いません。)式には@Command([FileCloseWindow])色も適当で構いません。変更する必要もありません。続いてフィールドを4個作成します。creatorフィールド種類:テキスト、編集可能bushoフィールド種類:テキスト、編集可能デフォルト値:"部署名"(画面では【"営業1部"】としています。出社|1退社|2※選択項目の後ろの番号(別名)を使用しますので、必ず設定しておいてください。デフォルト値:"1"(こちらで出社時の打刻と記録します)以上でひとつ、フォームが完成です。次に退社フォームです。こちらもフォームを新規作成してもいいのですが、せっかくあるフォームをコピーすることで、かなりの労力が削減されます。【出社_営業1部】のフォームをコピーして作りましょう。フォームの一覧で【出社_営業1部】を選択し、コピー。そのままペーストしてください。コピペの手段はメニューからでも右クリックでも、Ctrl+Cでも構いません。すると【コピー出社_営業1部】というフォームが表示されます。それではまずはフォーム名から変更します。【コピー出社_営業1部】が選択された状態で【F2】キーを押してください。別名:Leave01に変更します。続いて【退社_営業1部】の中身を修正します。必要なボタンとフィールドは作成された状態にありますので、プロパティのみの変更になります。修正が必要なのはたった1ヶ所。stampフィールドのデフォルト値を【"1"】⇒【"2"】にするだけ。このフィールドが出社と退社の切り替えを行っていますので、選択肢である「退社」の別名である「2」を設定するだけで完了です。いかがですか?ノーツデザイナーの高速開発!!このようにノーツではさまざまな要素をコピーして再利用することが可能です。今回の開発には、コピーを多用致しますので、お楽しみに!!ビューはひとつだけ作成します。(運用上必要な場合は、別途作成ください。幅:14ソート:降順(必要に応じて、【列のヘッダーをクリック時にソート】を設定、画面では両方を設定。幅:7列の値:@If(stamp="1";"出社";"退社")以上で一旦完了です。タイムレコーダーをタッチパネルのデバイスで利用することを前提にしているため、できるだけ1画面に収まるように作成したいと考えます。数名の会社様でしたら、今回の2枚のフォームで完結できるのですが、人数が増えてくるとどうしても画面を探すことになります。そのため次回はもう2部署追加する手順を紹介させて頂きます。謹賀新年!!旧年中はたいへんお世話になりました。本年も変わらず、何とぞよろしくお願い申し上げます。皆様、いいお正月でしたか?私は本当の"寝正月"になってしまいました。12/28の午後から少し体調がおかしく、現在に至っております。結局、初買いもバーゲンも行けずじまい。今日は午後診もないため、行きつけの内科にも行けそうにありません。明日の朝、休んで行くことになりそうです。いうことで来週から次のスタートを切れるよう準備しておりましたが、間に合うかどうか・・・(汗3連休で完治できるよう努力します!!取り急ぎたいへん失礼ながら、本年第一回目の記事にてご挨拶申し上げます。Hagihara当ブログの記事は、私個人の経験談を中心とした見解・判断に基づく内容となります。記載内容や、ダウンロードコンテンツ等については、恐れ入りますが利用者様の自己責任でお願い致します。注)外部サイトへのリンク切れについては、先方の都合によるものとなりますので、ご了承ください。