h:panelGrid、h:panelGroup标签学习

这个标签可以用来作简单的组件排版，它会使用HTML表格标签来绘制表格，并将组件置于其中，主要指定columns属性，例如设定为 2： <panelgrid columns="2"><outputtext value="Username"></outputtext><inputtext id="name" value="#{userBean.name}"></inputtext><outputtext value="Password"></outputtext><inputtext id="password" value="#{userBean.password}"></inputtext><commandbutton value="submit" action="login"></commandbutton><commandbutton value="reset" type="reset"></commandbutton></panelgrid> 则自动将组件分作 2 个 column来排列，排列出来的样子如下： <panelgrid>的本体间只能包括JSF组件，如果想要放入非JSF组件，例如简单的样版（template）文字，则要使用 <verbatim>包括住，例如： <panelgrid columns="2"><verbatim>Username</verbatim><inputtext id="name" value="#{userBean.name}"></inputtext><verbatim>Password</verbatim><inputtext id="password" value="#{userBean.password}"></inputtext><commandbutton value="submit" action="login"></commandbutton><commandbutton value="reset" type="reset"></commandbutton></panelgrid><panelgroup> 这个组件用来将数个JSF组件包装起来，使其看来像是一个组件，例如： <panelgrid columns="2"><outputtext value="Username"></outputtext><inputtext id="name" value="#{userBean.name}"></inputtext><outputtext value="Password"></outputtext><inputtext id="password" value="#{userBean.password}"></inputtext><panelgroup><commandbutton value="submit" action="login"></commandbutton><commandbutton value="reset" type="reset"></commandbutton></panelgroup></panelgrid> 在<panelgroup>中包括了两个<commandbutton>，这使得在处理时，将那两个<commandbutton>看作是一个组件来看待，其完成的版面配置如下所示： 下面转载与http://blog.youkuaiyun.com/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与之对应的标记是： <panelgrid column="2"> ... ... ... ... </panelgrid> 它只有外壳标记，没有行控制和列控制标记。 　　熟悉HTML编程的道人一眼就看出，只有外壳标记，你该怎样控制行或列的输出样式呢？别 急，JSF设计者已经想到了，他们设计出 了styleClass、headerClass、footerClass、rowClasses、columnClasses这些设计元素来控 制行与列的输出样式，其中 styleClass是格式表格总的外观的，如表格的长与宽、外边框样式、表格的背景样式等。 headerClass、footerClass分别是控制表的header和footer的。 rowClasses和columnClasses分别是控制表格的行与列样式的。 　　还是举个例子说一下，我们有下例： <panelgrid columns="1" cellpadding="5" styleclass="styleClazz" headerclass="headerClazz" footerclass="footerClazz" rowclasses="row1,row2" columnclasses="column1"><facet><outputtext value="您好，朋友！"></outputtext></facet><outputtext value="您好，朋友！"></outputtext><outputtext value="您好，朋友！"></outputtext><outputtext value="您好，朋友！"></outputtext><outputtext value="您好，朋友！"></outputtext><outputtext value="您好，朋友！"></outputtext><outputtext value="您好，朋友！"></outputtext><facet><outputtext value="您好，朋友！"></outputtext></facet></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组件的办法，可以实现表格的拆分目的。 <panelgroup><panelgrid> ... </panelgrid></panelgroup> 或者： <panelgroup><outputtext value="您好，朋友！"></outputtext><outputtext value="您好，朋友！"></outputtext></panelgroup> 它们在容器中相当于一个显示元件(好像本来是一个人住一间房，现在是更多的人住一间房)。 　　三、如何在panelGrid中实现设计元素对齐 　　panelGrid是通过CSS语言来格式输出样式的，在CSS语言中可用vertial-align:...;来格 式输出元素纵向对齐，使用text-align:...;来实现输出元素横向对齐。其中text-align有点 迷糊人，因为从字面看它应该是针对文本的，其实它对其他元素也起作用。 　　在对齐的设计中有个居中对齐的问题容易绕人。在HTML中可用<center>...</center>来实 现被封装的视图元素居中，但在CSS中好像没有类似语句。其实还是有的，只不过绕了一个弯 。你想啊，说到居中，那究竟是在多宽的范围内居中？是我这个元素在封装我的容器中居中， 还是被我封装的元素在我这个容器中居中？这个问题CSS与HTML处理语义是不样的。 在HTML中表格居中是： <table align="center"> ... </table> 表格在这里的居中是指这个表格“我”在封装我的容器中居中，具体表现为在屏幕上居 中，但是您不能通过 <panelgrid align="center"> ... </panelgrid> 来实现panelGrid在中居中。因为panelGrid标记根本不支持这个语句。还是要通过CSS 来实现。下面这个使用CSS语句描述居中的语义与HTML使用align="center"语义不同。 <panelgrid style="text-align:center"><outputtext value="您好，朋友！"></outputtext></panelgrid> 这个语句说的是me这个对象在panelGrid 中居中，而不是指表格在(屏幕)中居中。我 要在屏幕中居中怎么办？有两种办法，一种是通过在中加入格式说明，第二种办法是在 panelGrid的外面再套一个panelGrid。即： <panelgrid style="text-align:center;width=979px;"><panelgroup><panelgrid style="text-align:center"><outputtext value="您好，朋友！您好，朋友！"></outputtext><outputtext value="您好，朋友！"></outputtext><outputtext value="您好，朋友！"></outputtext></panelgrid></panelgroup></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语句中 ，则形如下： <panelgrid style="width:240px;vertial-align:top;text-align:center;"> ... </panelgrid> </td> </tr></table> </td></tr></table></commandbutton></commandbutton></panelgroup></panelgroup></verbatim></panelgrid>