javaserver
表单模板的初始起点通常是为每个输入添加一些模板。 通常,您需要额外的<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
javaserver