sábado, 17 de novembro de 2012
Arquivo Cliente.xhtml
Nome do arquivo Cliente.xhtml
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.prime.com.tr/ui"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<title>Cliente</title>
</h:head>
<h:body>
<h:form id="form">
<p:panel header="CLIENTE">
<p:messages />
<h:panelGrid columns="2">
<h:outputLabel value="NOME:" for="nome" />
<p:inputText id="nome" label="nome" value="#{clienteBean.cliente.nome}" maxlength="40" size="40" />
<h:outputLabel value="EMAIL:" for="email"/>
<p:inputText id="email" label="email" value="#{clienteBean.cliente.email}" maxlength="40" size="40"/>
<p:commandButton id="btnSalvar" value="SALVAR" actionListener="#{clienteBean.salvar}" update="form" />
</h:panelGrid>
<!--criando minha tabela, incluido no value a lista de cliente, definino um variavel de acesso para cada registro, para acessar um unico registro-->
<p:dataTable id="tabela" value="#{clienteBean.clientes}" var="cli" emptyMessage="Nenhum registro incluido." paginator="true" rows="10">
<!-- Definindo o cabeçalho da Tabela-->
<f:facet name="header">
Lista de Clientes
</f:facet>
<!--Criando uma coluna para receber um determinando dado que tem em um objeto da nossa lista, nesse caso nome de cliente-->
<p:column headerText="NOME" style="text-align: center">
<!--Aqui onde acesso o objeto cli.nome e apresentamos na tabela, e assim com os seguintes-->
<h:outputText value="#{cli.nome}" />
</p:column>
<p:column headerText="E-MAIL" style="text-align: center">
<h:outputText value="#{cli.email}" />
</p:column>
<p:column headerText="ALTERAR - EXCLUIR" style="text-align: center">
<!--Abaixo o botão editar com uma Action do nosso metodo editar que criamos no Bean-->
<p:commandButton action="#{clienteBean.editar}" value="EDITAR" title="Editar" ajax="false" >
<!-- Abaixo temos o setPropertyActionListener que é utilizado para pegar o objeto cli e setar no objeto cliente la no nosso bean, para editarmos-->
<f:setPropertyActionListener value="#{cli}" target="#{clienteBean.cliente}" />
</p:commandButton>
<!-- Abaixo temos o botão excluir com a propriedade onclick contendo o nome do modal e acessando um método de abri-lo que é o show, também existe o hide que é para feixa-lo.-->
<p:commandButton value="EXCLUIR" title="Excluir" onclick="confirmation.show()" style="margin-left: 5px" >
<!-- Abaixo temos o setPropertyActionListener que é utilizado para pegar o objeto cli e setar no objeto cliente la no nosso bean, para posteriomente excluirmos-->
<f:setPropertyActionListener value="#{cli}" target="#{clienteBean.cliente}" />
</p:commandButton>
</p:column>
</p:dataTable>
</p:panel>
</h:form>
<!-- Abaixo temos um modal de confirmação de exclusão repare que ele é fora do form principal, pois se colocarmos dentro podemos ter alguns problemas com isso.-->
<h:form id="dlg">
<p:confirmDialog message="Deseja realmente excluir este registro?" hideEffect="explode" header="Aviso" severity="alert" widgetVar="confirmation" modal="true">
<!--caso seja sim chamo o metodo excluir, e fecho o modal com o oncomplete, tenho o process que estou dizendo para processar o form, e update para atualizar a tabela-->
<p:commandButton id="btnSim" value="Sim" oncomplete="confirmation.hide();" actionListener="#{clienteBean.excluir}" process="@form" update="form:tabela" />
<!--caso seja não somente fecha o modal-->
<p:commandButton id="btnNao" value="Não" onclick="confirmation.hide();" type="button"/>
</p:confirmDialog>
</h:form>
</h:body>
</html>
Assinar:
Postar comentários (Atom)
Nenhum comentário:
Postar um comentário