Spring MVC 3.1 – Implementando uma aplicação CRUD com o Spring Data MongoDB (Part 5)

No artigo anterior, criamos os arquivos de configuração de nosso projeto. Nesse artigo, focaremos na camada de visualização, em particular no arquivos HTML e códigos JavaScript.

Índice de conteúdo

Parte 1: Introdução e Especificações funcionais
Parte 2: Configuração do MongoDB
Parte 3: Classes Java
Parte 4: Configuração dos arquivos XML
Parte 5: Arquivos HTML (com AJAX)
Parte 6: Executando a aplicação

Arquivos HTML (com AJAX)

Para aperfeiçoar a experiência com o usuário, usaremos o AJAX para tornar a aplicação responsiva. Todas as ações serão executadas na mesma página (sem necessidade de atualizações). Consequentemente, teremos apenas uma página HTML para a aplicação inteira. Todos os outros arquivos serão código JavaScript.
Observe como estruturamos a página HTML. Basicamente, seguimos o conceito de separação de preocupações pela separação das tags de marcação, CSS e código JavaScript. Tentamos o máximo possível tornar o estilo do código JavaScript e do CSS discreto.

<%@ taglib uri=’http://java.sun.com/jsp/jstl/core’ prefix=’c’ %>
<c:url value=”/users/records” var=”recordsUrl”/>
<c:url value=”/users/create” var=”addUrl”/>
<c:url value=”/users/update” var=”editUrl”/>
<c:url value=”/users/delete” var=”deleteUrl”/>
<html>
<head>
<link rel=’stylesheet’ type=’text/css’ media=’screen’ href='<c:url value=”/resources/css/style.css”/>’/>
<script type=’text/javascript’ src='<c:url value=”/resources/js/jquery-1.6.4.min.js”/>’></script>
<script type=’text/javascript’ src='<c:url value=”/resources/js/custom.js”/>’></script>
<title>User Records</title>
<script type=’text/javascript’>
$(function() {
// init
urlHolder.records = ‘${recordsUrl}’;
urlHolder.add = ‘${addUrl}’;
urlHolder.edit = ‘${editUrl}’;
urlHolder.del = ‘${deleteUrl}’;
loadTable();
$(‘#newBtn’).click(function() {
toggleForms(‘new’);
toggleCrudButtons(‘hide’);
});
$(‘#editBtn’).click(function() {
if (hasSelected()) {
toggleForms(‘edit’);
toggleCrudButtons(‘hide’);
fillEditForm();
}
});
$(‘#reloadBtn’).click(function() {
loadTable();
});
$(‘#deleteBtn’).click(function() {
if (hasSelected()) {
submitDeleteRecord();
}
});
$(‘#newForm’).submit(function() {
event.preventDefault();
submitNewRecord();
});
$(‘#editForm’).submit(function() {
event.preventDefault();
submitUpdateRecord();
});
$(‘#closeNewForm’).click(function() {
toggleForms(‘hide’);
toggleCrudButtons(‘show’);
});
$(‘#closeEditForm’).click(function() {
toggleForms(‘hide’);
toggleCrudButtons(‘show’);
});
});
</script>
</head>
<body>
<h1 id=’banner’>Record System</h1>
<hr/>
<table id=’tableUsers’>
<caption></caption>
<thead>
<tr>
<th></th>
<th>Username</th>
<th>First Name</th>
<th>Last Name</th>
<th>Role</th>
</tr>
</thead>
</table>
<div id=’controlBar’>
<input type=’button’ value=’New’ id=’newBtn’ />
<input type=’button’ value=’Delete’ id=’deleteBtn’ />
<input type=’button’ value=’Edit’ id=’editBtn’ />
<input type=’button’ value=’Reload’ id=’reloadBtn’ />
</div>
<div id=’newForm’>
<form>
   <fieldset>
<legend>Create New Record</legend>
<label for=’newUsername’>Username</label><input type=’text’ id=’newUsername’/><br/>
<label for=’newPassword’>Password</label><input type=’password’ id=’newPassword’/><br/>
<label for=’newFirstName’>First Name</label><input type=’text’ id=’newFirstName’/><br/>
<label for=’newLastName’>Last Name</label><input type=’text’ id=’newLastName’/><br/>
<label for=’newRole’>Role</label>
<select id=’newRole’>
<option value=’1′>Admin</option>
<option value=’2′ selected=’selected’>Regular</option>
</select>
   </fieldset>
<input type=’button’ value=’Close’ id=’closeNewForm’ />
<input type=’submit’ value=’Submit’/>
</form>
</div>
<div id=’editForm’>
<form>
   <fieldset>
<legend>Edit Record</legend>
<input type=’hidden’ id=’editUsername’/>
<label for=’editFirstName’>First Name</label><input type=’text’ id=’editFirstName’/><br/>
<label for=’editLastName’>Last Name</label><input type=’text’ id=’editLastName’/><br/>
<label for=’editRole’>Role</label>
<select id=’editRole’>
<option value=’1′>Admin</option>
<option value=’2′ selected=’selected’>Regular</option>
</select>
</fieldset>
<input type=’button’ value=’Close’ id=’closeEditForm’ />
<input type=’submit’ value=’Submit’/>
</form>
</div>
</body>
</html>
view raw users.jsp This Gist brought to you by GitHub.

Uma olhada mais detalhada

A primeira vista, esse arquivo JSP parece complexo. Pelo contrário, é bem simples. Vamos quebra-lo em partes menores para esclarecimento:
URLs
As seguintes linhas declaram as URLs do modo como são mapeadas pelo UserController. Nós usamos a tag url da taglib para tornar as URLs portáveis.

<c:url value=”/users/records” var=”recordsUrl”/>
<c:url value=”/users/create” var=”addUrl”/>
<c:url value=”/users/update” var=”editUrl”/>
<c:url value=”/users/delete” var=”deleteUrl”/>

Importações
Abaixo importamos os arquivos CSS e JavaScript personalizados, junto com o jQuery.

<link rel=’stylesheet’ type=’text/css’ media=’screen’ href='<c:url value=”/resources/css/style.css”/>’/>
<script type=’text/javascript’ src='<c:url value=”/resources/js/jquery-1.6.4.min.js”/>’></script>
<script type=’text/javascript’ src='<c:url value=”/resources/js/custom.js”/>’></script>

O que é o jQuery?
jQuery é uma biblioteca JavaScript rápida e concisa que simplifica o documento HTML, manipulação de eventos, animações, e interações Ajax para desenvolvimento web rápido. O jQuery é desenhado para mudar a maneira que você escreve JavaScript.
Fonte: http://jquery.com/

Inicialização do JavaScript
Agora nós preparamos as URLs, anexando funções a nossos botões, e carregando a tabela. Esse pedaço do código principal é referenciado a partir de um arquivo JavaScript externo chamado custom.js.

  • loadTable(): Executa uma requisição AJAX e popula nossa tabela com os registros
  • toggleForms(): Esconde e mostra formulários específicos baseados em um argumento
  • toggleCrudButtons(): Esconde e mostra os botões
  • hasSelected(): Verifica se um registro foi selecionado
  • fillEditForm(): Preenche o formulário ‘Edit’ com detalhes baseados no registro selecionado
  • submitDeleteRecord(): Submete uma requisição de remoção via AJAX
  • submitNewRecord(): Submete uma requisição de criação de novo registro via AJAX
  • submitUpdateRecord(): Submete uma requisição de atualização de registro via AJAX
<script type=’text/javascript’>
$(function() {
// init
urlHolder.records = ‘${recordsUrl}’;
urlHolder.add = ‘${addUrl}’;
urlHolder.edit = ‘${editUrl}’;
urlHolder.del = ‘${deleteUrl}’;
loadTable();
$(‘#newBtn’).click(function() {
toggleForms(‘new’);
toggleCrudButtons(‘hide’);
});
$(‘#editBtn’).click(function() {
if (hasSelected()) {
toggleForms(‘edit’);
toggleCrudButtons(‘hide’);
fillEditForm();
}
});
$(‘#reloadBtn’).click(function() {
loadTable();
});
$(‘#deleteBtn’).click(function() {
if (hasSelected()) {
submitDeleteRecord();
}
});
$(‘#newForm’).submit(function() {
event.preventDefault();
submitNewRecord();
});
$(‘#editForm’).submit(function() {
event.preventDefault();
submitUpdateRecord();
});
$(‘#closeNewForm’).click(function() {
toggleForms(‘hide’);
toggleCrudButtons(‘show’);
});
$(‘#closeEditForm’).click(function() {
toggleForms(‘hide’);
toggleCrudButtons(‘show’);
});
});
</script>

Tabela e botões
Abaixo segue uma tabela simples para exibição de registros. Os botões tem a função de interagir com os dados.

<table id=’tableUsers’>
<caption></caption>
<thead>
<tr>
<th></th>
<th>Username</th>
<th>First Name</th>
<th>Last Name</th>
<th>Role</th>
</tr>
</thead>
</table>
<div id=’controlBar’>
<input type=’button’ value=’New’ id=’newBtn’ />
<input type=’button’ value=’Delete’ id=’deleteBtn’ />
<input type=’button’ value=’Edit’ id=’editBtn’ />
<input type=’button’ value=’Reload’ id=’reloadBtn’ />
</div>

Formulários
Abaixo segue os formulários usados para adição  e remoção de registros.

<div id=’newForm’>
<form>
<fieldset>
<legend>Create New Record</legend>
<label for=’newUsername’>Username</label><input type=’text’ id=’newUsername’/><br/>
<label for=’newPassword’>Password</label><input type=’password’ id=’newPassword’/><br/>
<label for=’newFirstName’>First Name</label><input type=’text’ id=’newFirstName’/><br/>
<label for=’newLastName’>Last Name</label><input type=’text’ id=’newLastName’/><br/>
<label for=’newRole’>Role</label>
<select id=’newRole’>
<option value=’1′>Admin</option>
<option value=’2′ selected=’selected’>Regular</option>
</select>
</fieldset>
<input type=’button’ value=’Close’ id=’closeNewForm’ />
<input type=’submit’ value=’Submit’/>
</form>
</div>
<div id=’editForm’>
<form>
<fieldset>
<legend>Edit Record</legend>
<input type=’hidden’ id=’editUsername’/>
<label for=’editFirstName’>First Name</label><input type=’text’ id=’editFirstName’/><br/>
<label for=’editLastName’>Last Name</label><input type=’text’ id=’editLastName’/><br/>
<label for=’editRole’>Role</label>
<select id=’editRole’>
<option value=’1′>Admin</option>
<option value=’2′ selected=’selected’>Regular</option>
</select>
</fieldset>
<input type=’button’ value=’Close’ id=’closeEditForm’ />
<input type=’submit’ value=’Submit’/>
</form>
</div>

Previsualização

Se nós executamos nossa aplicação, isso é o que nós veremos:

Fonte