TOC

Exemple JSF 2 à sélection multiple

Exemple de liste de sélection multiple JSF 2

Dans JSF, la balise<h:selectManyListbox /> est utilisée pour rendre une zone de liste à sélection multiple - élément de sélection HTML avec les attributs «multiple» et «size». 

//JSF...

    
    
    


//HTML output...

h: exemple de selectManyListbox

Un exemple JSF 2.0 pour montrer l'utilisation de la balise «h:selectManyListbox» pour afficher plusieurs listes de sélection et remplir les données de 3 manières différentes:

  1. Valeur codée en dur dans la balise «f:selectItem».

  2. Générez des valeurs avec une carte et placez-la dans la balise «f:selectItems».

  3. Générez des valeurs avec un tableau Object et placez-le dans la balise «f:selectItems», puis représentez la valeur avec l'attribut «var».

1. Backing Bean

Un bean de sauvegarde pour contenir et générer des données pour les multiples valeurs de la zone de liste de sélection. La propriété pour contenir la valeur de la zone de liste à sélection multiple,must be a type of Collection or Array; Sinon, le message d'erreur suivant apparaîtra 

WARNING: Target model Type is no a Collection or Array
javax.faces.FacesException: Target model Type is no a Collection or Array
package com.example;

import java.io.Serializable;
import java.util.Arrays;
import java.util.LinkedHashMap;
import java.util.Map;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean(name="user")
@SessionScoped
public class UserBean implements Serializable{

    public String[] favFood1;
    public String[] favFood2;
    public String[] favFood3;

    //getter and setter methods...

    public String getFavFood1InString() {
        return Arrays.toString(favFood1);
    }

    public String getFavFood2InString() {
        return Arrays.toString(favFood2);
    }

    public String getFavFood3InString() {
        return Arrays.toString(favFood3);
    }

    //Generated by Map
    private static Map food2Value;
    static{
        food2Value = new LinkedHashMap();
        food2Value.put("Food2 - Fry Checken", "Fry Checken"); //label, value
        food2Value.put("Food2 - Tomyam Soup", "Tomyam Soup");
        food2Value.put("Food2 - Mixed Rice", "Mixed Rice");
    }

    public Map getFavFood2Value() {
        return food2Value;
    }

    //Generated by Object array
    public static class Food{
        public String foodLabel;
        public String foodValue;

        public Food(String foodLabel, String foodValue){
            this.foodLabel = foodLabel;
            this.foodValue = foodValue;
        }

        public String getFoodLabel(){
            return foodLabel;
        }

        public String getFoodValue(){
            return foodValue;
        }

    }

    public Food[] food3List;

    public Food[] getFavFood3Value() {

        food3List = new Food[3];
        food3List[0] = new Food("Food3 - Fry Checken", "Fry Checken");
        food3List[1] = new Food("Food3 - Tomyam Soup", "Tomyam Soup");
        food3List[2] = new Food("Food3 - Mixed Rice", "Mixed Rice");

        return food3List;
    }

}

2. Page JSF

Une page JSF pour illustrer l'utilisation de la balise «h:selectManyListbox». 



    

        
JSF 2 multi-select listbox example

        

        1. Hard-coded with "f:selectItem" :
        
            
            
            
        

        



        2. Generated by Map :
        
            
        

        



        3. Generated by Object array and iterate with var :

result.xhtml…




    

        
JSF 2 multi-select listbox example


        
result.xhtml


        
    
            
  1. user.favFood1 : #{user.favFood1InString}
    2. 
            
  2. user.favFood2 : #{user.favFood2InString}
    3. 
            
  3. user.favFood3 : #{user.favFood3InString}
    4.

3. Demo

jsf2-multi-select-listbox-example-1

Lorsque vous cliquez sur le bouton «soumettre», créez un lien vers la page «result.xhtml» et affichez les valeurs de la zone de liste à sélection multiple soumises.

jsf2-multi-select-listbox-example-2

Comment présélectionner plusieurs valeurs de listbox?

La valeur de la balise «f:selectItems» est sélectionnée si elle correspond à la «valeur» de la balise «h:selectManyListbox». Dans l'exemple ci-dessus, si vous définissez la propriété favFood1 sur «Fry Checken» et «Tomyam Soup»: 

@ManagedBean(name="user")
@SessionScoped
public class UserBean{

    public String[] favFood1 = {"Fry Checken", "Tomyam Soup"};

    //...

Les valeurs de la liste déroulante «favFood1», «Fry Checken» et «Tomyam Soup» sont sélectionnées par défaut.

Télécharger le code source

Téléchargez-le -JSF-2-Multi-Select-Listbox-Example.zip (10 Ko)

Référence

  1. JSF JavaDoc

  2. http://www.w3schools.com/tags/att_select_multiple.asp

Related