如何制作JSF复合组件的网格?

Ana*_*oli 23 grid jsf alignment composite-component jsf-2

我在panelGrids中有很多outputLabel和inputText对

<h:panelGrid columns="2">
  <h:outputLabel value="label1" for="inputId1"/>
  <h:inputText id="inputId1/>

  <h:outputLabel value="label2" for="inputId2"/>
  <h:inputText id="inputId2/>

  ...
</h:panelGrid>
Run Code Online (Sandbox Code Playgroud)

我希望所有这些都有一些行为:比如每个inputText的相同验证或相同大小.所以我创建了一个复合组件,它只包含一个outputLabel和一个inputText

<my:editField value="field1"/>
<my:editField value="field2"/>
Run Code Online (Sandbox Code Playgroud)

但是现在当我将它们放在gridPanel中时,根据标签文本的长度,它们不会对齐.我理解为什么,但我不知道如何解决.

Bal*_*usC 44

复合组件确实呈现为单个组件.您想要使用Facelet标记文件.它的呈现方式与输出呈现的内容完全相同.这是一个启动示例,假设您需要一个包含第三列中的消息字段的3列表单.

创建标记文件/WEB-INF/tags/input.xhtml(或者/META-INF当您想要在要包含的JAR文件中提供标记时/WEB-INF/lib).

<ui:composition
    xmlns:c="http://java.sun.com/jsp/jstl/core"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets">

    <c:set var="id" value="#{not empty id ? id : (not empty property ? property : action)}" />
    <c:set var="required" value="#{not empty required and required}" />

    <c:choose>
        <c:when test="#{type != 'submit'}">
            <h:outputLabel for="#{id}" value="#{label}&#160;#{required ? '*&#160;' : ''}" />
        </c:when>
        <c:otherwise>
            <h:panelGroup />
        </c:otherwise>
    </c:choose>

    <c:choose>
        <c:when test="#{type == 'text'}">
            <h:inputText id="#{id}" value="#{bean[property]}" label="#{label}" required="#{required}">
                <f:ajax event="blur" render="#{id}-message" />
            </h:inputText>
            <h:message id="#{id}-message" for="#{id}" />
        </c:when>
        <c:when test="#{type == 'password'}">
            <h:inputSecret id="#{id}" value="#{bean[property]}" label="#{label}" required="#{required}">
                <f:ajax event="blur" render="#{id}-message" />
            </h:inputSecret>
            <h:message id="#{id}-message" for="#{id}" />
        </c:when>
        <c:when test="#{type == 'select'}">
            <h:selectOneMenu id="#{id}" value="#{bean[property]}" label="#{label}" required="#{required}">
                <f:selectItems value="#{options.entrySet()}" var="entry" itemValue="#{entry.key}" itemLabel="#{entry.value}" />
                <f:ajax event="change" render="#{id}-message" />
            </h:selectOneMenu>
            <h:message id="#{id}-message" for="#{id}" />
        </c:when>
        <c:when test="#{type == 'submit'}">
            <h:commandButton id="#{id}" value="#{label}" action="#{bean[action]}" />
            <h:message id="#{id}-message" for="#{id}" />
        </c:when>
        <c:otherwise>
            <h:panelGroup />
            <h:panelGroup />
        </c:otherwise>            
    </c:choose>
</ui:composition>
Run Code Online (Sandbox Code Playgroud)

/WEB-INF/example.taglib.xml(或者/META-INF当您想要在要包含的JAR文件中提供标记时)定义它/WEB-INF/lib:

<?xml version="1.0" encoding="UTF-8"?>
<facelet-taglib 
    xmlns="http://java.sun.com/xml/ns/javaee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facelettaglibrary_2_0.xsd"
    version="2.0">
    <namespace>http://example.com/jsf/facelets</namespace>
    <tag>
        <tag-name>input</tag-name>
        <source>tags/input.xhtml</source>
    </tag>
</facelet-taglib>
Run Code Online (Sandbox Code Playgroud)

声明taglib用法/WEB-INF/web.xml(当标记由JAR文件提供时不需要这个/WEB-INF/lib!JSF *.taglib.xml文件将自动加载所有文件/META-INF).

<context-param>
    <param-name>javax.faces.FACELETS_LIBRARIES</param-name>
    <param-value>/WEB-INF/example.taglib.xml</param-value>
</context-param>
Run Code Online (Sandbox Code Playgroud)

(多个taglib文件可以用分号分隔;)

最后只需在主页面模板中声明它.

<!DOCTYPE html>
<html lang="en"
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:my="http://example.com/jsf/facelets"
>
    <h:head>
        <title>Facelet tag file demo</title>
    </h:head>
    <h:body>
        <h:form>
            <h:panelGrid columns="3">
                <my:input type="text" label="Username" bean="#{bean}" property="username" required="true" />
                <my:input type="password" label="Password" bean="#{bean}" property="password" required="true" />
                <my:input type="select" label="Country" bean="#{bean}" property="country" options="#{bean.countries}" />
                <my:input type="submit" label="Submit" bean="#{bean}" action="submit" />
            </h:panelGrid>
        </h:form>
    </h:body>
</html>
Run Code Online (Sandbox Code Playgroud)

(#{bean.countries}应该返回一个Map<String, String>国家/地区代码作为键和国家/地区名称作为值)

截图:

在此输入图像描述

希望这可以帮助.

  • @Theo:这适用于输出组件,但不适用于输入组件.然后无法设置该属性. (2认同)