0

重複の可能性:
JSF 複合コンポーネントのグリッドを作成するには?

<p:panelGrid>ヘッダーとフッターを作成するための列が 1 つあります。

ここに画像の説明を入力

テキストはポルトガル語で、「フィールドはここに配置されます! PS: 2 番目のパネルの内側」と書かれています。

その中に、フィールドを含む<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/をご覧ください。

興味深いかもしれないもう 1 つのことは、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: Cannot find component with identifier "id" referenced from "mainForm:j_idt78"

最終結果は次のとおりです。

別の注意: primefaces には、必須フィールドに「*」が含まれなくなりました...手動で行う必要があります... :(

お役に立てれば！

于 2012-12-24T20:47:36.887 に答える