SelectOneRadio Problem

Question

I'm trying to do a search form, depending on the selected item you can do searchs by start to end or month and year

Is it possible to do a form look like this, with Facelets? using of preference SelectOneRadio

Answer 1

Of course.

Create regular div/css table. where the radio buttons are displayed in one div like this:

facelet page:

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

in the header part, add 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;
   }

}

in YourBean.java class:

Boolean selection;

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

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

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

and in savePage() use the selection param to decide the search type.

Answer 2

It's doable. You'd like to use <f:ajax> inside the <h:selectOneMenu> to rerender the form on change (click) of the radio buttons. You can use the @form identifier for this.

Then, in the input and select elements, you'd like to let disabled attribute depend on the radio button selection.

The most tricky part is probably to get it all laid out nicely since the h:selectOneRadio itself renders a HTML <table>. To group them nicely together, you'd like to split the content over cells of another table and apply CSS vertical-align: top to the td element containing the h:selectOneRadio.

Anyway, here's a full working example to get you started:

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

Here's how the bean look like:

@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.
}

Here's how you can apply CSS to get the radio buttons aligned at top:

#form td { vertical-align: top; }