PrimeFacesを試してみる - p:layout
PrimeFacesを試してみる - p:layout
PrimeFacesを研究しよう!と思い、PrimeFaces Showcaseをマネして作ってみようと思います。
開発環境については、環境構築編で書いたやつに追加していく感じです。
PrimeFaces Showcaseを作っていく
作っていくわけですが、まずはレイアウトを作ります。
showcaseを見てみると、こんな感じのレイアウトです。
showcaseのソースコードも公開されていて、どうやってサイドメニュー作ってるのかな~って見てみたんですが...
<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>
/* 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
を設定することで、こんな感じでレイアウト配置してくれるコンポーネントです。
- 上の例の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で作っていく
出来ました。
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" >
closable
レイアウトを閉じる。
でも閉じたら戻ってこない?
<p:layoutUnit position="west" size="200" header="sidemenu" closable="true" >
collapsible
レイアウトを畳む。 畳んだあと、開くボタンも出てきます。
<p:layoutUnit position="north" size="200" header="content header" collapsible="true" >
gutter
溝のサイズを指定するらしい。
なんかあんまりうまく動作してない・・・?
<p:layoutUnit position="center" header="content" gutter="0">
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が苦手な私でもレイアウトが簡単に出来ました!
終わり。