Manubia.com.br - Controle Financeiro com Grails e, agora, com jQuery

É pessoal....

depois de algum tempo, tempão mesmo, usando a dupla Prototype + Scriptaculous.....depois de saber usar bem esta dupla, de ler livro e tudo..... resolvi abandonar totalmente a dupla e me render ao jQuery.

Deu um trabalho danado migrar o Manubia.com.br (site de controle financeiro) para o jQuery. Tem muita coisinha diferente. Mas no final das contas, estou gostando muito.

Alguns dos motivos de ter feito a migração:

  • jQuery tem um mundo plugins que resolvem diversos problemas que a gente precisa ficar catando pela web quando usamos Prototype + Scriptaculous.
  • o jQuery tem um projeto inteiro dedicado a interface gráfica: jQuery UI
  • formatação de campos de um formulário (formatar valor numérico com pontos e vírgulas, de forma internacionalizada): Masked Input Plugin
  • Calendário tipo Date Picker para campos de datas: jQuery UI DatePicker
  • Plugin para manipulação de comboboxes (select boxes).
  • No final das contas, a gente escreve menos código JavaScript do que com Prototype. Parece que fica mais limpo o código.
  • Tem um site dedicado aos plugins
  • De acordo com alguns benchmarks (um aqui, outro aqui), o jQuery tem uma performance melhor do que o Prototype (ou seja, os usuários é que ganham).
  • Eu tenho tudo que preciso em uma biblioteca só, não preciso usar parte de uma, parte de outra, etc... (pelo menos por enquanto, vamos ver até quando).
É isso. Acho que o Manubia ganhou com este investimento que fiz... No fundo mesmo, eu precisava era do formatador numérico para campos input. Aí achei o plugin de jQuery...isso foi a gota d'água pra eu migrar. (Eu já tava p da vida por estar usando o date picker do Open Rico)

Abcs
Felipe

5 comentários:

aaloise 11 de novembro de 2009 17:06

Felipe, pelo que pude entender vc conseguiu utilizar o Masked Input do JQuery com o Grails. Vc poderia me explicar como conseguiu? to tentando de inumeras formas e ainda nao tive êxito. Abraços!

inacio 23 de novembro de 2009 11:04

Gostaria de conhecer mais sobre o Grails e JQuery. Se tiver links referente ao Grails com JQuery... Ou adicionar algum material sobre asunto ... At Inacio dos Santos

Felipe Nascimento 23 de novembro de 2009 12:14

Olá,

@aaloise, acabei usando o plugin Price Format, pois eu precisa apenas formatar valores monetários. O que ele faz é apenas formatar o número do textbox como um valor monetário, com separador de milhar de decimal. Assim eu faço o parse para BigDecimal no lado do servidor sem problemas (pois se o cara preenche com ponto como separador decimal, mas o computador dele é em português, aí o grails "se perde" na hora de converter para BigDecimal.).
Eu criei umas constantes locais, de javascript para me dizer qual é o separador decimal (se é ponto, ou se é vírgula). Aí, ex:
$("#meuCampo").priceFormat({prefix: '',centsSeparator: DIVISOR_DECIMAL,thousandsSeparator: DIVISOR_MILHAR});

Também fiz:
mDoc.ready(function() {
DIVISOR_MILHAR = $("#caracterDivisorMilhar").val();
DIVISOR_DECIMAL = (DIVISOR_MILHAR == "." ? "," : ".");
});

E finalmente:
<input type="hidden" id="caracterDivisorMilhar" value="${message(code:'divisor.milhar')}">

Assim eu usei este plugin de forma internacionalizada. Abcs


@inacio, o jQuery é uma biblioteca javascript, certo? Então ela trabalha no lado do cliente, no browser, facilitando muito a criação de uma interfdace rica com o usuário. Já o Grails é no lado do servidor. Eu faço a comunicação entre o cliente e o servidor usando as funções de ajax do jquery, que retornam ou HTML mesmo ou JSON. Tenho tentado cada vez mais retornar JSON, para que com esses dados eu faça o que precisa ser feito na interface usando javascript.

Tenho alguns links aqui sim, muito mais sobre jQuery do que sobre a dupla dele com o Grails. Mas segue aí:
jQuery Tools - excelente extensao do jQuery para criar overlays, tabs, tooltip, e outros...
25 dicas de jquery
50 técnicas e tutoriais de jquery

Nilo 20 de fevereiro de 2010 12:43

Olá Felipe, parabéns pela aplicação em Grails. Estou iniciando uma aplicação Grails + Jquery. Instalei o Jquery plugin e baixei o Jquery UI, tudo certo mas to tentando usar o dataPicker só adicionando os js e csss dele. Não funciona. Eu tenho que instalar o Jquery Ui como subplugin?
Tua aplicação ta com código disponível para estudo?

Obrigado

Felipe Nascimento 22 de fevereiro de 2010 10:11

@Nilo,
eu não uso o jQuery plugin como vc descreveu. Eu adicionei diretamente os arquivos JS e CSS necessários. Mas acho que no fim das contas dá no mesmo.

O que fiz foi o seguinte:

var preparaCalendarioJS = function() {
$(function() {
$.datepicker.setDefaults($.extend( {
showMonthAfterYear : false
}, $.datepicker.regional["pt_BR"]));
$("#data").datepicker();
$("#ui-datepicker-div").css( {"z-index" : "100"});
})
};
$(document).ready(function() {
preparaCalendarioJS();
});


Só isso.

A aplicação não tem código disponível não. Desculpe.
Um abc