JSF单选按钮自定义标签并取出表格布局

Question

我不是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>

还有另一种方法吗？我们做错了吗？你知道我怎么能这样做吗？

谢谢！

Answer 1

PrimeFaces获得了您正在寻找的确切组件

看看SelectOneRadio - Custom Layout

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

他们的例子甚至看起来像你的（Spinner在Radio旁边）

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