Olá desenvolvedores, que tal um pouco de Layout CSS e aprender a estilizar seu projeto em JSP? Até aqui o que temos é um projeto cru, sem nenhuma estilização, e portanto, nada amigável para o usuário. Assim, hoje sairemos um pouco do contexto de codificação para aprender a construir bonitos layouts para as nossas aplicações.

Não iremos aqui trabalhar diretamente com CSS, este seria um curso a parte. O que iremos fazer é a estilização a partir de um template. Nesse sentido é importante ressaltar que o layout escolhido tem que estar de acordo com as especificações do sistema.

Assim, a ideia é fazer esta estilização em cada parte do sistema separadamente, desse modo começaremos pela tela de login. O primeiro passo é pesquisar no buscador da sua preferência o tema “template tela de login”. Ou se preferir acesse o site Colorlib e procure por um template que lhe agrade. Ou ainda clique aqui para fazer o download do código fonte do template que utilizarei nesta aula.

Quando clicar em download, duas coisas podem acontecer, uma pasta compactada ser baixada para sua máquina no caminho indicado. Ou ser redirecionado, para o CodePen da Colorlib. Em todos os casos isolaremos o CSS e aplicaremos as classes em nosso sistema.

TRABALHANDO COM CSS

Agora o passo seguinte é, voltando a nossa aplicação, na raiz da pasta WebContent clique com o botão direito do mouse >> New >> Folder e dê para esta subpasta o nome de resources, e em resources crie uma nova subpasta css. E novamente, clique com o botão direito na pasta css >> New >> Other, pesquise por css e clique em CSS File, nomeie o arquivo de “estilo.css”.

Mas precisamos informar para a página index.jsp, onde está arquivo .css, desse modo, dentro da tag head, indicaremos o caminho do arquivo estabelecendo um “link” para o arquivo estilo.css. E ainda é preciso informar que é um arquivo css, com o atributo stylesheet.

<link rel="stylesheet" href="resources/css/estilo.css">

Voltando ao CodePen da Colorlib, copie todo o arquivo css e o cole no seu arquivo estilo.css, é isso mesmo, CTRL C + CTRL V. Ainda no CodePen, no arquivo html, observe que existe uma estilização para dois formulários, para o formulário de registro, que nós não queremos, e para a tela de login, que é o que queremos. Ambos os formulários estão envolvidos em duas tags div.

A <div> é como um bloco, ela marca uma sessão em um documento HTML, e pode receber qualquer tipo de conteúdo. As divs a que nos referimos possuem as classes login-page e form respectivamente. Elas irão envolver o formulário. E tag <form> receberá a classe login-form.

Para utilizar o mesmo estilo em outras telas, basta importar o css e aplicar as classes. Mas nós iremos fazer diferente, até mesmo para título de exercício vamos estilizar a área de cadastro com outro template layout. Quanto a tela de login, ela ficou assim.

ESTILIZANDO TELA DE CADASTRO

Para a estilização da tela de cadastro iremos pegar um template layout da Sanwebe. A página traz vários estilos de formulário de cadastro e se quiser e você pode escolher qualquer um. Eu optarei pelo primeiro.

O passo seguinte é criar um novo arquivo css. Novamente clicando com o botão direito sobre a pasta css >> New >> Other, pesquise por css e clique em CSS File, nomeie o arquivo de “cadastro.css”.

Tal como fizemos anteriormente dentro da tag head, porém, agora na página cadastroUsuario.jsp, indique o caminho do arquivo, estabelecendo um “link” para o arquivo cadastro.css.

<link rel="stylesheet” href="resources/css/cadastro.css">

De volta a página sanwebe, selecione e copie todo o arquivo css (CTRL C) e o cole (CTRL V) no seu arquivo cadastro.css. Este formulário exige que dentro da tag <form> estejam implementadas as tags <ul> e <li>.  E dentro da tag <li> os inputs recebendo a class=”field-long”.

<form>
   <ul class="form-style-1">
   <li>

   </li>
   </ul>
</form>

E para estilizar o campo de senha será necessário inserir o código de estilização do password em dois locais no arquivo cadastro.css.

Na página cadastroUsuario.jsp, mova o botão submit para dentro da tabela, depois de criar uma nova linha.

Outra estilização interessante que podemos fazer é na tag de título <h1>, centralizando-a.

<center><h1> Cadastro de usuário</h1></center>

ESTILIZAÇÃO DA TABELA

Para estilização da tabela iremos fazer o download do código fonte da tabela “Responsive & Accessible Data Table”, na página FrehsDesignWeb. Feito o download abra o arquivo index.html, no notepad++ por exemplo, para ver a estrutura da tabela.

A tag <table> receberá a class=”responsive-table” e deverá estar aninhada dentro uma tag<div> que terá a class=”container”.

<div class=”container”>
   <table class="responsive-table">
   </table>
</div>

No mesmo arquivo index.html busque pelas classes correspondentes e cole todas as que encontrar no arquivo cadastro.css

EM POUCAS PALAVRAS

E assim inserimos algum estilo ao nosso sistema de cadastro. E você pôde perceber que não foi necessário um profundo conhecimento em CSS. Com um conhecimento básico já conseguimos nos orientar e fazer o que é preciso. Mas podemos melhorar ainda mais o nosso sistema, como por exemplo inserindo uma imagem em “Excluir” e “Editar”, deixando-o ainda mais visual. Mas este é um assunto para o próximo tutorial, eu fico por aqui e nós nos vemos lá.