SelectOneRadio Problème

Question

Je suis en train de faire un formulaire de recherche, en fonction de l'élément sélectionné, vous pouvez le faire searchs par début à la fin ou le mois et l'année

Est-il possible de faire un regard de forme comme celui-ci, avec Facelets? en utilisant de préférence SelectOneRadio

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

Answer 1

Bien sûr.

Créer une table div/css régulière. où les boutons radio sont affichés dans un div comme ceci:

page Facelet:

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

dans la partie d'en-tête, ajouter 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; 
    } 

} 

dans YourBean.java Classe:

Boolean selection; 

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

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

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

et dans savePage() utilisez le paramètre selection pour déterminer le type de recherche.

Answer 2

C'est faisable. Vous souhaitez utiliser <f:ajax> à l'intérieur du <h:selectOneMenu> pour rediffuser le formulaire lors du changement (clic) des boutons radio. Vous pouvez utiliser l'identifiant @form pour cela. Puis, dans les éléments d'entrée et de sélection, vous souhaitez que l'attribut disabled dépende de la sélection du bouton radio.

La partie la plus délicate est probablement d'obtenir tout bien jeté puisque le h:selectOneRadio lui-même rend un HTML <table>. Pour les regrouper correctement, vous souhaitez diviser le contenu sur les cellules d'une autre table et appliquer le code CSS vertical-align: top à l'élément td contenant le h:selectOneRadio.

Quoi qu'il en soit, voici un exemple de travail complet pour vous aider à démarrer:

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

Voilà comment le look de haricot comme:

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

Voilà comment vous pouvez appliquer CSS pour obtenir les boutons radio alignés à en haut:

#form td { vertical-align: top; }