Pessoalmente odeio soluções como popup’s e modal, e pensando neste problema, acabei esbarrando na necessidade de um plugin para jquery que permitisse exibir divs( ou qualquer outra tag ) próxima a um botão ou link ao ser clicado ( algo semelhante a um tooltip, mas que seja ativado e desativado por click ).

Adoro Flex, adoro Flash…. mas ajax também tem seu lugar, principalmente se você quer pensar em páginas, urls ou não vai ter um aplicativo totalmente integrado e assíncrono.

Finalmente resolvi migrar de Rails/Prototype para Rails/Jquery com o plugin JRails. E migrando uma aplicação que estou trabalhando acabei decidindo em parar de usar o Spry também e usar tudo em JQuery… eu sempre usei alguns widgets do Spry como Collapsible Panel, Validações e etc … mas resolvi usar só JQuery agora, em virtude de seus milhões de plugins e de ser leve.

A pior coisa do mundo é preencher todos os campos de um formulário, clicar em enviar e aparecer uma mensagem avisando que você não preencheu alguma coisa da forma correta…. e pior ainda quando o desenvolvedor não toma o cuidado de mostrar a mensagem e manter os dados que usuário já tinha digitado. Mesmo assim alguns campos precisam ser zerados a cada requisição nova, como senhas.

A melhor forma de resolver este inferno na vida dos usuários é através de validações na maquina do usuário e não no server apenas. Em Adobe Flex isso é muito fácil de fazer e já embutido no framework mas em html muita gente não se preocupa com isso.

Para trabalhar com validação no cliente existems várias formas ( considerando que você seja alguem produtivo e não prefira re-inventar a roda). Abaixo coloquei algumas das libs que usamos dependendo de qual frameworks de javascript for escolhido para o projeto:

Adobe Spry

Muito bom para várias coisas, inclusive validações… pessoalmente acho o mais completo quando o assunto são widgets.

Prototype

Minimalista mas atende bem a maioria das necessidades, é bem leve com seus 12kb e muito útil para quem usa o framework Prototype ( como eu )

Jquery Validation

A muito tempo considero largar o Prototype de lado e usar apenas Jquery, mas me incomoda muito fazer esse tipo de hack no Rails que já vem com Prototype e implementa vários helpers internos baseado nisso, ficar dependendo de um plugin de terceiro como parte crucial do seu aplicativo acho uma tanto sério de mais… mas aqui fica a dica de um bom plugin de validações para Jquery.

Já falamos sobre editores WYSIWYG aqui no blog, e que até então a melhor solução que eu havia encontrado era o NicEdit, ainda é muito bom e continuamos usando em nossos projetos.

O problema que ele também tem suas gambiarras no fonte e não é nada fácil de customizar.

Passando pelo mesmo perrengue sobre WYSIWYG’s o pessoal da 37Signals anunciou hoje o WysiHat no blog da empresa.

É um projeto focado em ser um editor WYSIWYG com código limpo, sem gambiarras e fácil de alterar tanto layout quanto código.

O editor é baseado no Prototype e pode ser integrado com Rails de forma muito simples. O projeto ainda encontra-se em desenvolvimento mas já é funcional e você pode usa-lo em seus projetos, basta fazer um clone do repositório no Github ou baixar o zip (ou tar) caso você ainda não utilize GIT.

Você também pode contribuir para o desenvolvimento usando o GitHub.

Abaixo coloquei um trecho de código de como utiliza-lo na sua forma mais simples:

1
2
3
4
5
6

  Event.observe(window, 'load', function() {
    var editor = WysiHat.Editor.attach('content');
    var toolbar = new WysiHat.Toolbar(editor);
    toolbar.addButtonSet(WysiHat.Toolbar.ButtonSets.Basic);
  });

Mais exemplos podem ser encontrados no projeto do GitHub.

Essa API de ajax do Google funciona como um repositório para os principais frameworks de JS, inclusive o Prototype e Scriptaculous (boa notícia para nós do Rails). Agora ao invés de cada projeto ter seu framework de js na pasta do servidor do respectivo projeto você poderá usar os frameworks que estão no server do google.

Se você precisa apenas que seus usuários possam colocar palavra em negrito, itálico, alinhar as coisas, criar listas e links este editor é ideal. Então a dica deste post é o NicEdit que para nós tem sido excelente.