Primeiras aulas do curso Java EE parte 2: Sua loja online com HTML, REST e Cache

Java EE parte 2: Sua loja online com HTML, REST e Cache

Melhorando a UX da Administração - Introdução

Seja bem-vindo ao segundo módulo do curso de JavaEE.

Neste curso, estudaremos outras especificações e também especificações que já começamos a estudar no primeiro módulo. Veremos como usar Cache, Serviços Rest, mais de CDI e também mais de JSF e JPA, dentre outras bibliotecas que se integrarão as especificações que já estamos usando.

Teremos como resultado, chamadas de serviços externos à nossa aplicação e também faremos a exposição de serviços dentro de nossa aplicação e também teremos nosso carrinho de compras funcionando.

Esperamos que você aproveite esse curso e que compartilhe o que tiver aprendido a mais. Qualquer dúvida, basta postar no Fórum que faremos o possível para lhe ajudar.

Bons estudos e vamos logo começar.

Melhorando a UX da Administração - Melhorando nossa Área Administrativa

Se você ainda não tem o código que fizemos no primeiro módulo, pode baixar através do link https://s3.amazonaws.com/caelum-online-public/java-ee-webapp/alura-casadocodigo-modulo1-projeto-final.zip

Vamos começar melhorando nosso sistema. Já temos a Home e também o Detalhe do livro, mas nossa área de administração não está legal, temos apenas uma tabela comum na nossa lista e também nosso formulário está bem simples.

Para melhorar essa administração, faremos uso do Bootstrap que pode ser baixado em http://getbootstrap.com/getting-started/#download.

Quando baixar, descompacte e dentro da pasta descompactada você deve estar vendo a estrutura com três novas pasta, sendo elas css, fonts e js. Copei o conteúdo da pasta css baixada para dentro da nossa pasta src/main/webapp/resources/css. Faça o mesmo procedimento para a pasta js que também já temos em nosso projeto, dentro de src/main/webapp/resources/js. Já a pasta fonts que não temos ainda no projeto, copie a pasta inteira para src/main/webapp/resources.

Para utilizar, abra o arquivo lista.xhtml e dentro dele vamos fazer uso do Bootstrap. Dentro da tag <html>, adicione o código abaixo, mantendo o conteúdo existente dentro da tag <h:body>:

<h:head>
</h:head>

<h:body>

    <!-- Mantenha o código da lista aqui! -->

</h:body>

As novas tags <h:head> e <h:body> servem para que o JSF possa identificar corretamente onde é o cabeçalho e corpo da página. É importante usá-los ao invés dos normais HTML que podem gerar problemas no JSF.

Uma vez que estamos dentro do JSF, precisamos utilizar uma tag diferente para declarar nossos CSS. Essa tag é a <h:outputStylesheet>. Com ela, declaramos os atributos library como sendo a pasta onde estão nossos CSSs, e também o nome do arquivo com o atributo name. O JSF 2.2 já considera a pasta resources como sendo padrão, então não precisamos declará-la.

Se você for até o sistema (se seu servidor não estiver rodando, coloque-o para subir), perceba que tivemos uma mudança bem sutil até o momento.

Vamos para nossa tag <h:datatable> e dentro dela, vamos adicionar um atributo chamado class que servirá para definir as classes CSS que nossa tabela terá. No atributo class coloque os valores table table-bordered table-striped. Agora nossa tabela já estará bem melhor.

Caso você nunca tenha usado Bootstrap, basta acessar o site http://getbootstrap.com/css/ e no menu lateral direito, escolher quais tags você quer melhorar o css dele. Estamos usando a opção tables. Faça o teste com outros classes.

Uma outra vantagem do Bootstrap é poder aproveitar os templates formados que ele já possui. Acesse o endereço http://getbootstrap.com/examples/starter-template/ e com o botão direito do mouse, selecione a opção Exibir código fonte da página. Perceba que o template possui uma tag div como a seguir <div class="container">, então já vamos adicionar esse div logo abaixo da tag <h:body>. Antes do fechamento do </h:body> feche a div.

Vamos repetir as alterações que fizemos para a lista.xhtml também para o arquivo form.xhtml. Dentro do form.xhtml, você deve ter o resultado parecido com esse:

<h:head>
    <h:outputStylesheet library="css" name="bootstrap.min.css" />
</h:head>

<h:body>
    <div class="container">

        <!-- MANTER O CÓDIGO DO FORMULÁRIO AQUI -->

    </div>
</h:body>

Acesse o formulário e perceba que ele já está bem melhor e mais bem formatado.

Ainda vamos melhorar essa nossa administração nos próximos vídeos.

Melhorando a UX da Administração - Estilizando o Formulário

Melhorando ainda mais nosso formulário, vamos ajustar os estilos com CSS do Bootstrap. Acesse http://getbootstrap.com/css/#forms e veja que podemos utilizar na div de cada campo, o class="form-group". Para os inputs, podemos usar form-control, porém não com o atributo classe, pois os <h:inputText> e outras tags do JSF utilizam o atributo styleClass ao invés de class. Assim, vamos abrir o nosso formulário form.xhtml e fazer a alteração que acabamos de citar. O código com os class ficarão assim:

<div class="form-group">
    <h:outputLabel value="Título" />
    <h:inputText value="#{adminLivrosBean.livro.titulo}"
        required="true" id="titulo" styleClass="form-control" />
    <h:message for="titulo" />
</div>
<!-- FAÇA AS DEMAIS ALTERAÇÕES NOS PRÓXIMOS CAMPOS -->

Atualize a tela da aplicação e vamos ver como ficou a nossa aplicação. Tudo está bem mais elegante. A única coisa que faltou foi o nosso botão Cadastrar. Então vamos logo alterar o botão.

Voltando ao nosso formulário, procure a tag <h:commandButton> e nela, adicione o atributo styleClass com o valor btn btn-primary informando que esse será o botão principal do nosso formulário. Veja o resultado no navegador e perceba que já estamos com uma página de formulário bem bacana. Você pode melhorar o tanto que desejar, pois com Bootstrap muitas possibilidades se abrem, brinque a vontade.

No próximo vídeo faremos a colocação do menu da nossa aplicação. Vamos lá!

Sobre o curso Java EE parte 2: Sua loja online com HTML, REST e Cache

O curso Java EE parte 2: Sua loja online com HTML, REST e Cache possui 261 minutos de vídeos, em um total de 66 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!

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

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

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

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