JQuery + Javascript: técnica de interação com usuários

No último projeto em que trabalhei, desenvolvi para a matéria de estágio na faculdade um sistema web-based de controle de estoque. Por ser um sistema completamente on-line, dei ênfase em deixá-lo o mais semelhante possível com uma aplicação desktop, considerando interface gráfica, navegabilidade e interação com o usuário.

Para conseguir isso, utilizei várias bibliotecas de JQuery e também algumas técnicas de javascript que tive que criar manualmente para suprir as necessidades. Neste post, vou demonstrar como desenvolvi uma barra de ferramentas bem interessante.

O objetivo da barra de ferramentas é ter botões de comando em comum para todos os módulos do sistema. Assim botões como Novo, Editar, Excluir, Filtrar, Ativar/desativar, Imprimir, dentre outros são obrigatórios nessa barra. A intenção era fazer com que o usuário selecione um registro na grid logo abaixo da barra de ferramentas e clique no botão correspondente à ação desejada. Por exemplo, se quero editar um registro qualquer, devo selecioná-lo através de um elemento checkbox e clicar no botão Editar.

Primeiro, criamos uma grid onde estão os registros. Essa grid deve estar dentro de um formulário, com o seguinte código:

<form name="grid" id="grid" action="" method="post">
// aqui vai a tabela do grid.
</form>

Dentro do while que lista os registros, a primeira coluna da grid deve ser a do checkbox, que será responsável por identificar com qual registro desejo trabalhar, através de seu id, é óbvio!

// esse checkbox passa está dentro do while e passa como parâmetro
// o id do registro impresso nessa linha da tabela.
<input type="checkbox" name="checkbox" id="checkbox" value="<?=$rowConsulta['pk_cliente'];?/>"/>

Agora vamos ao código HTML do botão editar que será feito com uma imagem/ícone. Essa <td> estará em uma tabela separada, acima ou abaixo do grid. Repare que a tag <a> da imagem recebe um id identificador e o atributo href contém um sharp ( # ). Isto garante que, ao clicar no botão, o único link chamado será o definido dentro da função javascript, evitando que o navegador tente abrir um endereço inválido. É a função javascript chamada no evento onclick quem define o link que será executado e substitui o sharp ( # ) por este link, de acordo com o necessário:

<td id="botao" width="45" align="center" style="cursor:pointer" >
<a id="link_editar" title="Editar" href="#">
<img src="images/bt_editar.png" width="45" height="45" border="0" onclick="javascript:editaRegistro(url = '<?=$urlPadrao.$modulo;?/>/cadastro.php?height=440&width=490&;modal=true&;modulo=< ?=$modulo;?>', pgatual = '< ?=$pgatual;?>');" />
</a>
</td>

Ao clicar no botão acima, este deve chamar uma função editaRegistro, passando como parâmetro a url do formulário de cadastro que define em seus parâmetros a altura, largura e o modal do efeito thickbox. Além disso, também é passado o endereço da página do grid que foi capturado no cabeçalho dessa página e armazenada na variável $pgatual.

Esta função percorrerá toda a página em busca dos checkboxes marcados (a partir da linha 03 do código abaixo). No caso do Editar, devemos lembrar que somente é possível editar um registro de cada vez. Sendo assim é necessário realizar a verificação se o usuário realmente selecionou algum registro e também se selecionou mais de um registro.

Caso o usuário tenha selecionado mais de um registro (linha 16), o sistema deve retornar um alerta personalizado em thickbox avisando-o que deve ser selecionado apenas 1 registro para a edição (linha 18).

Caso o usuário não tenha selecionado um registro e, mesmo assim, clicado no botão editar (linha 22), então o sistema retorna um alerta personalizado em thickbox avisando-o que deve ser selecionado pelo menos 1 registro para a edição (linha 24).

E caso o usuário selecionou apenas um registro (linha 28), que é o que deve ser feito, então a função remonta a url do formulário adicionando a ela o id do registro correspondente ao checkbox selecionado (linha 32), localiza atributo href da tag <a> através do id definido e por último faz a substituição do sharp por esta nova url (linha 33). Como a função é executada ao ocorrer o evento onclick, o link chamado é a nova url montada pelo próprio javascript e, automaticamente, o sistema abre o formulário personalizado em thickbox, contendo em seus campos os dados do registro selecionado disponíveis para a edição.

Ufa!! Abaixo está a função javascript que deve fazer tudo isso ao clicar no botão editar:

function editaRegistro(url,pgatual) {
// percorre o formulário em busca dos checkboxes marcados
var form = document.grid;

var marcados = "";
var cont = 0; // conta quantos registros foram selecionados.

for (i = 0; i < form.elements.length; i++) {
// se o checkbox encontrado no momento chama-se "checkbox"
// e ele está marcado, então guarda o valor desse checkbox
// e conta a quantidade de checboxes marcados.
if (form.elements[i].name == "checkbox" && form.elements[i].checked == 1) {
marcados = marcados + form.elements[i].value;
cont += 1;
}
}

// se selecionar mais de 1 registro para edição chama um alerta.
if (cont > 1) {
urlEditar = "< ?=$urlPadrao;?>dialogos/atencao.php?caixa=1&height=191&width=345&modal=true";
document.getElementById('link_editar').href = urlEditar;
return false;
}

// se não houver registros selecionados para edição também chama um alerta
if (cont == 0) {
urlEditar = "< ?=$urlPadrao;?>dialogos/atencao.php?caixa=2&height=191&width=345&modal=true";
document.getElementById('link_editar').href = urlEditar;
return false;
}

// se tiver exatamente 1 registro selecionado para edição.
if (cont == 1) {
// remonta a url do formulário, adiconando o id do registro e a ação
// que deve ser executada pelo formulário, também repassando
// o link da pagina do grid para o qual deve voltar posteriormente.
var urlEditar = url + "&item=" + marcados + "&acao=editar&pgatual="+ pgatual;

document.getElementById('link_editar').href = urlEditar;
return true;
}
return true;
}

Lembrando que, ao ocorrer qualquer um dos 3 retornos acima, o efeito thickbox deverá ser no formato modal, ou seja, somente será cancelado ao clicar em botões de comando dentro dessas janelas, como o cancelar, fechar, ok e/ou salvar.

No caso da janela do formulário, ao clicar em salvar, este deverá executar o script de atualização dos dados no banco de dados e retornar para a página do grid informando em algum local da página o sucesso ou o erro ao atualizar o registro. Para que isso seja possível, a função javascript recebe como parâmetro a url da página do grid. Esse parâmetro é encaminhado para o formulário quando este é aberto e também enviado ao script de atualização como valor de um campo texto HTML do tipo hidden.

Logo após executar a atualização (UPDATE) verifica-se se foi realizado com sucesso. Em caso verdadeiro, é direcionado para a página do grid passando como parâmetro a mensagem de sucesso. Em caso negativo, é passado como parâmetro a mensagem de erro e o possível motivo do erro.

Bom, por enquanto é isso. O objetivo aqui foi apenas demonstrar como podemos usar funções jquery de forma simples em aplicativos web, tornando-os mais eficazes e eficientes no que se propõem a fazer.

Dúvidas, utilizem os comentários. Até o próximo post.