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

这里仍然主要使用 HTML。注意，可以在 <h:panelGroup> 的元素体中混合 JSP 样式表达式。 与所有 JSF 组件一样，<h:panelGroup> 有一个呈现表达式。因此，只有当表达式 calculator.result != 0 为 true 时，才会显示结果部分。因此，当用户初次装载计算器页面时，不会 显示这个部分。当他们输入值时，显示结果部分（只要结果不是零）。（这个表达式的问题在于，它把逻 辑放在视图中。另外，如果希望允许用户输入 0 + 0（或 7 * 0）并显示结果，那么应该怎么办？本教程 后面会纠正这个问题。）

运行应用程序

为了运行这个应用程序，应该访问 WAR 文件映射到的页面（在我的机器上，这个页面是 http://localhost:8080/calculator0/）。这会导致 index.jsp 文件在 JSF 上下文中装载 calculator.jsp 页面。如果使用 Eclipse WTP 并设置了服务器，那么在 Navigator 中右键单击 calculator.jsp 页面并选择 Run As > Run On Server 选项。

如果在 First Number 字段或 Second Number 字段中输入无效的文本（例如，abc）并提交，那么会 返回到 /calculator.jsp 视图，并在对应的字段旁边显示一个错误消息。因此，只需指定字段是必需的 并将字段绑定到 int 属性，就会在 JSF 中看到一些自动的检验。图 4 显示这个应用程序如何处理检验 和数据转换错误：

图 4. 检验和数据转换错误

请注意这些古怪的错误消息。转换和必需值的默认错误消息并不便于用户理解：

calcForm:firstNumber: ''abc'' must be a number between -2147483648 and 2147483647 Example: 9346.

calcForm:secondNumber: Validation Error: Value is required.

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

在下一节中，将修改这些错误消息。

输入两个值（它们的和或乘积不是零）并提交之后，结果部分就会出现，见图 5：

图 5. 结果面板

改进 Calculator 示例

在本节中，将用 JSF 技术改进 Calculator 应用程序的外观并简化它。您将学习如何使用 CSS、设置 国际化（I18N）消息和以其他方式改进应用程序的外观和感觉。还要改进默认的错误消息，以便于用户理 解。

使用面板单元格

在前一节中，使用了大量 HTML 控制页面布局。可以使用 HTML 代码精确地控制页面的布局。但是， Web 应用程序的布局可能并不太重要。为了简化 Calculator 应用程序的 GUI，现在使用一个 <h:panelGrid> 在一个单元格中布置元素。

清单 12 演示如何修改输入表单代码来使用 <h:panelGrid>：

清单 12. 修改表单来使用 <h:panelGrid>

<h:form id="calcForm"> 　 <h4>Calculator</h4> 　　 <h:panelGrid columns="3"> 　　　 <%-- First Number--%> 　　　 <h:outputLabel value="First Number" for="firstNumber" /> 　　　 <h:inputText id="firstNumber" 　　　　 value="#{calculator.firstNumber}" required="true" /> 　　　 <h:message for="firstNumber" /> 　　　 <%-- Second Number--%> 　　　 <h:outputLabel value="Second Number" for="secondNumber" /> 　　　 <h:inputText id="secondNumber" 　　　　 value="#{calculator.secondNumber}" required="true" /> 　　　 <h:message for="secondNumber" /> 　 <

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