一旦将该页面布局到普通 HTML 中，您就想要告诉 JSF 系统，您将使用 JSF 来管理组件 。这可以通过使用 <f:view> 标签来做到，该标签通知容器，您将使用 JSF 来管理其 中的组件。（这个标签应该读作“f 冒号 view”，特别强调这个冒号很重要，以免您出错！ ）

没有 <f:view>，JSF 就无法构建组件树，并且以后也无法查看已经创建好的组件 树。像下面这样使用 <f:view> 标签：

<f:view> 　 <h:form id="calcForm"> 　　 ... 　 </h:form> </f:view>

怀疑论者的JSF: 消除关于JSF的FUD(8)

上面的第一行是 <f:view> 的声明，告诉容器它是由 JSF 托管的。下一行是 <h:form> 标签，告诉 JSF 您在这里想要一个 HTML 表单。在呈现阶段，包含在表单 组件中的组件将被查看到，并被要求呈现它们自己，因此它们将向输出产生标准的 HTML。

接下来，您告诉 JSF 您想在该表单中包含其他哪些组件。在 <h:form> 中，您声 明一个 panelGrid。panelGrid 是一个复合组件 —— 也就是说，一个包含其他组件的组件 。panelGrid 指定其他组件的布局。panelGrid 的声明如清单 3 中所示。

清单 3. 声明 panelGrid

<h:panelGrid columns="3"> 　　 <h:outputLabel value="First Number" for="firstNumber" /> 　　 <h:inputText id="firstNumber" value="#{CalcBean.firstNumber}" required="true" /> 　　　　 <h:message for="firstNumber" /> 　　 <h:outputLabel value="Second Number" for="secondNumber" /> 　　 <h:inputText id="secondNumber" value="#{CalcBean.secondNumber}" required="true" /> 　　　　 <h:message for="secondNumber" /> </h:panelGrid>

属性 column 被设置为 3，表明组件将被布局到一个具有 3 列的网格中。您添加 6 个组 件到 panelGrid 中，也就是说 2 行。每行包含一个 outputLabel、一个 inputText 和一个 message。标签和消息被关联到 inputText 组件，因此，当一个验证错误或错误消息被关联 到 textField 时，该消息就会展示在 message 组件中。这两个文本字段都是必需的，这意 味着，如果在提交时没有它们的值，就会创建一条错误消息，而控制就会返回到该视图，即 /calculator.jsp。

注意，两个 inputFields 都对值属性使用 JSF EL (JavaServer Faces Expression Language) 值绑定（例如，value="#{CalcBean.firstNumber}"）。乍一看，这很像 JSTL EL 。但是 JSF EL 代码实际上将字段与 backing beans 属性的相应值相关联。该关联是反射性 的，也就是说，如果 firstNumber 是 100，那么显示该表单时就会展示出 100。同样，如果 用户提交了一个有效值，比如 200，那么 200 就成了 firstNumber 属性的新值。

一个更加常见（但也是更棘手）的方法是，用于 backing bean 通过属性暴露模型对象， 并将这些模型对象属性绑定到字段。在本系列以后的文章中将会看到该方法的一个例子。

除了字段之外，通过在 panelGroup 中使用两个 commandButton，calcForm 也与两个操 作相关联，如下所示。

<h:panelGroup> 　　 <h:commandButton id="submitAdd" action="#{CalcBean.add}"　value

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