Primeiras aulas do curso Java EE parte 1: Crie sua loja online com CDI, JSF, JPA

Java EE parte 1: Crie sua loja online com CDI, JSF, JPA

Criando e Configurando o Projeto - Introdução

Introdução

Olá, seja bem-vindo ao curso de JavaEE!

Este é o primeiro módulo do curso que tem três partes. Esta é a introdução, mas já veremos bastante conteúdo.

Estudaremos JPA, CDI, JSF e iremos além com algumas novidades do JavaEE e outros detalhes das especificações. Depois deste, iremos para o segundo módulo, que será mais avançando e finalizaremos com o terceiro módulo indo mais a fundo no mundo JavaEE.

Espero que você goste!!!

Eu sou o Paulo Alves Júnior, e quero lhe ajudar a entender o mundo JavaEE. Um mundo que está cada vez mais simples, mas ainda com uma estrutura bem robusta.

Qualquer dúvida, acesse o fórum do Alura, onde poderemos nos encontrar.

E meu conselho desde já, é que você vá além! Continue estudando e pesquisando. Qualquer novidade conte para nós! Ficaremos muito felizes em saber onde o curso conseguiu lhe levar.

Criando e Configurando o Projeto - Criando o Projeto

Criando nosso projeto

Para nossos estudos, usaremos como base o projeto da Casa do Código. Além de ser um projeto bem conhecido, onde criaremos alguns cadastros, faremos o acompanhamento de livros, autores, preços e iremos mais a fundo com nosso projeto criando outras funcionalidades.

Para não perder tempo com a configuração inicial, faça o download do JBoss Forge 3.0.1.Final. Escolha seu sistema operacional, e faça o download para sua máquina.

JBoss Forge

Além disso, vamos rodar nosso projeto com o Application Server Wildfly. A versão que utilizaremos será a 10.0.0.Final. A versão mais atual pode ser outra, mas tenha cuidado ao pegar uma versão muito diferente, pois podemos ter problemas de configuração. Você pode baixar o Wildfly no endereço http://wildfly.org/downloads/

Após realizar o download, descompacte os arquivos. Renomeia a pasta que você descompactou o JBossForge para apenas forge, assim será mais fácil o acesso via terminal.

Abra o seu Terminal e navegue até seu workspace. Dentro do seu workspace, aponte o terminal para o local onde você descompactou o forge. No meu caso:

../forge/bin/forge

Pressione Enter e assim já estaremos dentro do JBoss Forge. Depois, podemos digitar comando forge que criarão nosso projeto inicial. Assim digite no terminal

project-new --named casadocodigo

Os seus passos podem ser um pouco diferentes do realizado no vídeo, dependendo da versão do Forge utilizada, mas o resultado final será muito próximo.

Ao ser perguntado pelo pacote, digite br.com.casadocodigo.

Na Version, pode deixar a que foi sugerida, apenas pressione ENTER.

No Final Name, também pressione apenas ENTER.

No Project Location, apenas pressione ENTER.

No Project Type, se WAR já estiver selecionado, apenas pressione ENTER. Senão, digite a opção para WAR.

No Build System, se MAVEN já estiver selecionado, apenas pressione ENTER. Senão, digite a opção para MAVEN.

Na opção de Stack, vamos apenas digitar ENTER sem selecionar nada.

Agora você pode abrir a pasta do seu Workspace e navegar até o projeto criado casadocodigo. Você vai perceber que temos apenas uma pasta src e um arquivo pom.xml. Dentro da pasta src, temos apenas a sub estrutura de pacotes que informamos na configuração acima.

Agora que já temos a base, vamos configurar nossa stack. Voltando ao Terminal, digite

faces-setup --facesVersion 2.2

Logo depois, configuramos para usar o CDI, que será o 1.1.

cdi-setup --cdiVersion 1.1

Agora conseguimos alguma configuração no nosso pom.xml. Seu arquivo deve estar parecido com o de abaixo:

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>br.com.casadocodigo</groupId>
  <artifactId>casadocodigo</artifactId>
  <version>1.0.0-SNAPSHOT</version>
  <build>
    <finalName>casadocodigo</finalName>
    <plugins>
      <plugin>
        <artifactId>maven-war-plugin</artifactId>
        <version>2.6</version>
        <configuration>
          <failOnMissingWebXml>false</failOnMissingWebXml>
        </configuration>
      </plugin>
    </plugins>
  </build>
  <packaging>war</packaging>
  <properties>
    <maven.compiler.source>1.8</maven.compiler.source>
    <maven.compiler.target>1.8</maven.compiler.target>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
  </properties>
  <dependencyManagement>
    <dependencies>
      <dependency>
        <groupId>org.jboss.spec</groupId>
        <artifactId>jboss-javaee-6.0</artifactId>
        <version>3.0.3.Final</version>
        <type>pom</type>
        <scope>import</scope>
      </dependency>
      <dependency>
        <groupId>javax.annotation</groupId>
        <artifactId>jsr250-api</artifactId>
        <version>1.0</version>
        <scope>provided</scope>
      </dependency>
    </dependencies>
  </dependencyManagement>
  <dependencies>
    <dependency>
      <groupId>org.jboss.spec.javax.faces</groupId>
      <artifactId>jboss-jsf-api_2.1_spec</artifactId>
      <scope>provided</scope>
    </dependency>
    <dependency>
      <groupId>javax.enterprise</groupId>
      <artifactId>cdi-api</artifactId>
      <scope>provided</scope>
    </dependency>
    <dependency>
      <groupId>javax.annotation</groupId>
      <artifactId>jsr250-api</artifactId>
      <scope>provided</scope>
    </dependency>
  </dependencies>
</project>

Com nosso pom.xml criado, podemos importar o projeto dentro do Eclipse. Entre no seu Eclipse e selecione a opção File > Import na caixa de busca, digite maven e já deve aparecer a opção Existing Maven Projects. Clique em Next e selecione o pom.xml, agora basta clicar em Finish.

Abra a view de Servers com o atalho Ctrl + 3 e digite Servers, pressione ENTER. Dentro da View de Servers, clique com botão direito do mouse, e vá em New > Server. Procure pela opção Wildfly 10, caso não apareça, procure por JBoss AS, Wildfly & EAP Server Tools. Precisamos instalar esse Tools, clicando em Next. Quando aparecer os termos para serem aceitos, selecione a opção I accept ... e depois em Finish. Quando o processo estiver finalizado, o Eclipse irá pedir para reiniciar. Reinicie seu Eclipse.

Com o Plugin instalado, podemos colocar nosso servidor. Mais uma vez na aba Servers, clique com botão direito do mouse, e vá em New > Server. Procure pela opção Wildfly 10 e clique em Next depois em Next novamente. Na caixa de Home Directory, precisaremos informar onde está a instalação do Wildfly. Clique em Browser e coloque a pasta descompactada do Wildfly. Na caixa de Configuration file, cliquem em Browse... e selecione o arquivo standalone-full.xml. Pressione em Next, então clique duas vezes no projeto casadocodigo que deve estar aparecendo para você, e ele estará dentro do servidor. Podemos finalizar a configuração do servidor, clicando em Finish.

Para que nosso projeto reconheça as bibliotecas que já estão dentro do JBoss, vamos precisar configurar. Clique com botão direto em cima do projeto, vá em Build Path > Configure Build Path selecione a aba Libraries e clique em Add Library. Procure pela opção Server Runtime e Next, depois selecione o Wildfly 10... que já configuramos e depois Finish.

Para verificarmos se realmente tudo está funcionando, precisamos criar um arquivo index.html dentro da pasta webapp. Clique na pasta webapp e pressione Ctrl + N e na caixa de busca, digite HTML. Vá em Next e dê o nome index. Clique em Finish. Abra o arquivo e vamos deixá-lo apenas com uma mensagem simples.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Casa do Código</title>
</head>
<body>

    <h1>Instalação do Wildfly foi realizada com sucesso!</h1>

</body>
</html>

Uma vez que tudo está certinho, podemos inicializar nosso servidor. Clique na aba Servers, botão direito em cima do Servidor Wildfly e selecione Start.

Quando o servidor terminar de imprimir no Console, vá para seu navegador preferido e digite: http://localhost:8080/casadocodigo. Se estiver vendo a mensagem Instalação do Wildfly foi realizada com sucesso!, seu projeto está configurado corretamente e já poderemos avançar.

Criando e Configurando o Projeto - Criando nosso primeiro formulário

Criando nosso primeiro formulário

Vamos criar mais um HTML para o cadastro. Começamos criando uma pasta para separar os arquivos, New > Folder e nomeamos de livro. Dentro dessa pasta, vamos criar um HTML New > HTML e vamos nomea-lo de form.html. Clicamos em Next, e procuramos uma opção chamada New Facelet Composition Page. Facelets é o framework que cuida dos templates do JSF, e clique em Finish. Vamos deixar apenas a estrutura abaixo:

<!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://xmlns.jcp.org/jsf/html"
    xmlns:f="http://xmlns.jcp.org/jsf/core">

</html>

Nesse curso, não estudaremos as coisas básicas do JSF, iremos detalhar apenas o que é um mais avançado ou um pouco diferente do padrão do JSF.

Vamos começar criando o form, e dentro dele colocamos um Label e um InputText para a entrada do texto, conforme abaixo:

<!-- Mantém o código de abertura do html acima -->
    <h:form>
        <div>
            <h:outputLabel value="" />
            <h:inputText />
        </div>
    </h:form>
<!-- Fecha o html abaixo -->

Alguns campos que são importantes quando tratamos de cadastro de livro, são eles: Título, Descrição, Número de Páginas e o Preço.

Vamos duplicar os dados, selecionando o que queremos copiar, e pressionando (Alt + Ctrl + Up / Down). Se no seu sistema operacional não funcionar, basta copiar e colar os campos.

Nomeamos cada um dos <h:outputLabel /> com os quatro campos que citamos acima. E ao final de cada formulário, sempre temos um botão de confirmação. Assim, vamos colocar um botão com <h:commandoButton /> e colocar o value dele para Cadastrar conforme abaixo:

        <div>
            <h:outputLabel value="Título" />
            <h:inputText />
        </div>
        <div>
            <h:outputLabel value="Descrição"/>
            <h:inputTextarea />
        </div>
        <div>
            <h:outputLabel value="Número de Páginas"/>
            <h:inputText />
        </div>
        <div>
            <h:outputLabel value="Preço"/>
            <h:inputText  />
        </div>
        <h:commandButton value="Cadastrar" />

Além disso, precisamos renomear nossa página para o padrão do JSF, assim, feche o arquivo form.html e renomei-o para form.xhtml. Como o XHTML já é reconhecido pelo servidor como arquivo JSF, já podemos subir o servidor e realizar o primeiro teste. Quando acessamos http://localhost:8080/casadocodigo/livro/form.xhtml temos o seguinte resultado.

Toda tela jsf, em geral possui uma classe Java por trás que chamamos de BackBean. Por isso, vamos criar uma classe, clicando em cima da pasta src/main/java pressione Ctrl + N, escolha a opção Class e dê o nome de AdminLivrosBean. Vamos colocá-la no pacote br.com.casadocodigo.loja.beans.

Dentro dessa classe, criaremos o método salvar da seguinte forma:

public class AdminLivrosBean {

    private Livro livro;

    public void salvar() {
        System.out.println("Livro salvo com Sucesso!");
    }

}

Os dados do livro no JSF são associados diretamente aos atributos do bean, assim vamos criar um atributo em nossa classe, como sendo private Livro livro;. Nesse ponto, recebemos um erro, pois a classe Livro ainda não existe. Vamos criá-la conforme abaixo, e já gerar os getters e setters da classe com o atalho Ctrl + 3 > ggas.

public class Livro {

    private String titulo;
    private String descricao;
    private BigDecimal preco;
    private Integer numeroPaginas;

    // getters e setters aqui!

    @Override
    public String toString() {
        return "Livro [titulo=" + titulo + ", descricao=" + descricao + ", preco=" + preco + ", numeroPaginas="
                + numeroPaginas + "]";
    }

}

Já criamos também o toString() do Livro, com o atalho Ctrl + 3 e na caixa de busca, digite toString. Selecionamos a opção Generate toString() e clicamos em selecionar todos os campos, logo depois em Finish.

Vá para a classe AdminLivrosBean, e também crie os getters e setters do Livro, com o atalho Ctrl + 3 > ggas como já estamos acostumados.

Uma vez que temos a classe Livro e também AdminLivrosBean, vamos relacioná-los em nossa tela pelos atributos value do xhtml utilizando a ExpressionLanguage do JSF.

<div>
    <h:outputLabel value="Título" />
    <h:inputText value="#{adminLivrosBean.livro.titulo}" /> <!-- NOVIDADE NO VALUE AQUI -->
</div>
<!-- REPITA O PROCESSO PARA OS DEMAIS INPUTS -->

Para vermos os resultados na tela, basta ir na view Servers abrir na setinha do servidor para que possamos ver nosso projeto. Clicamos em cima do projeto com o botão direito vamos na opção Full Publish que reenviará os nossos arquivos novos para o servidor. Assim, podemos testá-los na tela.

Ao acessar a aplicação no navegador, recebemos o erro: Target Unreacheable, identifier 'adminLivrosBean' resolved to null. Pois o JSF ainda não exerga nosso Bean. Para que o JSF veja nosso Bean, temos que utilizar o CDI. Que veio no JavaEE 6 e ficou mais poderoso no JavaEE 7.

Assim, para que o CDI libere nosso Bean para a tela, utilizamos a annotation @Named em cima do Bean. Agora o JSF conseguirá ver nosso Bean, com o nome default adminLivrosBean, ou seja, apenas a primeira letra ficou minúscula. Vamos realizar o Full Publish novamente e poderemos testar.

Ao preencher o formulário e tentar cadastrar, recebemos o seguinte erro: ... value="#{adminLivrosBean.livro.titulo}": Target Unreacheable, identifier 'adminLivrosBean' resolved to null. O que aconteceu agora é que, ao tentar pegar o título, o livro veio nulo. Por isso, vamos fazer private Livro livro = new Livro() lá no nosso Bean, e dessa forma evitamos receber esse null. Realizamos Full Publish novamente, e ao preencher os dados e clicar em Cadastrar, dessa vez os dados sumiram e não obtivemos erros.

Isso ocorreu pois nosso Bean agora está sendo gerenciado pelo CDI, e o CDI por default possui um tempo de vida muito curto, no caso, sempre que o JSF precisa do Bean, ele cria uma nova instância e entrega ao JSF. Porém, para que os dados fiquem vivos durante toda a requisição do usuário, precisamos que o CDI deixe ele vivo durante todo o Request, para isso, usamos a annotation @RequestScoped. Fique atento para utilizar o @RequestScoped correto, do pacote do CDI, que é javax.enterprise.context.RequestScoped. Ao realizar o Full Publish novamente, podemos testar o cadastro.

Dessa vez, os valores permaneceram, porém não obtivemos nenhum resultado no console, como era esperado. Pois precisamos "ligar" o botão Cadastrar com o método salvar do nosso Bean. Fazemos isso com o atributo action do commandButton, ficando assim:

<h:commandButton value="Cadastrar" action="#{adminLivrosBean.salvar}" />

Finalmente, realizamos Full Publish e ao preencher o form e clicar em Cadastrar, vemos no Console do Eclipse o resultado esperado.

Fizemos uso do CDI e começamos com algo simples, mas vamos fazer de fato nosso cadastro funcionar.

Sobre o curso Java EE parte 1: Crie sua loja online com CDI, JSF, JPA

O curso Java EE parte 1: Crie sua loja online com CDI, JSF, JPA possui 301 minutos de vídeos, em um total de 83 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!

  • 1127 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

  • 1127 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

  • 1127 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

  • 1127 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