Continuação...

Criando a Interface e adiante

Racepitulando1. Criar um projeto web: JavaServer Faces + Tomcat + Primefaces2. Criar um banco de dados Postgresql3. Adicionar os jars: javax.persistence + eclipselink + postgresql (driver)4. Criar o persistence.xml (arquivo de configurações)5. Criar a unidade de persistência (JpaUtil) 6. Criar a classe DAO (Data Access Object)

Recapitulando7. Criar as classes “entidades” - que terão dados persistidos8. A classes entidades devem:

a. implementar a interface Serializableb. ter a anotação @Entityc. ter um construtor sem argumentosd. implementar os métodos hascode( ), equals( ), toString( )e. ter a anotação @Id para indicar o identificadorf. ter a anotação @Column…

g. campos private com gets e sets … 9. Registrar a classe no persistence.xml

10. Testar! JUnit é útil, acreditem!

Entidades com Relacionamentos● Algumas entidades (classes) estão relacionadas entre si● Sistema de exemplo:

Mapeando relacionamentos● Se um objeto do tipo Veiculo pode estar em vários objetos

do tipo Emprestimo…● Relacionamento UM PARA MUITOS…● Na classe Veiculo

Mapeando relacionamentos● Se um objeto do tipo Usuario pode estar em vários objetos

do tipo Emprestimo…● Relacionamento UM PARA MUITOS…● Na classe Usuario

Mapeando relacionamentos● Se vários objetos do tipo Emprestimo podem ter um

mesmo objeto do tipo Veiculo...● Relacionamento MUITOS PARA UM…● Na classe Emprestimo

Mapeando relacionamentos● Se vários objetos do tipo Emprestimo podem ter um

mesmo objeto do tipo Usuario...● Relacionamento MUITOS PARA UM…● Na classe Emprestimo

Criando a Interface e etc...

Criando a interface● Para criar a interface utilizaremos

○ JavaServer Faces○ Biblioteca PrimeFaces

● Documentação de PrimeFaces

http://www.primefaces.org/showcase/

JavaServer Faces● JavaServer Faces

○ É um framework que tem o objetivo simplificar o desenvolvimento de interfaces para web

○ Fornece um conjunto de componentes para interação com o usuário

○ É baseado em eventos: o evento no cliente causa uma resposta do servidor

Aplicações web

Aplicações web com Java● Uma aplicação web é um programa que fica hospedado

em um servidor ● O usuário acessa o programa por meio do browser● O acesso aos sistemas é feito utilizando o modelo

request/response● O cliente solicita que uma ação seja realizada(request) e o

servidor a realiza e responde ao cliente (response)

Aplicações web com Java● No mundo Java os servidores são chamados de Servlet

Container● Exemplos de servidores:

○ Glassfish○ Tomcat○ JBoss○ etc

Aplicações web com Java● Neste curso, utilizaremos a biblioteca de componentes

PrimeFaces● Utilizaremos o modelo MVC - Model - View - Controller● A ideia por trás do MVC é a separação de conceitos● Separa-se a informação (e regras de negócio) da interface

com a qual o usuário interage

Um pouco sobre MVC

Ou...

Um pouco sobre MVC ● Modelo (model): dados da aplicação ● Visão (view): camada que

○ manipula os dados para exibição ○ exibe os dados

● Controlador: faz a mediação entre o modelo e a visão

(Nem todos concordam com isso...)

Criando o Controlador (Controller)

Vamos à prática - Uma classe do modelo ● Utilizaremos a classe Usuario, já criada:

○ Construtor sem argumentos○ Implementa a interface Serializable○ Atributos privados e métodos get e set para cada

atributo○ Anotação @Entity para relacionar com uma

tabela do banco○ Definição de uma chave primária

Criando o controle para cadastro de usuários

Criando o Controlador ● O controlador:

● Implementa a interface Serializable● Tem um construtor sem parâmetros● Fica “entre a tela e o modelo”

● Um controlador processa as requisições do usuário e devolve as respostas

Criando o controle para cadastro de usuários

Cuidado com null pointer

Criando o controle ● Dê um nome e estabeleça o escopo

Criando o controle ● Nome: opcional

○ Se não for dado, o padrão é o nome da classe com a primeira letra minúscula

● Escopo○ Tempo de vida do objeto (controlador)

Criando o controle ● Escopo

○ Request: o objeto “morre” a cada requisição○ View: o objeto vive enquanto a aplicação não mudar

de tela ○ Session: enquanto durar a sessão○ Application: enquanto a aplicação estiver

executando

Criando a tela● Nossas telas serão criadas em xhtml● Crie na pasta web do projeto (subpasta adequada)● Reaproveite o esqueleto de telas● É trabalhoso lembrar os detalhes ● Não se preocupe com aparência!! (por enquanto)

Criando a tela

Criando a tela - Arquivo xhtml

Criando um form● Sempre que houver entrada de dados na tela, os

campos devem estar dentro de um form

Criando um form● A classe Usuario tem três atributos:

○ codigo (atribuído automaticamente)○ nome○ unidade

● Vamos criar o campo para o usuário preencher o nome e unidade do novo usuário

Utilizando as tags do PrimeFaces● As tags dos componentes do PrimeFaces se iniciam

com <p: ● Um rótulo em PrimeFaces

● Componentes com uma linha terminam com />

Utilizando as tags do PrimeFaces● Componentes com outros aninhados

Utilizando as tags do PrimeFaces● Criando um campo para entrada de texto

Vinculando com o controller ● A vinculação com o controlador é feita por meio da

linguagem EL - expression language ● A EL utiliza os caracteres #{ }

Componentes: botão de comando ● Vamos criar um botão de ação

Processando o evento● Vamos criar um método no controlador para processar

o evento gerado pelo botão

Processando o evento● Vamos vincular o clique no botão ao método no

controlador

Retornando mensagem● Vamos adicionar um componente para exibir as

mensagens

Retornando mensagem● Vamos alterar o método no controlador para exibir

uma mensagem ao usuário

Retornando mensagem● É necessário dizer que queremos atualizar a tela (o

form) após o processamento da ação relativa ao botão

Incrementando os Componentes jsf ● Vamos incrementar nosso componente …

Navegação entre páginas

Navegação entre páginas● Por meio do componente link

● outcome → é a página destino● novoUsuario → é o nome do xhtml

Navegação entre páginas● Por meio de método no controlador

● return null → permanece na página● return menu → vai para menu.xhtml

Tabelas e outros componentes

Gerenciando Usuários (Cadastrar, Alterar, Excluir, Consultar)

● Já vimos como cadastrar um novo usuário (gravar o objeto no arquivo)

● Agora melhorar nossa tela para listar os objetos cadastrados, bem como poder alterá-los e excluí-los

● Utilizaremos um componente DataTable

Listando Usuários Cadastrados● Já temos o método listarTodos( ) na classe DAO que nos

retorna uma lista com todos os objetos gravados no arquivo

● Precisamos uma lista no controlador para receber estes objetos

Listando Usuários Cadastrados● No controlador:

Listando Usuários Cadastrados● No xhtml:

Listando Usuários Cadastrados● Cada coluna da tabela é um campo do objeto:

Excluindo Usuários● Adicionamos uma coluna com um link “excluir”

● Observe que há um método no controlador...

Excluindo Usuários● Incrementando nosso código: confirmação

● Observe que está fora da dataTable

Excluindo Usuários● No controlador...

Alterando Usuários

Alterando Usuários● Criando as colunas com link:

● Vamos abrir um popup para editar o usuário

Alterando Usuários● Vamos abrir um popup para editar o usuário

Alterando Usuários● Enquanto isso, no controlador

Outros Componentes

Componentes de seleção● Alguns componentes exigem um tratamento diferente,

como SelectOneMenu e SelectOneRadio

SelectOneMenu● Vamos cadastrar uma retirada de carro por um usuário

SelectOneMenu● Exibindo os veículos existentes (neste caso a placa)

Converter e sua necessidade● Tudo que é exibido em uma página html é texto● É preciso converter o texto para um objeto● No caso, a lista exibida no combo contém apenas as

placas dos veículos● Quando o usuário seleciona a placa, é necessário

recuperar o objeto correspondente

Converter e sua necessidade● Para isso criamos um converter

Converter e sua necessidade● Um converter é uma classe que implementa a interface

Converter

Criando o SelectOneMenu para Veiculos

Criando o SelectOneMenu para Veículos● O value é o objeto no controlador que contém a

seleção

Criando o SelectOneMenu para Veículos● É preciso criar uma lista de opções (selectItem)● A lista pode estar vinculada a uma lista no controlador

(veiculos é uma List com todos os veículos)

Criando o SelectOneMenu para Veículos● O itemValue é o valor que o componente contém

quando o usuário selecionar● O itemLabel é o que aparecerá na tela● var é uma “variável” para cada item da lista

(você pode ver este código em emprestarVeiculo.xhtml)

Controlador● Lembrando que tudo vinculado a um controlador…

Controlador● Sobre o método registrarEmprestimo( )

Programe aí