Kaléu P. D. Caminha

Este tutorial objetiva apresentar o uso básico do JSBuilder1 para agrupar e compactar arquivos javascript.

Visão Geral

O que é possível fazer com o JSBuilder 1.1.2?

• Compactar arquivos JavaScript (remoção de tabs, espaços, comentários, etc);
• Agrupar vários JS em arquivos únicos como pacotes;
• Organizar a ordem dos arquivos dentro dos pacotes (importante para arquivos JS que dependam de outros);
• Gerar documentação JS com JSDoc;
• Usar uma INTERFACE GRÁFICA (muito bacana);
• Gerar um arquivo XML de configuração (a interface gera este arquivo automaticamente);
• Criar arquivos JS de Debug.

Problemas encontrados:

• Só funciona com arquvos UTF-8. Quando tentei usar ISO-8859-1 todos os caracteres com acentuação foram removidos (e não consegui resolver de jeito nenhum);
• Não permite agrupamento de arquivos gerados.

Leia mais…

Este artigo objetiva apresentar como utilizar o aplicativo JSBuilder 2 para gerar arquivos javascript únicos e compactados.

Visão Geral

Com ele é possível:

• Compactar JS e CSS (remoção de tabs, espaços, comentários, etc);
• Agrupar vários JS em arquivos distintos (módulos, arquivo único, etc). Também é possível criar arquivos de outros arquivos gerados. Ex: Posso gerar um js único para cada módulo e um arquivo que contenha todos os módulos. Este recurso pode facilitar o Debug.
• Organizar a ordem dos arquivos dentro dos arquivos únicos;
• Usar um arquivo JSON como configuração;
• Criar arquivos de Debug;
• Funciona bem com ISO-8859-1 e UTF-8

Problemas Encontrados:

• Não possui Interface Gráfica, tudo deve ser definido manualmente em um arquivo json;
• Não gera Documentação automaticamente;

Leia mais…

Uma das formas que podemos usar para adicionar funcionalidades a componentes do ExtJS é pelo uso de plugins.

Um Plugin no ExtJS 2.3 é uma classe contendo um método “init” que será chamado logo após a inicialização do componente.

Exemplo de Plugin:

//Exibe um alerta com o ID do componente Plugado
PluginAlert = function() {
    return{
        //Função executada após o "initComponent"
        init: function(cmp){
            alert('Plugin Executado para componente '+cmp.getId())
        }
    }
};

Para usar um plugin, basta instanciá-lo como um ítem do array do atributo de configuração “plugins”.

Exemplo:

new Ext.Panel({
            plugins: [
                new PluginAlert()
            ],
            title: "Exemplo do Plugin de Alerta"
        })

Simples não?
Cabe apenas ao desenvolvedor encontrar formas criativas de trabalhar com o uso de plugins. A melhor forma que encontrei foi utilizá-los combinado ao uso de eventos dos componentes.

Abaixo segue outro exemplo de plugin que atualiza um painel a partir do conteúdo html de uma requisição AJAX:

// create namespace for plugins
Ext.namespace('Ext.ux');
 
/**
 * Ext.ux.PluginPanelUpdater Plugin para Ext.Panel
 * Atualiza HTML de um painel a partir de uma requisição AJAX.
 * @author  Kaléu Caminha
 * @date    10 de Novembro, 2008
 *
 * @class Ext.ux.PluginPanelUpdater
 * @extends Ext.util.Observable
 */
//Construtor
Ext.ux.PluginPanelUpdater = function(config) {
    Ext.apply(this, config);
};
 
//Código do Plugin
Ext.extend(Ext.ux.PluginPanelUpdater, Ext.util.Observable, {
    /**
     * A Função init é executada para todos os plugins após o "initComponent" do componente no qual o plugin é utilizado.
     */
    init: function(panel){
        //Adicionamos evento para quando o painel for renderizado
        panel.on("render", this.updatePanel, this);
        this.panel = panel;
    },
    /**
     * Usa um Updater para atualizar o html de um painel
     */
    updatePanel: function(){
        //Pega Elemeneto
        var el = this.panel.getEl();
 
        //Se frame == true, adiciona conteúdo ao elemento body interno
        if(el.child('.x-panel-body'))
            el = el.child('.x-panel-body');
 
        //Pega updater e realiza chamada do método update
        el.getUpdater().update({
            url: this.url,
            params: this.parms || {}
        });
    }
});

Este tutorial foi baseado no tutorial oficial do ExtJS sobre desenvolvimento de Plugins.

Update 12 de Novembro de 2009
Foi publicado ontem um artigo no blog oficial do Ext sobre o desenvolvimento de plugins, ressaltando a importância de seguir um padrão para que outros desenvolvedores possam extender as funcionalidades criadas por você. Ótima continuação para este post.

Após várias tentativas e algumas experiências bem sucedidas decidi documentar o processo de desenvolvimento conceitual de um componente, o que ele faz, como faz, o que é configurável, etc.

Meu desejo é conversar com a comunidade e propor o desenvolvimento de um manual que auxilie novos desenvolvedores a entenderem não apenas os códigos, mas também o processo de planejamento de uma interface e de desenvolvimento orientado a componentes.

O Todo

Um componente é sempre visto pelo usuário como um “pedaço” ou um “recurso” de interface (em outra linguagem, um quadrado que exibe alguma informação que ele precisa) com a qual ele irá interagir para obter ou inserir alguma informação.

A Informação

Antes de iniciar o desenvolvimento é importante ter em mente quais as informações essenciais que deverão ser exibidas pelo componente e sua ordem de importância. Ter essa visão clara evita desperdício de tempo com retrabalho.

Captura de Eventos

Para que seja exibida a informação correta será preciso interagir com o usuário, o que em interface é comumente feito com o uso de eventos. Existem diversos eventos de interface, teclado, clicks e movimentos do mouse, etc.

As Partes

Para iniciar é preciso separarmos os diversas recursos envolvidos na criação de um componente.

• Ações Públicas: Podem também serem vistas como os casos de uso de um componente, é importante definir a informação de entrada e de saída de uma determinada ação.
• Atributos públicos: Tudo que poderá ser acessado e alterado pelo usuário em tempo de execução.
• Atributos de configuração: Atributos que podem ser indicados na inicialização de um componente.
• Eventos: A forma com mais baixo acoplamento para comunicação de componentes de interface é feita por eventos.

Documentando

Documentar é uma das tarefas mais postergradas no desenvolvimento de software. É possível adquirir uma cultura de programação que torna o trabalho de documentação menos custoso, como por exemplo o uso de annotations, a separação dos métodos da classe por grupo de funcionalidades semelhantes e comentários nos métodos e atributos.

É importante que quem for utilizar o componente tenha claro o uso das quatro partes colocadas acima: “atributos públicos”, “atributos de configuração”, “métodos públicos” e “eventos”.

Além disso, uma descrição de um parágrafo sobre o componente, um print screen dele em funcionamento e um exemplo de caso de uso irão facilitar o trabalho de quem precisa descobrir se um componente é ou não adequado ao seu trabalho.

Conclusão

Estas são apenas algumas observações referentes ao que tenho desenvolvido.

Acredito que a falta de atenção aos ítens colocados aqui podem fazer com que uma empresa julgue o ExtJS (e o uso de interfaces ricas) como “uma péssima ferramenta” quando na verdade o que faltou foi uma mudança de cultura e talvez tempo de treinamento nas novas formas de programar.

Ótimos exemplos de componentes bem documentados podem ser encontrados no site oficial, na área destinada a comunidade.

E você, como é a sua experiência no desenvolvimento de componentes para o ExtJS?

O Tine 2.0 é um sistema de groupware em plataforma web que utiliza o framework Ext JS como base de toda a interface. O sistema possui gerenciador de contatos, tarefas, calendário, etc.

Como minha principal atividade hoje é o desenvolvimento de interfaces com Ext JS decidi fazer uma análise de alguns dos fatores que me chamaram a atenção e que podem ser importantes para projetos futuros.

Fiquem a vontade para acrescentar suas próprias impressõessobre este software e sobre desenvolvimento de aplicações web ricas.

Leia mais…