复合组件和 PanelGrid 的布局问题 [重复]

Posted 2023-02-23

【中文标题】复合组件和 PanelGrid 的布局问题 [重复]

【英文标题】：Layout problems with composite components and PanelGrid [duplicate]

【发布时间】：2012-12-09 23:50:17

【问题描述】：

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

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

文字是葡萄牙语，上面写着“字段放置在此处！PS：在第二面板内”。

在<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>

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

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

如何对齐标签和输入？

【参考方案1】：

表单布局从头开始是一件非常困难的事情，而且并不总是那么简单。话虽如此，您可以尝试使用一些 CSS 使其工作，为所有标签设置相同的宽度，然后使表单控件浮动到右侧。

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

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

【讨论】：

感谢您的回答。但我的方法有点不同。我会发的。

【参考方案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: 找不到从“mainForm:j_idt78”引用的标识符为“id”的组件

最终结果是：

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

希望这会有所帮助！