Eu tenho pensado em escrever um artigo sobre Spring, Ajax e JSON há um bom tempo, mas nunca consegui. A razão disso é porque o assunto é relativamente complicado, e a técnica necessária tem estado em evolução. Quando decidi escrever este artigo, pesquisei na Internet e se você procurar em lugares como o Stack Overflow, verá muitas respostas diferentes e quase sempre contraditórias para a questão “como eu escrevo um aplicativo Spring Ajax/JSON?” Acho que isso é culpa do pessoal do Spring, uma vez que eles têm estado muito ocupados em melhorar o suporte do Spring ao JSON. Não apenas eles, pois o pessoal no Jquery também tem estado ocupado, o que significa que as coisas mudaram drasticamente nos últimos anos, e respostas para a pergunta “como escrevo um aplicativo Spring Ajax/JSON?” estão normalmente desatualizadas.

Se você der uma olhada no aplicativo em Spring 3 MVC de Keith Donald, verá que ele é horrivelmente complexo. Há uma tonelada de código boiler plate e muitos bits de JavaScript são necessários para suportar a integração com JSON. Na última versão do Spring, tudo isso mudou. Como eu disse, o pessoal no Spring e no Jquery esteve bem ocupado, e as coisas agora são muito mais simples.

Ao escrever esse tipo de aplicativo, há alguns passos a serem considerados. Primeiro, você precisa carregar uma página que seja capaz de fazer uma requisição em Ajax ao navegador. Segundo, você precisa escrever algum código para servir o recurso Ajax e, por último, a página precisa apresentar seus resultados.

Como demonstração do Spring MVC, Ajax e JSON, usarei um cenário de site de loja online. Nesse cenário, quando o usuário clica no link da página do e-commerce, o aplicativo carrega alguns itens do catálogo e exibe-os na página. O usuário então escolhe alguns itens e clica em “confirmar a compra”. Agora, é aqui que entram o Ajax e o JSON; ao pressionar “confirmar a compra”, o navegador faz uma requisição Ajax para o servidor ao enviar os ids dos itens para ele. O servidor então busca os itens na base de dados, retornando-os como JSON para o navegador. O navegador então processa o JSON, exibindo os itens na tela.

Ao escrever o código, o primeiro passo é criar um projeto Spring MVC usando os templates de projeto disponíveis no painel do Spring.

Quando você tiver um projeto em branco, há algumas mudanças que precisam ser feitas no arquivo POM do projeto. Primeiro, é necessário acrescentar o Processador de JSON Jackson às dependências. Em seguida, é preciso atualizar a versão do Spring para 3.2.2. Isso porque o gerador de templates de projeto ainda produz uma versão de projeto 3.1.1.

[xml]

<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-core</artifactId>
<version>2.0.4</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.0.4</version>
</dependency>

[/xml]

 

[xml]

<org.springframework-version>3.2.2.RELEASE</org.springframework-version>

[/xml]

Se você olhar o meu código disponível no Github, verá que eu também acrescentei o plugin Tomcat Maven e configurei o compilador Java para a versão 1.7. Esses são passos opcionais.

A próxima coisa a fazer é criar uma classe Item para definir os itens que o usuário comprará no nosso catálogo imaginário

[java]

public class Item {

private final int id;

private final String description;

private final String name;

private final BigDecimal price;

private Item(int id, String name, String description, BigDecimal price) {
this.id = id;
this.name = name;
this.description = description;
this.price = price;
}

public final BigDecimal getPrice() {

return price;
}

public final int getId() {

return id;
}

public final String getDescription() {

return description;
}

public final String getName() {

return name;
}

public static Item getInstance(int id, String name, String description, BigDecimal price) {

Item item = new Item(id, name, description, price);
return item;
}

}

[/java]

O código acima define nosso Item simples. Seus atributos incluem id, name, description e price.

O próximo passo nesse cenário de loja online é escrever o código que exibe os itens na tela para que o usuário possa fazer sua seleção e submetê-la ao servidor. Você provavelmente acredita que isso envolve escrever um JSP que inclui um formulário e a manipulação de uma requisição na forma de um controle do Spring MVC. Vou falar primeiro sobre o código de controle porque ele determina como o JSP é escrito.

[java]

/**
* Create the form
*/
@RequestMapping(value = "/shopping", method = RequestMethod.GET)
public String createForm(Model model) {

logger.debug("Displaying items available in the store…");
addDisplayItemsToModel(model);

addFormObjectToModel(model);

return FORM_VIEW;
}

private void addDisplayItemsToModel(Model model) {

List<Item> items = catalogue.read();
model.addAttribute("items", items);
}

private void addFormObjectToModel(Model model) {
UserSelections userSelections = new UserSelections();
model.addAttribute(userSelections);
}

[/java]

O método do controle que recebe o formulário na tela é createForm(…). Esse método é implementado pela notação comum do RequestMapping que diz para o Spring mapear todas as requisições GET com uma URL ‘shopping’ para essa localização. O método tem três passos: primeiro, ele lê o catálogo para obter uma lista de itens a serem exibidos; depois, cria um objeto UserSelections, que é usado pelo formulário quando ele submete os itens que um usuário comprou; e finalmente nos direciona para o shopping.jsp.

Esses passos de configuração são muito normais para esse método de criação de formulário: primeiro, você acrescenta os dados de exibição ao modelo e, então, acrescenta os meios de submissão do formulário ao modelo. Entretanto, quase sempre esses dois passos estão combinados.

No código do controle, você também verá um objeto catalogue, que é usado para armazenar os itens. Em um aplicativo real, isso seria equivalente a criar um componente de camada de serviço que lê dos dados usando um DAP e toda a parafernália normalmente associada a esse tipo de aplicativo. Nesse caso, é criada uma lista de itens a partir de um array “hardcoded”, o qual não é importante.

O código de controle se integra muito bem ao trecho de código JSP abaixo:

[html]

<form:form modelAttribute="userSelections" action="confirm" method="post">
<c:forEach items="${items}" var="item">
<div> class="span-4 border">
<p><c:out value="${item.name}" /></p>
</div>
<div> class="span-8 border">
<p><c:out value="${item.description}" /></p>
</div>
<div> class="span-4 border">
<p>£<c:out value="${item.price}" /></p>
</div>
<div> class="span-4 append-4 last">
<p><form:checkbox value="${item.id}" path="selection"/></p>
</div>
</c:forEach>
<div class="prepend-12 span-4 append-12">
<p><input class="command"
type="submit" name="action"
value="Confirm Purchase"
accesskey="A" /></p>
</div>
</form:form>

[/html]

Há alguns pontos a serem percebidos aqui. Primeiro, estou tornando a minha vida mais fácil ao usar a tag form do Spring (<form:form …>) e, segundo, usei o Blueprint para formatar minha página. Ao configurar a tag form, a primeira coisa a se considerar são os atributos dela: modelAttribute, command e method.Attribute são usados para juntar a classe UserSelections fornecida pelo controle ao formulário HTML. O atributo command é uma URL que diz ao navegador para onde submeter seus dados, e o atributo method diz ao navegador como submeter a requisição POST ao servidor.

Na próxima parte do JSP, utilizei um loop forEach para exibir os itens previamente encontrados no catálogo. A linha importante aqui é a tag form:checkbox. Isso cria, conforme você já deve esperar, um checkbox HTML utilizando o id do item e um “caminho” selection. Para mim, o termo “caminho” soa confuso. O que o pessoal do Spring na verdade quer dizer é “ao submeter, pegue o valor armazenado no atributo da checkbox (item.id) e, se selecionado, armazene-o no objeto UserSelections usando o método setSelection(…)”. Isso é feito em segundo plano, provavelmente ao efetuar o parser do objeto HttpServletRequest e então efetuando algum truque por parte do Java. O ponto a se notar é como os nomes no JSP estão relacionados aos nomes dos atributos da classe UserSelection.

Achei a tag form do Spring bastante útil para a maioria dos casos; entretanto, ao tornar as coisas simples ela, às vezes limita quais dados podem ser atribuídos ao objeto HTML. Quando você trombar com uma dessas limitações, use a tag Spring Bind acompanhada da tag form.

Ok, quando executar esse código, deverá ver uma tela que se parece com isto:

O negócio é o seguinte: sei que não tenho falado de AJAX e JSON em meus artigos, mas eu precisava visualizar esse cenário. Na segunda parte deste artigo, eu definitivamente irei para a parte mais complicada do cenário: obter e exibir os dados JSON através da requisição Ajax.

Para o código fonte completo deste artigo, visite o Github – https://github.com/roghughe/captaindebug/tree/master/ajax-json

***

Artigo traduzido pela Redação iMasters, com autorização do autor. Publicado originalmente em http://www.captaindebug.com/2013/04/spring-mvc-ajax-and-json-part-1-setting.html#.UgvYjuaJDb6