PrimeFacesを試してみる - p:layout

PrimeFacesを研究しよう！と思い、PrimeFaces Showcaseをマネして作ってみようと思います。

開発環境については、環境構築編で書いたやつに追加していく感じです。

PrimeFaces Showcaseを作っていく

作っていくわけですが、まずはレイアウトを作ります。
showcaseを見てみると、こんな感じのレイアウトです。 f:id:clash_m45:20150510235553p:plain

showcaseのソースコードも公開されていて、どうやってサイドメニュー作ってるのかな～って見てみたんですが...

showcase-5.2/WEB-INF/template.xhtml

<h:body>

    <!-- PC CONTENT STARTS HERE-->
    <div class="PC">
        
    <div id="MENUSIDE">
        <div id="MENUSIDEindent">
            <span id="LOGO" class="bordersOfMenuSide">
                <h:graphicImage name="main/images/logo.svg" />
                <h:graphicImage id="BlueLogo" styleClass="hiddenLogo" name="main/images/logoBlue.svg" />
            </span>

showcase-5.2/resources/main/css/showcase.css

 /* menu side style*/
    #MENUSIDE{width:85px; float:left; background-color:#313b3f; border-right:solid 1px #151d21; overflow:hidden; width: 300px; position: fixed;}
        #MENUSIDEindent{width:100%; height:auto;}
            #LOGO{height:87px; display:block; padding:27px 0 5px 10px; z-index:997; background-color:#313b3f;margin-left:100px}
                #LOGO img{width:62px; height:auto; }

なーんか普通にCSSでゴリってる感じですわ。

CSSが苦手!!な私はほぼ全てJSFで作ってみようと思います。

p:layout と p:layoutunit

JSFでは画面のテンプレートを作ることが出来ます。
そのテンプレートのレイアウトにPrimeFacesのp:layoutを使っていきます。

3.62 Layout
Layout component features a highly customizable borderLayout model making it very easy to create complex layouts even if you’re not familiar with web design.

[google先生]
レイアウトコンポーネントは、することが非常に容易になり、高度なカスタマイズのBorderLayoutモデルを提供しています
あなたはWebデザインに慣れていない場合でも、複雑なレイアウトを作成します。

p:layoutの中にp:layoutunitを入れて、p:layoutunitのpositionに

north
south
west
east
center

を設定することで、こんな感じでレイアウト配置してくれるコンポーネントです。

f:id:clash_m45:20150511001224j:plain

上の例のHTML

<p:layout fullPage="true">

    <p:layoutUnit position="north" size="100" header="Top" >
        <h:outputText value="North unit content." />
    </p:layoutUnit>
 
    <p:layoutUnit position="south" size="100" header="Bottom">
        <h:outputText value="South unit content." />
    </p:layoutUnit>
 
    <p:layoutUnit position="west" size="200" header="Left">
        <h:outputText value="West unit content." />
    </p:layoutUnit>
 
    <p:layoutUnit position="east" size="200" header="Right">
        <h:outputText value="Right unit content." />
    </p:layoutUnit>
 
    <p:layoutUnit position="center">
        //page code
    </p:layoutUnit>
 
</p:layout>

JSF Templateをp:layoutで作っていく

出来ました。

f:id:clash_m45:20150510235629p:plain

p:layoutはネストすることも出来ます。

template.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui">
<h:head>
    <title><ui:insert name="title">Hello Java EE</ui:insert></title>
</h:head>

<h:body>
    <ui:debug hotkey="x"
        rendered="#{initParam['javax.faces.FACELETS_DEVELOPMENT']}" />

    <p:layout fullPage="true">

        <p:layoutUnit position="west" size="200" header="sidemenu">
            <ui:insert name="sidemenu">
                <!-- <ui:include src="header.xhtml"/> -->
                Side Menu area.
            </ui:insert>
        </p:layoutUnit>

        <p:layoutUnit position="center">
            <p:layout>
                <p:layoutUnit position="north" size="200" header="content header">
                    <ui:insert name="content-header">
                        Content Header area.
                    </ui:insert>
                </p:layoutUnit>

                <p:layoutUnit position="center" header="content">
                    <ui:insert name="content">
                        Content area.
                    </ui:insert>
                </p:layoutUnit>
            </p:layout>

        </p:layoutUnit>

    </p:layout>

</h:body>

</html>

index.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui">

<ui:composition template="/template/template.xhtml">
    <ui:define name="content">
        <h1>Hello World!!</h1>

        <h:outputLabel value="JSF world" />

        <p:spinner />
    </ui:define>
</ui:composition>
</html>

もしうまく動かなかったら、ブラウザのデバッグ機能で確認したり、あとは<h:body>とかがちゃんと使われてるかを確認して下さい。

p:layoutunitのオプションを説明

いろいろオプション属性を付けることでカッコよくなります。

resizable

レイアウトのサイズをマウスで変更出来る。

<p:layout>
    <p:layoutUnit position="north" size="200" header="content header" resizable="true" >

f:id:clash_m45:20150510235650p:plain

closable

レイアウトを閉じる。
でも閉じたら戻ってこない？

<p:layoutUnit position="west" size="200" header="sidemenu" closable="true" >

f:id:clash_m45:20150510235706p:plain

collapsible

レイアウトを畳む。畳んだあと、開くボタンも出てきます。

<p:layoutUnit position="north" size="200" header="content header" collapsible="true" >

f:id:clash_m45:20150510235717p:plain

gutter

溝のサイズを指定するらしい。
なんかあんまりうまく動作してない・・・？

<p:layoutUnit position="center" header="content" gutter="0">

f:id:clash_m45:20150510235733p:plain

collapsed , collapseSize

collapsibleの状態を設定するものみたいです。
collapsed="true"だと最初から畳んだ状態で表示。
collapseSizeは閉じた時のサイズを指定する。

<p:layoutUnit position="north" size="200" header="content header" 
    collapsible="true" collapsed="true" collapseSize="100">

つーことで、templateが出来ました。
JSF templateはすごい使いやすくて、コンテンツのページはすごい記述が少なくて済むので嬉しくなります。

PrimeFacesのp:layoutでCSSが苦手な私でもレイアウトが簡単に出来ました！

終わり。