JSF 2.

0 Primefaces p:picklist
21/10/2010Benigno SalesDeixe um comentrioIr para os comentrios

Rate This Um outro componente muito interessante de se usar e com vrias utilidades em projetos do dia-a-dia o p:picklist. Com este componente voc ir transferir dados entre colees utilizando uma caracteristica muito interessante o DRAG AND DROP ou ARRASTAR E SOLTAR. Legal, no?
Bom, vamos ver como funciona mais este fantstico componete da Primefaces. Abaixo uma breve descrio dos principais atributos deste componente: rendered: Exibir ou no o componente binding: Uma expression language que mapeia um UIComponent do lado servidor. value: Valor do componente. Pode ser uma EL ou um valor literal. Uma coleo do tipo DualListModel. converter: converter para o componente. immediate: especifica se o ciclo de validao deve ser ou no processado. required: Faz do componente um campo requerido no formulrio. var: Nome do objeto de interao itemLabel: Rtulo do campo. itemValue: Objeto referente ao valor do item. Vamos ao nosso exemplo. Optei por fazer um exemplo com interao com uma base de dados, pois fazendo este exemplo voc conseguir fazer o que quiser. Para este exemplo irei utilizar: - Mojarra 2.0.3 - PrimeFaces-2.2.RC1-SNAPSHOT Criei uma tabela jogadores com os campos id, nome e estado, conforme a imagem abaixo:

E povoei conforme abaixo:

Obeserve que no campo ESTADO, estou usando valores 1 ou 2. Estes valores representam se o jogador esta 2-LESIONADO ou esta 1-SAUDVE. Caso queira, pode criar uma tabela auxiliar para colocar a descrio, achei desnecessrio para o exemplo. Criei um projeto de nome ExPickList e criei os pacotes de acordo com a imagem abaixo:

Criei o modelo ou bean de acordo com os campos da tabela de jogadores e inclu os mtodos getters e setters, veja abaixo: public class Jogador {

private int id; private String nome; private int estado;

public int getId() { return id; }

public void setId(int id) { this.id = id; }

public String getNome() { return nome; }

public void setNome(String nome) { this.nome = nome; }

public int getEstado() { return estado; }

public void setEstado(int estado) { this.estado = estado; } } O DAO JogadoresDAO bem semelhante ao do POST sobre p:autocomplete a nica diferena que eu inclu dois mtodos: buscaPorEstado e atualiza. O buscaPorEstado utiliza um parmetro inteiro para buscar todos os jogadores de acordo com esse parmetro e retorna uma coleo do tipo Jogador. J o atualiza serve para atualizar os valores na base de dados de acordo com o objeto do tipo Jogador passado como parmetro. Segue abaixo o cdigo do DAO: public class JogadorDAO {

private Connection con; private String sql; private final String COL_ID = "id"; private final String COL_NOME = "nome";

private final String COL_ESTADO = "estado";

public List<Jogador> buscaPorEstado(int estado) { List<Jogador> jogadores = new ArrayList<Jogador>(); sql = "select * from jogadores j where j.estado = ?"; con = ConnectionFactory.getConnection(); PreparedStatement ps; try { ps = con.prepareStatement(sql); ps.setInt(1, estado); ResultSet rs = ps.executeQuery(); while (rs.next()) { Jogador jogador = new Jogador(); jogador.setId(rs.getInt(COL_ID)); jogador.setNome(rs.getString(COL_NOME)); jogador.setEstado(rs.getInt(COL_ESTADO)); jogadores.add(jogador); } con.close(); } catch (SQLException ex) { Logger.getLogger(JogadorDAO.class.getName()).log(Level.SEVERE, null, ex); } return jogadores;

public Jogador buscaPorNome(String nome) { Jogador jogador = new Jogador(); sql = "select * from jogadores j where j.nome = ?"; con = ConnectionFactory.getConnection(); PreparedStatement ps; try { ps = con.prepareStatement(sql); ps.setString(1, nome);

ResultSet rs = ps.executeQuery(); if (rs.next()) { jogador.setId(rs.getInt(COL_ID)); jogador.setNome(rs.getString(COL_NOME)); jogador.setEstado(rs.getInt(COL_ESTADO)); } con.close(); } catch (SQLException ex) { Logger.getLogger(JogadorDAO.class.getName()).log(Level.SEVERE, null, ex); } return jogador;

public List<Jogador> listaTodos() { List<Jogador> jogadores = new ArrayList<Jogador>(); try { con = ConnectionFactory.getConnection(); sql = "select * from jogadores j"; PreparedStatement ps = con.prepareStatement(sql); ResultSet rs = ps.executeQuery(); while (rs.next()) { Jogador j = new Jogador(); j.setId(rs.getInt(COL_ID)); j.setNome(rs.getString(COL_NOME)); j.setEstado(rs.getInt(COL_ESTADO)); jogadores.add(j); } con.close(); } catch (SQLException ex) { Logger.getLogger(JogadorDAO.class.getName()).log(Level.SEVERE, null, ex); } return jogadores; }

public void atualiza(Jogador jogador) { sql = "update jogadores set nome=?, estado=? where id=?"; con = ConnectionFactory.getConnection(); try { PreparedStatement ps = con.prepareStatement(sql); ps.setString(1, jogador.getNome()); ps.setInt(2, jogador.getEstado()); ps.setInt(3, jogador.getId()); ps.execute(); } catch (SQLException ex) { Logger.getLogger(JogadorDAO.class.getName()).log(Level.SEVERE, null, ex); } } Por ltimo, mas no menos importante vem o nosso CONTROLLER. @ManagedBean @SessionScoped public class JogadorController {

private JogadorDAO dao = new JogadorDAO(); private List<Jogador> saudaveis = new ArrayList<Jogador>(); private List<Jogador> lesionados = new ArrayList<Jogador>(); private DualListModel<Jogador> jogadores;

public DualListModel<Jogador> getJogadores() { return jogadores; }

public void setJogadores(DualListModel<Jogador> jogadores) { this.jogadores = jogadores; }

public List<Jogador> getLesionados() { return lesionados; }

public void setLesionados(List<Jogador> lesionados) { this.lesionados = lesionados; }

public List<Jogador> getSaudaveis() { return saudaveis; }

public void setSaudaveis(List<Jogador> saudaveis) { this.saudaveis = saudaveis; }

public void salva() { saudaveis = jogadores.getSource(); lesionados = jogadores.getTarget(); for (Jogador jogador : saudaveis) { jogador.setEstado(1); dao.atualiza(jogador); } for (Jogador jogador : lesionados) { jogador.setEstado(2); dao.atualiza(jogador); } Utils.showFacesMessage("Jogadores SAUDAVEIS e LESIONADOS atualizados", 2); }

public JogadorController() { saudaveis = dao.buscaPorEstado(1); lesionados = dao.buscaPorEstado(2); jogadores = new DualListModel<Jogador>(saudaveis, lesionados); } } No nosso controller quero destacar alguns pontos. Primeiramente temos duas colees ambas do do tipo

List<Jogador> uma para lesionados e outra para saudaveis. Logo em seguida, temos uma coleo do tipo org.primefaces.model.DualListModel que utiliza-se de duas colees e ser o responsvel pela interao entre as outras colees que criamos. Alm desses atributos supracitados inserimos o nosso dao que usaremos para preencher as colees. Inserimos todos os mtodos getters e setters e no construtor chamamos o dao duas vezes para povoar a coleo saudaveis e lesionados com os jogadores de acordo com o seu estado. Depois passamos as duas colees como parmetro do construtor do DualListModel jogadores. Pronto! Nosso PickList esta pronto para sofrer interaes do usurio. Na nossa view onde iremos trabalhar com o nosso p:picklist, veja abaixo o cdigo da index.xhtml: <h:body> <p:panel header="Jogadores do Corinthians" style="width:500px"> <p:messages id="mensagens"/> <h:form> <p:pickList id="jogadores" value="#{jogadorController.jogadores}" var="jogador" iconOnly="true" itemLabel="#{jogador.nome}" itemValue="#{jogador}" converter="jogadorConverter"> <f:facet name="sourceCaption">Saudveis</f:facet> <f:facet name="targetCaption">Lesionados</f:facet> </p:pickList> <p:commandButton value="Submit" action="#{jogadorController.salva}" update="jogadores mensagens" image="ui-icon-transfer-e-w"/> <p:ajaxStatus> <f:facet name="start"> <h:outputText value="Salvando..."/> </f:facet> <f:facet name="complete"> <h:outputText value=""/> </f:facet> </p:ajaxStatus> </h:form> </p:panel> </h:body> No picklist o atributo value dever conter a nossa coleo DualListModel #{jogadorController.jogadores} e utilizaremos do f:facet para definir o sourceCaption, que referencia ao ttulo da lista Origem(saudaveis) e targetCaption que representa o titulo da lista Destino(lesionados). Abaixo do picklist tem um commandbutton onde chamo o mtodo salva do managed bean que atualizar os valores na base de dados. Pronto pessoal! Bon appetit, vejam como ficou nosso lindo picklist:

 isso ai pessoal, espero ter ajudado. Abraos a todos e at o prximo post! Gosto Gostar disso: Ca JSF, JS Seja o primeiro a gostar disso post. Compartilhar Share this: Fte

Ta gs :

go ria s

2.0, PrimeFacesduallistmodel, java server faces, JSF2, p:picklist, primefaces, primefaces 2.0, primefaces picklist

Comentrios (9)Trackbacks (0)Deixe um comentrioTrackback 26/12/2010 26/12/2010 s 23:17 | #2 s 18:37 | #1 Responder |Responder | Citar Citar

sam

Tem um post no blog sobre converters. Ah! E voc pode se cadastrar Ola, em:http://www.seedcursos.com.br/PlataformaSeed/ e baixar o cdigo gostaria fonte. e saber como fica o converter. Agradecia que completasse o post comBenigno de ver Sales essa parte.

11/08/2011 09:22 #5 28/02/2011 09:11 #4 11/02/2011 s 10:40 | #3 12/08/2011 s 18:22 | #6 Responder | Citar Responder | Citar

Paulo Adriano

vc pode estouNo a classe it converter?????????? I find myself strongly over doand love learning on this topic,and melted it a de todos Ol, nocolocar ai possuo mais esteo css ao pickList, estou usando exemplo bit leaving conseguindo aplicar projeto, mas abaixo segue um template sam, resin on componentes que uso os outrosthe bottom of the part;2esto com seus respectivos estilos, mas o no blog.est converter. Caso tenha dvidas h um post sobre converters picklist sem cores e efeitos. O que pode ser? @FacesConverter(value="jogadorConverter") public class JogadorConverter implements Converter { @Override public Object getAsObject(FacesContext context, UIComponent component, String value) { JogadorDAO jogadorDAO = new JogadorDAO(); Jogador jogador = null; if ((value != null) && (!value.equals(""))) { try { jogador = jogadorDAO.buscarPorId(Long.valueOf(value)); } catch (SQLException ex) { Logger.getLogger(JogadorConverter.class.getName( )).log(Level.SEVERE, null, ex); } } return jogador; } @Override public String getAsString(FacesContext context, UIComponent component, Object value) { Long retorno = null; if (!(value == null)) { Jogador jogador = new Jogador(); jogador = (Jogador) value; retorno = jogador.getId(); } return retorno.toString(); } }

Benigno carlos Sales

14/08/2011 s 19:20 | #7 16/08/2011 s 00:32 | #8 Responder | Citar Responder | Citar

candidoareas Voc poderia colocar o cdigo do converter? Obrigado. Eu ja poste, olhe nos comentrios. ndido

23/09/2011 s 15:34 | #9 Responder | Citar

Benigno Sales

2.

Vagner J Ol, Santos Estou a 2 meses tentando realizar este seu exemplo, preciso aprender isso o mais rapido possivel e, conto com sua ajuda! Peo que, se possivel enviar o codigo da aplicao. Dsede j, agradeo! Vagner J Santos

Deixe uma resposta Escreva o seu comentrio aqui...