集成Spring和JavaServer Faces：改进的模板

随着2.0版的发布，Facelet模板成为JSF规范的核心部分。 使用<ui：composition>和<ui：decorate>标记，可以轻松构建复杂的页面，同时仍保持标记清晰。 模板在创建HTML表单时特别有用，但是不幸的是，模板的确会在您的xhtml文件中引起重复，从而破坏了良好软件设计的DRY（不要自己重复）原理 。 作为在JSF和Spring之间提供更深层集成的项目的一部分，我开发了两个新组件，旨在简化模板。 在探究新组件之前，让我们看一下如何使用标准JSF模板构建典型表单。

表单模板的初始起点通常是为每个输入添加一些模板。 通常，您需要额外的<div>或<span>标记以供CSS使用。 这是一个典型的例子：

<!-- /WEB-INF/pages/entername.xhtml -->
<ui:decoreate template="/WEB-INF/layout/form.xhtml">
  <h:inputText id="firstName" label="First Name" value="#{bean.firstName}"/>
  <ui:param name="label" value="First Name"/>
  <ui:param name="for" value="firstName"/>
</ui:decorate>
<ui:decoreate template="/WEB-INF/layout/form.xhtml">
  <h:inputText id="lastName" label="Last Name" value="#{bean.lastName}"/>
  <ui:param name="label" value="Last Name"/>
  <ui:param name="for" value="lastName"/>
</ui:decorate>
<!-- Many additional form elements -->

<!-- /WEB-INF/layout/form.xhtml -->
<ui:composition>
  <div class="formElement">
    <span class="formLabel">
      <h:outputLabel for="#{for}" label="#{label}">
    </span>
    <ui:insert/>
  </div>
</ui:composition>

在这里，我们可以看到表单上的每个项目都包含在<div>中，并且表单标签被包裹在其他<span>中 。 标记中已经存在一些重复，“ for”参数反映了组件ID。 我还给每个<h：inputText>元素一个标签属性
为了获得更好的验证错误消息，请在“标签” <ui：param>中重复此操作。 如果我们想用星号标记必填字段，情况会变得越来越糟：

<!-- /WEB-INF/pages/entername.xhtml -->
<ui:decoreate template="/WEB-INF/layout/form.xhtml">
  <h:inputText id="firstName" label="First Name" value="#{bean.firstName}" required="false"/>
  <ui:param name="label" value="First Name"/>
  <ui:param name="for" value="firstName"/>
  <ui:param name="showAsterisk" value="false"/>
</ui:decorate>
<ui:decoreate template="/WEB-INF/layout/form.xhtml">
  <h:inputText id="lastName" label="Last Name" value="#{bean.lastName}" required="true"/>
  <ui:param name="label" value="Last Name"/>
  <ui:param name="for" value="lastName"/>
  <ui:param name="showAsterisk" value="true"/>
</ui:decorate>
<!-- Many additional form elements -->

<!-- /WEB-INF/layout/form.xhtml -->
<ui:composition>
  <div class="formElement">
    <span class="formLabel">
      <h:outputLabel for="#{for}" label="#{label}#{showAsterisk ? ' *' : ''}">
    </span>
    <ui:insert/>
  </div>
</ui:composition>

非常令人沮丧的是，我们需要传递<ui：param>项，这些项与<h：inputText>上已经指定的属性重复。 很容易看出，即使是相对较小的表单，我们也将最终在标记中重复很多。 我们需要的是一种获取有关模板中插入的组件的信息的方法，即使我们不知道组件将是哪种类型。 我们需要的是<s：componentInfo> 。

<s：componentInfo>组件公开一个变量，其中包含有关所插入组件的信息。 此信息包括标签 ，组件clientID以及是否需要该组件。 通过检查插入的项目，我们可以删除很多重复项：

<!-- /WEB-INF/pages/entername.xhtml -->
<ui:decoreate template="/WEB-INF/layout/form.xhtml">
  <h:inputText id="firstName" label="First Name" value="#{bean.firstName}" required="false"/>
</ui:decorate>
<ui:decoreate template="/WEB-INF/layout/form.xhtml">
  <h:inputText id="lastName" label="Last Name" value="#{bean.lastName}" required="true"/>
</ui:decorate>
<!-- Many additional form elements -->

<!-- /WEB-INF/layout/form.xhtml -->
<ui:composition>
  <s:componentInfo var="info">
    <div class="formElement">
      <span class="#{info.valid ? 'formLabel' : 'formErrorLabel'}">
        <h:outputLabel for="#{info.for}" label="#{info.label}#{info.required ? ' *' : ''}">
      </span>
      <ui:insert/>
    </div>
  </s:componentInfo>
</ui:composition>

我们现在可以做的其他事情就是判断插入的组件是否通过了验证。 请注意，上面的示例将为无效的组件选择“ formErrorLabel ” CSS类。

拥有新的<s：componentInfo>组件的一项有趣功能是，所有<ui：decorate>标记都变得相同。 我们已删除了标签内的所有重复，但是标签本身仍然重复了很多次。 在这里，我们还有另外一个技巧，可以通过引入新的<s：decorateAll>标签来提供帮助。 使用<s：decorateAll>允许对每个子组件一次应用模板。 这是更新的表单标记：

<!-- /WEB-INF/pages/entername.xhtml -->
<s:decoreateAll template="/WEB-INF/layout/form.xhtml">
  <h:inputText id="firstName" label="First Name" value="#{bean.firstName}" required="false"/>
  <h:inputText id="lastName" label="Last Name" value="#{bean.lastName}" required="true"/>
  <!-- Many additional form elements -->
</s:decorateAll>

<!-- /WEB-INF/layout/form.xhtml -->
<ui:composition>
  <s:componentInfo var="info">
    <div class="formElement">
      <span class="#{info.valid ? 'formLabel' : 'formErrorLabel'}">
        <h:outputLabel for="#{info.for}" label="#{info.label}#{info.required ? ' *' : ''}">
      </span>
      <ui:insert/>
    </div>
  </s:componentInfo>
</ui:composition>

如果要查看这些组件的源代码，请查看springfaces GitHub项目上的org.springframework.springfaces.template.ui软件包。

参考： 将Spring和JavaServer Faces集成：改进的模板来自Phil Webb博客中的JCG合作伙伴 Phillip Webb。

翻译自: https://www.javacodegeeks.com/2012/04/integrating-spring-javaserver-faces.html