Question

可能重复：
How to make a grid of JSF composite component?

我有一个<p:panelGrid>，其中有一列用于生成页眉和页脚。

enter image description here

文字是葡萄牙语，上面写着“字段放在这里！PS：在secound面板内”。

在<p:panelGrid>内，我有一个嵌套的<h:panelGrid>，其中应包含字段。我创建了一个复合组件来添加标签和输入字段。这是复合实现：

<cc:implementation>
    <h:panelGrid columns="2">
        <p:outputLabel for="#{cc.attrs.fieldId}" value="#{cc.attrs.fieldLabel}"/>
        <p:inputText id="#{cc.attrs.fieldId}" required="#{cc.attrs.required}" disabled="#{cc.attrs.disabled}" 
            value="#{cc.attrs.targetValue}" styleClass="cc.attrs.styleClass">
            <cc:insertChildren /> <!-- Validation Rules -->
            <f:ajax event="blur" execute="@this" render="@this" />
        </p:inputText>      
    </h:panelGrid>          
</cc:implementation>

这应该对齐网格中的标签和输入。但是，它呈现如下：

enter image description here

我尝试从复合组件中删除<h:panelGrid>，但它看起来也不像这样：

enter image description here

如何对齐标签和输入？

Answer 1

表单布局从头开始可能是一项非常艰难的事情，并不总是直截了当。话虽如此，您可以尝试使用一些CSS，为所有标签设置相等的宽度，然后通过浮动将表单控件拉到右侧。

在此处查看此示例和其他技巧的一些示例：http://jeffhowden.com/code/css/forms/

可能感兴趣的另一件事是Twitter Bootstrap库/框架。如果需要，您可以customize it仅获取基本布局和表单所需的CSS。

Answer 2

这是我做的：

我的复合组件没有呈现标签，这样，我在每个组件中都没有panelGrid。结果是这样的：

<cc:implementation>
    <p:inputText id="#{cc.attrs.fieldId}" required="#{cc.attrs.required}" disabled="#{cc.attrs.disabled}" 
                 value="#{cc.attrs.targetValue}" styleClass="cc.attrs.styleClass">

        <cc:insertChildren /> <!-- Validation Rules -->
        <f:ajax event="blur" execute="@this" render="@this" />

    </p:inputText>      
</cc:implementation>

这样，标签需要有这个：

            <h:panelGrid columns="2" cellspacing="5" styleClass="table_form">  

            <p:outputLabel for="inputId:id" value="#{msg['entity.id']}"/>
            <po:inputInteiro id="inputId" targetValue="#{campoController.entity.id}" fieldId="id" disabled="true" styleClass="inputTiny"/>

需要注意的是，如果您没有将ID提供给复合组件，并尝试仅查找内部ID，则JSF将找不到您的组件。如果你没有采用正确的方法，这是一个例外： javax.faces.FacesException：找不到标题为“id”的组件，引自“mainForm：j_idt78”

最终结果是：

另一个注意事项：primefaces不再在必填字段中包含“*”...需要手动完成...... :(

希望这有帮助！

复合组件和PanelGrid的布局问题

2 个答案: