quarta-feira, 19 de março de 2008

Dica ADF: Usando o componente Shuttle, Parte 1

Oi Pessoal! Agora que conseguimos colocar a cabeça pra fora da água vou postar aqui. Os últimos dias foram cansativos... mas vamos ao que interessa.

Neste post, vou demonstrar o uso de um dos componentes mais interessantes do ADF Faces, mas pouco usado pela falta de documentação sobre seu uso: o Shuttle, representado pela tag [af:selectmanyshuttle]. Isto é um complemento ao Frank Nimphius em seu blog , onde inclusive existe um projeto de exemplo que pode ser baixado.

O componente Shuttle é composto por duas listas coordenadas entre si, uma delas com os valores possíveis (chamada de leading list) e outra com os valores selecionados (chamada de trailing list). Entre as duas listas, existem controles de mover valor da leading para trailing e vice-versa. Este componente possui também dois facets interessantes, o filter que permite colocar um item acima da lista Leading, como um af:inputText ou af:selectOneChoice, para filtrá-la, e o trailingFooter que permite inserir itens abaixo da lista trailing, como botões de comando etc. O resultado final fica assim:




Vamos entender um pouco mais do seu funcionamento. A Leading List da Shuttle trabalha com um vetor de itens do tipo [af:selectitem], que podem ser populados tanto programaticamente em um Backing Bean, como através de um Table Binding ADF, iremos explorar a segunda opção. Já a Trailing List é baseada em uma lista comum, do tipo java.util.List, contendo o código de cada uma das opções selecionadas baseado na propriedade Code da [af:selectitem]. Segue o código comentado da montagem da Shuttle:

[af:selectmanyshuttle leadingheader="Disponiveis" //-- Cabeçalho da Lista Leading
trailingHeader="Selecionados" //-- Cabeçalho da Lista Trailing
value="#{ShuttleBean.shuttleValues}" //-- java.util.List no Backing Bean
partialTriggers="ShuttleFilter"] //-- Escuta eventos do Filter
[af:foreach var="li" items="#{bindings.Lbc.rangeSet}"]
//--> Dentro do pageDefinition, tenho um Table Binding de nome Lbc. Suas linhas
//--> são representadas pelo rangeSet, para cada uma adicionar um SelectItem
[af:selectitem label="#{li.DescLbc}" value="#{li.CodLbc}"]
[/af:selectitem]
[f:facet name="filter"]
[af:inputtext label="Filtro:" columns="5" valuechangelistener="#ShuttleBean.onFilterHeadingList}" autosubmit="true" id="ShuttleFilter"/]
[f:facet name="trailingFooter"]
[af:panelgroup]
[af:commandbutton text="Aplicar Valores" action="#{LbcShuttleBean.applyShuttleConfig}"]
[/af:commandbutton]
[/af:panelgroup]
[/f:facet]
[/af:selectmanyshuttle]


Este post vai ter mais 3 partes explicando o funcionamento da Shuttle, portanto fiquem ligados, e até mais!

Nenhum comentário: