Hoje vamos inserir o visual no projeto que construímos no outro post, vamos utilizar a suite de componentes Primefaces, que além de ser bastante completa, é open source, possui uma comunidade muito ativa e componentes visuais fantásticos veja no showcase , vamos lá:

1º – Baixe a biblioteca.

2º – Vá até sua pasta do projeto, ex: C:\Users\Thiago\Documents\NetBeansProjects\Teste, crie uma pasta chamada “lib”, o porque disso: assim você irá colocar todas suas bibliotecas do projeto nessa pasta e desta forma quando disponibilizar o projeto a outra pessoa, as bibliotecas estarão disponíveis junto, isso é uma dica, continuando vamos copiar nossa biblioteca que acabamos de fazer download e colar nessa pasta “lib”.

Pasta lib

3º – Voltamos ao NetBeans e incluiremos essa biblioteca no projeto, clique com o botão direito sobre a pasta Biblioteca e vá em “Adicionar JAR/Pasta” e procure a pasta “lib” e selecione a do “primefaces-2.2.jar”.

– Ao expandir a pasta Biblioteca ficará assim:

4º – Agora temos que declarar o primefaces em nossa View(tela) para fazer uso dos componentes.

-Abra a Index.xhtml logo no inicio veremos tag´s xml que atribuem uma letra para acesso e a qual biblioteca ela se refere, temos já “h” e o “f” que se referem ao Facelets e Core do Jsf, logo abaixo vamos declarar o primefaces.

Código:


<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">

5º –  Agora iremos mudar nossos componentes ao invés da tag “h” utilizaremos a “p” como configuramos anteriormente que refere-se ao primefaces(obs. Mudaremos só para os compontes que o primefaces possui, nesse caso inputText, message, commandButton, dataTable, etc.) para saber quais componentes que o primefaces possui veja o showcase:

Principais mudanças:

//coloquei um id no panelGrid para usar no botão enviar
<h:panelGrid columns="3" id="grid">

// Botão Enviar antes era assim:
<h:commandButton id="btnE" value="Enviar" type="submit" action="#{pessoaMB.salvarPessoa}" />

// agora com o pimefaces precisamos adiconar algumas tag´s nele o process="@form" que irá processar o formulário ao ser clicado, e o update="form:tablePessoa grid" que nesse caso estou atualizando minha tabela, e o grid que é meu panelGrid essas duas mudaças é necessário para o funcionamento

<p:commandButton id="btnE" value="Enviar" type="submit" action="#{pessoaMB.salvarPessoa}"  process="@form" update="form:tablePessoa grid" />

Código completo:

</pre>
<pre><?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">
<h:head>
<title>Cadastro</title>
</h:head>
<h:body>
<h:form id="form">
<h:panelGrid columns="3" id="grid">
<h:outputLabel value="Nome:"/>
<p:inputText id="nome" value="#{pessoaMB.pessoa.nome}" size="20"  required="true" requiredMessage="Campo Obrigatório"/>
<p:message for="nome" />

<h:outputLabel value="Endereço:"/>
<p:inputText id="end" value="#{pessoaMB.pessoa.endereco}" size="20" required="true" requiredMessage="Campo Obrigatório"/>
<p:message for="end" />

<h:outputLabel value="Número:"/>
<p:inputText id="nro" value="#{pessoaMB.pessoa.numero}" size="20" />
<p:message for="nro" />

<h:outputLabel value="Telefone:"/>
<p:inputText id="tel" value="#{pessoaMB.pessoa.telefone}" size="20" />
<p:message for="tel" />

<h:outputLabel value="Cidade:"/>
<p:inputText id="mun" value="#{pessoaMB.pessoa.cidade}" size="20" required="true" requiredMessage="Campo Obrigatório"/>
<p:message for="mun" />

<p:commandButton id="btnE" value="Enviar" type="submit" action="#{pessoaMB.salvarPessoa}"  process="@form" update="form:tablePessoa grid" />
<p:commandButton id="btnL" value="Limpar" type="reset"/>

</h:panelGrid>

<h:panelGrid>
<p:dataTable id="tablePessoa" value="#{pessoaMB.pessoaLista}" var="p" rows="10" emptyMessage="sem registros" paginator="true" >
<p:column>
<f:facet name="header">
<h:outputText value="NOME" />
</f:facet>
<h:outputText value="#{p.nome}"/>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="ENDEREÇO" />
</f:facet>
<h:outputText value="#{p.endereco}"/>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="NÚMERO" />
</f:facet>
<h:outputText value="#{p.numero}"/>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="TELEFONE" />
</f:facet>
<h:outputText value="#{p.telefone}"/>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="CIDADE" />
</f:facet>
<h:outputText value="#{p.cidade}"/>
</p:column>
</p:dataTable>
</h:panelGrid>
</h:form>
</h:body>
</html>

Resultado:

– Concluindo o projeto mudamos somente  o Index.xhtml,  Podemos também incluir temas diferentes, o primefaces disponibiliza vários, é fácil adicionar:

1º – Escolha um tema:

2º – Faça o download e salve na pasta que criamos “lib”, e siga os mesmos passos que fizemos ao adicionar a biblioteca do primefaces.

3º – No projeto temos uma pasta chamada WEB-INF, dentro dela possui um arquivo chamado “web.xml” abra ele, temos opções no início dele, clique em xml e teremos suas definições antes da ultima linha “</web-app>” desse arquivo adicione o seguinte código:


<context-param>
 <param-name>primefaces.THEME</param-name>
 <param-value>nomedotema</param-value>
 </context-param>

coloque o nome do tema sem espaços e sem a versão.

eu usei o tema Humanity, veja como ficou:


<context-param>
 <param-name>primefaces.THEME</param-name>
 <param-value>humanity</param-value>
 </context-param>

Resultado:

Bom mais um post, espero que esteja fácil para compreender se alguém tiver sugestões pode me mandar, e dúvidas postem que iremos responder.

Download Projeto.

Anúncios