SelectOneRadio Проблема - PullRequest
Новая
       16

SelectOneRadio Проблема

0 голосов
/ 05 августа 2010

Я пытаюсь создать форму поиска, в зависимости от выбранного элемента вы можете выполнять поиск по началу или концу или месяцу и году

Можно ли сделать форму похожей на это с Facelets? использование предпочтения SelectOneRadio

альтернативный текст http://img837.imageshack.us/img837/5357/imageoq.png

Ответы [ 2 ]

3 голосов
/ 06 августа 2010

Это выполнимо. Вы хотите использовать <f:ajax> внутри <h:selectOneMenu>, чтобы изменить форму при изменении (щелчке) переключателей. Для этого вы можете использовать идентификатор @form.

Затем в элементах input и select вы хотите, чтобы атрибут disabled зависел от выбора переключателя.

Самая сложная часть, вероятно, состоит в том, чтобы все это было красиво оформлено, поскольку h:selectOneRadio сам отображает HTML <table>. Чтобы сгруппировать их вместе, вы хотите разделить содержимое по ячейкам другой таблицы и применить CSS vertical-align: top к элементу td, содержащему h:selectOneRadio.

В любом случае, вот вам полный рабочий пример: 

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

Вот как выглядит боб: 

@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; }
1 голос
/ 05 августа 2010

Конечно.

Создать обычную таблицу div / css.где переключатели отображаются в одном элементе div следующим образом:

страница лицевой стороны: 

<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 для определения типа поиска.

...