2013年6月13日木曜日

連載:ちょっとディープなXPages 第1回~HTMLタグを自由にコントロールしよう

みなさん!XPages開発していますか!?

本題に入る前に

XPageの画面を編集する際、WYSIWYGの画面で実装しています?
もし、ちょっとディープな世界に足を踏み入れたければ(沼に足をつっこみたければ!?)ソースの画面を開きましょう!

↑恐れずに[ソース]を押しましょう!
この連載では、タグをガシガシ書いていくことが多いので、是非ソース表示に慣れてくださいね。

HTMLタグを書こう

今回のテーマは、「HTMLタグを自由にコントロールしよう」ということですが、これはHTMLを書こうぜ!ということです。
サーバーコントロールがあるのに、なぜわざわざHTMLを書かなくてはならないのか、もちろんそれにはメリットがあるからです。
簡単に比較してみました。
HTML サーバーコントロール
意図したHTML
記述したHTMLがそのまま描画される
コントロール名から想像するか、実際に出力されたものを確認するしかない。
また、プロパティ等によって出力されるHTMLが異なる。
クライアントサイドJavaScriptでの操作
HTMLが意図したものなので、操作しやすい。
プロパティや状態によりHTMLが異なったり、クライアントIDが動的に変わるため、操作しづらい。
サーバーのメモリ消費量
サーバーコントロールに比べて少ない
HTMLタグに比べて多い
テキストボックスなどのフォームへのデータバインド
できない。ただし、サーバー側で入力値を受け取ることはできる。(後述)
できる。
開発効率
WYSIWYG画面で編集できない。プロパティウィンドウ等の支援もない。
しかし、HTMLタグやIDが書いたままがレンダリングされるため、クライアントJavaScriptを多用する場合は有利な場合もある。
WYSIWYG画面で編集でき、プロパティウィンドウ等の支援もある。
しかし、レンダリングされるHTMLが動的であったりIDが動的なため、クライアントJavaScriptを多用する場合は不利な場合もある。
サーバーサイドJavaScriptでの操作
属性を動的に変更できるが、タグ自身を操作したりするのが困難
タグのレンダリングを含め、様々なコントロールができる
このように一長一短で、すべてにおいてHTMLを使用するのが望ましいわけではありませんので、適所に使用することを心がけましょう。

HTMLの記述と属性値の動的割り当て

どうやってHTMLを書くのかは、まあ簡単だと思います。コード画面を開いておもむろにタグを記述します。
id属性も記述した通りのHTMLが出力されるので、Javascriptでの操作やCSSの適用などにid名がそのまま使えて便利です。
しかし、属性の内容をサーバーサイドで動的に書き換えたい場合はどうでしょう?XPagesでは記述したタグの属性値を動的にレンダリングする方法がありますので、ご紹介します。
属性値のところで、動的に値を変えたい場所に、#{}や${}式を書くことができます。

例1)データソースのNotesXspDocumentが編集モードの場合に表示する。
<div id="editBox" style="display:#{javascript: doc.isEditable ? 'block' : 'none'}">・・・</div>
例2)クラス名にviewScopeの"class"の値を入れる。
<button class="lotusButton #{viewScope.class}">送信</button>
例3)ビュー"view01"がデータソースのリピートコントロール内の繰り返し要素で、ビュー列"title"の値をテキストボックスに表示する。
・・・

サーバーのメモリ消費量

上の比較表で、HTMLの方がサーバーサイドのメモリの消費量が少ない、と書きました。
実際に計測したので、その方法と結果をご紹介します。

=検証環境=

Domino8.5.3 FP3

=測定方法=

サーバーコントロール(編集ボックス)を100個あるページ(1)と HTMLフォーム(input type="text")が100個あるページ(2)を用意。
メモリ消費量は、Runtime.getRuntime().totalMemory() - Runtime.getRuntime().freeMemory() で算出。
Httpサービスを起動直後に(1)のページを表示し、メモリ消費量を記録。Httpサービスを停止→起動し(2)を表示しメモリ消費量を記録。

=結果=

メモリ消費量
サーバーコントロール(1)ページ 19.2MB
HTML(2)ページ 16.8MB

このように、同じテキストボックスでもHTMLタグで書いたほうがメモリ消費量が少ないことがわかります。
同時接続の数や頻度が多くなると、その差も開いてくることが考えられますので、特に多セッションが考えられる場合、厳しいレスポンス要件が期待される場合は、HTMLタグ記述が有効です。

POSTデータの受け取り

HTMLタグで書いたフォーム(input type="text"など)の入力値をサーバーで受け取るには、paramグローバルオブジェクトを利用します。
<input type="text" name="title" />
このテキストボックスに入力された値を、サーバー側で受け取るには
param.get('title') 
で取得できます。 クライアントからの送信は、全更新、部分更新とともに自動的に送信されるので、HTMLタグで書いたとしても、特に意識する必要はありません。

まとめ

サーバー側での操作を必要としない要素はHTMLタグで書こう!

2013年6月3日月曜日

連載:ちょっとディープなXPages 第0回

みなさん!XPages開発してますか?!

XPages、便利ですよねぇ。Notesの資産を手軽に且つ見栄え良のいいWebを手軽に作成出来ますよね。

Extension Libraryを組み合わせればさらに強力なユーザー・エクスペリエンスを提供できますし、ますます便利に。

XPagesを知ると、いままでのFormWebには戻りたくないですよね。

それも、XPagesのフレームワークが非常に強力であるおかげなのですが、裏を返せば自由度が少ないとも言えます。

フレームワークの枠を外れた複雑なことをしようとすると、フレームワークが何をしているかというのを解析して把握する必要あるんですよね。
ということでこのブログでは、XPagesをより深く掘り下げてみてわかったことを連載でお伝えしたいと思います。

すでにお分かりかと思いますが、初心者向けの内容ではないので、あしからず。
連載の項目は大雑排にしか決まっていないのですが、こんな感じです。


  • サーバーコントロールに頼らない!HTMLタグを自由にコントロールしよう!
  • JavaScriptをもっと知ろう!
  • jQueryを使おう!
  • 独自でAjaxしてみよう!
  • Javaのライブラリを使ってみよう!


今回は、プロローグということで、具体的な記事は次回からです。