JSP e JSF: Criando uma tabela de seleção simples utilizando o Netbeans Visual Web Pack

Como encontrei pouca informação sobre como montar uma tabela onde fosse possivel selecionar uma linha, vou postar uma solução para o problema.

Estou utilizando o componente Table, que está disponivel na paleta do modo de edição visual do Netbeans (componente Woodstock Basic). Será criada uma coluna com Radio Buttons, onde será feita a seleção da linha desejada.

1) Clique com o direito na tabela, selecione Table Layout e adicione uma nova coluna. Se quiser, deixe os campos Header Text e Footer Text em branco, e apague o que existir em Value Expression. Em Component Type selecione Radio Button.

2) Adicione o código abaixo ao page bean referido à essa tela:

private Object lastSelected="0"; 
public Object getSelected(){
 String sv = (String)radioButton1.getSelectedValue();
 return sv.equals(lastSelected) ? sv : null; 
} 

public void setSelected(Object selected) {
 if (selected != null) {
  lastSelected = selected;         
 } 
} 

public Object getSelectedValue() {
 return tableRowGroup1.getRowKey().getRowId(); 
}

3) De volta ao modo visual, selecione o Radio Button em questão (vou utilizar o nome de radioButton1) e, na paleta de propriedades, edite o atributo name (da seção Advanced) para: buttonGroup

4) Ainda nas propriedades do radioButton1, na seção Data procure pelo atributo select e clique no botão com [...]. Selecione Use Binding e vá na aba Bind to an object. Selecione o objeto: selected e clique OK.
(A propriedade deve ficar parecida com #{SuaPagina.selected} )

Com isso a aplicação utilizará os métodos getSelected() e setSelected() automaticamente para exibir e gravar as ações no componente.

5) Volte à seção Advance do radioButton1 e procure pelo atributo selectedValue e clique no botão [...]. Selecione Use Binding e vá na aba Bind to an object. Selecione o objeto: selectedValue e clique OK.
A propriedade deve ficar parecida com #{SuaPagina.selectedValue}.

Com isso a aplicação utilizará o método getSelectedValue() para retornar o valor selecionado para o componente.

OBS: Veja abaixo como devem ficar as propriedades do radioButton1:

• Seção Advanced: 


• name="buttonGroup"
• selectedValue=#{SuaPagina.selectedValue}

• Seção Data:


• select=#{SuaPagina.selected}

6) Para efetuar o teste, jogue um botão na tela. No meu caso, a tabela foi criada e preenchida automaticamente utilizando um provider de dados chamado pacienteProvider e, nesse caso, estou recuperando o item que foi selecionado na tabela.

public String btnSelecionar_action() {

 String aRowId = (String)RadioButton.getSelected("buttonGroup");

 RowKey aRowKey =  pacienteProvider.getRowKey(aRowId);
 Paciente selectedPaciente = (Paciente) pacienteProvider.getObject(aRowKey);

 return null;
}

O objeto aRowId possui, nesse caso, o indice da linha que foi selecionada na tabela.
O objeto à ser retornado será a String referente ao nome da próxima páginal, que deve estar previamente configurada no faces-config.xml.

Utilizando um pouco de javascript, é possivel destacar toda a linha que foi selecionada.
Veja um exemplo em: http://blogs.sun.com/winston/entry/single_selectable_row_table_component

Keywords: selecionar linha tabela table jsf jsp netbeans visual web pack