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>
http://www.blogjava.net/Crying/articles/185506.html
分享到:
相关推荐
JSF2.0实战 - 7、自定义<h:head>源代码
primefaces中用<p:fileUpload组件来上传文件
NULL 博文链接:https://fdrgbs.iteye.com/blog/554687
JSF的学习入门知识教程,里面有例子还有各个标签的使用及属性介绍
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %> <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %> <%@ taglib uri="http://java.sun.com/jstl/core" prefix="c" %> <%@ taglib uri=...
提示:<e:menu value="#{menuBean.model}" action="#{menuBean.navigationAction}"></e:menu>中的menuBean是你自己定义的managedbean, 并且要extends EMS11185MenuBean; action="#{menuBean.navigationAction...
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+...
<artifactId>jsf-api</artifactId> <version>1.2_04</version> <scope>provided</scope> </dependency> <dependency> <groupId>javax.servlet</groupId> <artifactId>jstl</artifactId> <version>1.2...
34<br/>4.2.4 使用Spring配置DWR 35<br/>4.3 DWR与JSF 36<br/>4.3.1 JSF Creator 36<br/>4.3.2 Servlet Filter 36<br/>4.4 DWR与Struts 37<br/>4.4.1 Struts creator 37<br/>4.4.2 开始顺序 37<br/>4.5 DWR与...
https://javaserverfaces.dev.java.net/ mojarra-1.2._11_b0_FCS JDK 1.5 绝对能用 good luck
<h:outputText value="#{var.sqlid}" /> </h:column> </h:dataTable> <ems:page id="pageId" for="tableId" maxPage="5" /> 2. 相应的Managedbean: [java] view plaincopy /** * EMS 11185 限时未达...
<h:inputText value="#{bean.value}" > <f:passThroughAttribute name="placeholder" value="Enter text" /> </h:outputText> </h:form> </html> 3. 通过TagHandler f:passThroughAttributes设置多个属性 <h:...
2.5.1.1 通过插入<div>标签生成dojo按钮 5 2.5.1.2 使用xpage按钮控件 7 2.5.1.3 在按钮控件上使用事件处理程序控件 7 2.5.2 Xpage中使用 Spinner(dijit.form.NumberSpinner) 9 2.5.3 在xpage中使用ProgressBar...
<br>=================================<br> JSF开发必备JAR<br>=================================<br><br>《JSF入门简单中文版》开篇提到JSF开发需要的jar,'<br>但是按其中提供的方法:<br><br>jstl.jar 与 ...
Jboss的JSF的组件框架RichFaces 3.2版本发布了,这个版本具有如下新的组件: <br>* Combo Box <br>* Inplace Input <br>* Inplace Select <br>* Progress Bar <br>* File Upload <br>* Columns <br>* Pick List <br>...
f:actionListener标签为h:commandLink,h:commandButton等指定自定义的事件侦听类。 f:actionListener使用: JSP: <h:commandButton id="regist" value="Regist"> <f:actionListener type="mypackage....
4.设定刷新域 在jsp中用<aa:zone>在jsf中用<aa:zoneJSF> 5.指定刷新区域 在jsp或者java代码控制器中指定, if (AAUtils.isAjaxRequest(request)) { AAUtils.addZonesToRefresh(request, (String) request....
~<br/>一共380M,分6部分,这是第五部分的第12个压缩分包,共12个分包<br/>终于发完第五部分了。还有第六部分,一口气发完。<br/>第六部分只有一个文件<br/>如果有分包损坏或者发错的,请指出!<br/>
io-1.3.2.jar打包成一个lfaces.jar文件,使用时无需导入这两个jar文件,我使用的是Facelets技术,使用时很简单,导入命名空间后就可以使用标签(<l:inputFile/>)了,这个标签和<h:inputText/>标签使用方法一样,...
能够与JSF框架集成使用。 示例代码: import java.util.Date; import com.ocpsoft.pretty.time.PrettyTime; public class BasicJavaApp { public static void main(String[] args) { ...