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!