0

可能重复：
如何制作 JSF 复合组件的网格？

我有<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>从复合组件中删除 ，但它看起来也像这样未对齐：

在此处输入图像描述

如何对齐标签和输入？

4

2 回答 2

1

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

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

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

于 2012-12-23T21:38:51.477 回答
0

这是我所做的：

我的复合组件不呈现标签，这样，我在每个组件内都没有 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 不再在必填字段中包含“*”......需要手动完成...... :(

希望这可以帮助！

于 2012-12-24T20:47:36.887 回答