Menus e caixas de listagem

Existem 4 componentes que renderizam elementos de menus e caixas de listagem: <h:selectOneMenu>, <h:selectManyMenu>, <h:selectOneListbox> e <h:selectManyListbox>.

O componente <h:selectOneMenu>

O componente <h:selectOneMenu> renderiza um menu de seleção única, representado pelo elemento da HTML, com o atributosizeigual a 1 e sem o atributo multiple, que permitiria seleções múltiplas.

Precisamos passar uma relação de itens que aparecerão na lista, usando a tag <f:selectItem>.

<h:outputLabel value="Time de futebol favorito: " for="timeFutebol" /> <h:selectOneMenu value="#{cadastroTorcedorBean.timeFavorito}" id="timeFutebol"> <f:selectItem itemValue="Corinthians" /> <f:selectItem itemValue="Flamengo" /> <f:selectItem itemValue="Palmeiras" /> <f:selectItem itemValue="Santos" /> <f:selectItem itemValue="São Paulo" /> <f:selectItem itemValue="Vasco" /> <f:selectItem itemValue="Outro" /> </h:selectOneMenu>

O código acima renderiza a seguinte saída em HTML:

<label for="frm:timeFutebol">Time de futebol favorito: </label> <select id="frm:timeFutebol" name="frm:timeFutebol" size="1">

<option value="Corinthians">Corinthians</option> <option value="Flamengo">Flamengo</option> <option value="Palmeiras">Palmeiras</option>

<option value="Santos">Santos</option> <option value="São Paulo">São Paulo</option> <option value="Vasco">Vasco</option>

<option value="Outro">Outro</option> </select>

O valor especiBcado no atributo itemValue da tag <f:selectItem> do item selecionado é passado para a propriedade do managed bean usada na ligação do valor do componente, por isso, precisamos criar um atributo com seu getter e setter no bean CadastroTorcedorBean.

private String timeFavorito;

public String getTimeFavorito() {

return timeFavorito; }

public void setTimeFavorito(String timeFavorito) {

this.timeFavorito = timeFavorito; }

O resultado no browser é o seguinte:

Os valores especiBcados na tag<f:selectItem>são usados também como rótulos dos itens do menu. Algumas vezes temos a necessidade de ter os valores diferentes dos rótulos, e por isso a tag<f:selectItem>possui a propriedadeitemLabel.

<h:outputLabel value="Time de futebol favorito: " for="timeFutebol" /> <h:selectOneMenu value="#{cadastroTorcedorBean.timeFavorito}"

id="timeFutebol">

<f:selectItem itemValue="Corinthians" itemLabel="Timão" /> <f:selectItem itemValue="Flamengo" itemLabel="Mengão" /> <f:selectItem itemValue="Palmeiras" />

<f:selectItem itemValue="Santos" /> <f:selectItem itemValue="São Paulo" />

<f:selectItem itemValue="Vasco" itemLabel="Vascão" /> <f:selectItem itemValue="Outro" />

</h:selectOneMenu> Veja o código HTML gerado:

<label for="frm:timeFutebol">Time de futebol favorito: </label> <select id="frm:timeFutebol" name="frm:timeFutebol" size="1">

<option value="Corinthians">Timão</option> <option value="Flamengo">Mengão</option> <option value="Palmeiras">Palmeiras</option> <option value="Santos">Santos</option> <option value="São Paulo">São Paulo</option> <option value="Vasco">Vascão</option>

<option value="Outro">Outro</option> </select>

O resultado será:

O componente <h:selectManyMenu>

O componente <h:selectManyMenu> renderiza um menu de seleção múltipla, representado pelo elemento da HTML, com o atributosizeigual a 1 emultipleigual amultiple.

<h:outputLabel value="Times de futebol favoritos: " for="timeFutebol" /> <h:selectManyMenu value="#{cadastroTorcedorBean.timesFavoritos}" id="timeFutebol"> <f:selectItem itemValue="Corinthians" /> <f:selectItem itemValue="Flamengo" /> <f:selectItem itemValue="Palmeiras" /> <f:selectItem itemValue="Santos" /> <f:selectItem itemValue="São Paulo" /> <f:selectItem itemValue="Vasco" /> <f:selectItem itemValue="Outro" /> </h:selectManyMenu>

O código acima renderiza a seguinte saída em HTML:

<label for="frm:timeFutebol">Times de futebol favoritos: </label> <select id="frm:timeFutebol" name="frm:timeFutebol" multiple="multiple"

size="1">

<option value="Corinthians">Corinthians</option> <option value="Flamengo">Flamengo</option> <option value="Palmeiras">Palmeiras</option> <option value="Santos">Santos</option>

<option value="São Paulo">São Paulo</option> <option value="Vasco">Vasco</option>

<option value="Outro">Outro</option> </select>

Como este componente possibilita a seleção de mais de um item da seleção, o managed bean deve possuir uma propriedade do tipo de array para comportar os elementos selecionados. No caso deste exemplo, precisamos criar uma propriedade do tipoString[]com o nometimesFavoritos.

private String[] timesFavoritos;

public String[] getTimesFavoritos() {

return timesFavoritos; }

public void setTimesFavoritos(String[] timesFavoritos) {

this.timesFavoritos = timesFavoritos; }

O componente <h:selectOneListbox>

Este componente renderiza um elemento HTML de qualquer tamanho (especiBcado) e sem o atributomultiple, ou seja, é possível selecionar apenas um item da seleção. <h:outputLabel value="Time de futebol favorito: " for="timeFutebol" /> <h:selectOneListbox value="#{cadastroTorcedorBean.timeFavorito}" id="timeFutebol" size="4"> <f:selectItem itemValue="Corinthians" /> <f:selectItem itemValue="Flamengo" /> <f:selectItem itemValue="Palmeiras" /> <f:selectItem itemValue="Santos" /> <f:selectItem itemValue="São Paulo" /> <f:selectItem itemValue="Vasco" /> <f:selectItem itemValue="Outro" /> </h:selectOneListbox>

O componente <h:selectManyListbox>

Este componente renderiza um elemento HTML de qualquer tamanho (especiBcado) e com o atributomultiple, ou seja, é possível selecionar vários itens da seleção.

<h:outputLabel value="Times de futebol favoritos: " for="timeFutebol" /> <h:selectManyListbox value="#{cadastroTorcedorBean.timesFavoritos}" id="timeFutebol" size="4"> <f:selectItem itemValue="Corinthians" /> <f:selectItem itemValue="Flamengo" /> <f:selectItem itemValue="Palmeiras" /> <f:selectItem itemValue="Santos" /> <f:selectItem itemValue="São Paulo" /> <f:selectItem itemValue="Vasco" /> <f:selectItem itemValue="Outro" /> </h:selectManyListbox>

O usuário pode selecionar nenhum, um ou vários itens da seleção.