PrimeFaces Extensions 1.1のFluidGridでレスポンシブWeb

JSFのコンポーネントライブラリであるPrimeFacesの拡張ライブラリPrimeFaces Extensions1.1がリリースされました。

!!! PrimeFaces Extensions 1.1. Released !!! http://t.co/LhpAFqKvzU
— PrimeFaces (@primefaces) 2013, 11月 12

追加コンポーネントとしてFluidGridなるものが増えていて、デモをみてみたらレスポンシブWebチックな機能でした(^^;
画面サイズに合わせてコンポーネントの配置を変えるような動きです。

JavaScriptのMasonryというライブラリを使ってJSF向けのコンポーネントにしているようです。
http://masonry.desandro.com/

とりあえず、ほんのちょこっと触ってみました。
パッとみた感じだとFlickrのフォトストリームみたいな画面が作れそうだなぁ、と思ったのでそんな感じにしてみました。

まずは実行結果から

初期表示の画面です。写真がパラパラと並んでいます。
f:id:kikutaro777:20131113220818j:plain

で、ブラウザの横幅を少し縮めて、一番右の写真が見切れる辺りにするとフワッと写真が左下へ移動します。
f:id:kikutaro777:20131113220831j:plain

さらに縮めると
f:id:kikutaro777:20131113220845j:plain

もっと縮めて
f:id:kikutaro777:20131113220852j:plain

最後は
f:id:kikutaro777:20131113220859j:plain

静止画だとわかりにくいですが、結構良い感じです(^^)

このサンプルはJSFのビュー定義だけでやってます。以下がビューです。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:pe="http://primefaces.org/ui/extensions">
    <h:head>
        <title>FluidGrid</title>
    </h:head>
    <h:body>
        <pe:fluidGrid>
            <pe:fluidGridItem>
                <h:graphicImage url="/resources/images/1.jpg" />
            </pe:fluidGridItem>
            <pe:fluidGridItem>
                <h:graphicImage url="/resources/images/2.jpg" />
            </pe:fluidGridItem>
            <pe:fluidGridItem>
                <h:graphicImage url="/resources/images/3.jpg" />
            </pe:fluidGridItem>
            <pe:fluidGridItem>
                <h:graphicImage url="/resources/images/4.jpg" />
            </pe:fluidGridItem>
            <pe:fluidGridItem>
                <h:graphicImage url="/resources/images/5.jpg" />
            </pe:fluidGridItem>
            <pe:fluidGridItem>
                <h:graphicImage url="/resources/images/6.jpg" />
            </pe:fluidGridItem>
        </pe:fluidGrid>
    </h:body>
</html>