TechTips

Qooxdoo é uma biblioteca de interface visual escrita em JavaScript que provê um grande conjunto de controles permitindo a criação de clientes ricos no browser, tendo compatibilidade com vários browsers em várias plataformas, geralmente em aplicações 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!

Se você é novo por aqui, não deixe de assinar o feed RSS ou notificações por email. Não perca novos artigos!