Ele funciona abrindo uma janela DHTML dentro de qualquer página que você estiver navegando, permitindo você interagir com o código JavaScript existente nessa página, com a própria página, ou digitar comandos independentes.

Você pode fazer o download diretamente do site oficial da ferramenta. Para usar, basta atualizar os caminhos dentro do arquivo .js para o local que ele foi salvo, adicionar uma referência na página que você está desenvolvendo, ou mais fácil ainda, criar um bookmarklet apontando para ele.

Vá em frente, clique no link acima e veja o Jash funcionando diretamente aqui. Ele completa nomes de objetos, propriedades e funções com a tecla Tab, além de ter vários recursos interessantes para ajudar a desenvolver sua aplicação web. Bem útil.

Este artigo é uma introdução de JavaScript, para você deixar de vê-la como uma forma de fazer pequenos scripts em browser e passar a reconhecer o potencial que ela tem, como uma linguagem orientada a objetos, com recursos únicos muito bons.

Primeiramente, é necessário se desligar do nome bastante enganador: JavaScript não tem herança alguma de Java – chamava LiveScript quando foi implementada pela primeira vez pela Netscape (e Mocha, antes disso). Ganhou o prefixo Java em uma jogada de marketing da Netscape aliada com a Sun, sem ter ganhado nada que a tornasse mais perto dessa outra linguagem da Sun, que estava começando a entrar na moda em 1995.

O sufixo Script do nome também dá uma impressão errada. Ela não tem mais de “script” do que outra linguagens interpretadas por aí. Apesar do host mais comum que estamos acostumados a ver JavaScript executando são os browsers, não existe nada na definição da linguagem que a limite nesse sentido.

Tendo isso esclarecido, podemos partir para JavaScript. É uma linguagem dinâmica, fracamente tipada, com orientação a objetos baseada em prototipos. O que isso quer dizer?

A primeira parte, linguagem dinâmica, é algo que está na moda ultimamente. Uma linguagem dinâmica é uma que é capaz de alterar sua estrutura durante a execução, algo que em linguagens tradicionais, acontece durante a compilação. Isso quer dizer que JavaScript pode criar novos tipos, adicionar métodos em objetos existentes.

Ser fracamente tipada é uma faca de dois gumes – variáveis não possuem tipos estritamente definidos, funções não obrigam tipos de parâmetros pré-determinados (nem a quantidade deles). Permite uma programação muito mais flexível do que seria possível em uma linguagem fortemente tipada, dando um poder muito grande para JavaScript, mas requer uma atenção maior do programador.

Finalmente, é orientada a objetos. Não tem, porém, classes ou tipos, como a orientação a objetos tradicional. Como pode ser orientada a objetos sem classes? JavaScript segue o modelo de orientação a objetos Prototipal. Nesse modelo, objetos são construídos, funções e campos são adicionados neles, e eles servem de protótipo, como uma forma, para outros objetos descendentes, sendo clonados e permitindo que funcionalidade seja adicionada na instância descendente. É uma modelo de difícil compreensão para quem está acostumado com a forma clássica, mas que, como os outros recursos que vimos até agora, dá para JavaScript um potencial enorme de solução de problemas de uma forma diferente da qual estamos acostumados.

Em JavaScript, tudo é um objeto. Inclusive funções são objetos, podendo ter membros, e métodos (outras funções). Outra característica interessante é que todos os objetos não são nada mais que Hashes – estruturas nome=valor contendo todos os campos e métodos da classe, que podem ser enumerados e alterados em qualquer momento que for necessário. 

Na próxima parte, vamos criar alguns objetos em JavaScript para aprender o básico da sintaxe, e descobrir o que é lambda e closures, recursos que tornam a implementações de funções um tanto mais fácil.

Pré-requisitos

O Qooxdoo utiliza uma espécie de compilação para gerar os arquivos de JavaScript para desenvolvimento e depuração ou para o deployment final (com otimizações extras). Isso é feito utilizando o make da GNU, disponível no windows através do cygwin. Baixe então o instalador web do cygwin. Rode a instalação e prossiga escolhendo um mirror qualquer, uma pasta de instalação qualquer, até chegar na seleção de pacotes. Não aceite os valores padrão – para desenvolver aplicações Qooxdoo, além dos pacotes padrão, você vai precisar selecionar os seguintes pacotes:

• Archive
  • zip
  • unzip
• Devel
  • make
  • gettext
  • gettext-devel
• Interpreters
  • python
• Net
  • rsync
• Web
  • wget

 Para selecionar um pacote, clique sobre o texto “skip” ao lado dele para instalar a versão mais recente disponível.

Qooxdoo SDK

Após concluir a instalação do cygwin com sucesso, baixe o SDK do Qooxdoo. A versão mais recente, enquanto escrevo isto, é a 0.6.6. Basta descompactar o arquivo em alguma pasta.

Abrindo um prompt do cygwin (um shell bash, para quem está acostumado com ele no Linux), vá até a pasta que você descompactou o SDK. Geralmente, no cygwin, suas partições de dados do windows vão estar em /cydrive/unidade. No prompt do Cygwin, digite algo parecido com isso, portanto:

$ cd /cygdrive/c/projetos/qooxdoo-0.6.6-sdk/frontend/
$ make

 Se tudo correu bem com a instalação até aqui, ele deve fazer a geração dos arquivos JavaScript contendo o código fonte do Qooxdoo. Para testar, você já pode abrir o arquivo frontend/application/index.html em um browser e testar os exemplos que vem com ele.

A primeira aplicação

Se você gerou os arquivos com sucesso, o próximo passo é criar a sua primeira aplicação com o Qooxdoo (ou a segunda, se você acompanhou o primeiro artigo e já usou a versão quickstart).

A maneira mais fácil de iniciar uma nova aplicação vazia com o Qooxdoo é usando o esqueleto de uma aplicação vazia que vem com ele. Você vai encontrar esse esqueleto na pasta frontend/application da SDK, compactado em um arquivo .tar.gz. Descompacte esse arquivo para uma pasta qualquer (no meu caso, vou descompactar na mesma pasta onde descompactei a SDK, c:\projetos- você vai ter que arrumar os caminhos relativos nas configurações abaixo se colocar em uma pasta diferente). Renomeie a pasta para ter o nome do seu projeto.

O próximo passo é configurar o makefile, que vai estar dentro dessa pasta. Abra o makefile em um editor de texto e preencha os valores das variáveis QOOXDOO_PATH e QOOXDOO_URI. No meu caso, ficou assim:

QOOXDOO_PATH = ../qooxdoo-0.6.6-sdk
QOOXDOO_URI = ../../qooxdoo-0.6.6-sdk

 Neste ponto já podemos gerar nossa aplicação – basta navegar até essa pasta pelo prompt do cygwin e rodar o make.  Se tudo correu bem, você pode abrir o arquivo source/index.html no seu browser e ver (novamente) o hello world.

Agora basta editar o arquivo source/class/custom/Application.js colocando o código que você quiser. A partir desse ponto, não precisa mais rodar o make a cada alteração – basta salvar e recarregar a página no seu browser.

Espero que tenha conseguido instalar o Qooxdoo – nos próximos artigos, como depurar o JavaScript (seu e do Qooxdoo), e como gerar e distribuir sua aplicação AJAX.

Ele tira proveito dos recursos de orientação a objeto de JavaScript (sabia que JavaScript é orientado a objeto?), tendo uma hierarquia poderosa de classes. O Delphi para PHP utiliza essa biblioteca para prover alguns recursos de forma bem automática, mas é possível utilizar o qooxdoo diretamente.

Para começar direto com a mão na massa, baixe a versão quickstart do qooxdoo, descompacte em uma pasta, e abra o index.html em um browser qualquer. Já é possível clicar no botão e ver a clássica mensagem “Hello World”. Deste ponto, você pode abrir o Application.js e fazer algumas alteracões para brincar um pouco com os recursos que ele tem. Uma sugestão:

qx.Proto.main = function(e)
{
        var docRoot=qx.ui.core.ClientDocument.getInstance();

        docRoot.setBackgroundColor("lightGray");

        var t1 = new qx.ui.form.TextField("Hello World");
        t1.setTop(25);
        t1.setLeft(10);

        var l1 = new qx.ui.basic.Label("Titulo");
        l1.setTop(10);
        l1.setLeft(10);

        var l2 = new qx.ui.basic.Label("<a href='http://www.techtips.com.br'>http://www.techtips.com.br</a>");
        l2.setTop(50);
        l2.setLeft(10);

        var btnAbreJanela = new qx.ui.form.Button("Abre Janela");
        btnAbreJanela.setTop(22);
        btnAbreJanela.setLeft(95);
        btnAbreJanela.addEventListener("execute", function() {
            var w1=new qx.ui.window.Window(t1.getValue());
            w1.setSpace(20,180,48,80);
            docRoot.add(w1);

            var btnFechaJanela = new qx.ui.form.Button("Fecha Janela");
            btnFechaJanela.setTop(13);
            btnFechaJanela.setLeft(50);
            btnFechaJanela.addEventListener("execute", function() {
                w1.close();
            });

            w1.add(btnFechaJanela);

            w1.open();
        });

        docRoot.add(l1);
        docRoot.add(l2);
        docRoot.add(t1);
        docRoot.add(btnAbreJanela);
};

Depois de copiar isso no seu arquivo .js, atualize o browser e crie várias janelas dentro do seu browser. Deixei disponível um demo online se você quiser ver o resultado diretamente. Ou ainda, veja o resultado rodando dentro do meu Firefox:

Para descobrir as classes que existem e suas propriedades, acompanhe a documentação do Qooxdoo pelo seu API Viewer (feito em Qooxdoo, aliás).

Depois disso, se você quiser utilizar o qooxdoo para um desenvolvimento maior, você deve instalar a versão completa, baixando o pacote do SDK. Vou escrever mais artigos detalhando a instalação dessa versão completa, a depuração de programas JavaScript dentro do browser, e algumas dicas da linguagem JavaScript (ela é bem mais poderosa do que muitos imaginam!). Fique ligado!