Spring MVC: Construa aplicações responsivas com Bootstrap

Desenvolva aplicações responsivas integrando o framework web da Spring com o Bootstrap, uma das bibliotecas de front-end mais conhecidas.

Fique por dentro
Conhecer produtos líderes em suas categorias é importante para qualquer desenvolvedor Java. Deste modo, neste artigo será apresentado o Spring MVC, framework Java web baseado em ações mais popular do mercado, e o Bootstrap, biblioteca para criação de páginas com layout responsivo com maior aceitação entre os desenvolvedores front-end. Nesta primeira parte, vamos explorar mais profundamente o Spring MVC, analisando cada recurso que ele oferece através da criação do back-end de uma aplicação para uma clínica médica. Autores: Pablo Bruno de Moura Nóbrega e Marcos Vinicios Turisco Dória

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.

Figura 1. Funcionamento do Spring MVC

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.

BOX 1: Apache Tiles
O Tiles é uma biblioteca para construção de templates desenvolvido pela Apache que simplifica a construção da interface gráfica de aplicações web e viabiliza o reuso de código.

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):

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>
Listagem 1. Código do arquivo web.xml

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

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> "
[...] continue lendo...

Artigos relacionados