2015/02/18

XPages Extension Library で Bootstrap と Responsive Web Design を実装

IBM Notes/Domino 9.01 に実装できる最新版の OpenNTF Extension Library では、Web ページのテーマに OneUI だけでなく、Bootstrap のテーマが使用できるようになりました。
Bootstrap は Responsive Web Design に対応するフレームワークなので、デスクトップブラウザ、スマートフォン、タブレットの様々なデバイスに対応したXPagesアプリをひとつのソースコードで作成できます。
これを使えば、ディスクトップ用とモバイル用でそれぞれ XPage を作成する手間が大幅に削減されるはずです。

また、今年後半にリリースされると予想される Notes/Domino 9.0.2 に標準で実装されるものと考えられています。 先端技術を先取りして試してみる良い機会ではないでしょうか?

まずは、Extension Library の入手ですが、extlib.openntf.org の「Download/Releases」タブから最新版をダウンロードします。
執筆時点では、2014/12/19 リリースの 901v00_11.20141217-1000 (第 11 版)を使用しています。2014/11/10 の第 10 版リリースで初めてこの Bootstrap が Extension Library に組み込まれたので、それ以前のものでは実装されていませんので注意してください。
もうひとつ。執筆時点で Notes/Domino v9.01 には FP3 がリリースされています。何かの不具合で v9.01 FP3 ではプラグインが更新サイト(updatesite.nsf)に取り込めないという不具合が報告されています。使用する際には、v9.01 FP2 までの v9.01 バージョンで使用するか v9.01 FP3 に IF1 をあててください。

Extension Library の導入は次の Wiki (OpenNTF XPages Extension Library のインストール方法)を参考にしてください。

さて、この Extension Library でアプリケーションを Bootstrap の見た目で表示するためには、特に Bootstrap 用のコーディングを追加するようなことはないようです。アプリケーションで使用する「テーマ」を Bootstrap 用に変更するだけで、コアコントロールや拡張コントロールも Bootstrap のルック・アンド・フィールに変わります。

指定するテーマは「Bootstrap3.2.0」または「Bootstrap3.2.0_flat」。選択肢の中に出てくるわけではないので、手入力で指定します。
Theme

ブラウザ上でスタイルが変わらない場合は、アプリケーションのクリーンとビルド、そしてブラウザのキャッシュをクリアしてください。(私の検証では特に必要ありませんでした)

特にテストできるアプリケーションをお持ちでない場合は、標準コンポーネント/拡張コンポーネントが一度に確認できる OpenNTF の Demonstration Application for XPages の v2.01 (9.0.1 用) をダウンロードして実際に動かしてみてはどうでしょうか?
このデモアプリではデフォルトで OneUI V3.0.2 のテーマが使用されています(下図)。
OneUI302

テーマを Bootstrap に変更するだけで、ご覧のような Bootstrap のルック・アンド・フィールに瞬時に変わります。
Bootstrap

この Bootstrap のテーマは Responsive Web Design に対応していますので、スマートフォンから見るような小さな画面サイズにも整形しているのが確認できます。
Mobile

続きは、それぞれの UI コンポーネントについて見ていきます。お楽しみに。

0 件のコメント:

コメントを投稿