Como criar uma aplicação responsiva com Bootstrap

Desde as primeiras aplicações web começarem a ser criadas, o processo de seleção das tecnologias que seriam usadas num projeto bem como as definições arquiteturais que envolviam tais cenários sempre foram alvo de muita discussão sobre preferências. Levando em consideração um paralelo entre duas das mais usadas tecnologias para web (cliente + servidor), temos:

· No PHP, todo o desenvolvimento se dá através da sua linguagem que mistura código HTML entrelaçado entre códigos PHP. Do ponto de vista de design, isso nunca foi uma boa prática, inclusive adotada por outras plataformas e abandonada futuramente, como o Java, por exemplo.

· No Java, inicialmente usavam-se as JSPs que se assemelhavam às páginas PHP citadas quando códigos Java eram criados em forma de scripts diretamente dentro das páginas web. Atualmente, soluções alternativas e mais elegantes já existem como as tags customizadas (JSTL, JSF, etc.), além de vários frameworks de integração como Spring, GWT e o Apache Tiles.

Essa complicação toda aumenta quando, as mesmas tecnologias que antes eram focadas quase que completamente no servidor (salvos os casos em que precisávamos criar alguma validação de campos ou regras básicas de navegação via JavaScript no próprio browser), agora precisam dividir espaço com os diversos frameworks front-end que surgiram, muitos deles, inclusive, para substituir implementações inteiras que antes só eram possíveis no respectivo servidor.

Podemos citar vários dos quais jQuery, Bootstrap, AngularJS ou Prototype se encaixam e hoje demandam cargos em empresas que focam exclusivamente nesse universo: tecnologias front-end.

Tudo isso, atrelado ao já sucesso do Node.js com a possibilidade de ter uma “mão” no lado do servidor que é totalmente JavaScript, fez com que empresas migrasses tudo para front-end, que é mais leve, rápido e performático.

Mas para os que ainda precisam fazer uso de todo o potencial acumulado de tecnologias como JEE, ASP.NET, Ruby, etc. é muito importante entender como fazer a integração das mesmas com os referidos frameworks client side.

Este artigo trata de expor essa faceta da fase de desenvolvimento de um sistema web. Criaremos uma aplicação de agenda completa, que fará a integração de um módulo no servidor escrito em JEE + Spring (e seus módulos dependentes, como Security, Data e MVC) com os frameworks Bootstrap (para organização da responsividade e design nas páginas), AngularJS (para lidar com os serviços e comunicação com o servidor) e jQuery (para funções utilitárias e ajuda na seleção/manipulação dos campos da página).

Também faremos uso do popular framework de templates para Java da Apache, o Tiles, que se integrará às nossas páginas JSP fornecendo simplicidade e produtividade na exibição dos valores dinâmicos.

O banco de dados usado para salvar as informações será o MySQL, mas você pode usar qualquer um (lembrando que não será foco do artigo expor detalhes de banco, por não caber no escopo).

Montagem do ambiente

Para o artigo será necessário ter o conjunto de tecnologias/ferramentas instaladas no seu ambiente (vide seção Links):

· JDK 6 ou superior;

· IDE Eclipse Luna ou superior;

· Servidor Tomcat 7 ou superior (ou qualquer outro servidor de preferência);

· MySQL e MySQL Workbench (ou qualquer outros SGBD de preferência);

· Plugin do JBoss Tools para facilitar na criação dos tipos de projeto.

· Browser (de preferência uma versão recente do Chrome, que tem boas ferramentas de console e depuração client side).

Após baixar o zip do Eclipse, extraia todos os arquivos e execute o Eclipse.exe. Selecione um diretório para salvar o projeto e, uma vez dentro da IDE, vá até o menu Help > Eclipse Marketplace... e na caixa de buscas Find digite “JBoss Tools”. Nesse passo, atente para a versão da sua IDE e procure pelo plugin do JBoss Tools correspondente (pois ele tem uma versão para cada Eclipse diferente, o nome fica entre parênteses logo a frente) e clique em Install. Vá navegando nas janelas sempre clicando em Next (quando chegar na seleção dos pacotes do plugin, selecione as opções tal como na Figura 1), aceite os termos de condição, efetue a instalação e reinicie a IDE para ter tudo configurado.

Para importar o Tomcat no ambiente, extraia os arquivos do mesmo e vá até a aba Servers do Eclipse, clique com o botão direito em New > Server e depois em Apache > Tomcat 7.0 Server (ou o referente à sua versão), informe o diretório onde o extraiu e clique em Finish.

Se não tiver o JDK e MySQL (e SGBD) instalados execute os instaladores e siga os passos até o fim. Para o projeto faremos uso do Maven, gerenciador de dependências do Java que já vem por padrão no Eclipse (por isso a importância de usar uma versão recente).

Figura 1. Tela de seleção dos pacotes do JBoss Tools a instalar.

Criação do Projeto

O tipo de projeto que criaremos é um projeto “Maven”. Isso porque é a partir dele que faremos o gerenciamento de dependências sem se preocupar em quais bibliotecas usar no servidor. Portanto, vá até o menu File > New > Maven Project, selecione a checkbox “Create a simple Project (skip archetype selection)” e depois clique em Next. Na próxima tela configure as propriedades tal como descrito na Figura 2 (Group e Artifact Ids e mude o Packaging para war). Então clique em Finish.

A estrutura de pacotes e diretórios que ele gera é bem intuitiva e, basicamente, faremos uso somente de “Java Resources” e da pasta src que, por sua vez, contém os diretórios de arquivos web do projeto.

Figura 2. Tela de configuração das propriedades Maven do projeto.

Problema de Build Path

Ao usar o Maven nesse processo, o mesmo configura os projetos sempre com a versão 1.5 do JDK que já está meio obsoleta. Portanto, para modificar isso e evitar problemas futuros, vamos alterar a versão para 1.7 ou superior clicando com o botão direito no projeto e indo em " [...] continue lendo...