h:panelGrid 屬性詳解

h:panelGrid 屬性詳解

一.頁面佈局:
<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>