O número dessas bibliotecas é incontável, algumas mais simples, outras mais complexas, outras mais famosas, algumas nem tanto. Fiz uma breve pesquisa, e trouxe as mais conhecidas (e algumas nem tanto) para quem ainda não teve a oportunidade de conhecer. Só para lembrar, hoje não vou tratar sobre o uso dessas bibliotecas, isso fica pra uma próxima oportunidade, já que a idéia é um pouco extensa.

ExtJS

A ExtJS é de longe a biblioteca mais conhecida. Provavelmente você já deve ter pelo menos ouvido falar sobre, a menos que você viva na Sibéria. Também acredito que deva ser uma das mais antigas, e por isso uma das mais completas também.

Seu visual é espetacular, mas tem seu preço: ela é muito lenta. Todos os efeitos de transparência, os drag ‘n’ drops, tudo isso exige muito do pobre navegador. Pense bem antes de escolher onde usá-la, faça somente se for necessário, nunca para simples “enfeites”. Lenta, mas uma obra de arte.

E os desenvolvedores AIR não precisam ficar tristes: há até um demo do bichinho em funcionamento. Ainda não tive muito tempo com o AIR, mas acredito que a questão da velocidade não seja tão crítica quanto em um navegador, quem puder falar sobre, agradeço.

Yahoo User Interface

A Yahoo User Interface, ou YUI, deve ser a primeira user interface a se popularizar. Foi a base do nascimento da ExtJS. Tem lá seus defeitos, como o prefixo YUI para todos os métodos, mas tem um poder imenso. Me parece ser bem mais leve que a Ext, e usa gráficos bem mais simples também.

A documentação é um dos pontos fortes. Mantida pela comunidade de desenvolvedores do Yahoo, você nunca estará sozinho. Apesar disso, achei o site um pouco confuso para encontrar alguma coisa, principalmente os demos. Mas o material está lá, e há muito…

MochaUI

Ainda beta, a MochaUI seria a minha preferida. Adivinhem por quê? Sim, baseada na Mootools… A demonstração realmente me deixou impressionado, talvez tenha sido o relógio.

Aparenta ser bem leve, tanto que na demonstração você pode modificar propriedades das janelas sem travar o navegador. Usa gráficos simples, mas não menos atraentes. De longe, seria a primeira que eu escolheria para trabalhar (sim, opinião extremamente parcial). Mal posso esperar pela versão 1.0!

Dijit

Falando em Dojo, nem é preciso dizer muito. O framework mais abrangente que conheço também conta com sua interface de usuário, o Dijit. Não consegui encontrar demonstrações no site, mas as imagens mostram algo realmente promissor.

Lendo a descrição do projeto, você verá que o Dijit não é apenas uma simples interface de usuário. É extremamente customizável, extensível, acessível e localizável. O que isso significa? Bem, dê asas à imaginação, o céu é o limite…

jQuery UI

O jQuery UI, bem jovem ainda, também é espetacular. Baseado na brilhante jQuery, tem tudo para deixar qualquer um de boca aberta. A demonstração de efeitos, por exemplo, me impressionou muito. A própria tela de demonstrações é uma obra de arte.

Apesar de baseada no jQuery, achei a biblioteca ligeiramente lenta. Talvez tenha sido impressão, mas não esperava isso de jQuery. Entretanto, pela sua idade, é muito madura, muito poderosa. Se jQuery não havia me chamado atenção ainda…

Prototype UI

Até então desconhecido pra mim, o release candidate Prototype UI não conseguiu me chamar a atenção. Não por ser baseado em Prototype e Scriptaculous (o que já considero um ponto contra), nem por usar um tema do Mac, mas por parecer muito prematura. Os demos apresentados são bonitinhos, mas um tanto “crus”. Prefiro não dar minha opinião, vai que o negócio vire um Ext-killer?

SproutCore

O SproutCore, iniciativa da Apple, tem uma proposta um tanto “utópica”, pelo que entendi é trazer o Cocoa para a web. As demonstrações são interessantes, mas o pobre navegador sofreu as conseqüências. Esse negócio consegue ser mais pesado que a própria Ext! Além disso, vi mais opiniões negativas do que positivas…

UIZE

O UIZE (pronuncia-se “you eyes”) é outro que nunca havia sido apresentado a mim. Concordo com o pessoal do Ajaxian: são os efeitos mais legais que já vi. Apesar disso, a biblioteca ainda necessita muito mais trabalho, já que tem poucos recursos (poucos, mas legais).

Não tive a oportunidade de trabalhar por algum tempo com nenhuma dessas bibliotecas, e nem falar muito sobre as quais tenho mais experiência. Somente uma breve opinião sobre cada uma. Caso tenha esquecido de alguma, por favor, cite-a nos comentários, terei prazer em falar um pouquinho. Só uma precaução: cuidado onde você irá usar tudo isso… Existem aplicações e aplicações. Até mais!

Posts Relacionados

• Mootools vs. jQuery
• Estendendo o JavaScript
• Histórico para Navegação via JavaScript
• Estatísticas para Navegação via JavaScript
• jQuery – Segundas Impressões

Como já expliquei, o prototype não sobrescreve nada que já esteja definido, portanto, é necessário prestar atenção em um pequenino detalhe.

Há uns tempos atrás, tive um certo problema com a construção do FrameWorX. Não conseguia acessar uma variável que estava fora de uma função que estava usando, mas ainda dentro da classe. Na tentativa-e-erro (leia-se POG), descobri como acessa-la: o prototype. O problema foi que ele não sobrescrevia o valor false. Portanto, nada podia ser definido.

O Princípio

O princípio para o prototype sobrescrever algo é o seguinte: criar esse “algo” com ele mesmo.

function errado() {

  this.variavel = "";

}

errado.prototype.variavel = "Outra coisa"; // Assim não dá certo!

function certo() {

  // Não tem nada definido aqui dentro!

}

certo.prototype.variavel = "Outra coisa"; // Assim funciona!

Esse método pode ser usado dentro de métodos privados para acessar variáveis públicas (meu eterno problema foi resolvido!), funções autônomas (aquelas que não tem nome, tipo window.onload = function() {…}) ou para criar toda a classe.

Criando a Classe

Podemos criar a classe inteira com o prototype. Os métodos e propriedades podem ser adicionados através dele, e inclusive o corpo do construtor, e nada ficaria dentro da definição da função.

Nesse caso, nem sempre é uma boa. Não sei quanto à questão do desempenho, mas o código fica sensivelmente maior, às vezes desnecessariamente.

Espero que não tenham ficado dúvidas. Qualquer coisa, comente!

Posts Relacionados

• Funções em Diferentes Escopos
• JavaScript Orientado a Objetos – Parte 2
• Escopo de Variáveis
• Mootools – Chain
• Estendendo o JavaScript

Meu propósito não é literalmente estender o JavaScript, mas sim alguns de seus objetos nativos, através da POO, aumentando a capacidade dessa linguagem.

Como estender os objetos?

Você teve coragem de perguntar isso? Espero que não. Como já disse na parte 2 sobre JavaScript OO, estendemos qualquer objeto através de prototype. Qualquer objeto mesmo, seja ele criado por nós mesmos ou nativo do JavaScript.

O meu objetivo aqui não é criar métodos extraordinários, é apenas estende-los, tornando algumas funções mais rápidas, economizando código. O negócio é aproveitar ao máximo os recursos que a linguagem nos dá.

Estendendo o Array

O objeto array é muito utilizado na programação. Hoje daremos um uso “incomum” para ele. Transformaremos ele em uma query string. Não é nada muito avançado, já que o JavaScript não nos dá tantas opções. O resultado será: 0=java&1=script, ou seja, um parâmetro (índice numérico do array) com seu valor (valor do array). Vamos ao trabalho:

var nossoArray = new Array("java","script");	// Aqui é o nosso array
Array.prototype.toQueryString = function() { };

Como diria Jack Estripador, vamos por partes. Primeiramente, criamos um simples array. A segunda linha que é o grande segredo: estendemos o objeto array, adicionando um método toQueryString. Fácil como tirar um doce de uma criança.

É, realmente muito fácil. A parte complicada vem exatamente agora. Depois dela tudo fica fácil novamente. Não é exatamente parte do script, mas sim uma questão de lógica. E a pergunta que vale 1 milhão é: … … … como vamos pegar os valores do array, se não passamos nenhum argumento, o array não pode ser acessado por nossoArray (até pode, mas a POO vai por água abaixo, o objetivo é a reutilização de código), e agora?

Analisemos: quando criamos um array, o que ele retorna?

var nossoArray = new Array("java","script");
alert(nossoArray); // Retorno do Array

Isso mesmo, um objeto array retorna ele mesmo. Como referenciamos algo que se refere a si mesmo? this. Agora a parte fácil: juntar tudo com “&”. Vamos preencher nossa função:

var nossoArray = new Array("java","script");	// Aqui é o nosso array
Array.prototype.toQueryString = function() {
	var queryString = "";
	for(var i = 0; i < this.length; i++) {
		if(this[i].indexOf("&") < 0 && queryString.length > 0) queryString += "&" + i + "=" + this[i];
		else queryString += i + "=" + this[i];
	}
	return queryString;
};
var nossaQueryString = nossoArray.toQueryString();
alert(nossaQueryString);

Nada de complicado. Como já disse esses dias: pensar é a alma do negócio. Pode não ser, e realmente não é, a melhor função que você já viu na vida, mas se você entender o conceito, terá um mundo de aventuras pela frente.

Estendendo Strings

Agora vamos fazer o reverso do nosso método. Transformar query strings em arrays associativos. Como já sabemos, o objeto String retorna a string em si, como nos arrays. Vamos aplicar isso em nosso método:

String.prototype.toArray = function() {
	var arrayQuery = Array();
	var tempArray = this.split("&");
	for(var i = 0; i < tempArray.length; i++) {
		var anotherArray = tempArray[i].split("=");
		arrayQuery[anotherArray[0]] = anotherArray[1];
	}
	return arrayQuery;
}

Mais simples ainda, e mais eficiente, já que os índices do array retornado aqui também podem ser strings (nossoArray['primeiro_par']). Acho que não há nada de extraordinário. Vamos adiante.

Estendendo Objetos

Objetos são as coisas mais complicadas de se estender. Quase tudo em JavaScript pode ser tratado como um objeto. Trabalharemos aqui somente com tags, os objetos DOM. Adicionaremos um método que transforma um elemento para negrito, ou para fonte normal.

Essa técnica foi testada apenas no Firefox. Para estender objetos DOM de uma maneira cross-browser, leia: Estendendo Objetos DOM.

Como temos que desobrir com qual objeto estamos trabalhando, devemos nos assegurar que trabalhamos com uma tag. Lembre-se de testar o objeto com o qual se trabalha, para ter certeza de que não haverá funcionamento indesejado.

Nosso código:

Object.prototype.Strong = function(bold) {
	if(this.tagName) {	// Se for tag...
		var weight = bold == true ? "bold" : "normal";	// True = bold; false = normal
		this.style.fontWeight = weight;		// Aplicando o estilo
	}
	return this;	// Retornando o elemento
}

O objeto seria algo do tipo document.getElementById(). Não funciona no IE, servindo só pra exemplo mesmo (quem souber fazer funcionar no IE e puder me dizer eu agradeço).

Outros objetos tornam-se mais difíceis de serem estendidos. Resta a você aprender a utilizar. Existe uma infinidade de coisas para se aprender ainda.

Ressaltando: nota agora a vantagem de se usar a POO? O código pode ser reutilizado em muitas situações, inclusive o próprio código nativo. Boa sorte no desbravamento do mundo prototype!

Posts Relacionados

• Estendendo Objetos DOM
• JavaScript Orientado a Objetos – Parte 1
• JavaScript Orientado a Objetos – Parte 2
• JavaScript Object Notation
• JavaScript Orientado a Objetos – Parte 3