Primeiras aulas do curso Java e JSF 2 - II: Componentes ricos com Primefaces

Java e JSF 2 - II: Componentes ricos com Primefaces

Apresentação e teste de avaliação - Apresentação e teste de avaliação

Pré-requisitos

Olá alunos, bem-vindos ao segundo treinamento sobre JSF, nesse módulo iremos focar nos componentes do Primefaces, no que ele pode nos oferecer.

No primeiro curso focamos nas funcionalidades principais do JSF, vimos os componentes da especificação JSF, o ciclo da vida, template entre vários outros tópicos. Para aqueles que ainda não conhecem esse primeiro modulo sobre o JSF, segue o link:

Pré-requisito do curso Primefaces: https://cursos.alura.com.br/course/jsf

Apresentação do projeto a criar

Nesse curso vamos focar os componentes da biblioteca famosa Primefaces! Com ela, não só iremos melhorar a interface da nossa aplicação, como também melhoraremos a sua usabilidade.

Vou apresentar o projeto que criaremos nesse cursos e mostrar as telas já com Primefaces. Na página de login vemos um medidor de segurança de senhas, um menu para navegação e realizar o logout, máscaras nos campos, um calendário para selecionar a data, uma tabela paginada, onde podemos filtrar e ordenar os dados facilmente, além de uma nova página de vendas e diversas outras melhorias!

Para vocês terem uma ideia de como a nossa aplicação ficará após o uso do Primefaces, seguem algumas imagens:

Então, neste treinamento veremos como aproveitar esses componentes para melhorar o design, a usabilidade das nossas telas, da nossa aplicação. Mas antes, vamos preparar o nosso ambiente para darmos continuidade com o curso.

Teste de avaliação

Como o curso representa a continuação do curso anterior preparamos um pequeno teste, uma auto-avaliação. São perguntas do tipo múltipla escolha para verificar o conhecimento sobre a especificação JSF, mas não há nenhum problema de pular o capítulo ou não passar nas questões. O teste também pode ser visto como uma pequena revisão e lembrar de alguns pontos importantes do treinamento anterior.

Acreditamos que você deve ter no mínimo 8 acertos, mas novamente, nada o impede de continuar o treinamento sem ter passado nos testes.

Boa prova!

Começando com Primefaces - Introdução

Download do projeto

Você pode fazer o DOWNLOAD do projeto inicial. Esse projeto foi criado no primeiro curso sobre JSF.

Configurando o ambiente

Se você já tem o ambiente pronto, pois assistiu ao primeiro treinamento sobre JSF, você pode pular essa parte e seguir com o curso, caso você não tenha assistido o treinamento, vamos ajudá-lo a configurar o seu ambiente.

Nesse treinamento, utilizaremos como IDE a versão Java EE do Eclipse, você pode baixá-lo aqui. Após o download, você pode extrair o arquivo e começar a utilizá-lo. Como servidor, utilizaremos o Tomcat 8, basta baixá-lo e extrair o zip. Além disso, também utilizaremos o MySQL como banco de dados, mas para a aplicação funcionar, devemos criar o database livrariadb. Abra o console do MySQL e digite:

mysql> create database livrariadb;

Com o database criado, vamos criar o server no Eclipse. Na aba Servers, clique no link disponibilizado para criar um novo servidor. Na tela que abrir, selecione a versão 8 do Tomcat e clique em Next >. Clique em Browse..., selecione o diretório onde o Tomcat foi extraído e clique em Finish.

O próximo passo é importar o projeto inicial, você pode baixá-lo aqui. Com o download feito, importe o projeto no Eclipse, clicando em Import -> Existing Projects into Workspace, marque a opção Select archive file, selecione o zip baixado e clique em Finish.

Por último, não esqueça de associar a aplicação com o Tomcat, clicando nele com o botão direito, e selecionando Add and Remove.... Depois basta selecionar o projeto, clicar em Add > e depois em Finish.

Ótimo, configuramos o ambiente e estamos prontos para começar a utilizar o Primefaces.

Testando a aplicação

Podemos agora testar a aplicação, acessando o link http://localhost:8080/livraria/livro.xhtml. Repare que somos redirecionados para a página de login, pois precisamos estar logados para poder acessar as páginas da nossa aplicação. Tente fazer o login com qualquer usuário e senha, assim o JPA criará as tabelas para nós e poderemos inserir um usuário válido no banco.

Há um script que vocês podem baixar [aqui][5], nele há comandos SQL para popular o nosso banco. Execute esses comandos e volte para a aplicação, agora podemos fazer o login e acessar a aplicação utilizando o usuário **nico.steppat@caelum.com.br** e a senha 12345 (ou com algum outro usuário que você tenha criado).

Após isso, podemos dar uma olhada no código da aplicação. Na pasta WebContent, temos três páginas, autor, livro e login, todos eles são arquivos xhtml e utilizam o _template.xhtml. Na pasta WEB-INF temos as bibliotecas e os arquivos faces-config.xml, que é o arquivo de configuração do JSF, e web.xml.

Cada tela possui um bean associado, que delega para os respectivos modelos, que são entidades (as tabelas do banco são criadas baseadas nesses modelos).

No pacote dao, temos um DAO genérico e um específico para o usuário, que faz a query de autenticação, para descobrir se o usuário está no banco, além de ter uma classe para popular o banco e a classe JPAUtil, para inicializar o JPA.

Por fim, no pacote util, temos os dois phases listener, o LogPhaseListener monitora o ciclo da vida, as fases do JSF e o Autorizador, que faz com que a nossa aplicação sempre passe pelo login.

Com tudo configurado e apresentada a nossa aplicação, começaremos com o Primefaces a partir do próximo video!

Começando com Primefaces - Demo do Primefaces

Demo do Primefaces

Com o ambiente pronto e configurado, queremos estilizar a nossa aplicação, por exemplo, o ISBN tem um formato específico, então queremos colocar uma máscara no campo dele para facilitar o usuário a digitá-lo; colocar um calendário no campo de data de lançamento, entre outras funcionalidades... Mas aí você pode me falar que pode usar JavaScript, JQuery, CSS... Tudo isso para melhorar a aplicação. Mas aqui é um curso sobre JSF, a ideia é que um componente faça isso para nós!

O JSF por padrão só faz o básico "arroz com feijão", se quisermos algo a mais, precisamos utilizar componentes que estendem as funcionalidades do JSF. E uma das bibliotecas de componentes JSF que mais se destaca no mercado, é o Primefaces. Podemos acessar o seu site, e lá há uma sessão Demo, que demonstra todos os componentes disponíveis (e como utilizá-los) diretamente no navegador.

Mas antes de começar a experimentar esses componentes, vamos configurar o nosso projeto para utilizar o Primefaces. Primeiramente, temos que fazer o seu download, acessando esse link e procurando pela sessão Community Downloads. Lá baixaremos a versão mais recente, que na data de criação deste curso, é a versão 5.3. Feito o download, copie o arquivo jar para dentro da pasta WebContent/WEB-INF/lib.

Declaração do namespace

Pronto, agora podemos começar, e vamos começar pelo início, pela página login.xhtml. Como Primefaces é uma biblioteca de componentes, precisamos declarar o seu namespace, e o prefixo geralmente utilizado é o p, então vamos seguir esse padrão. Basta adicionar dentro da tag <html>, juntamente com os outros namespaces:

xmlns:p="http://primefaces.org/ui"

Os primeiros componentes do Primefaces

A ideia agora é utilizar cada vez mais os componentes do Primefaces. Vamos "primefacear" todo o conteúdo do formulário, começando pelo título "Login", ele passará a ser um <p:outputPanel>. Depois, o fieldset e legend, agora teremos um <p:fieldset>, que já tem um atributo legend, então podemos substituí-los. Após isso, a ideia é substituir todos os componentes padrões do JSF, que utilizam o prefixo h, pelo prefixo p, ou seja, o Primefaces não só define componentes novos, como também redefine os componentes padrões do JSF. A razão dele fazer isso é que o Primefaces dá "algo a mais" para esses componentes, pode ser que o componente já faça ajax, ou que já venha com um CSS aplicado, etc. Ou seja, não precisamos reaprender a API.

Então nosso formulário ficará assim:

<ui:define name="titulo">
    <p:outputPanel>Login</p:outputPanel>
</ui:define>

<ui:define name="conteudo">

    <p:messages globalOnly="true" />

    <h:form id="login">
        <p:fieldset legend="Login">
            <h:panelGrid columns="3">

                <p:outputLabel value="Email:" for="email" />
                <p:inputText id="email" value="#{loginBean.usuario.email}" required="true">
                    <f:passThroughAttribute name="type" value="email" />
                </p:inputText>
                <p:message for="email" id="messageEmail" />

                <p:outputLabel value="Senha:" for="senha" />
                <p:inputText id="senha" value="#{loginBean.usuario.senha}" required="true" >
                    <f:passThroughAttribute name="type" value="password" />
                </p:inputText>
                <p:message for="senha" id="messageSenha" />

                <p:commandButton value="Efetue Login" action="#{loginBean.efetuaLogin}" />
            </h:panelGrid>
        </p:fieldset>
    </h:form>
</ui:define>

Podemos acessar a página de login, e perceber que já há uma diferença notável na mesma. Podemos até efetuar login para ver se tudo continua funcionando normalmente... Mas não está! Ficamos clicando infinitamente no botão e nada acontece. O que está acontecendo?

Ajax por padrão

O botão do Primefaces já faz ajax por padrão, que não é um comportamento do commandButton padrão. Então, já que ele faz ajax por padrão, precisamos definir o que queremos submeter e quais partes da tela queremos renderizar, o que não estamos fazendo no momento, já que atualmente, quando clicamos no botão para efetuar login, só estamos submetendo o botão e não os campos do formulário. Então vamos mudar esse comportamento, para isso o Primefaces tem dois atributos, o process e o update. No process dizemos quais componentes queremos submeter, no nosso caso queremos submeter todo o formulário, então utilizaremos @form; e no update dizemos o que queremos atualizar na página, e no nosso caso também é o formulário, logo também terá como valor @form. Então o commandButton ficará assim:

<p:commandButton value="Efetue Login" action="#{loginBean.efetuaLogin}" update="@form" process="@form" />

Agora já podemos tentar fazer o login, mas opa... A nossa senha está aparecendo! Isso quer dizer que o passThroughAttribute não está funcionando, portanto vamos removê-lo e consultar novamente o demo do Primefaces para ver se ele nos oferece algum componente para substituí-lo. E no menu Input, vemos que há um Password, que nos oferece diversas opções, vamos utilizar o password com feedback, e olhando como utilizá-lo, vemos que, no nosso caso, basta trocar inputText por password e adicionar o atributo feedback="true":

<p:password id="senha" value="#{loginBean.usuario.senha}" feedback="true" required="true" />

Com isso, tudo volta a funcionar corretamente. Então o primeiro passo está concluído, o formulário de login já está utilizando o Primefaces. Nos próximos capítulos vamos focar nos outros formulários, então até lá!

O que aprendemos?

Sobre o curso Java e JSF 2 - II: Componentes ricos com Primefaces

O curso Java e JSF 2 - II: Componentes ricos com Primefaces possui 137 minutos de vídeos, em um total de 67 atividades. Gostou? Conheça nossos outros cursos de Java em Programação, ou leia nossos artigos de Programação.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

Aprenda Java acessando integralmente esse e outros cursos, comece hoje!

  • 1157 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

Premium

  • 1157 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$75
à vista R$900
Matricule-se

Premium Plus

  • 1157 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$100
à vista R$1.200
Matricule-se

Max

  • 1157 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$120
à vista R$1.440
Matricule-se
Procurando planos para empresas?
Acesso por 1 ano
Estude 24h/dia onde e quando quiser
Novos cursos toda semana