一.頁(yè)面布局:
<h:panelGrid >樣式表基本概念:
單元格樣式: columnClasses="columnClasses1, columnClass2,..." <==>
<td class="columnClasses1">....<td class="columnClasses2">
行樣式: rowClasses="rowClasses1, rowClasses2" <==> <tr class="rowClasses1">....<tr class="rowClasses2">
樣式: styleClass="" == <table class="">
注: 無(wú)法實(shí)現(xiàn)多個(gè)表頭單元.
panelGrid 標(biāo)簽學(xué)習(xí)
這個(gè)標(biāo)簽可以用來(lái)作簡(jiǎn)單的組件排版，它會(huì)使用HTML表格標(biāo)簽來(lái)繪制表格，并將組件置于其中，主要指定columns屬性，例如設(shè)定為 2：
<h:panelGrid columns="2">
<h:outputText value="Username"/>
<h:inputText id="name" value="#{userBean.name}"/>
<h:outputText value="Password"/>
<h:inputText id="password" value="#{userBean.password}"/>
<h:commandButton value="submit" action="login"/>
<h:commandButton value="reset" type="reset"/>
</h:panelGrid>
則自動(dòng)將組件分作 2 個(gè) column來(lái)排列，排列出來(lái)的樣子如下：
<h:panelGrid>的本體間只能包括JSF組件，如果想要放入非JSF組件，例如簡(jiǎn)單的樣版（template）文字，則要使用 <f:verbatim>包括住，例如：
<h:panelGrid columns="2">
<f:verbatim>Username</f:verbatim>
<h:inputText id="name" value="#{userBean.name}"/>
<f:verbatim>Password</f:verbatim>
<h:inputText id="password" value="#{userBean.password}"/>
<h:commandButton value="submit" action="login"/>
<h:commandButton value="reset" type="reset"/>
</h:panelGrid>
<h:panelGroup>
這個(gè)組件用來(lái)將數(shù)個(gè)JSF組件包裝起來(lái)，使其看來(lái)像是一個(gè)組件，例如：
<h:panelGrid columns="2">
<h:outputText value="Username"/>
<h:inputText id="name" value="#{userBean.name}"/>
<h:outputText value="Password"/>
<h:inputText id="password" value="#{userBean.password}"/>
<h:panelGroup>
<h:commandButton value="submit" action="login"/>
<h:commandButton value="reset" type="reset"/>
</h:panelGroup>
</h:panelGrid>
在<h:panelGroup>中包括了兩個(gè)<h:commandButton>，這使得< h:panelGrid>在處理時(shí)，將那兩個(gè)<h:commandButton>看作是一個(gè)組件來(lái)看待，其完成的版面配置如下所示：
下面轉(zhuǎn)載與http://blog.csdn.net/liyong1115/archive/2008/02/27/2125029.aspx
一、初識(shí)panelGrid和與之相關(guān)的設(shè)計(jì)元素
panelGrid相當(dāng)于HTML的表格，在設(shè)計(jì)中與之相關(guān)的組件有panelGrop，與之相配合的CSS
設(shè)計(jì)元素有styleClass、headerClass、footerClass、rowClasses、columnClasses。這些元
素的有機(jī)組合，可以設(shè)計(jì)出不同的輸出畫面。
在HTML網(wǎng)頁(yè)設(shè)計(jì)中，表格有<table><tr><td>等標(biāo)記符號(hào)，也可以在標(biāo)記符號(hào)內(nèi)嵌入CSS控
制語(yǔ)句來(lái)控制輸出的表現(xiàn)形式。JSF中的panelGrid雖然與HTML表格相對(duì)應(yīng)，但是二者在設(shè)計(jì)時(shí)
還是有很大差異的。例如我們假設(shè)有一個(gè)HTML的表如下：
<table>
<tr>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
</tr>
</table>
則panelGrid與之對(duì)應(yīng)的標(biāo)記是：
<h:panelGrid column="2">
...
...
...
...
</h:panelGrid>
它只有外殼標(biāo)記，沒(méi)有行控制和列控制標(biāo)記。
熟悉HTML編程的道人一眼就看出，只有外殼標(biāo)記，你該怎樣控制行或列的輸出樣式呢？別
急，JSF設(shè)計(jì)者已經(jīng)想到了，他們?cè)O(shè)計(jì)出
了styleClass、headerClass、footerClass、rowClasses、columnClasses這些設(shè)計(jì)元素來(lái)控
制行與列的輸出樣式，其中
styleClass是格式表格總的外觀的，如表格的長(zhǎng)與寬、外邊框樣式、表格的背景樣式等。
headerClass、footerClass分別是控制表的header和footer的。
rowClasses和columnClasses分別是控制表格的行與列樣式的。
還是舉個(gè)例子說(shuō)一下，我們有下例：
<h:panelGrid columns="1" cellpadding="5"
styleClass="styleClazz"
headerClass="headerClazz"
footerClass="footerClazz"
rowClasses="row1,row2"
columnClasses="column1"
>
<f:facet >
<h:outputText value="您好，朋友！"/>
</f:facet>
<h:outputText value="您好，朋友！"/>
<h:outputText value="您好，朋友！"/>
<h:outputText value="您好，朋友！"/>
<h:outputText value="您好，朋友！"/>
<h:outputText value="您好，朋友！"/>
<h:outputText value="您好，朋友！"/>
<f:facet >
<h:outputText value="您好，朋友！"/>
</f:facet>
</h:panelGrid>
這就是一個(gè)表格，columns="1"，規(guī)定這個(gè)表只有一列，cellpadding="5"說(shuō)明了邊框外線
與內(nèi)線的距離是5個(gè)像素。這個(gè)表由一個(gè)頭部、一個(gè)尾部和中間表身三部分組成。headerClass
是格式頭部樣式的，footerClass是格式尾部樣式的，rowClasses和columnClasses是格式行與
列樣式的。 rowClasses="row1,row2"規(guī)定了表格的行與行交替使用row1和row2樣式類來(lái)格式
輸出樣式，同樣，列也是，并且還可以用3個(gè)、4個(gè)或更多個(gè)row3、row4...來(lái)依序交替格式輸
出樣式。
對(duì)應(yīng)的樣式類可以像以下這樣編寫在css文件中：
/*styleClass處于父類的地位,headerClazz,rowClasses等的字體設(shè)置取em時(shí),
其在屏幕上顯示的大小會(huì)參照該類字體的大小設(shè)置而放大或縮小*/
.styleClazz{
font-size:1em;
color:blue;
border-style:solid;
border-color:red;
border-width: 1px;
}
.headerClazz{
background-color:#3F536B;
font-family:宋體;
font-size:1.5em;
color:white;
text-align:center;
}
.footerClazz{
background-color:#3F536B;
font-family:宋體;
font-size:1.5em;
color:white;
text-align:center;
}
/* 當(dāng)行樣式與列樣式都用時(shí),則行樣式服從于列樣式
邊框的顏色需要在columnClasses中定義,
在rowClasses中定義不起作用
*/
.row1{
background-color:#FFFFFF;
}
.row2{
background-color:#C9D3E0;
}
.column1{
border-style:solid;
border-color:red;
border-width: 1px;
}
.column2{
}
你可以用CSS在JSP中的語(yǔ)法將其編寫在JSP文件中。
二、panelGrid如何來(lái)格式成具有拆分合并樣式的表
這要用到panelGroup，它的作用是將封裝在內(nèi)的元件作為一個(gè)元件來(lái)看待，如果panelGroup
中封裝了一個(gè)panelGrid，則被封裝的表放在其他表中就相當(dāng)于一個(gè)子表。通過(guò)panelGroup來(lái)封
裝各UI組件的辦法，可以實(shí)現(xiàn)表格的拆分目的。
<h:panelGroup>
<h:panelGrid>
...
</h:panelGrid>
</h:panelGroup>
或者：
<h:panelGroup>
<h:outputText value="您好，朋友！"/>
<h:outputText value="您好，朋友！"/>
</h:panelGroup>
它們?cè)谌萜髦邢喈?dāng)于一個(gè)顯示元件(好像本來(lái)是一個(gè)人住一間房，現(xiàn)在是更多的人住一間房)。
三、如何在panelGrid中實(shí)現(xiàn)設(shè)計(jì)元素對(duì)齊
panelGrid是通過(guò)CSS語(yǔ)言來(lái)格式輸出樣式的，在CSS語(yǔ)言中可用vertial-align:...;來(lái)格
式輸出元素縱向?qū)R，使用text-align:...;來(lái)實(shí)現(xiàn)輸出元素橫向?qū)R。其中text-align有點(diǎn)
迷糊人，因?yàn)閺淖置婵此鼞?yīng)該是針對(duì)文本的，其實(shí)它對(duì)其他元素也起作用。
在對(duì)齊的設(shè)計(jì)中有個(gè)居中對(duì)齊的問(wèn)題容易繞人。在HTML中可用<center>...</center>來(lái)實(shí)
現(xiàn)被封裝的視圖元素居中，但在CSS中好像沒(méi)有類似語(yǔ)句。其實(shí)還是有的，只不過(guò)繞了一個(gè)彎
。你想啊，說(shuō)到居中，那究竟是在多寬的范圍內(nèi)居中？是我這個(gè)元素在封裝我的容器中居中，
還是被我封裝的元素在我這個(gè)容器中居中？這個(gè)問(wèn)題CSS與HTML處理語(yǔ)義是不樣的。
在HTML中表格居中是：
<table align="center">
...
</table>
表格在這里的居中是指這個(gè)表格“我”在封裝我的容器<body>中居中，具體表現(xiàn)為在屏幕上居
中，但是您不能通過(guò)
<h:panelGrid align="center">
...
</h:panelGrid>
來(lái)實(shí)現(xiàn)panelGrid在<body>中居中。因?yàn)閜anelGrid標(biāo)記根本不支持這個(gè)語(yǔ)句。還是要通過(guò)CSS
來(lái)實(shí)現(xiàn)。下面這個(gè)使用CSS語(yǔ)句描述居中的語(yǔ)義與HTML使用align="center"語(yǔ)義不同。
<h:panelGrid style="text-align:center">
<h:outputText value="您好，朋友！"/>
</h:panelGrid>
這個(gè)語(yǔ)句說(shuō)的是me這個(gè)對(duì)象在panelGrid 中居中，而不是指表格在<body>(屏幕)中居中。我
要在屏幕中居中怎么辦？有兩種辦法，一種是通過(guò)在<body>中加入格式說(shuō)明，第二種辦法是在
panelGrid的外面再套一個(gè)panelGrid。即：
<h:panelGrid style="text-align:center;width=979px;">
<h:panelGroup>
<h:panelGrid style="text-align:center">
<h:outputText value="您好，朋友！您好，朋友！"/>
<h:outputText value="您好，朋友！"/>
<h:outputText value="您好，朋友！"/>
</h:panelGrid>
</h:panelGroup>
</h:panelGrid>
這樣就實(shí)現(xiàn)了被封裝的panelGrid B 在 A 中居中，注意，這里的width=979px;是必須的，它
規(guī)定了居中是在多寬的范圍內(nèi)居中！數(shù)字多少可以調(diào)整，但是你不能不寫這個(gè)約定，否則，被
封裝在里面的panelGrid還是不會(huì)在屏幕上居中。
還有一點(diǎn)注意，里面panelGrid B 的text-align繼承外面panelGrid A 中的text-align屬
性的約定，即里面的panelGrid不寫style="text-align:center"，對(duì)象me們也會(huì)在里
面panelGrid中居中。但是里面的panelGrid不繼承外面的width，像上面，里面panelGrid的顯
示寬度與最長(zhǎng)的me1有關(guān)，而不是外面panelGrid A的寬度979px。
四、其他
■當(dāng)屏幕的顯式格式是1024 X 768 時(shí)，最外面的panelGrid寬度取979px是屏幕最大化時(shí)
底部滾動(dòng)條由出現(xiàn)到不出現(xiàn)的臨界值，如超過(guò)979則滾動(dòng)條就會(huì)出現(xiàn)。
■可以按照是對(duì)<table><tr>還是對(duì)<td>起作用的CSS類，進(jìn)行封裝。如寫在style語(yǔ)句中
，則形如下：
<h:panelGrid style="width:240px;vertial-align:top;text-align:center;">
...
</h:panelGrid>
<h:panelGrid id="Grid" border="1" columns="2"
rowClasses="rowClasses" cellspacing="cellspacing"
cellpadding="cellpadding" columnClasses="columnClasses">
<h:outputText value="item1"></h:outputText>
<h:panelGroup layout="block" >
<h:outputText value="item4-panelGroup"></h:outputText>
</h:panelGroup>
</h:panelGrid>
<h:outputLink styleClass="newlink" >
<h:outputText escape="false" value=" <STRONG> 默認(rèn)論壇版面 </STRONG> " />
</h:outputLink>
<a href="" class="newlink"> <STRONG> 默認(rèn)論壇版面 </STRONG> </a>
<table id="j_id_jsp_1725709284_1:Grid" border="1" cellpadding="cellpadding" cellspacing="cellspacing">
<tbody>
<tr class="rowClasses">
<td class="columnClasses">item1</td>
</tr>
<tr class="rowClasses">
<td class="columnClasses">item4-panelGroup</td>
</tr>
</tbody>
</table>