JSF 1.2入门，第1部分构建基本应用程序 - 编程入门网

作者佚名技术来源 NET编程浏览发布时间 2012-06-15

/h:panelGrid>

清单 13 给出对结果部分的修改：

清单 13. 修改结果部分

<h:panelGroup rendered="#{calculator.result != 0}"> 　 <h4>Results</h4> 　 <h:panelGrid columns="1"> 　　　 <h:outputText value="First Number　#{calculator.firstNumber}"/> 　　　 <h:outputText value="Second Number #{calculator.secondNumber}"/> 　　　 <h:outputText value="Result　#{calculator.result}"/> 　 </h:panelGrid> </h:panelGroup>

这就减少了大约 20 行代码（大约三分之一），使代码更容易阅读了。而且，现在这个应用程序的 JSF “味道” 更强了，有些人（例如大多数开发人员）喜欢这样，有些人（Web 设计人员）不喜欢。您应该根据自己项目的需要权衡考虑应该怎么做。项目的情况各不相同，所以要判断是需要绝对控制（纯 HTML 布局），还是需要容易维护的应用程序（更具 JSF 风格）。

这里有一个需要注意的问题。<h:panelGrid> 只能包含组件，而 <h:form>、 <f:view> 和 <h:panelGroup> 可以包含 HTML 和组件。在这个表单中，第一个 <h:panelGrid> 有三列，当添加一个额外组件时，它会转入下一行。第二个 <h:panelGrid> 只包含一列，所以每个组件都会添加到下一行中。<h:panelGrid> 显示一个表格，所以输出几乎与以前相同。（对于用户，确实是相同的。）再次重申：不能在 <h:panelGrid> 中添加 HTML。它不会按照您的期望显示 HTML。它只接受组件。

JSF 1.2入门，第1部分构建基本应用程序(10)

时间:2011-08-09 IBM Richard Hightower

用 CSS 修饰 GUI

如果您了解 HTML 和 CSS，就知道如何改进 Calculator 应用程序第一个版本的外观和感觉。 <h:panelGrid> 也允许使用 CSS。可以导入一个 CSS 样式表，然后将它用于 <h:panelGrid>。我们要让 <h:panelGrid> 显示一个边框以及交替的银色和白色行。

首先导入样式表，见清单 14：

清单 14. 导入样式表

<head> <title>Calculator Application</title> 　 <link rel="stylesheet" type="text/css" 　　　 href="<%=request.getContextPath()%>/css/main.css" /> </head>

清单 15 是样式表：

清单 15. CSS 样式表

oddRow { 　 background-color: white; } evenRow { 　 background-color: silver; } formGrid { 　 border: solid #000 3px; 　 width: 400px; } resultGrid { 　 border: solid #000 1px; 　 width: 200px; }

清单 15 定义了 oddRow 和 evenRow 样式，让奇数行显示为白色，偶数行显示为银色。

现在将这些样式应用于 panelGrid。清单 16 将它们添加到表单 panelGrid：

清单 16. 在表单 panelGrid 中使用样式类

<h:panelGrid columns="3" rowClasses="oddRow, evenRow" 　　　 styleClass="formGrid"> 　　　 ... </h:panelGrid>

清单 16 通过设置 rowClasses="oddRow, evenRow" 属性，将 oddRow 和 evenRow 样式应用于表单。 styleClass="formGrid" 会在表格周围显示边框。结果 <h:panelGrid> 是相似的，它显示比较小的边框，见清单 17：

清单 17. 在结果 panelGrid 中使用样式类

<h:panelGrid columns="1" rowClasses="oddRow, evenRow" 　　 styleClass="resultGrid"> 　　 ... </h:panelGrid>

图 6 显示 Calculator 应用程序现在的外观：

图 6. 使用一些样式之

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!

上一页 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 下一页

分享到：更多

你可能对下面的文章感兴趣

上一篇: 精通Hibernate之映射继承关系六 - 编程入门网下一篇: 使用NetBeans IDE远程控制Sony Ericsson设备 - 编程入门网

关于JSF 1.2入门，第1部分构建基本应用程序 - 编程入门网的所有评论

随机推荐

JSF 1.2入门，第1部分 构建基本应用程序 - 编程入门网

JSF 1.2入门，第1部分 构建基本应用程序(10)

JSF 1.2入门，第1部分构建基本应用程序 - 编程入门网

JSF 1.2入门，第1部分构建基本应用程序(10)