FACULDADE DE TECNOLOGIA SENAC GOIÁS PROGRAMAÇÃO PARA INTERNET TUTORIAL DE APLICAÇÃO JSF DESENVOLVIDO COM A FERRAMENTA ECLIPSE LUNA NOME DO PROJETO: CadastroWeb ALUNOS: Fabio Henrique, Murillo Victor
TUTORIAL APLICAÇÃO JSF Na img 01 será feita a configuração do servidor Tomcat. Na guia Servers clique no link: No servers are avaliable. Clik this link to create a new servers. Selecione o Servidor desejado (Tomcat 8.0) e clique em Next. Img 01
Ainda na guia New Server, deixe seu projeto igual à img 02. Em seguida clique em Next. Img 02 Clique duas vezes no Servidor para abrir a guia Overview. Selecione a segunda opção: Use Tomcat instalation, para salvar suas alterações no servidor. Salve seu projeto. img 03
Clique com o botão direito do mouse encima do nome do projeto, em seguida clique em New, na próxima janela clique em Maven Project img 04 Na guia New Maven Project, preencha os campos conforme a img 05, em seguida clique em Next. Img 05
Selecione o campo Create a simple project. img 06 Na img 07 será feita a configuração do pom.xml Clique duas vezes no arquivo pom.xml para fazer as configurações necessárias. img 07
Deixe o arquivo pom.xml igual à img 08. img 08 Clique em Project Facets, em seguida marque a opção JavaServer Faces. img 09
Em seguida, clique em Futher configuration available. Img 10 Deixe seu projeto igual à img 11 e clique em OK. img 11
Volte no arquivo pom.xml e adicione as Dependencies (Dependencias) ao código. Salve seu projeto. img 12 Clique com o botão direito do mouse encima do nome do projeto, em seguida clique em Maven e Update Project, para atualizar o projeto. img 13
Clique em Force Update e, em seguida, clique em OK. img 14 Com o POM.XML configurado acesse o arquivo WEB.XML localizado dentro da pasta WEB-INF, e configure de acordo com a figura abaixo. Img 15
Após esse processo, iremos criar as classes Java e as páginas xhtml. Antes de adicionar as classes, temos que criar o pacote (package) que elas serão inseridas. Clique com o botão direito sobre o projeto, NEW, PACKAGE, conforme a imagem abaixo. Img 16 Após disso clique em defina um NOME para o pacote e clique em FINISH. Depois do pacote criado iremos inserir as classes Java. Nosso projeto irá contar com as seguintes classes: Bean Cadastro Cadastro CadastroDAO ConnectionFactory ICadastroDAO (interface) Para adicionar as classes, clique com o botão direito sobre o pacote, NEW, CLASS. Defina o nome das classes e clique em FINISH, como a figura abaixo
Img 17
Estrutura das classes CadastroDAO Img 18 BeanCadastro Img 19
ConnectionFactory Img 20 Cadastro Img 21
ICadastroDAO Img 22 Após as classes criadas, iremos adicionar ao projeto as páginas.xhtml que são as páginas WEB do nosso projeto. Para adicionar as páginas, clique com o botão direito sobre o projeto, NEW, HTML FILE; Defina um nome para a página e clique em FINISH conforme a figura abaixo Img 23
O nosso projeto irá conter as seguintes páginas.xhtml: INDEX.XHTML Página inicial do Projeto, cuja a estrutura é a seguinte: Img24 CADASTRAR.XHTML Página responsável por cadastrar novos usuários no Banco de Dados, cuja a estrutura é a seguinte: Img 25
EDITAR.XHTML Página responsável pela edição dos usuários já cadastrados, cuja a estrutura é a seguinte: Img 26 LISTAGEM.XHTML Página responsável por listar todos os usuários já cadastrados, cuja a estrutura é a seguinte: Img 27
MASTER_LAYOUT.XHTML Página responsável pelo Layout de todas as páginas, cuja a estrutura é a seguinte: Img 28 Após das páginas criadas devem ser definidos os CSS que serão utilizados nas páginas, todos estes estilos devem ser definidos no arquivo STYLES.CSS como a imagem abaixo: Img 29
A estrutura final do projeto é como a figura abaixo: Img 30
Quando executar o projeto as páginas serão as seguintes: INDEX.XHTML Img 31 CADASTRAR.XHTML Img 32
EDITAR.XHTML Img 33 LISTAGEM.XHTML Img 34