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