XPagesのラジオボタンをカッコいいデザインに変える方法

通常、ラジオボタンをCSSだけでデザインする場合によく使われる方法

通常、ラジオボタン、チェックボックスをデフォルトのブラウザの持つデザインではなくカスタマイズしようとした場合、HTMLソースコードを以下のように用意します。

ここでまず、ラジオボタンのINPUTタグとLabelタグを兄弟関係で持たせるということが重要になります。その後、CSSによって以下のように指定します。

これにより、丸ポチを100%透過してしまい見えないようにしてやります。
次にLabelタグを使い、好きなようにボタンのデザインを作成してやります。

こうすることでこのようなラジオボタンにカスタマイズすることができます。

custom-radio

このCSSで重要なのは ”input[type="radio"]+label:before” としている点です。
つまり、+label とすることでinputタグの兄弟関係にある labelタグのデザインをカスタマイズしています。
なお、なぜこのような遠回りなことをしなければいけないかというと、input タグには「:before」が使えず、またinputタグ自体は非表示しなければならないため、labelを使ってこのような対応になってしまうわけです。

と、ここまではXPagesに全く関係のないHTMLとCSSのお話なので、ラジオボタンをカスタマイズしたい場合はググってみると色々なデザインを発見できると思います。
前置きがかなり長くなりましたが、XPagesで同等のことをしたい場合の説明をします。

XPagesのラジオボタン(ラジオボタングループ)はHTML構造が違う!?

同様のことをXPagesのラジオボタンで行いたい場合、まずXPagesが出力するHTMLソースコードをチェックします。ここではラジオボタングループを利用します。

すると出力されるコードは以下の通りです。(Domino 9.0.1)

見て頂いて分かるようにinputタグを子にもつようにlabelタグで括られています。これがXPagesでラジオボタンのデザインをカスタマイズすることを難しくしています。

ラジオボタンがチェックされたか、親のタグのLabelから分からない

上記CSSで、"input[type="radio"]:checked+label:before"というセレクターがありますが、「ラジオボタンがチェックされたとき、その兄弟のラベルのデザインを変更する」という箇所になります。CSSでは「XXXという子要素を持つ親の要素」という逆順のセレクターを指定することが出来ないため、XPagesの「INPUTタグ(ラジオボタン)を選択された時の親のLabelのデザインを変更する」ということが技術的に不可能になります。
(jQuery等を使いJavascriptで処理する場合は可能であったりします。。。)

それでもCSSだけを使って頑張って実装する!

上記CSSによるラジオボタンのデザイン変更が出来ないため、別の方法による実装をする必要があります。

「box-shadow」を駆使して実装する!

XPagesのラジオボタン用のCSSは以下のようになります。

こちらのCSSでは"label:before"でラジオボタンの外枠を描画、"label:after"で選択時の丸ポチを描画しています。キーはクリック時の丸ポチの表示・非表示を"box-shadow "でマスクすることで実装しています。
多少複雑ですが、こうすることでXPagesの出力するHTMLにCSSを被せるだけでデザインをカスタマイズすることができるようになりました。

なお、このCSSですが、IE8以前のブラウザでは残念ながら正しく動作しません。"box-shadow"がIE8ではまだサポートされていないためです。

おまけ

上記CSSの応用みたいなものですが、ラジオボタンに画像を使うなどアイデア次第でより大幅にデザインを変更することができるようになります。
以下のソースコードでは"box-shadow"を使い選択された値の画像を濃淡により表現しています。

こちらのコードを実行した場合のイメージがこちらです。アイコン画像をクリックすると選択状態を表すように色が濃くなります。

custom-radio-img


XPagesでフィールドに"年月日のみ"、"時刻のみ"の値を設定する方法

XPagesでの日付の保存では常に年月日、時刻の両方が保存される

"年月日のみ"もしくは、"時刻のみ"と設定されているフィールドを持つ文書をNotesクライアントで保存をした場合と、XPagesで保存をした場合で保持されるデータの持ち方が変わってくるということが今回のブログのトピックになります。

例を上げると、以下のようなフィールド、日付の表示(年月日のみ)

年月日のみをもつフィールド

もしくは、時刻の表示(時分)

時刻の表示のみをもつフィールド

といったケースです。

これを試しにNotesクライアント(Ver 9.0.1 FP3)で保存してたところ、以下が通常のNotesクライアントでのデータの保存結果になります。

Notesクライアントで日付フィールドを保存

Notesクライアントで日付フィールドを保存

Dateフィールドでは「2015/03/02」、Timeフィールドでは「14:35:00」というようにそれぞれ年月日、時刻のみが格納されます。

では、このフォームを元にXPagesから文書作成をした場合どうなるか、簡単なXPagesを作成して試してみました。

XPagesで日付フィールドの保存

DateフィールドとTimeフィールドのXPagesソースコードは以下のとおりです。

Dateフィールド

Timeフィールド

それぞれ、フィールドのTypeをdate, timeと指定しています。

このXPagesで保存した後、フィールドに格納されたデータを見てみると、

XPagesから保存された文書のDateフィールド

XPagesから保存された文書のTimeフィールド

両方が「yyyy/MM/dd hh:mm:dd ZZ」のフォーマットで保存されていることが確認できます。

なぜ"年月日のみ"、"時刻のみ"が必要か?

上記の比較からどちらのデータの持ち方が正しいということが今回の主旨ではありません。

実際には、Notesクライアントで使ってきたNSFをXPagesを使ってWEB化したい、というケースが多いと思います。そしてNotesクライアントとXPagesの両方でNSFを使い続けるといった場合、やはりXPagesがNotesクライアントの仕様に合わせる必要が出てきます。

前置きが長くなりましたが、今回はXPagesでも"年月日のみ"、”時刻のみ”のフィールドを設定する簡単な方法をご紹介します。

NotesDateTimeを使って整形しよう

やり方は幾つかあるとおもいますが、

SSJSのNotesDateTimeクラスを使って整形してやることが出来ます。

このコードではXPagesで一旦文書保存した後のPostSaveDocumentイベント内でNotesDateTimeクラスのsetAnyTime()、setAnyDate() を使うことで、思った通りのフォーマットに整形しています。

 

いかがでしたでしょうか?

今回は既存NSFをWEB化する際に躓きがちなDateTimeフィールドの情報でした。


IBM Domino Application on Bluemix について、ConnectED 2015にて

今回、もっとも興味があるセッションであった「IBM Domino Application on bluemix」セッションに参加してきました。

xpages on bluemix

通常、Bluemixで開発を行う場合、EclipseにCloudFoundryのプラグインをインストールしたり、DevOps サービスなどの開発管理システムと連携する形で行うため、開発環境の設定段階で以外と敷居が高くなってしまいます。
この点、IBM Domino Application on bluemixではどのように提供されるのかが自分の持つ関心の一つでした。

予想として、おそらくDesigner内のJavaパースペクティブ等を使ってデプロイをすることになるのかと考えていたのですが、今回のセッションで、その予想はいい意味で裏切ってくれました。

IBM Domino Designer上で専用のBluemixへのデプロイツールを使い直接デプロイを行えるようになります。

bluemix deployment tool
また、IBM Domino Designerの設定画面にBluemixのアカウントID、Passwordを入力する項目が用意されるため、デプロイ時に毎回ログイン情報を提供する必要がなくなります。

 

もう一つの関心として、オンプレミスのDominoとどのように連携できるのか、ということです。
Server IDが提供されたり、サーバー間の相互認証などを行ったり出来るのか?

この点に関して、セッションを行っていた開発者に"Meet the developer"にて直接質問をしてみたところ以下のような回答を聞くことが出来ました。

  • Bluemix上のDominoは特別に仕立て上げられたサーバーのためServer IDを開発者ごとに提供するという予定はない。
  • サーバー間の相互認証を行いオンプレミスのDominoとの連携を行えるようにすることはプランとしてある。

どちらも出来ないのかもしれないと想像していたため、相互認証等でオンプレミスDominoとの連携が行える可能性について聞き出せたのは大きな収穫でした。
ただ、"IBM Domino Application on bluemix"自体がまだ始まったばかりのため、今の時点ではあくまでプランとして挙がっているということみたいです。

IBM ConnectedED で得た情報まとめ

domino-bluemix-model

その他、"IBM Domino Application on bluemix"に関して得た情報として纏めると以下のような感じです。

  • XPages Bluemixランタイム(ビルドパック)が用意される。lightweight Domino Web Containerが用意されていてXPagesが実行されるイメージ。
  • ローカルレプリカはない。 サーバーへ同期をとるのではなく、専用のBluemixへのデプロイツール(Addonのようなもので提供?)から直接デプロイを行う。
  • Designerの設定画面にBluemixのアカウントID、Passwordを入力する項目が用意される。それによりデプロイ時に毎回ログイン情報を提供する必要がなくなる。
  • BluemixでXPagesのインスタンスを作成することで、NSFファイルをダウンロードすることができ、そのNSFを使い開発を進める。
  • BluemixでXPagesのインスタンスを作成することで、開発用のUser IDも同時に作成される
  • 複数の開発者で開発も可能
  • オンプレミスのサーバーとの相互認証をさせる等で連携をプランしている。
  • IBM Sametimes on bluemixはまだ開発に至っていないが、IBM内でサービスとして提供したいという話はある。
  • IBM Connections Cloud との連携として IBM Connections Cloud FileがBluemixで提供されるため、その連携は可能になる(予定)。

「IBM Domino Application on bluemix AD201」 デモ

「IBM Domino Application on bluemix AD201」セッションでは以下のようなデモが行われました。

  • XPagesとRDBMSサービスを使いNotesデータベース以外のデータソースと連携。
  • XPagesで作ったWebアプリケーションからWatsonと連携。
  • Bluemix上のインスタンスを2つにしたロードバランスにも対応出来ていることをデモ。(例)片方のインスタンスを落として、もう一つのインスタンスでで文書を更新、その後にインスタンスを立ち上げると、更新された文章が同期されていることが確認できる。

ロードマップ

最後に、「IBM Domino Application on bluemix」の今後のロードマップが発表されました。
2015年の下半期でようやくベータになることから、まだまだ開発が始まったばかりのサービスであることが伺えます。

domino-xpages-bluemix-loadmap


Expand Specific View in XPages

XPages ビューの特定のカテゴリーのみを展開して表示する方法

カテゴリービューの展開・省略を制御

カテゴリービューの展開・省略を制御するには、ビューデータソースで[ExpandLevel]属性を使います。
展開表示であれば「0」,省略表示であれば「1」です。

では、基本は省略表示であるけれど、特定のカテゴリーだけデフォルトで展開させたい、という場合にはどうしたらいいでしょうか?

Expand Specific View in XPages
特定のカテゴリーを最初から展開させたレイアウトイメージ

SSJSで特定のカテゴリーのみを展開表示の制御を行う

Serverside Javascriptを用いて以下のコードをafterPageLoadイベントに追加することで制御を行うことが出来ます。


上記の例では最後の行(L4)でcontainer.expand("1"); としているため1番目のカテゴリーが展開された状態で表示されます。

このように、DominoViewDataModelより直接プログラムによって操作をしていますが、こちらのオブジェクトを詳しく知りたい方はこちらを参照してみてください。

他にも色々とViewを操作する方法が発見出来るかもしれません。


XPagesDay 2014 イベントの申込開始!

XPagesDay 2014

XPagesDayの熱い二日間が今年もやってきます!

2013年も大成功に終わったXPagesDayが今年もやってきました。

今回は全てオンラインセッションとなっているので日本全国どこからでも参加できるイベントになっています。

当日は、自分も若輩ながらセッションを一つ講演させていただきます。

【A-3】「SSJSでも使える!Javascriptでオブジェクト指向プログラミング入門」

皆様、是非ご参加ください。

日時: 
    11 月 18 日(火)、19 日(水)の2日間

場所:
    すべてオンラインのセッション

主催:
    チームスタジオジャパン株式会社

参加費:
    無料 / 事前登録制

詳細、申込みはこちらから » http://www.xpagesday.com/xpagesday.nsf/sessions.xsp

 


リッチテキストエディタのカスタマイズ

XPagesリッチテキスト CKEditorツールバーをカスタマイズ

XPages リッチテキスト コントロール

XPagesのリッチテキストコントロールはDomino 8.5.2からCKEditorが採用されるようになりました。

デフォルトでのリッチテキスト コントロールは以下の様なレイアウトになります。

デフォルトのXPages リッチテキストコントロール

デフォルトでは文字の修飾など基本的なことしか出来ないようになっています。

今回はこのCKEditorをカスタマイズする方法をご紹介します。

toolbarTypeを指定してカスタマイズ

以下の用にDojo属性を追加し、名前を「toolbarType」にし値を指定します。

値には

  • Slim
  • Medium
  • Large

を指定することができます。

リッチテキスト コントロールのプロパティ
リッチテキスト コントロールのプロパティ

それぞれのレイアウト

XPages リッチテキストコントロール Slim
「Slim」を指定
XPages リッチテキストコントロールMedium
「Medium」を指定
XPages リッチテキストコントロール Large
「Large」を指定

Javascriptを使ってフルカスタマイズ

dojo属性に「toolbar」を作り、ツールバーの項目をJavascriptの配列で指定することでリッチテキストコントロールのツールバーをフルカスタマイズすることが可能になります。

XPages リッチテキストコントロールをtoolbar属性でカスタマイズ
リッチテキストコントロールのプロパティ

値の部分にサーバーサイドJavascriptでツールバーの項目を以下のようにセットします。

全てのツールバーの項目を表示させたい場合、

のようになります。

このように、フルカスタマイズすることで、今までになかったHTMLソースコードでの編集等も可能になります。

XPages リッチテキストコントロール ツールバーのフル機能を表示
XPages リッチテキストコントロール ツールバーのフル機能を表示

CKEditor 3.X Developer's Guide も参考にしてください。

 


【XPages】 xe:jsonRpcService の使い方と考察

xe:jsonRpcServiceってなにやつ?

今回はExtension Libraryに搭載されている xe:jsonRpcServiceに関して日本語で解説がほとんど見当たらなかったのでブログに書いてみます。

xe:jsonRpcServiceはDomino Designerの右コントロールの「データアクセス」 →「リモートサービス」をXPagesにドラッグしてやることで作成することが出来るコントロールです。

jsonRpcService

とても軽量、シンプルな通信プロトコル JSON-RPC

でも使い道がいまいちよく分からないDomino技術者の方も多いと思います。そしてよく分かっていない内の1人だった自分が今回、jsonRpcServiceについて調べてみました。

まず、jsonRpcServiceはRPCの名が入っている通り、クライアントとサーバー間でリモート処理を実行したりするんだろう、と推測できます(RPC=リモートプロシージャコールの略)

そしてJSON-RPCはそれ自体が新しい規格であり、そのデータの受け渡しにJSONを利用したプロトコル(現行バージョンは2.0)ということです。

実際にはJSON-RPCでは以下の様なデータがやり取りされます。

とてもシンプルで軽量なプロトコルというのも納得ですね。

XPagesのjsonRpcServiceコントロールも同様に、できる限り軽量な構成になるようにデザインされており、クライアント・サーバー間で呼び出されたデータのみを送信し、返信されたデータのみを受信するといった軽量な処理が行えるコントロール、ということです。

ただ正直なところ、XPagesには部分更新イベントという便利な機能があるので、結果だけを見ると同等な実装が出来てしまうと思います。ではなぜjsonRpcServiceが必要になるのか?恐らくリモート処理がとても軽量に作られているということが一番の特徴だと思います。

例えば、株価の値を刻一刻と自動更新するようなアプリケーションを作りたいといった場合、XPagesの部分更新イベントを一分おきに発生させるというのはちょっと大掛かりな気がするのでもっと軽量な処理で実装したい、といったケースで役に立つのではないでしょうか。

 実際に使ってみた

jsonRpcService を使ったとってもシンプルなサンプルはこんな感じです。

6~10行目でJSON-RPCの関数を定義しています。ここではgetUserName()。処理内容はサーバーサイドJavascriptで記述できます。
そして13行目にボタンを配置してonclickイベントでクライアントJavascriptを書いていますが、service.getUserName();とすることでJSON-RPCのリモート関数を呼び出しを行っています。

このようにxe:jsonRpcServiceでリモート関数を定義すると自動でクライアントJavascipt関数が用意されているというところが肝ですね。

上記のサンプルでは関数の引数は使っていませんが、もちろん引数を持たせることも可能です。
引数を持たせて足し算の計算をさせたサンプルがこちらです。

ハイライトしている7,9,10,18行目を見て頂くとわかると思います。

 

どれだけ軽量なの?

それでは、実際にjsonRpcServiceがどれほど軽量か上記のコードをFirefox Firebugを使って確認してみます。jsonRPCService_add

上記のXPagesをFirefoxで読込み、Firebugを起動、「Net」のタブを開いておきます。そして「足し算」ボタンを押した時に追加される通信データを確認します。

 

 

 

以下の画像がその時のFirebugの表示結果です。

jsonRPCService Firebug

おぉ、データサイズわずか44バイト!! 軽っ!

実際にどのようなデータがやりとりされたのかもFirebugで確認してみます。

まずはPostデータ

jsonRpcSercie Post Param

ふむふむ、「"jsonrpc": "2.0"」 というようなプロトコル情報も省略されており本当に必要な情報のみがPostされています。

つぎにResponseデータ。

jsonRcpSercie Resqonse Param

やはり必要な結果のみがResponseデータとして返ってきています。

ちなみに同等の処理をXPages 部分更新で行いましたが、Postデータ、Responseデータ共にこれほど軽量な処理をさせることは出来ませんでした。また、XPagesの部分更新では”計算結果フィールド”のみを部分更新させるといった場合でも<span>タグ付きで値が返ってきたりと、クライアント側でのデータ再加工を行いたいというような場合、値だけを返すjsonRpcServiceのほうがプログラミングが楽になりそうです。

 jsonRpcServiceを利用する時の注意点

以下のサンプルコードをみてください。

上記のコードはこちらのStackoverflow で質問と一緒に公開されたコードです。
ハイライトされた9,10,20行目を見て頂くと、このコードの作成者はjsonRpcServiceのリモート関数を使ってXPagesで読み込んでいる文書を保存、返り値にTrueを返す、という処理を行いたいのだろうと推測できます。

ただ、このコードは意図した動きをしません。

今回の記事をここまで呼んで頂いた方々にはすでに察しが付いていると思いますが、jsonRpcSerivceはあくまでJSONによってデータをやり取りしていますので、9行目のgetComponent("inputText1").getValue() というのは解決が出来ない情報になってしまいます。

同様にXPages上に存在するdocument1というデータソースも取り扱うことができません。引き渡したいデータがあれば、xe:remoteMethodArg 引数を使って明示的にJSONデータに含めないといけないということです。

このように、jsonRpcServiceはXPagesで読み込んでいるデータソース文書を保存したりする処理には向いていないように思います。(出来ないことはないはずです)

jsonRpcServiceはデータの読み出し専用が得策?

このstackoverflowの回答者も言っていることですが、上記の理由からjsonRpcServiceはデータの読み出し専用として利用することが最良であるかもしれません。

以下、jsonRpcServiceを利用したらいいかもしれないシチュエーションとして

  • 会社の株価を定期的に自動更新するようなプログラム
  • 新しいユーザーを登録する際にすでに同じユーザー名、Emailがないかどうかを問い合わせるプログラム
  • サーバーからのレスポンスデータをクライアントサイドJavascriptで操作、加工したい場合

などに適していると思われます。

いかがでしたでしょうか?

jsonRpcSerivceの特徴を把握してXPages開発の選択肢の1つとして覚えておいてもらえればと思います。

 

 


XPagesでIEの互換表示ではなくIE8に強制表示する方法

ie日頃から”IEはこの世界から消えてなくなれ” と考えている私ですが、仕事ではやはりIEでのサポートが必須である場合がほとんどで、時に開発者として「IEさえなければ、IEさえなければ・・・」などとブツクサいいながらIEの下位バーションでテストを行っていたりします。

そんなIEですが、IE8ぐらいになってくるとかなりJavascriptやCSSのサポートが幾分マシになってきます。 しかしIE8から次に厄介な問題としてIEの互換表示という機能があります。

IE8で動作するように開発したページなのに、クライアントから「なんかレイアウトが崩れているんですけど・・・」なんて電話が、、、よくよく調べてみるとIE8互換表示モード(IE7)でブラウジングしていたのが原因だった、なんてケースです。 (消えてなくなれIE! )

IE8が出た当時は下位互換への救済措置だったりしたわけですが、IE11の今のご時世では混乱を招くもとになっているばかり。

前置きが長くなりましたが、今回の本題、

XPagesでIE8互換表示ではなくIE8に強制表示する方法

まず、状況の整理をすると、IE8で表示できるように開発したページであってもIE8互換表示で表示されることがあります。

[list_marked]

  • IISから指定されている
  • イントラのグループポリシーで設定されている
  • [/list_marked]

    というような場合です。 また嵌りやすいのがIE8はデフォルトで、”互換表示でイントラネットサイトを表示する”にチェックが入っているという点です。

     こういった場合、一般的にWEB開発者は

    [list_marked]

  • DOCTYPE宣言で指定
  • metaタグで指定
  • web.configなどのHTTPレスポンスヘッダーで指定
  • [/list_marked]

    という方法でIE8互換表示ではなくIE8に強制表示させるようです。

    ここではXPagesをつかってHTTPレスポンスヘッダ-を直接操作する方法を書いてみます。

    以下のコードをXPageのbeforeRenderResponse イベントに記載します。

    var exContext = facesContext.getExternalContext();
    var resp = exContext.getResponse();
    resp.setHeader("X-UA-Compatible", "IE=8");

    こうすることで描画をIE8で強制的に表示することが可能になります。

    xpagesのbeforeRenderResponse画面

    また、特定のIEのバージョンに限って制御を行いたい場合、以下のように context.getUserAgent() を使って制御文を書くことが出来ます。

    if (context.getUserAgent().isIE(8, 8)) {
      var exContext = facesContext.getExternalContext();
      var resp = exContext.getResponse();
      resp.setHeader("X-UA-Compatible", "IE=8");
    }

    ここでは、「IE8の場合からなず互換表示ではないIE8で動作させる」としています。

    なお、IE8でどのモードで描画しているのか確かめるためにはF12を押して開発者ツールを立ち上げて確認できます。

    IE8互換モードの切り替え画面

    IE互換表示の対応で苦戦している人は是非上のコードを試してみてください。


    XPagesでJSONをパースしよう、 fromJson関数の使い方

    今更聞けないJSONって何?

    JSON(ジェイソン、JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptにおけるオブジェクトの表記法をベースとしているが、JSONはJavaScript専用のデータ形式では決してなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しに使えるよう設計されている。

    引用:Wikipedia

    論より証拠。 JSONってこんな形式です。

    [
        {
            "勇者": [
                "隼の剣",
                "光の鎧"
            ]
        },
        {
            "格闘家": [
                "鉄の爪"
            ]
        },
        {
            "魔法使い": [
                "いかづちの杖",
                "水の羽衣"
            ]
        }
    ]

     Javascriptのオブジェクトの表記法と配列を組み合わせてとってもシンプルにデータ格納してしまおうということですね。正直、開発者にとってはXMLよりJSONのほうが好きな人のほうがおおいんじゃないでしょうか。

    さて、ここから本題です。

    XPagesのサーバーサイドJavascriptでJSONをパースするには

    SSJSってサーバーで動くJavascriptだよね、だったらJSONもJavascriptのフォーマットだし扱い得意だよね、と当然思う方も多いと思います。

    実際、XPagesではJSONをパースさせるのに幾つか方法があるようです。

    1. eval() 関数を使う。 XPagesの標準関数であるeval()を使ってお手軽にパースすることができます。こちらの例ではビューのカラムに表示させるコンテンツを文書毎にもつJSONのフィールドから一度パースして表示させています。 中々軽量でいいと思います。
    2. XPagesに標準で実装されているランタイムライブラリ、com.ibm.commons.util.io.json を使う。これはほぼJavaよりのソリューションになりますが、JsonJavaFactory、JsonParser、Iterator 等を使いパースしていきます。 より高度なJSONデータを扱う必要がある場合には適していると思います。例はこちら
    3. fromJson() 関数を使う。なんとXPagesには標準でfromJson() 関数なるものが存在していました。 これを使えば簡単にSSJSでJSONをあつかえるようになります。

    今回は(3)のfromJson() 関数の扱い方について書いてみます。

    Domino Designerのヘルプに乗ってない !?

    まずこの関数ですが、Domino Designer (バージョン9時点)のヘルプに載ってません。 もう一つJson形式のObjectを文字列に変えるtoJson() 関数も用意されていますが、どちらも載っていません。

    Domino DesignerのSSJSの補完機能を見る限り、

    fromJson(str:string) any

     となり、 strのパラメーターにJSONフォーマットに則した文字列を渡してやると、Javascript Object形式で値が帰ってきます。

    Objectから以下のように値を参照できます。

    var strJsonSimple:String = '{"name":"apple","color":"red","num":"10"}';
    var jsonObjSimple = fromJson(strJsonSimple);
    return jsonObjSimple.name;

    しかし、この場合(青文字の部分)はObjectに"name"という変数(属性?)があるということを前提にプログラミングされています。

    実際は、JSON文字列がObjectになった後、変数もその値もわからないこともあると思います。

    その場合、Javascriptでfor-in文による繰り返しで回してやれば値の取得が可能になります。

    例として、冒頭で上げたJSONをXPagesでパースして表示しているサンプルを掲載します。 Objectに配列を持つという組み合わされた構造のJSONを以下のようにパースしています。

    var strRet:String = "";
    var strJson:String = '[{"勇者": ["隼の剣","光の鎧"]},{"格闘家": ["鉄の爪"]},{"魔法使い": ["いかづちの杖","水の羽衣"]}]';
    var jsonObj = fromJson(strJson);
    
    for(var char_num in jsonObj){
    
    	var charEntry = jsonObj[char_num];
    	for(var char_name in charEntry){
    		strRet += "キャラクター"+char_num+": "+ char_name +"
    ";
    
    	    var charEquipment = charEntry[char_name];
    	    var equipments = @Explode(charEquipment, ",");
    		for (var k = 0; k < equipments.length; k++){
    			strRet += "  装備"+(k+1)+" = "+equipments[k]+"
    ";
    		}
    
    	}
    }
    return strRet;

    計算結果フィールドに入れた結果はこんな感じです。

     fromJson


    Notes Form内のComboboxでキーワード変更してもOnChangeイベントがトリガーされない

    表題の通りなのですが、Domino DesignerでForm内にComboboxフィールドを作成時にキーワード変更してもOnChangeイベントが思い通りにトリガーされない時の対処方法です。

    厳密には、キーワード変更後、マウスが別の場所にフォーカスしてから、OnChange()やExiting() イベントが呼ばれるためイベント呼ばれるのが遅いと感じてしまいます。

    これに対応するには、フィールドプロパティのアドバンスド オプションタブの一番下、「Run Exiting/OnChange events after value change」というのを選択したらOK。

    onchangeイベントのトリガー変更
    onchangeイベントのトリガー変更

    Comboboxのキーワードを変更した直後に呼ばれるようになります。

    これだけ。

    「てか、この設定いるの?」と疑問(笑) OnChangeイベントが直後に呼ばれたら困る状況ってあるのかな? 一応Domino 8.5までのAdvanced Application Developerだけど、こんな設定気づきもしなかったです(><)

    以下は、IBMのTechnote(英語)から

    WorkaroundTo configure the OnChange event to trigger when a new keyword is selected, you can select the option "Run Exiting/OnChange events after value change". This option is located on the Advanced Options tab Beanie tab of the field properties dialog box.

    引用元: IBM - OnChange event does not trigger on keyword change in combobox field.

    しかし、今回もネタが小さいw もっとトレンドのある記事が書けるように頑張ります。 xPagesか・・・