チョー #初心者 向け、 #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　ダウンロード先変更