Tabela predefinida de exemplo.
Neste laboratório veremos um exemplo simples mostrando como utilizar o componente DataTable, este elemento nos permite vincular uma tabela de dados a nossa página assim:
Para este primeiro exemplo, apenas o componente previamente preenchido será vinculado de nossa classe de bean, posteriormente será mostrado como manipular suas informações dinamicamente.
Inicialmente vamos criar um projeto JSF com a seguinte estrutura:
Como podemos ver, são criadas 2 classes java, uma corresponde à classe pessoa que nos permite processar as pessoas que vamos mostrar na nossa tabela e a outra ao bean que nos permitirá gerir a nossa tabela com os respetivos colunas e registros.
A classe Person.java nos fornece os dados básicos da pessoa que vamos mostrar na tabela, aqui adicionamos os métodos set e get correspondentes, bem como um construtor com parâmetros para preencher pessoas diretamente.
A classe TablaBean.java refere-se a tabela e a gestão de pessoas nela, os registros que são exibidos são armazenados no tipo de pessoa ArrayList que para efeito deste guia é preenchido no construtor.
No index.xhtml criamos o componente DataTable ao qual associamos a lista de pessoas diretamente no valor e nas respectivas colunas os atributos do bean que é referenciado em var=”data”, sendo data o elemento que representa os dados do objeto Pessoa em cada linha da tabela.
Ao executá-lo teremos algo assim
Como podemos ver, as informações são apresentadas no modo de tabela, pois ainda não vinculamos os estilos CSS, apreciamos apenas a estrutura em linhas e colunas sem nenhum tipo de design, porém podemos adicionar uma propriedade “border” à tabela e uma margem tendo algo assim:
Finalmente sabemos que podemos fazer uso de
Exemplo de gerenciamento de dados em DataTable.
Nesta seção continuaremos com o exemplo anterior onde veremos como manipular os dados da tabela para realizar processos comuns como registrar, modificar ou deletar informações.
Adicionar pessoas.
Para cadastrar pessoas, modificaremos nossa página index.xhtml à qual vincularemos o formulário de cadastro de pessoas. Fazemos isso vinculando os componentes de entrada e seleção em um painel de grade devidamente associado ao objeto “minhaPessoa” para o qual os diferentes dados são enviados .cadastro atributos, então é associado um botão que chama um método “addPerson()” que permitirá que uma nova pessoa seja cadastrada em nosso sistema.
Como vemos esses novos elementos são adicionados antes do DataTable obtendo um resultado como este:
Depois de modificar o índice, vamos fazer as alterações necessárias na classe TableBean.java, pois neste exemplo continuaremos usando o nível de escopo padrão, então vamos tornar a lista de pessoas estática para que possa ser manipulada sem problemas, adicionalmente eliminaremos o preenchimento da lista já que a ideia é poder cadastrar as pessoas através de um formulário de inscrição.
Como podemos ver ao definir a lista como estática criamos sua instância no nível da classe, não fazemos isso no construtor pois este será chamado em diferentes ocasiões pelo nosso jsf o que causaria uma nova instância da lista o que faria perdemos a informação que poderia conter.
Adicionalmente, adicionamos um objeto do tipo Person para poder gerenciar os dados cadastrais e adicionamos o método “agregarPersona()” que permite adicionar um novo elemento à lista e é chamado a partir do botão jsf, posteriormente geramos uma nova instância do objeto “minhaPessoa” que permitirá a limpeza da ficha cadastral.
Ao executar o sistema veremos o seguinte comportamento:
Inicialmente o formulário está vazio e o cabeçalho da nossa tabela também é apresentado mas sem nenhum conteúdo (lembre-se que eliminamos o preenchimento da lista), para que não mostre o cabeçalho quando ainda não houver pessoas cadastradas, então usamos o propriedade “rendered” onde validamos que o tamanho da lista é maior que zero, caso contrário não deve mostrar os cabeçalhos. (O funcionamento desta propriedade será discutido em detalhes posteriormente)
À medida que adicionamos pessoas, elas são armazenadas na lista e apresentadas no DataTable
Excluir Pessoas.
Após termos cadastrado com sucesso as pessoas em nossa lista, poderemos removê-las dela, para isso adicionaremos uma nova coluna de ações em nossa dataTable que conterá um link para o método “eliminarPerson()” que iremos criar em nosso feijão
Para isso modificamos o index.xhtml onde após a coluna “Sexo” adicionaremos a coluna “Ações”
Como podemos ver, utilizamos um componente
Posteriormente, na classe TablaBean.java, adicionamos o método “eliminarPersona()” que recebe como parâmetro o objeto pessoa que queremos excluir, isso corresponde a “dados” que enviamos do jsf, e é equivalente ao pessoa na linha que queremos deletar, para depois removê-la da lista.
Ao executar o sistema teremos o seguinte:
E toda vez que deletarmos um registro através do link correspondente, a tabela será atualizada
Editar Pessoas.
Após ter cadastrado e eliminado com sucesso as pessoas de nossa lista, podemos modificá-las, para isso modificaremos nossa tabela tornando-a editável quando quisermos atualizar algum dos dados, para isso utilizaremos novamente a propriedade “rendered” que irá mostre ou oculte as opções editáveis dependendo do que o usuário decidir.
Como podemos ver em cada uma das colunas, adiciona-se um componente
No nosso caso “data.edit” faz a chamada para uma variável booleana (edit) que adicionamos na classe Person, se a propriedade for true então mostrará o
O mesmo deve ser feito para as colunas profissão, salário e sexo respectivamente, onde ao invés de adicionar um
Da mesma forma, a propriedade renderizada é associada para mostrar o combo ou mostrar o rótulo dependendo do caso.
Posteriormente, a coluna “Ações” é modificada onde antes tínhamos apenas um link para “Excluir” agora adicionaremos mais 2 links, um para “editar” e outro para “salvar” as informações após editá-las.
Como podemos ver, agora existem 3 links para os métodos edit, save e delete respectivamente, porém edit e save possuem a propriedade renderizada que torna apenas 2 dos 3 links visíveis por vez (lembre-se que o renderizado contém true ou false dependendo sob condição) portanto, por padrão, o link para excluir sempre aparecerá, pois não possui a propriedade renderizada, enquanto editar e salvar nunca serão vistos juntos. ( permite adicionar um espaço entre os links)
Internamente a nível gráfico a dataTable ficaria assim:
Embora graficamente você possa ver todos os componentes juntos, é importante deixar bem claro que a propriedade renderizada só mostrará os componentes dependendo do valor verdadeiro ou falso no momento.
Após modificar o index.xhtml, agora é a vez de modificar a classe Person.java na qual é adicionada a propriedade “edit” utilizada pelo renderizado citado acima.
Como podemos ver, um novo atributo booleano está vinculado ao seu respectivo set e get. Além disso, para ajustar a estrutura do exercício, adicionamos a propriedade ao construtor com parâmetros, embora não seja mais usado neste momento em o exercício.
Desta forma, toda vez que renderizado=”#{data.edit}” for feito no index.xhtml, estaria chamando esta variável, que permitiria mostrar ou ocultar componentes dependendo do caso.
Finalmente, e já com as alterações anteriores, passamos a modificar a classe Bean onde devemos adicionar os métodos correspondentes ao excluir e salvar que são chamados do campo “Ações”.
Como podemos ver, o método editPersona() recebe um objeto pessoa (da chamada no jsf, assim como é feito no método delete) e sua propriedade “edit” é modificada enviando a ele o valor true, que irá permita que esse registro oculte o
Por outro lado, o método savePersona() se encarregará de mudar cada propriedade “edit” de todos os objetos da lista para false para que assim o dataTable seja restaurado com os valores das pessoas e não com os elementos editáveis.
Ao executar o sistema teremos o seguinte:
E ao pressionar editar o sistema muda para:
Como pode ser visto, quando o link de edição é clicado, os componentes editáveis são mostrados automaticamente enquanto os não editáveis são ocultados, da mesma forma o link de edição desaparece para dar lugar ao link de salvar conforme explicado acima.
E pronto!!!
Em meu blog e em meu canal venho compartilhando material sobre essa grande linguagem de programação, você encontra muitos artigos e vídeos do zeromostro como baixar as ferramentas necessárias para começar a programar, vamos subindo cada vez mais pelos conceitos básicos, passando pelos conceitos de programação orientada a objetospadrões, tópicosestruturas de dados, acesso a bancos de dados entre outros, até a construção aplicativos com interfaces de usuário.
Também você pode encontrar um curso do zero onde ensino a criar aplicativos mobile no android através de uma sequência de vídeo passo a passo que está em constante atualização.
E agora também iniciarei a sequência do zero onde entraremos no mundo do java Enterprise edition, mostrarei como configurar o ambiente de desenvolvimento e como criar suas primeiras aplicações web com java.
É por isso que convido você a visitar codejavu.blogspot.com, para visitar meu canal Cristian Henao e que eles estão muito cientes das novas sequências
Também pode lhe interessar.
Há algo que você queira adicionar ou comentar sobre esta entrada? fique a vontade para fazer….e se você gostou, te convido a compartilhar Y Inscreva-se entrando no botão “Participar deste site” para ficar sabendo de mais posts como este 😉