SelectOneRadio问题

Question

我正在尝试做一个搜索表单，根据所选的项目，您可以按从开始到结束或按月和年进行搜索

有没有可能用Facelets做这样的表单？preference SelectOneRadio的使用

alt text http://img837.imageshack.us/img837/5357/imageoq.png

Answer 1

这是可行的。您希望在<h:selectOneMenu>中使用<f:ajax>在更改(单击)单选按钮时重新呈现表单。为此，您可以使用@form标识符。

然后，在输入和选择元素中，您希望让disabled属性依赖于单选按钮选择。

最棘手的部分可能是很好地布局所有内容，因为h:selectOneRadio本身会呈现一个HTML <table>。要将它们很好地组合在一起，您需要将内容拆分到另一个表的单元格上，并将CSS vertical-align: top应用于包含h:selectOneRadio的td元素。

无论如何，这里有一个完整的工作示例来帮助您入门：

<h:form id="form">
    <h:panelGrid columns="2">
        <h:selectOneRadio id="type" value="#{bean.type}" layout="pageDirection" required="true">
            <f:selectItems value="#{bean.types}" var="type" itemValue="${type}" itemLabel="" />
            <f:ajax event="click" render="@form" />
        </h:selectOneRadio>
        <h:panelGrid columns="4">
            <h:outputLabel for="inputStartDate" value="Start Date" />
            <h:inputText id="inputStartDate" value="#{bean.startDate}" required="true" disabled="#{bean.type != 'INPUT'}">
                <f:convertDateTime type="date" pattern="yyyy-MM-dd" />
            </h:inputText>
            <h:outputLabel for="inputEndDate" value="End Date" />
            <h:inputText id="inputEndDate" value="#{bean.endDate}" required="true" disabled="#{bean.type != 'INPUT'}">
                <f:convertDateTime type="date" pattern="yyyy-MM-dd" />
            </h:inputText>
            <h:outputLabel for="selectMonth" value="Select Month" />
            <h:selectOneMenu id="selectMonth" value="#{bean.month}" required="true" disabled="#{bean.type != 'SELECT'}">
                <f:selectItem itemLabel="Select One" />
                <f:selectItems value="#{bean.months}" />
            </h:selectOneMenu>
            <h:outputLabel for="selectYear" value="Select Year" />
            <h:selectOneMenu id="selectYear" value="#{bean.year}" required="true" disabled="#{bean.type != 'SELECT'}">
                <f:selectItem itemLabel="Select One" />
                <f:selectItems value="#{bean.years}" />
            </h:selectOneMenu>
            <h:panelGroup />
            <h:panelGroup />
            <h:commandButton value="Submit" action="#{bean.submit}" />
            <h:panelGroup />
        </h:panelGrid>
    </h:panelGrid>        
    <h:messages />
</h:form>

下面是bean的外观：

@ManagedBean
@ViewScoped
public class Bean {

    private enum Type {
        INPUT, SELECT
    }

    private Type type;
    private Date startDate;
    private Date endDate;
    private Integer month;
    private Integer year;
    // All with getters and setters.

    private List<Type> types = Arrays.asList(Type.values());
    private List<SelectItem> months = new ArrayList<SelectItem>();
    private List<Integer> years = new ArrayList<Integer>();
    // All with just getters.

    public Bean() {
        String[] monthNames = new DateFormatSymbols().getMonths();
        for (int i = 0; i < 12; i++) {
            months.add(new SelectItem(i, monthNames[i]));
        }
        for (int i = 2000; i <= 2020; i++) {
            years.add(i);
        }
    }

    public void submit() {
        switch (type) {
            case INPUT:
                System.out.printf("Start Date: %tF, End Date: %tF%n", startDate, endDate);
                break;
            case SELECT:
                System.out.printf("Month: %s, Year: %d%n", months.get(month).getLabel(), year);
                break;
        }
    }

    // Getters and setters here.
}

下面是如何应用CSS使单选按钮在顶部对齐的方法：

#form td { vertical-align: top; }

Answer 2

当然了。

创建常规的div/css表。其中单选按钮显示在一个div中，如下所示：

facelet页面：

<h:selectOneRadio id="searchPlace" 
value="#{yourBean.selection}" onclick="enableSearch(this)" layout="pageDirection" border="1">
<f:selectItem itemValue="0" />

在标题部分，添加javascript：

function enableSearch(radio){
   if (radio.id == 's1'){
        document.getElementById('startDateText').disabled=false;
        document.getElementById('endDateText').disabled=false;
   }else{
document.getElementById('monthSelect').disabled=false;
        document.getElementById('yearSelect').disabled=false;
   }

}

在YourBean.java类中：

Boolean selection;

public void setSelection(Boolean selection){
this.selection = selection;
}

public String getSelection(){
  return this.selection;
}

public void savePage(){
   ....
   if (selection)
   ..
}

在savePage()中，使用selection参数来决定搜索类型。