JSFpanelGrid使用.docx

JSF panelGrid 使用 panelGrid的使用方法及样式的格式法　　一、初识panelGrid和与之相关的设计元素　　panelGrid相当于HTML的表格，在设计中与之相关的组件有panelGrop，与之相配合的CSS设计元素有styleClass、headerClass、footerClass、rowClasses、columnClasses。这些元素的有机组合，可以设计出不同的输出画面。　　在HTML网页设计中，表格有tabletrtd等标记符号，也可以在标记符号内嵌入CSS控制语句来控制输出的表现形式。JSF中的panelGrid虽然与HTML表格相对应，但是二者在设计时还是有很大差异的。例如我们假设有一个HTML的表如下：tabletrtd.../tdtd.../td/trtrtd.../tdtd.../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=5styleClass=styleClazzheaderClass=headerClazzfooterClass=footerClazzrowClasses=row1,row2columnClasses=column1f:facet h:outputText value=您好，朋友！//f:faceth: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文件中：.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;}.row1{background-color:#FFFFFF;}.row2{background-color:#C9D3E0;}.column1{border-style:solid;border-color:red;border-width: 1px;}.column2{}你可以用CSS在JSP中的语法将其编写在JSP文件中。　　二、panelGrid如何来格式成