空白 space JSF 未呈现组件

Question

我有以下代码：

    <h:form id="mainForm">

      <p:panelGrid columns="2" layout="grid">

                <h:panelGroup styleClass="containers" layout="block">

                    <p:outputLabel for="document" value="Document" />
                    <p:inputText id="document"
                        value="#{dIGRCController.digrc.documento}" readonly="true" />
                    <h:link styleClass="searchLink" value="Search Documents"
                        outcome="searchDigrc.xhtml"></h:link>

                    <!-- #{dIGRCController.digrc.impresn == 'S'} -->
                    <p:outputLabel for="concept" value="Concept" />
                    <p:selectOneMenu id="concept"
                        value="#{dIGRCController.digrc.qconce}"
                        requiredMessage="You must select a Concept" required="true">

                        <f:selectItem itemLabel="Select" itemValue="" />
                        <f:selectItems
                            value="#{cCRX1Controller.ccrx1.concepts.entrySet()}"
                            var="concept" itemValue="#{concept.key}"
                            itemLabel="#{concept.value.tbdesc}" />

                        <p:ajax listener="#{dIGRCController.setDropDownSelectedCcrx1}"
                            update="hiddenSections, searchAgentsLink, agenteName, documentValue, containerDocQty, containerMethodPayment" />

                    </p:selectOneMenu>

                    <p:outputLabel for="todaysDate" value="Date" />
                    <p:inputText id="todaysDate" readonly="true"
                        value="#{dIGRCController.digrc.fecha}" />
                </h:panelGroup>

                <h:panelGroup styleClass="containers" layout="block">

                    <h:panelGroup>
                        <p:outputLabel for="agenteName" value="Agent Name" />
                        <p:inputText id="agenteName"
                            readonly="#{dIGRCController.digrc.selectedDropDownCcrx1.tbqcon == 'D'}"
                            value="#{dIGRCController.digrc.nombre}" required="true"
                            requiredMessage="You must enter an Agent Name" />
                        <h:panelGroup id="searchAgentsLink">
                            <h:link styleClass="searchLink" value="Search Agents"
                                rendered="#{dIGRCController.digrc.selectedDropDownCcrx1.tbqcon == 'D'}"
                                outcome="searchAgex1">

                                <f:param name="concept" value="#{dIGRCController.digrc.qconce}" />

                                <c:if test="#{not empty dIGRCController.digrc.documento}">
                                    <f:param name="documento"
                                        value="#{dIGRCController.digrc.documento}" />
                                </c:if>

                            </h:link>
                        </h:panelGroup>
                    </h:panelGroup>

                    <p:outputLabel for="documentValue" value="Document Value" />
                    <p:inputText id="documentValue"
                        value="#{dIGRCController.digrc.documVal}" required="true"
                        requiredMessage="You must enter a Document Value"
                        validatorMessage="The Document Value must be greater than 0"
                        readonly="#{dIGRCController.digrc.selectedDropDownCcrx1.tbqcon == 9 or 
                        dIGRCController.digrc.selectedDropDownCcrx1.tbqcon == 1 or 
                        dIGRCController.digrc.selectedDropDownCcrx1.tbqcon == 'F'}">

                        <f:validateDoubleRange minimum="0.01" />

                        <p:ajax event="change" update="containerIdTwo"></p:ajax>

                    </p:inputText>

                    <h:panelGroup styleClass="containers" layout="block"
                        id="containerDocQty">
                        <h:panelGroup
                            rendered="#{dIGRCController.digrc.selectedDropDownCcrx1.pideqtysn == 'S'}">

                            <p:outputLabel for="documentQuantity" value="Document Quantity" />
                            <p:inputText id="documentQuantity"
                                value="#{dIGRCController.digrc.qtyDoc}" required="true"
                                requiredMessage="You must enter a Document Quantity" />

                        </h:panelGroup>
                    </h:panelGroup>

                </h:panelGroup>

            </p:panelGrid>

      <p:panelGrid columns="1" layout="grid" id="hiddenSections">

        <h:panelGroup styleClass="containers" layout="grid" id="moneyOrder"
            rendered="#{dIGRCController.digrc.selectedDropDownCcrx1.tbqcon == 1}">

            <h2>Money Orders</h2>

            <p:outputLabel for="moneyOrdersQty" value="Quantity" />
            <p:inputText id="moneyOrdersQty"
                value="#{dIGRCController.digrc.moqty}" />

            <p:outputLabel for="moneyOrdersVal" value="Value" />
            <p:inputText id="moneyOrdersVal"
                value="#{dIGRCController.digrc.moval}">

                <p:ajax update="documentValue" event="change"
                    listener="#{dIGRCController.setDocValueToMoneyOrderValue()}" />

            </p:inputText>

        </h:panelGroup>

<h:panelGroup styleClass="containers" layout="block"
                    rendered="#{dIGRCController.digrc.selectedDropDownCcrx1.tbqcon == 8}">

                    <h2>Transfer Documents</h2>

                    <p:outputLabel for="numeroConduce" value="Transfer Number" />
                    <p:inputText id="numeroConduce"
                        value="#{dIGRCController.digrc.notransf}" required="true"
                        requiredMessage="You must enter a Number." />

                    <p:outputLabel for="suplidor" value="Supplier" />
                    <p:inputText id="suplidor" value="#{dIGRCController.digrc.c8supli}"
                        required="true" requiredMessage="You must enter a Supplier" />

                    <p:outputLabel for="tipoEnvio" value="Type of Transfer" />
                    <p:selectOneMenu id="tipoEnvio"
                        value="#{dIGRCController.digrc.c8tpenvio}"
                        requiredMessage="You must select a Type of Transfer"
                        required="true">

                        <f:selectItem itemLabel="Select" itemValue="" />
                        <f:selectItem itemLabel="Regular" itemValue="R" />
                        <f:selectItem itemLabel="Official" itemValue="O" />
                        <f:selectItem itemLabel="Express Regular" itemValue="E" />
                        <f:selectItem itemLabel="Express Official" itemValue="F" />

                        <p:ajax event="change" update="containerExtraEnvio"></p:ajax>

                    </p:selectOneMenu>

                    <p:outputLabel for="envioDestino" value="Destination" />
                    <p:selectOneMenu id="envioDestino"
                        value="#{dIGRCController.digrc.c8destino}"
                        requiredMessage="You must select a Destination" required="true">

                        <f:selectItem itemLabel="Select" itemValue="" />
                        <f:selectItem itemLabel="Capital" itemValue="C" />
                        <f:selectItem itemLabel="Interior" itemValue="I" />

                    </p:selectOneMenu>

                    <h:panelGroup id="containerExtraEnvio">
                        <h:panelGroup
                            rendered="#{dIGRCController.digrc.c8tpenvio == 'O' or dIGRCController.digrc.c8tpenvio == 'F'}">

                            <p:outputLabel for="envioAdicionales" value="Extra" />
                            <p:inputText id="envioAdicionales"
                                value="#{dIGRCController.digrc.c8qadi}" required="true"
                                requiredMessage="You must enter an Extra" />

                        </h:panelGroup>
                    </h:panelGroup>

                </h:panelGroup>

      </p:panelGrid>

    </h:form>

在第一个 panelGrid 中，有一个 ID 为 concept 的下拉列表。选择项目时，这将更新 ID 为 hiddenSections 的容器。如果选择的概念是 1，那么它应该显示 Money Orders。如果 concept 是 8，它应该显示 Transfer Documents（参见 id hiddenSections 的 panelGrid）。

下图显示了内部为空的七个 DIV 元素。为了代码清晰，我只展示了其中的两个（如果你愿意，你应该可以用两个重现）。

这七个 DIV 元素表示在我上面解释的条件下呈现的七个面板组。当用户第一次到达屏幕时，其中 none 会被渲染，因为概念尚未设置。在这种情况下，我看到了我不想要的空白区域。我如何摆脱这些空白空间？

Answer 1

In this case, I see empty spaces which I don't want. How do I get rid of those empty spaces?

你的问题含糊不清，我从三个方面理解了它（如果我误解了，请原谅，因为答案在所有情况下都是显而易见的）。

当组件未被渲染时，它根本不会出现在 html 中。因此，如果空 space 你的意思是 space 个字符，那么这些字符在相关标签之外。
如果由于 css 而生成的 table 需要 space，您希望该部分在页面加载时为空，那么您可以为此使用渲染。
我认为这就是您要问的问题：由于您的 selectItem 最初为 null，因此呈现了 8 个面板组中的 none 个，您希望在选择时呈现默认的一个项目为空。然后只需包括一个检查以查看默认面板组的值是否为空。

抱歉，如果我误解了问题。

空白 space JSF 未呈现组件

blank space JSF not rendered components

jsf

jsf-2