Spring MVC: Construa aplicações responsivas com Bootstrap

O padrão de projeto MVC (Model-View-Controller) foi descrito pela primeira vez em 1979. A ideia surgiu com a necessidade de organizar uma aplicação, de forma que as responsabilidades dos componentes de um projeto fossem separadas umas das outras.

Nesta arquitetura, a camada de controle processa as requisições e respostas e faz a ligação com a camada de modelo, que contém as regras de negócio da aplicação, e a camada de visão, responsável pela interação com o usuário.

Entre as vantagens do padrão proposto, tem-se a possibilidade de uma manutenção mais barata do código e torna-se muito mais prático estender as diversas funcionalidades do sistema, quando necessário.

Não por acaso, o MVC começou a ser incorporado em tecnologias comuns e foi disponibilizado em diversos frameworks de desenvolvimento rapidamente.

Atualmente, existem dois tipos de implementações de frameworks MVC: os baseados em ações e os baseados em componentes.

A diferença entre eles se dá principalmente pela forma como o fluxo de execução das solicitações é manipulado: os baseados em ações delegam a responsabilidade do gerenciamento de uma requisição a um controlador, cujo principal objetivo é reunir as informações de um modelo e devolver a resposta para o usuário através de uma visão; já os baseados em componentes utilizam a própria visão como responsável por extrair as informações de um modelo – por intermédio de uma classe gerenciável do framework – e assim apresentar a resposta ao cliente.

O Spring MVC é um destes frameworks baseados em ações e, quando utilizamos uma biblioteca web deste tipo, geralmente algum pacote de interface rica baseada em JavaScript é adicionado ao projeto para gerar telas dinâmicas e com um visual mais moderno.

Na maioria dos casos, esta liberdade de escolha na construção da camada de visão torna possível migrar o front-end para outra plataforma de desenvolvimento quando necessário, o que representa uma grande vantagem para sistemas com tempo de vida longo.

Não obstante, este não é o único diferencial: os frameworks MVC fornecem suporte ao REST, um serviço cada vez mais necessário nas aplicações atuais.

Na primeira parte deste artigo, faremos uma análise do Spring MVC através da demonstração dos principais recursos presentes no framework. Para isso, iniciaremos a criação de uma pequena aplicação que simula o funcionamento de uma clínica médica utilizando o WildFly como servidor de aplicação e o PostgreSQL como banco de dados.

No decorrer deste estudo todo o código do sistema será detalhado e explicado minuciosamente, para que possamos compreender o funcionamento da API da biblioteca web e como ocorre sua comunicação com as páginas JSP que serão montadas usando o Apache Tiles e o Bootstrap.

O Spring MVC

O Spring MVC pertence ao Spring Framework e tem como principal proposta possibilitar uma maior produtividade no desenvolvimento de aplicações web corporativas utilizando a linguagem Java. Baseando-se no já comentado padrão de projeto MVC, ele consegue separar as principais fronteiras de uma aplicação web, fazendo com que nosso código fique bastante organizado.

Por se tratar de um framework leve e não intrusivo, ou seja, não requer que classes da aplicação tenham contato com as classes da biblioteca, e pelo fato de estar integrado ao Spring Framework, o Spring MVC tem à disposição serviços como injeção de dependências, gerenciamento de transações e de segurança, além da integração com frameworks de mapeamento objeto-relacional como o Hibernate.

O funcionamento básico do Spring MVC se dá através da classe DispatcherServlet, que é um Front Controller e estende HttpServlet. Ela tem como funções principais direcionar as requisições para outros controladores, tratá-las e repassar as respostas para o usuário.

Após o recebimento da solicitação HTTP, o DispatcherServlet consulta o HandlerMapping, que redireciona a solicitação para outro controlador de acordo com suas configurações de comportamento.

A Figura 1 mostra como se dá o fluxo de uma requisição com o DispatcherServlet.

O Bootstrap

O Bootstrap foi um framework criado para facilitar a elaboração de interfaces de usuário para sistemas web. A biblioteca surgiu com a necessidade de padronizar as estruturas de códigos de interfaces, de modo que se evitassem inconsistências geradas pelas diferentes formas de organizar os layouts dentro de um mesmo projeto. Com a padronização destas estruturas permitiu-se que toda a equipe de desenvolvimento envolvida trabalhasse com maior rapidez e eficiência, melhorando consequentemente a manutenibilidade do front-end da aplicação.

O framework foi projetado e desenvolvido pela equipe de engenheiros do Twitter e possui o código aberto. Estas características, aliadas aos consideráveis benefícios que o produto trouxe para os programadores web, fizeram com que ele se tornasse o projeto de desenvolvimento de software livre mais ativo do mundo, com uma comunidade gigantesca e bastante produtiva.

O Bootstrap disponibiliza uma coleção de elementos e funções personalizáveis empacotadas em uma única ferramenta que permitem a criação de layouts responsivos e o uso de grids personalizáveis.

As grids possibilitam mudar o layout das informações na página de forma muito prática, apenas modificando a largura das divs que funcionam como colunas. Os elementos escolhidos não conflitam entre si e são compatíveis com HTML5 e CSS3.

De forma padrão, o Bootstrap é formado por dois arquivos (um CSS e um JavaScript) que devem ser referenciados no código da aplicação. Entre os principais elementos HTML estilizados pela biblioteca, temos: grids, cabeçalhos, listas ordenadas e não ordenadas, formulários e botões.

Em termos de componentes, vários foram criados pela equipe de desenvolvedores do projeto, dos quais podemos ressaltar: uma coleção de ícones baseados em fonte, botões dropdown, menus responsivos, breadcrumbs, paginadores, painéis e alguns componentes de layout para destacar uma área da página.

Criando a aplicação

Como dito no início do artigo, criaremos um pequeno sistema de clínica médica para demonstrar o funcionamento do Spring MVC e alguns recursos do Bootstrap. As páginas do projeto serão baseadas em templates que fazem uso da biblioteca Tiles (ver BOX 1) e, em duas das telas teremos requisições Ajax para verificar como podemos efetuar este tipo de comunicação entre a view e o controller.

O banco de dados utilizado será o PostgreSQL e o acesso se dará através da JPA 2.1, com o controle de transações efetuado pelo Spring ORM.

O ambiente requerido para implementar o sistema envolverá os softwares listados a seguir, que precisam estar previamente instalados (se necessário, confira a seção Links no final do artigo para saber onde baixá-los):

• Servidor de aplicação WildFly 8.0.0. Se quiser saber mais detalhes sobre como configurá-lo, consulte a Java Magazine 128;
• Eclipse Luna para desenvolvedores Java EE;
• Java Development Kit versão 1.7 configurada no Eclipse;
• SGBD PostgreSQL 9.1 ou superior.

Agora é hora de criar o projeto Maven. Para isto, na view Project Explorer do Eclipse, clique com o botão direito, selecione New e clique em Other. Na tela que surge, selecione Maven e depois clique em Maven Project. Marque a opção Create a simple Project (skip archetype selection) e clique em Next.

Neste passo, informe no campo Group Id o valor "br.com.javamagazine", no Artifact Id o valor "clinicajm", no Packaging o valor "war" e no Name o valor "clinicajm". Em seguida, clique em Finish.

Logo após estes passos iniciais, vamos configurar alguns parâmetros adicionais para a aplicação rodar corretamente. Assim, clique com o botão direito em cima da raiz do projeto, e depois na opção Properties.

Na tela que surge, clique em Project Facets. No item Dynamic Web Module, selecione a versão 3.1 para trabalharmos com a versão mais recente da API de Servlets e no item Java, selecione a opção 1.7 e clique em OK.

Após finalizarmos as alterações nas propriedades do projeto, nosso próximo passo será criar o arquivo web.xml com algumas configurações necessárias para o Spring MVC funcionar e a informação da página inicial do sistema.

Para realizar esta alteração, crie primeiro uma pasta chamada WEB-INF dentro de src/main/webapp clicando com o botão direito em cima de webapp, selecione New e depois clique em Folder. Na tela que surge, informe "WEB-INF" em Folder Name e confirme.

Agora clique com o botão direito em cima do diretório criado, selecione New e clique em Other. Na tela do wizard, selecione XML, XML File e clique em Next.

No próximo passo, informe o nome "web.xml" e clique em Finish. Após a criação do arquivo, deixe o código igual ao da Listagem 1.

   <?xml version="1.0" encoding="UTF-8"?>
   <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns="http://xmlns.jcp.org/xml/ns/javaee"
    xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee 
      ://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
      id="WebApp_ID" version="3.1">
  
      <display-name>clinicajm</display-name>
  
      <welcome-file-list>
          <welcome-file>index.jsp</welcome-file>
      </welcome-file-list>
  
      <servlet>
        <servlet-name>dispatcher</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet
        </servlet-class>
        <load-on-startup>1</load-on-startup>
      </servlet>
      <servlet-mapping>
        <servlet-name>dispatcher</servlet-name>
        <url-pattern>*.do</url-pattern>
     </servlet-mapping>
  
    <listener>
      <listener-class> org.apache.tiles.web.startup.simple.
      SimpleTilesListener</listener-class>
    </listener>
  </web-app>

As principais configurações desse código são as seguintes:

• Linhas 9 a 11: informa a página inicial do sistema como index.jsp;
• Linhas 13 a 17: registra a classe DispatcherServlet como Front Controller da nossa aplicação e informa que ela deve ser carregada quando o sistema subir;
• Linhas 18 a 21: informa que as requisições a serem processadas pelo Front Controller DispatcherServlet devem seguir o pattern "*.do";
• Linhas 23 a 25: configura o listener do Tiles com a classe SimpleTilesListener. Entre outras ações ele lê o arquivo WEB-INF/tiles.xml, fornecendo suporte para JSP, Servlets e Portlets, o que já atende nossos requisitos, uma vez que utilizaremos apenas templates nas páginas JSP.

Criando o arquivo dispatcher-servlet.xml

Dentro da mesma pasta WEB-INF, crie um novo arquivo XML chamado dispatcher-servlet.xml. Este arquivo irá informar para o Spring MVC a localização das páginas JSP, as configurações da JPA e onde o Spring deve procurar por classes injetáveis. Após a geração do arquivo, deixe o código igual ao da Listagem 2.

     <?xml version="1.0" encoding="UTF-8"?>
     <beans xmlns="http://www.springframework.org/schema/beans"
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
      xmlns:p="http://www.springframework.org/schema/p"
      xmlns:context="http://www.springframework.org/schema/context"
      xmlns:tx="http://www.springframework.org/schema/tx"
      xmlns:mvc="http://www.springframework.org/schema/mvc"
      xsi:schemaLocation="http://www.springframework.org/schema/beans
      http://www.springframework.org/schema/beans/spring-beans.xsd
      http://www.springframework.org/schema/context
      http://www.springframework.org/schema/context/spring-context.xsd
      http://www.springframework.org/schema/tx
      http://www.springframework.org/schema/tx/spring-tx.xsd
      http://www.springframework.org/schema/mvc
      http://www.springframework.org/schema/mvc/spring-mvc.xsd">
  
        <context:component-scan base-package="br.com.javamagazine.clinicajm" />

        <mvc:annotation-driven />

        <bean id="entityManagerFactory" class="org.springframework.orm.jpa.
        LocalEntityManagerFactoryBean" />

        <bean id="transactionManager" class="org.
        springframework.orm.jpa.JpaTransactionManager">
        <property name="entityManagerFactory" ref="entityManagerFactory"/>
        </bean>

        <tx:annotation-driven />

        <bean id="viewResolver" class="org.springframework.
        web.servlet.view.UrlBasedViewResolver">
        <property name="viewClass" value="org.springframework.
        web.servlet.view.JstlView" />
        <property name="prefix" value="/WEB-INF/jsp/" />
        <property name="suffix" value=".jsp" />
      </bean>
    </beans>

As principais configurações apresentadas nesse código são as seguintes:

• Linha 17: informa que o Spring MVC deve procurar componentes injetáveis a partir do pacote br.com.javamagazine.clinicajm;
• Linha 19: define que os controllers da aplicação serão definidos através de anotação;
• Linha 21: informa que a EntityManagerFactory (utilizada para se conseguir uma instância do EntityManager) será gerenciada pela LocalEntityManagerFactoryBean, uma classe do Spring;
• Linhas 23 a 25: informa que o gerenciamento de transações com o banco de dados será feito pela classe JPATransactionManager, uma vez que utilizaremos a JPA para o acesso;
• Linha 27: define que o controle de transações será feito através de anotações;
• Linhas 29 a 34: no Spring MVC, precisamos de um viewResolver para direcionar o usuário para uma tela após a execução da lógica no controller. A classe UrlBasedViewResolver, declarada na linha 29, é útil quando o nome dos arquivos das páginas é igual à String de retorno dos métodos (veremos mais à frente que os métodos dos nossos controllers se comportarão desta forma).

Na Linha 30 informamos que nossas telas serão páginas JSP usando tags JSTL. Nas Linhas 31 e 32 definimos que nossas páginas terão a extensão ". ...