ページビューの合計

2018年2月27日火曜日

チョー #初心者 向け、 #XPages 開発手順~仕上げ

みなさま、こんにちは!
先週金曜はノーツコンソーシアムFesta2018に参加させて頂きました。
各研究会の発表は非常に興味深く、今年も期待されるものばかりでした。
上記リンクで内容と一部資料ダウンロードも可能ですので、参加された方のみならず、当日参加できなかった皆様もぜひご覧頂き、今年の研究会への参加の検討資料にしてください。

個人的には昨年同様、大阪研究会とザ・ノーツ研究会に登録を予定しています。
また名古屋・九州の地方研については機会あればお邪魔させて頂ければとも考えております。

くわえてこちらは会員限定になりますが、ユーザー情報交換会も予定されております。
特に10月については、M社様にて開催との事で、今から楽しみでなりません。


それでは本題に戻ります。
先日より続けております本シリーズですが、一旦今回で完結致します。
最後までよろしくお願い致します。

さて早速ですが、前回まででふたつのXPageを作成し、ビューページから対象の文書のフォームページを開くことができるようになりました。
今回はxp_mainFormへ3つのボタン(戻る・編集・保存)とxp_byDateへ1つのボタン(新規作成)を組み込みたいと思います。

まずはxp_mainFormを開いてください。

早速ですが、前回作成した表の上にある改行部分にコアコントロールから[ボタン]を3つ配置します。

それぞれラベルを左から、「戻る」「編集」「保存」とします。


次にイベントを設定します。

まずは「戻る」ボタンです。

イベントタブに移動し、onclickが選択されていることを確認し、[アクションの追加]をクリックします。
以下のように、xp_byDateを開くように設定し[OK]します。


続いて「編集」ボタンです。
こちらも単純に「文書モードの変更」で「編集モード」とするだけになります。


最後に「保存」ボタンです。
こちらのみイベントはふたつ登録します。
まずは「文書の保存」です。


保存した後に、xp_byDateに移動させます。


アクショングループとして、以下のようになっていればOKです。


続いて選択項目であるClassとTagsを設定します。
いずれも値の[式項目の追加]にて@DbColumnを使用し、ビュー内の値を取得します。

まずはClassです。


@DbColumn("","byClass",1);

と入力し、[OK]します。
値は以下のように表示されます。


同様にTagsです。


@DbColumn("","byTags",1);

と入力し、OKします。

なおTagsは複数選択可能としますので、リストボックスのオプションをチェックしておきます。


次にxp_byDateに新規作成ボタンを追加します。
カスタムコントロール titleBarの下の改行へコアコントロールより[ボタン]をひとつ追加し、ラベルには「新規作成」としてください。

イベントタブに移動し、onclickのイベントとして以下を設定します。


こちらも単純にxp_mainFormを新規作成モードで開くというものです。

それではxp_mainFormをブラウザでプリビューし、各ボタンの動作を確認してください。

xp_byDate

[新規作成]

[分類]

[日付]

[タグ](複数選択)

以下デモデータで[保存]すると・・・

ビューに表示されました。

再度開いて、

[戻る]ボタンでxp_byDateに戻ることを確認してください。
続いて[編集]ボタンを押すと

当たり前ですが、編集画面になります。
「分類2」に変更して[保存]すると、

長くなりますが、最後にボタンの表示制御のみ続けさせてください。
今のままですと、フォームが編集モード時にも[編集]ボタンが、読み込みモード時にも[保存]ボタンが表示されてしまいますので、それぞれについて非表示の設定を行います。

まず[編集]ボタンを選択し、[可視]の右にある◇をクリックし、[値の計算...]をクリックします。


スクリプトエディタが表示されますので、左側の[参照]タブ内 currentDocument 以下の 
idEditable() をダブルクリックしてください。


式が登録されますので、先頭に式を否定する"!"を入力し、[OK]します。


逆に[保存]ボタンは否定せずに保存します。

ブラウザでプリビューしますと、

[読み込みモード時]

[編集モード時]

と、不必要なボタンの表示をなくすことができました。

いかがでしたか?

少し式は書きましたが、全くハードルは低いものではなかったでしょうか。
もちろん入力制御やその他機能を盛り込むべき部分もありますが、初心者でもXPagesを使い、WEBアプリケーションが作ることができる点をご理解頂けましたら、今回のシリーズとしては成功かと思います。

ぜひ一度、お試しください。

なお今回作成しましたアプリケーションはこちらよりダウンロード可能ですので、ご希望の方はご自由にお使いください。

※2018/03/14 ダウンロード先変更

2018年2月19日月曜日

チョー #初心者 向け、 #XPages 開発手順~メインフォーム

みなさま、こんにちは!
いよいよ今週ですね、ノーツコンソーシアム FESTA 2018
私は5分お時間を頂きましたので、大阪研究会の報告を行わせて頂きます。
その他、個人的には会員ユーザー向けの「ユーザー情報交換会」は非常に期待しています。
少し私も持ち合わせたものがありますので、理事の方と相談をと予定しています。

さて先日に続き、今回はフォームを表示するページを作りたいと思います。

早速ですが、新規XPageを作成してください。名称は以下としました。


ページが開きましたら、カスタムコントロール[titleBar]を先頭にドラッグ&ドロップします。
続いてその後ろに改行をふたつ入れておきます。

次にXPageにデータとして[mainForm]を定義します(デフォルトアクションは「文書を開く」にしてあります)。


データパレットにフィールドが表示されますので、すべて選択して先の2行目の改行の後ろにドラッグ&ドロップします。


データバインドコントロールが表示されますので、以下のような設定として[OK]してください。


※この選択ダイアログが開かない場合は、下記切り替えボタンをクリックし、[コントロールの選択]ダイアログボックス(使用可能)にしてください。



それでは一度、ブラウザでプリビューしてみましょう。


少し気になるところはありますが、無事ブラウザで表示させることができました。

それでは体裁は後で整えるとして、一旦前回のビューから今回のフォームを開く設定を行います。
XPageのxp_byDateを開いてください。

タイトルをクリックするとフォームページを開くようにしますので、ビューの列[Title]を選択し、表示タブ内[列の値をリンクとして表示する]にチェックし、開くモードは[読み取り専用]を選択します。


続いてイベントタブに移動し、onclick時のイベントを以下のように追加します。


以上でビューページからフォームベー時を開くことができるようになりましたので、一度ビューページをブラウザでプリビューしてみます。


タイトルがリンクになって表示されることが確認できます。
続いていずれかのタイトルをクリックすると、以下のようにxp_mainFormが表示されることを確認しておいてください。


xp_mainFormについては体裁が整えられておりませんので、先のxp_byDateに準じるようにデザイン等を修正してください。

取り急ぎ私の設定は以下のように致しました。



本日は以上とさせて頂きます。

次回はフォームの選択項目であるClass及びTagについて、ビューの値を参照する設定を行います。
またアプリケーションとして必要なボタンを配置し、完成させる予定ですので、引き続きよろしくお願い致します。

2018年2月13日火曜日

チョー #初心者 向け、 #XPages 開発手順~日付順ビュー

みなさま、こんにちは!

早速ですが、告知です!!
来週金曜はノーツコンソーシアム FESTA 2018が開催されます。
どなたでもご参加いただけるイベントです。ぜひ懇親会も含め、ご参加ください。
私もなんとか参加できることになりました。
皆様とお会いできることを楽しみにしております!


さて先日に続き、今回は日付順ビューをXPagesで実現してみます。
XPages開発に関するプロパティ設定については、お手数ですが

【第3回】タイムレコーダーアプリ作成~XPages作成の準備とトップページの作成~

をご覧ください。

まずは共通であるタイトル部分をカスタムコントロールで作成します。

[新規カスタムコントロール]をクリックして、カスタムコントロールを作成してください。名称等は自由ですが、私は以下のように作成しました。


作成し、画面が開きましたら、先頭にコンテナコントロール内より1行1列/幅に合わせる(100%幅)の[表]を追加します。


表の中にコアコントロールより[ラベル]を追加し、アプリケーションタイトル(今回はLink)とします。
表の背景やラベルの文字列については自由にデザインください。
私のほうでは以下としました。

以上で保存して閉じます。

続いて[新規XPage]をクリックし、XPageを作成します。
名前は[xp_byDate]としてください。


開きましたら、まずは先頭に先ほど作成しましたカスタムコントロールを配置します。


配置できましたら、カスタムコントロールの後ろに二つ、改行を入れておきます。


続いて二つ目の改行へコンテナコントロールから[表示]をドラッグ&ドロップします。


ビューのデータソースの選択ダイアログが開きますので、[日付順]を選択し、ビュー列はそのままで[OK]します。
できあがった[表示]の幅を100%に設定します。


続いて体裁を整えます。
内容としては、文字フォントやサイズ、余白、列幅など。
特に指定ありませんので、このあたりはお好みで変更してください。
但し枠線を設定しない場合、余白(内側)を大きめに設定されたほうが見易いかと思います。
以上で一度、ブラウザでプリビューしてみましょう。

サンプルデータが登録されていれば、以下のように表示されるかと思います。
私の画面では以下のようになりました。


少し短いですが、今回は以上とさせて頂きます。
次回はフォームのXPageを作成し、ビューとの接続を実施致します。

改めて #お礼 2018 #IBMChampion for Collaboration Solutions 日本祝賀パーティー


みなさま、こんにちは!

早速ですが、本日は2月8日に行われました2018 IBM Champions for Collaboration Solutions 日本祝賀パーティーに関して、この場をお借りしてお礼を申し上げたく書いております。

まずはこの場を設定頂けました幹事の皆様、そしてたくさんのご出席頂きました皆様に、心よりお礼申し上げます。

またご協賛いただきましたスポンサー

●ノーツコンソーシアム様
●OnTime Group Calendar様
●株式会社ブルーゲートウェイ様
●のの会 (notes knows community)様

につきましても、本当にありがとうございました。

加えてノーツコンソーシアム大阪研究会の皆様、暖かいメッセージや質問、そして黄色いバラ。

思わず涙してしまいそうになってしまいました・・・。
残念ながらバラを持って帰ることができず、同じ大阪研のI様に託させて頂きました。
が・・・たぶんそのほうがバラも喜んだかと思います。

さて冒頭に画像を貼りました、発表冒頭のスライドが本音になります。

実際あの場に座らせていただき、感じたのは


・・・なんでこっちに座ってるんやろ!?


です。

まだまだ実感もありませんし、何をしていけばいいのかすら気付いていません。
そんな不束者ではありますが、他5名のチャンピオンの皆様にご指導頂きながら、何かひとつでもこの一年で残すことができればと考えております。

もちろんチャンピオンの方限定ではありませんので、何か私でできることがあれば、遠慮なくお申し付けください。

みなさま、ほんとうにありがとうございました!!

2018年2月7日水曜日

ちょっといっぷく・・・

みなさま、こんにちは!
明日の2018 IBM Champions for Collaboration Solutions 日本祝賀パーティーにうかれているわけではないのですが、たまには息抜きもいいかなぁと思った次第です。

みなさま、アイロンビーズってご存知ですか?
1個5mmくらいのプラスチックの円筒形のビーズを並べてデザインを作り、アイロンで接着するというものなのです。


こどもが好きで、いろいろと作って遊んでいたのですが、このレイアウトの使うプレートを見ていてふと思いつくものがありました。


どこか見覚えありませんか?
そう、Notesのアイコンエディターなんです!!


Notesのアイコンエディターは32x32。
つまり普通のアイロンビーズで作るとなると・・・16cm角の作品になってしまいます。
これではあまりに大きすぎる・・・と思っていたところ、ナノビーズなる商品があることを知りました。
ということで一式注文を・・・

早速届きました。


商品概要はネットを見ていただくとして・・・

ちっちゃい

1個2mmはなさそうです。
もちろん指では摘むことが限界で、盤に配置するなんてとんでもない。
専用ピンセットを買っててよかったと胸をなでおろしました。

さて、どのアイコンを作ろうか・・・

もちろんコレですね。


なお専用のレイアウト盤は残念ながら32x32ではなく28x28でしたので、赤枠内で作ることにします。
と簡単に書きましたが、28x28=784!

ちまちまちまちまちまちまちまちまちまちまちまちまちまちまちまちま

できました!


裏面はしっかり固定するため、粒感はなくなってしまっていますが、なんかいい感じです。

早速ケースに・・・と思ったのですが。

なんと!
専用ケースは円形のため、入らない(泣

致し方なく、そのまま放置です。

ただ・・・どうもしっくりこない。

ということで、再チャレンジ・・・


ちまちまちまちまち町まちまちまちまちまちまちまちまちまちまちまちま

って書きましたが、実は今回は次女が戻ってきており、興味半分に作ってくれました。
なんと!
私が作った時間の1/4ほどの時間で・・・(汗


やはりこちらの色のほうがしっくりくるのは私だけでしょうか。

と、ここまできて「しまった!!」
ひとつ目でサイズが大きくてケースに入らないことを忘れて、同じサイズで作ってしまいました(号泣

すいません、悪ふざけが過ぎました。

今後は32x32を小さくして、いろいろと作ってみるつもりです。

2018年2月5日月曜日

チョー #初心者 向け、#XPages 開発手順~準備編

みなさま、こんにちは。
先週に引き続き、インフルエンザが猛威をふるっておりますが、皆様体調くずされていませんか?
私は・・・多少風邪気味な山を乗り越え、至って元気です。
先週末はR様主催のNotes Festa 2018へ参加させて頂きました。
ここで詳しく書くことは控えさせて頂きますが、なかなかな内容で面白いものでした。
終了後、弊社2014年の更新に本当にご尽力頂けました方と確か2年ぶり?くらいの再会に、貴重な時間をすごさせていただくことができました。
M様、I様、ほんとうにありがとうございます。


さて今回からは新しいシリーズを書かせて頂きます。内容としては、とにかく簡単なアプリケーションを元に、XPages化する手順を数回に分けて記載したいと思います。
というのも、弊社内ではNotesアプリケーションをXPages化してWEBで閲覧可能にしてあるのですが、単に「閲覧」できるだけのものばかりで、実際にWEBアプリケーションと言えるものがありません。

そこでWEBブラウザだけで利用できるアプリケーションに挑戦したいと思います。
具体的には、ホームページリンクを集めるだけの簡単なデータベースを使ってXPages化し、編集や新規作成という機能を盛り込むことが目的になります。

早速ですが、新規のアプリケーションを作成します。
タイトルやファイル名は自由ですが、私は以下のように設定しました。
テンプレートは【-未入力-】のまま【OK】します。



続いてフォームです。
こちらも名前・別名とも指定はありませんが、私は以下のように作成しました。


フォームに作成するフィールドですが、以下5つとなります。


 タイトル: Title(テキスト・編集可能)
 分類: Class(ダイアログリスト・編集可能)
 日付: Date(日付/時刻・編集可能)
 URL: URL(リッチテキスト・編集可能)
 タグ: Tags(ダイアログリスト・編集可能)


WEBでの操作を前提とするため、レイアウト等については割愛させて頂きます。

続いてビューを作成します。
今回はリッチテキストフィールドである[URL]を除くすべてのフィールドを使用してビューを3つ作成します。(うち2つはダイアログリストでも利用します)

①日付順(byDate)

 日付(降順・列のヘッダーをクリック時のソート[両方])
 タイトル
 分類
 タグ


②分類別(byClass)

 分類(昇順・カテゴリ別)
 日付(降順・列のヘッダーをクリック時のソート[両方])
 タイトル
 タグ


③タグ別(byTags)

 タグ(昇順・カテゴリ別)
 日付(降順・列のヘッダーをクリック時のソート[両方])
 タイトル
 分類


以上でビューが完成しましたので、一旦【mainForm】に戻り、ダイアログリストの値を設定します。
分類、タグのいずれも「式で選択肢を設定」とし、

分類

 @DbColumn("":"NoCache";"";"byClass";1)


タグ

 @DbColumn("":"NoCache";"";"byTags";1)


として保存します。

以上で準備が完了しました。
サンプルデータを1つ以上、登録しておいてください。

次回はまずはXPagesで日付順のビューを作成したいと思います。