2

私は JSF の専門家ではありません。HTML/CSS/JS のレイアウトを担当しています。しかし、フォーム、特にラジオ ボタンの Java 開発者で問題に直面しています。最後に必要なレイアウトは次のとおりです。 ここに画像の説明を入力

ご覧のとおり、ラジオ ボタン、入力選択ボックスなど、ほとんどすべてがカスタムです。

現在、私たちが直面している主な問題は、JSF フレームワークがこれらすべてのものをテーブルに自動的に出力することです (デザイナーとしての私はそもそもこれが好きではありません)。次に、ラジオ ボタン用の非常にカスタムなラベルも必要です。

さまざまなことを試しましたが、ここでコードの基本的な例を示します。

    <h:selectOneRadio value="#{user.favColor1}">
        <f:selectItem itemValue="Red" itemLabel="Color1 - Red" />
        <f:selectItem itemValue="Green" itemLabel="Color1 - Green" />
        <f:selectItem itemValue="Blue">A really custom label is here with <select><option>1</option></select></f:selectItem>
    </h:selectOneRadio>

これを行う別の方法はありますか？私たちはそれを間違っていますか？どうすればこのようなことができるか知っていますか？

ありがとう！

4

2 に答える 2

4

PrimeFaces は、探している正確なコンポーネントを取得しました

SelectOneRadio - カスタム レイアウトをご覧ください

<h3>Custom Layout</h3>
<p:outputPanel id="customPanel" style="margin-bottom:10px">
    <p:selectOneRadio id="customRadio" value="#{radioView.color}" layout="custom">
        <f:selectItem itemLabel="Red" itemValue="Red" />
        <f:selectItem itemLabel="Green" itemValue="Green" />
        <f:selectItem itemLabel="Blue" itemValue="Blue" />
    </p:selectOneRadio>

    <h:panelGrid columns="3" cellpadding="5">
        <p:radioButton id="opt1" for="customRadio" itemIndex="0" />
        <h:outputLabel for="opt1" value="Red" />
        <p:spinner />

        <p:radioButton id="opt2" for="customRadio" itemIndex="1" />
        <h:outputLabel for="opt2" value="Green" />
        <p:inputText />

        <p:radioButton id="opt3" for="customRadio" itemIndex="2" />
        <h:outputLabel for="opt3" value="Blue" />
        <p:calendar />
    </h:panelGrid>
</p:outputPanel>

彼らの例はあなたのようにも見えます（ラジオの隣のスピナー）

于 2012-04-16T05:45:19.543 に答える
-2

JSF では、次のようにラジオグループのスタイルを設定できます。

.myRadioGroup input {
  float: left;
  margin-left: -13px;
  margin-top: 3px;
}

.myRadioGroup label {
  margin-left: 12px;
  display: block;
}

<h:selectOneRadio value="#{user.favColor1}" styleClass="myRadioGroup">
        <f:selectItem itemValue="Red" itemLabel="Color1 - Red" />
        <f:selectItem itemValue="Green" itemLabel="Color1 - Green" />
        <f:selectItem itemValue="Blue">A really custom label is here with <select><option>1</option></select></f:selectItem>
</h:selectOneRadio>
于 2012-04-16T05:30:14.497 に答える