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

清单 9. 在 calculator.jsp 的 <h:form> 标记中：输入字段

<table> 　 <tr> 　　 <td><h:outputLabel value="First Number" for="firstNumber" /></td> 　　 <td><h:inputText id="firstNumber" 　　　 value="#{calculator.firstNumber}" required="true" /></td> 　　 <td><h:message for="firstNumber" /></td> 　 </tr> 　 <tr> 　　 <td><h:outputLabel value="Second Number" for="secondNumber" /> 　　 </td> 　　 <td><h:inputText id="secondNumber" 　　　 value="#{calculator.secondNumber}" required="true" /></td> 　　 <td><h:message for="secondNumber" /></td> 　 </tr> </table>

请再次注意，这里使用了大量 HTML。可以用 span、div、table 或其他元素布置应用程序的布局。 JSF 对设计人员没什么限制。一些工具甚至允许在 Dreamweaver 中使用 JSF（参见 参考资料）。在结合 使用 JSF 和 Facelets 时，JSF 甚至对设计人员更友好（可以在 JSF 1.1 和更高版本中使用 Facelets ，而且它将成为 JSF 2.0 的组成部分）。

在清单 9 中还要注意，两个 inputText 的 value 属性都使用 JSF EL（JavaServer Faces Expression Language）值表达式（例如，value="#{calculator.firstNumber}"）。初看上去这很像 JSTL EL。但是，统一 EL 代码实际上将字段与对应的后端 bean 的属性值关联起来。这种关联是双向的 ；也就是说，如果 firstNumber 的值是 100，那么在显示表单时会显示 100。同样，如果用户提交了一 个有效的值，比如 200，那么 200 会成为 firstNumber 属性的新值（假设通过了转换和检验过程，稍后 讨论这个问题）。

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

除了字段之外，calcForm 还通过三个 commandButton 与三个动作相关联，见清单 10：

清单 10. 在 calculator.jsp 的 <h:form> 标记中：按钮

<div> 　 <h:commandButton action="#{calculator.add}"　value="Add" /> 　 <h:commandButton action="#{calculator.multiply}"　value="Multiply" /> 　 <h:commandButton action="#{calculator.clear}"　value="Clear" immediate="true"/> </div>

清单 10 中的代码将三个按钮绑定到 calculator 类的 add()、multiply() 和 clear() 方法，所以 当单击按钮时会调用对应的方法（假设成功执行了转换和检验）。

在默认情况下，在执行任何动作方法（比如 add() 或 multiply()）之前，JSF 会检验表单。但是， 如果使用 immediate="true"（就像清单 10 中的 Clear 按钮那样），那么 JSF 会跳过检验阶段并直接 执行方法（稍后会进一步讨论）。

查看结果：<h:panelGroup> 标记

最后，在 <f:view> 标记中，用 <h:panelGroup> 显示加法和乘法操作的结果，见清单 11：

清单 11. 显示结果

<h:panelGroup rendered="#{calculator.result != 0}"> 　 <h4>Results</h4> 　 <table> 　　 <tr><td> 　　　 First Number　${calculator.firstNumber} 　　 </td></tr> 　　 <tr><td> 　　　 Second Number　${calculator.secondNumber} 　　 </td&

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