Continuação... Criando a Interface e adiante

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

Um pouco sobre MVC Modelo (model): dados da aplicação, regras de negócio 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...)

Vamos à prática - Uma classe do modelo Utilizaremos a classe Curso, 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

Vamos à prática - Uma classe do modelo

Criando o Controlador (Controller) 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 Controlador (Controller)

Criando o controle para cadastro de cursos

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 Aplication: 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 Nosso curso tem dois atributos: codigo (atribuído automaticamente) nome Vamos criar o campo para o usuário preencher o nome do novo curso

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 jsf Vamos incrementar nosso componente

Componentes jsf Vamos criar um botão de ação

Processando o evento Vamos criar um método 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

Gerenciando Cursos (Cadastrar, Alterar, Excluir, Consultar) Já vimos como cadastrar um novo curso (inserir o objeto no banco) Agora melhorar nossa tela para listar os objetos cadastrados, bem como poder alterá-los e exclui-los Utilizaremos um componente DataTable

Listando Cursos Cadastrados Já temos o método ListarTodos( ) na classe DAO que nos retorna uma lista com todos os objetos cadastrados no banco Precisamos uma lista no controlador para receber estes objetos

Listando Cursos Cadastrados No controlador:

Listando Cursos Cadastrados No xhtml:

Listando Cursos Cadastrados Criando as colunas:

Excluindo Cursos Criando as colunas com botões de comando:

Excluindo Cursos Incrementando nosso código: confirmação

Excluindo Cursos Incrementando nosso código: criando a confirmação

Alterando Cursos Criando as colunas com botões de comando: Vamos abrir um popup para editar o curso

Alterando Cursos Veja o código no GitHub

Alterando Cursos Enquanto isso, no controlador

Navegação entre páginas Navegação por link: coloca-se o nome do arquivo xhtml <h:link outcome="cursogerenciar" value="gerenciar cursos" /> Se estiver dentro de uma pasta <h:link outcome="curso/cursogerenciar" value="gerenciar cursos" /> Para retornar ao diretório acima <h:link outcome="/index" value="sair" />

Mapeando Relacionamentos Em muitos casos, objetos estão relacionados com outros objetos No nosso exemplo, um Curso possui várias disciplinas e Disciplina pertence a um Curso Podemos mapear os relacionamentos por meio de anotações

Mapeando Relacionamentos Curso 1 n Disciplina

Mapeando Relacionamentos Um curso tem n disciplinas

Mapeando Relacionamentos Várias disciplinas pertencem a um Curso (este código pode ser visto em modelo.curso)

Mapeando Relacionamentos Fazendo isso: Quando recuperarmos (consulta) uma disciplina, ela já tem o curso correspondente Quando recuperarmos um curso, ele traz todas as disciplinas pertencentes a ele

Componentes de seleção Alguns componentes exigem um tratamento diferente, como SelectOneMenu e SelectOneRadio

Componentes de seleção Criando um SelectOneMenu O value é o objeto no controlador que contém a seleção

Componentes de seleção É preciso criar uma lista de opções (selectitem) A lista pode estar vinculada a uma lista no controlador (cursos é uma List com todos os cursos)

Componentes de seleção 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 curso/cursomatricular.xhtml)

Componentes de seleção No entanto: o que aparece na tela é texto Para manipularmos o item da lista como objeto é necessário criar um converter (uma classe que converte texto para objeto e objeto para texto) Um converter é uma classe que herda de Converter e implementa seus métodos abstratos

Criando um converter (você pode ver o código completo em util.cursoconverter.java)

Criando um converter Após criado, adicionamos o converter ao componente

continua...