読者です 読者をやめる 読者になる 読者になる

Challenge Java EE !

Java EEを中心に趣味や仕事における開発メモを書いています。

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

JSF PrimeFaces

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

追加コンポーネントとして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>

FluidGridは動的なFluidGridItemの生成にも対応してるので、写真たくさんあったりする場合には、管理対象Beanと合わせて使えばOKのようです。

というか本来は画像じゃなくてコンポーネントを配置してそれっぽく動かすんだろうけど、こういうのは業務系では使いにくいですね。
画面サイズに合わせてどう変わるかとか設計書とか書くの大変だし……。

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