Menus, caixas de listagem e item de seleção

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

O componente h:selectOneMenu e a tag f:selectItem

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

Todas as tags de seleção, com exceção da h:selectBooleanCheckbox (que estudaremos logo mais) devem receber a relação de itens que aparecerão na lista. Para especificar os itens, usamos a tag fundamental 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>

}

public void setTimeFavorito(String timeFavorito) {

this.timeFavorito = timeFavorito;

}

O resultado no browser é o seguinte:

Os valores especificados na tag f:selectItem são usados também como rótulos dos itens do menu. Algumas vezes temos necessidade de ter os valores diferentes dos rótulos, e por isso a tag f:selectItem possui o atributo itemLabel. Veja um exemplo:

<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" itemLabel="Porco"/> <f:selectItem itemValue="Santos"/>

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

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

</h:selectOneMenu>

Este código será renderizado como:

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

<option value="Corinthians">Tim&atilde;o</option> <option value="Flamengo">Meng&atilde;o</option> <option value="Palmeiras">Porco</option>

<option value="Santos">Santos</option>

<option value="S&atilde;o Paulo">S&atilde;o Paulo</option> <option value="Vasco">Vasc&atilde;o</option>

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

O componente h:selectManyMenu

O componente h:selectManyMenu renderiza um menu de seleção múltipla, representado pelo elemento select da HTML, com o atributo size igual a 1 e com o atributo multiple igual a true.

<h:outputLabel value="Time de futebol favorito: "

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">Time de futebol favorito: </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&atilde;o Paulo">S&atilde;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 um atributo de array para comportar os elementos selecionados.

No caso deste exemplo, precisamos criar um atributo do tipo String (array) com o nome timesFavoritos.

private String[] timesFavoritos; public String[] getTimesFavoritos() {

return timesFavoritos; }

public void setTimesFavoritos(String[] timesFavoritos) {

O componente h:selectOneListbox

Este componente renderiza um elemento HTML select de qualquer tamanho (especificado) e sem o atributo multiple, 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 código acima gera o seguinte fragmento HTML:

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

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

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

<option value="S&atilde;o Paulo">S&atilde;o Paulo</option> <option value="Vasco">Vasco</option>

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

O valor 4 para o atributo size especifica o tamanho da lista, que deve possuir apenas 4 elementos visíveis.

O componente h:selectManyListbox

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

<h:outputLabel value="Time de futebol favorito: "

for="timeFutebol"/>

<h:selectManyListbox id="timeFutebol" size="4"

value="#{cadastroTorcedorBean.timesFavoritos}"> <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 código acima gera o seguinte fragmento HTML:

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

multiple="multiple" size="6">

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

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

<option value="S&atilde;o Paulo">S&atilde;o Paulo</option> <option value="Vasco">Vasco</option>

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

O usuário pode selecionar nenhum, um ou vários itens da seleção. Lembre-se de criar o atributo como um array no managed bean, pois o componente possibilita seleção múltipla dos itens.