Chris B. – idéias e pensamentos

Uma grande dificuldade que se tem em termos de interfaces para web é estilizar os selects (também conhecidos como combo boxes, desde a época do desenvolvimento de aplicativos com VB, Delphi e afins) nas páginas. Eles devem ser, até onde me lembro, os que menos possuem formas de ter o look & feel alterados.

Se você usa a jQuery UI no seu projeto, pode tentar esse plugin:

http://www.filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/

Ele foi disponibilizado na área do jQuery UI Labs, que é uma área experimental, para a qual qualquer pessoa pode enviar sua contribuição e, quem sabe, tê-la incorporada ao projeto. O bacana desse plugin?
Você consegue estilizar os selects, colocando cores, fundo, ícones, hierarquia. Tudo de uma forma muito simples:

$(’select’).selectmenu();

O bacana é que ele já foi desenhado dentro dos temas pré-definidos da jQuery UI, então você pode aproveitar muito do look & feel criado, e ter alguns selects com essa cara abaixo!

Mais um POG que só o IE 6 nos faz conceber…

O problema

Comecei a usar a jQuery UI em uma implementação, mais precisamente para ter elementos (divs) de três colunas podendo ser rearranjados (dentro das colunas e entre elas) por drag’n drop. Tudo indo bem, suave, com o Sortable da UI. Nenhum bug, impressionante. Mas aí, o cliente reporta um erro: dentro de uma div, tem uns campos input checkbox que perdem a seleção quando a div é arrastada.

Na hora, já quase comecei a chorar, pois me parecia ser um daqueles bugs sem sentido solução, do IE.

O POG

Nada que o Google não resolva… uma pequena busca, e me deparo com esses posts:

• http://webbugtrack.blogspot.com/2007/11/bug-299-setattribute-checked-does-not.html
• http://groups.google.com/group/jquery-ui/browse_thread/thread/918fc66cf264d3da/ac1bc0633ed97900?show_docid=ac1bc0633ed97900&pli=1

O que eles falam? Que você só precisa colocar um atributo mágico chamado defaultChecked com valor defaultChecked nos inputs para ele não perder a seleção. Segue exemplo abaixo:

$(“input”).attr({checked: “checked”, defaultChecked:”defaultChecked”});

Em mais de 5 anos trabalhando – muito – com web, nunca tinha visto esse atributo, nem precisado usar. O porque setar ele? Nem fui atrás de saber, mas certamente não faz sentido! Muito bom, IE6, contribuindo para os blogs que falam sobre gambiarras!

Passando rapidinho aqui para fazer um jabá do plugin para fazer janelas modais com jQuery que o Tidbits disponibilizou.
O plugin foi feito pelo Danilo e mais alguns colegas, depois de terem procurado alguns plugins desse tipo e não terem encontrado nenhum que se adequasse ao que eles precisavam.

O jabá é porque ese plugin acabou me salvando em dois projetos na última semana.

O uso é simples: qualquer elemento ganha um método modal(). Se for um link, automaticamente é usado o href dele – mas você pode passar qualquer url como parâmetro. Será feito um request assíncrono e o resultado dele, jogado no modal.

O bom desse plugin é que ele é leve e muito fácil de usar, e precisa de muito pouca coisa – vê lá os exemplos de uso!

Uma coisa que eu acho que falta – e espero conseguir ter um tempo pra dedicar a fazer essa funcionalidade – é poder passar uma função de callback como parâmetro para ser executada assim que o request terminar. Isso pode ser contornado colocando javascript dentro do conteúdo do retorno, o que não é algo tão ruim se for um projeto pequeno – mas pode gerar uma bagunça em projetos maiores.

Então, o que falta? Você ir visitar a página do plugin: http://www.tidbits.com.br/click-modal-plugin-de-jquery-para-fazer-modal-lightbox

Passou meio que batido – infelizmente – o lançamento de uma nova versão da Prototype, a 1.6.1, no começo de Setembro.

Faça download aqui!

Preciso fazer a minha mea culpa: tenho utilizado em praticamente 100% dos meus projetos a jQuery, e tem sobrado pouco tempo para no mínimo ler as atualizações no blog e fórum da Prototype.

Mas, vamos ao que interessa: as novidades.
Além de ganho de performance – algo que sempre foi criticado na Prototype – agora há compatibilidade com o Google Chrome 1 e o IE8, além de novos eventos de mouse suportados e uma forma de associar chaves/valores a elementos do DOM.
Ao mesmo tempo, foram feitas modificações na forma de distribuicão da biblioteca (com o uso do Sprockets) e a documentação segue o formato PDoc.

Para quem vê apenas essas alterações, pode achar que é pouca coisa, mas a Prototype sempre foi uma biblioteca bem madura, com uma clareza que poucas outras têm. Me parece que o time de desenvolvedores tentou se ater mais a ganhos de performance e documentação para esse release.

Além do que, a Prototype, como já disse outras vezes, é ideal para se construir outras coisas em cima dela – se você quer fazer componentes ricos javascript, eu indico a Prototype como base. E é isso que a antiga script.aculo.us era: um framework com efeitos e manipulação de elementos DOM por javascript, com interações do usuário. Usei o verbo no passado pois o framework está passando por uma bela reformulação, inclusive mudando de nome, para scripty2.

Ainda está em versão alpha, mas muito me agradou o que eu vi, e a forma como o código pode ser escrito. Pouco foi mostrado, mas eu acho que finalmente pode haver uma chance da Prototype voltar a respirar caso o scripty2 venha a conseguir bater de frente com a jQuery UI ou os inúmeros plugins de efeitos escritos para a jQuery (deixando claro novamente que não quero fomentar nenhuma briga entre fanboys de bibliotecas javascript!).

Para aqueles que já usaram, fica a dica. Para aqueles que nunca viram a Prototype, fica a sugestão: faça download e veja o que ela tem de bom, e como ela tem um enfoque diferente de outras bibliotecas.

Algo que sempre senti falta no core da jQuery foi a possibilidade de criar elementos DOM de uma forma mais simples – até porque estava acostumado a fazer isso com o Element() da Prototype, e não queria voltar a usar todos aqueles document.createElement() novamente.

Dei uma procurada e encontrei a jQuery DOM Elements Creator (Domec). Testei e funcionou bem, no IE6, 7 e Firefox. A sintaxe é bem simples, e  para criar uma div, por exemplo, é:

$.create(‘div’, {‘id’: ‘myId’}, ‘myText’)

Vou colocar abaixo uma implementação completa que fiz, criando vários elementos e adicionando-os uns aos outros:

var div = $.create("div",{id: this.htmlId, className: this.htmlClass}, "");
$.create("input",{type: "hidden", className: "widget_type", value: this.type}).appendTo(div);
var divHandler = $.create("div",{className: "widget_handler"});
$.create("h3").appendTo(divHandler);
$.create("a", {href:"#", className: "widget_edit"}, "edit").appendTo(divHandler);
$.create("a", {href:"#", className: "widget_delete"}, "X").appendTo(divHandler);
$.create("br").css({clear: "both"}).appendTo(divHandler);
divHandler.appendTo(div);
$.create("div",{className: "widget_edit_area"}).appendTo(div);
$.create("div",{className: "widget_container"}).appendTo(div);

Veja a documentação do plugin para ver todas as possibilidades.

Observação: testei a performance e foi mais lento, quase o dobro do tempo, para criar elementos do que com document.createElement(). Imagino que num projeto muito grande, isso possa ser um problema, mas em projetos menores não deve ter tanto impacto.

Mais outros 5 blogs que tenho acompanhado. Fica a dica!

• eualexandre.com.br (site/blog do @kurko, com portfolio e muita coisa sobre PHP e gerIencia de projetos)
• Igor Escobar (PHP, javascript e mais)
• IO Tecnologia (variado, sobre tecnologia)
• Análise Blogueira (o nome fala por si só!)
• Blog da Webroom (a Webroom é uma agência web, e o blog é bem divertido e tem muita coisa interessante!)