slack

テクてく Lotus 技術者 Slack に参加しよう!

2015/02/26

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

今回は、前回紹介した XPages Extension Library で Bootstrap と Responsive Web Design を実装の続きです。
Bootstrap のベースに加えて追加されているリソースがあります。Glyphicons というアイコン集が利用できるようになっています。簡単に言うと、アイコンイメージを画像ではなく、JavaScript と CSS を使ってアイコンを表現しているものです。この Extension Library では現時点で 200 のアイコンが搭載されています。XPages の標準コントロールにもすでの対応がされているので、心配ありませんが、自分でこの Glyphicons を使用したい場合の HTML サンプルを見ると次のようなコードになります





上でわかるように class="glyphicon アイコン名 をコントールの属性に追加すればよいので、XPage の中でアイコンを表示したい場合には

というように記述します。
しかし、この Glyphicons を使用する際には現在のところちょっとした問題があります。たとえば、前回からみている Demo Application のデータベースでは下図のようにアイコンらしきものが正しく表示されていないのがわかります。
 これを解決するには、Xspプロパティの「実行時最適化 JavaScript と CSS リソースの使用」のチェックを外す必要があります。このオプションはサードパーティの JavaScript/CSS のフレームワークを使用する際にはたびたび問題になっているオプションです。jQuery を使用して何かする場合は(この Extension Library には jQuery v2.1.1 が実装されています。Bootstrap は jQuery が前提)、JavaScirpt が圧縮されてどこかにコンフリクトが発生してうまく動作しないのが原因です。
またどこかのタイミングで今回実装された jQuery について詳しく説明するとして、今回はアプリケーションのレイアウトにフォーカスして話しを進めます。


 すると、Glyphicon が正常に表示されます。

 ここで、話が一区切り突いたので、続きは次のポストで。次回は新しく追加されてシンプルResponsive アプリケーションレイアウトについて説明したいと思います。

0 件のコメント:

コメントを投稿