Challenge Engineer Life !

エンジニア人生を楽しみたい!仕事や趣味で学んだ技術的なことを書いていくブログです。

PrimeFacesでは<h:head>タグと<f:facet>タグでリソースの読込順を操作できる!

タイトルがわかりにくくてすみません(^^;汗

とある謎の問題現象と、その解決策を調べていて、PrimeFacesには便利な機能があることを知ったのでメモです。

謎の問題現象

IE8だが、なぜかIE7レンダリングされてしまう orz

こんなことがあるのか、と…原因がよくわからないです。
が、以下サイトのような情報もあって、あってもおかしくない…のかな。

PrimeFacesはユーザガイドをみるとわかりますが

  • 3.4まではIE7,8,9をサポート
  • 3.5からはIE8,9,10をサポート

となっており、3.5ではIE7が切り捨てられています(^^;

IE7でPrimeFacesの画面を見ると、IE8以降とは色々異なる(コンポのサイズとかその他色々)ので怪しく思い、何とか気づきました。

IEのF12開発者ツールでブラウザーモードをIE7でも同じ確認はできます。

ちなみに開発者ツールでブラウザーモードを変えるのは以下です。

IEのツールメニューから「F12 開発者ツール」を選択
f:id:kikutaro777:20130716184629j:plain

ブラウザーモードでIE7を選択
f:id:kikutaro777:20130716184705j:plain

最初にトライした内容

先に紹介したサイトにもあるようにmetaタグで以下のように追加するのがメジャーな方法のようですね。

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

Edgeを指定するとインストールされてるIEの最新版となるようです。

これをJSFで使うには、headタグ内で単純に以下のように書きます。

<h:head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
</h:head>

また、プログラムで挿入したい場合はFilterを使って以下のような形で書けるようです。(すみません、今回試していません)

@Override
public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
    ((HttpServletResponse) response).setHeader("X-UA-Compatible", "IE=Edge");
    chain.doFilter(request, response);
}

以下ページが元ネタです。
meta http-equiv=“X-UA-Compatible” content=“IE=8” ignored in RichFaces webapp

で、前者のheadタグを試したのですが…駄目でした。

生成されたhtmlは以下のようになってしまいます。

f:id:kikutaro777:20130716185004j:plain

リソースの読み込みタイミングが遅いようで、問題挙動は変わりませんでした。

成功した内容

もう少し調べていくと、以下のページがありました。

なんと、PrimeFacesではタグの中でタグの名前を指定することで、リソースの記述順番を変えられるらしい。

早速、以下に書き換え

<h:head>
    <f:facet name="first">
        <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    </f:facet>
</h:head>

実行すると、ちゃんと最新のIEでレンダリングされた!そしてチェックすると…

f:id:kikutaro777:20130716185029j:plain

おお、記述が先頭に!(^^)/なんちゅう細かさ

PrimeFacesの情報は以下にありました。

facetのname属性で指定できるのは「first」「middle」「last」とあるようです。
で、順番的には

  1. もしfirstが定義されたfacetがあればここ
  2. テーマのCSS
  3. もしmiddleが定義されたfacetがあればここ
  4. PrimeFacesで定義されたCSSJavaScript
  5. Headコンテンツ
  6. もしlastが定義されたfacetがあればここ

とのこと。

ちなみにこの記述方法はJSFの仕様ではなく、PrimeFaces独自のものとのことです。

にほんブログ村 IT技術ブログへ
にほんブログ村 にほんブログ村 IT技術ブログ Javaへ
にほんブログ村