复合组件和PanelGrid的布局问题

时间:2012-12-22 20:35:57

标签: layout jsf-2 composite-component

  

可能重复:
  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

如何对齐标签和输入?

2 个答案:

答案 0 :(得分:1)

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

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

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

答案 1 :(得分: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:找不到标题为“id”的组件,引自“mainForm:j_idt78”

最终结果是:

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

希望这有帮助!