panelGrid 标签学习

Crying — Tue, 11 Mar 2008 14:50:00 GMT

�q�个标签可以用来作简单的�l��g排版�Q?span style="color: red">�?/span>会��用HTML表格标签来绘制表�?/span>�Q��ƈ��组件置于其中，主要指定columns属性，例如讑֮��?2�Q?br />

type="reset"/>

则自动将�l��g分作 2 �?column来排列，排列出来的样子如下：

的本体间只能包括JSF�l��g�Q?span style="color: red">如果惌��攑օ�非JSF�l��g�Q�例如简单的��L��Q�template�Q�文字，则要使用包括住，例如�Q?br />
Username

Password

�q�个�l��g用来��数个JSF�l��g包装��h��Q��其看来像是一个组�Ӟ��例如�Q?br />

�?lt;h:panelGroup>中包括了两个�Q�这使得< h:panelGrid>在处理时�Q?span style="color: red">��那两个看作是一个组件来看待�Q?/span>其完成的版面配置如下所�C�：

下面转蝲�?a style="color: red" >http://blog.csdn.net/liyong1115/archive/2008/02/27/2125029.aspx
一、初识panelGrid和与之相关的设计元素

　　panelGrid相当于HTML的表�?/span>�Q?span style="color: #0000ff">在设计中与之相关的组件有panelGrop�Q�与之相配合的CSS

设计元素有styleClass、headerClass、footerClass、rowClasses、columnClasses。这些元

素的有机�l�合�Q�可以设计出不同的输出画面�?br />
　　在HTML�|�页设计中，表格�?lt;table>�{�标记符��P��也可以在标记�W�号内嵌入CSS�?br />
制语句来控制输出的表现�Ş式�?span style="color: #0000ff">JSF中的panelGrid虽然与HTML表格相对应，但是二者在设计�?br />
�q�是有很大差异的。例如我们假设有一个HTML的表如下�Q?br />

...	...
...	...

则panelGrid与之对应的标记是�Q?br />

...
...
...
...

它只有外��x��讎ͼ�没有行控制和列控制标�?/span>�?br />
　　熟悉HTML�~�程的道��Z��眼就看出�Q�只有外��x��讎ͼ�你该怎样控制行或列的输出样式呢？�?br />
急，JSF设计者已�l�想��C��Q�他们设计出

了styleClass、headerClass、footerClass、rowClasses、columnClasses�q�些设计元素来控

制行与列的输出样式，其中
styleClass是格式表格�ȝ��外观的，如表格的长与宽、外�Ҏ��样式、表格的背景样式�{��?br /> headerClass、footerClass分别是控制表的header和footer的�?br /> rowClasses和columnClasses分别是控制表格的行与列样式的�?br />
　　�q�是举个例子说一下，我们有下例：

   styleClass="styleClazz"
   headerClass="headerClazz"
   footerClass="footerClazz"
   rowClasses="row1,row2"
   columnClasses="column1"
   >









　　�q�就是一个表��|��columns="1"�Q�规定这个表只有一列，cellpadding="5"说明了边框外�U?br />
与内�U�的距离�?个像素。这个表�׃��个头部、一个尾部和中间表��n三部分组成。headerClass

是格式头部样式的�Q�footerClass是格式尾部样式的�Q�rowClasses和columnClasses是格式行�?br />
列样式的�?rowClasses="row1,row2"规定了表格的行与行交替��用row1和row2样式�c�L��格式

输出样式�Q?/span>同样�Q�列也是�Q��ƈ且还可以�?个�?个或更多个row3、row4...来依序交替格式输

出样式�?br />
对应的样式类可以像以下这��L��写在css文�g中：

/*styleClass处于父类的地�?headerClazz,rowClasses�{�的字体讄��取em�?
其在屏幕上显�C�的大小会参照该�c�d��体的大小讄��而放大或�~�小*/

.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中定义不起作�?/span>
*/

.row1{
  background-color:#FFFFFF;
}

.row2{
  background-color:#C9D3E0;
}

.column1{
  border-style:solid;
  border-color:red;
  border-width: 1px;
}

.column2{
}

你可以用CSS在JSP中的语法��其�~�写在JSP文�g中�?br />
　　二、panelGrid如何来格式成��h��拆分合�ƈ样式的表

　　�q�要用到panelGroup�Q�它的作用是��封装在内的元�g作�ؓ一个元件来看待�Q�如果panelGroup

中封装了一个panelGrid�Q�则被封装的表放在其他表中就相当于一个子表。通过panelGroup来封

装各UI�l��g的办法，可以实现表格的拆分目的�?br />


...


或者：

它们在容器中相当于一个显�C�元�?好像本来是一个�h住一间房�Q�现在是更多的�h住一间房)�?br />
　　三、如何在panelGrid中实现设计元素对�?br />
　　panelGrid是通过CSS语言来格式输出样式的�Q�在CSS语言中可用vertial-align:...;来格

式输出元素纵向对齐，使用text-align:...;来实现输出元素横向对齐�?span style="color: #ff0000">其中text-align有点

�q�L��人，因�ؓ�?span style="color: #0000ff">字面看它应该是针�Ҏ��本的�Q?span style="color: #0000ff">其实它对其他元素也�v作用�?br />
　　在对齐的设计中有�?span style="color: #ff0000">居中寚w��的问题容易绕�?/span>。在HTML中可�?lt;center>...来实

现被��装的视囑օ�素居中，但在CSS中好像没有类��D��句。其实还是有的，只不�q�绕了一个弯

。你惛_��Q�说到居中，那究竟是在多宽的范围内居中？是我�q�个元素在封装我的容器中居中�Q?br />
�q�是被我��装的元素在我这个容器中居中�Q�这个问题CSS与HTML处理语义是不��L��?br />
在HTML中表格居中是�Q?br />
...

表格在这里的居中是指�q�个表格“�?#8221;在封装我的容�?lt;body>中居中，具体表现为在屏幕上居

中，但是您不能通过

...

来实现panelGrid�?lt;body>中居中。因为panelGrid标记�Ҏ��不支持这个语句。还是要通过CSS

来实现。下面这个��用CSS语句描述居中的语义与HTML使用align="center"语义不同�?br />



�q�个语句说的是me�q�个对象在panelGrid 中居中，而不是指表格�?lt;body>(屏幕)中居中。我

要在屏幕中居中怎么办？有两�U�办法，一�U�是通过�?lt;body>中加入格式说明，�W�二�U�办法是�?br />
panelGrid的外面再套一个panelGrid。即�Q?br />

width=979px;">





�q�样��实��C��被封装的panelGrid B �?A 中居中，注意�Q?span style="color: #ff0000">�q�里的width=979px;是必��ȝ��Q�它

规定了居中是在多宽的范围内居中！数字多少可以调整�Q�但是你不能不写�q�个�U�定�Q�否则，�?br />
��装在里面的panelGrid�q�是不会在屏�q�上居中�?br />
　　�q�有一�Ҏ��意，里面panelGrid B 的text-align�l�承外面panelGrid A 中的text-align�?br />
性的�U�定�Q�即里面的panelGrid不写style="text-align:center"�Q�对象me们也会在�?br />
面panelGrid中居中。但是里面的panelGrid不��承外面的width�Q�像上面�Q�里面panelGrid的显

�C�宽度与最长的me1有关�Q�而不是外面panelGrid A的宽�?79px�?br />
　　四、其�?br /> 　　■当屏幕的显式格式是1024 X 768 �Ӟ��最外面的panelGrid宽度�?79px是屏�q�最大化�?br />
底部滚动条由出现��C��出现的��界��|��如超�q?79则滚动条��׃��出现�?br /> 　　■可以按照是�?lt;table>�q�是�?lt;td>起作用的CSS�c�，�q�行��装。如写在style语句�?br />
�Q�则形如下：

...

Crying 2008-03-11 22:50 发表评论

Crying — Thu, 21 Feb 2008 09:30:00 GMT

http://blog.csdn.net/leeshaoqun/archive/2006/02/12/597506.aspx 很多列子
http://blog.csdn.net/liyong1115/category/365777.aspx

努力打造一个创意的开源JSF�l��g包——Tcoco
http://java.csdn.net/page/6554f876-684b-4a47-bf54-da858e3c2dd4

http://library.kingofcoder.com/books/java/7151242516599.pdf

请问谁有比较好的AJAX4JSF参考手�?br /> http://livedemo.exadel.com/richfaces-demo/richfaces/commandLink.jsf 在线�?/p>

Crying 2008-02-21 17:30 发表评论

在线观看中文字幕亚洲,国产免费a∨片在线观看不卡,欧洲亚洲一区二区三区

panelGrid 标签学习