Construindo Widgets em jQuery (UI)

Olá pessoal, tudo certo?

Da mesma forma que jQuery oferece o método fn.extend() para criar plugins, jQuery UI provê mecanismos para criação de novos plugins.

No post de hoje, mostro como criar esses plugins.

Criando nosso primeiro widget (dummy)

Para começar, criamos um arquivo de script para nosso plugin. Nesse arquivo, adicionamos o seguinte código:

(function ($) {
    $.widget("ui.dummy", {
        options: {
        },

        _create: function () {
            $("
")
                .text("Hello World!")
                .appendTo(this.element);
        },

        destroy: function () {
            $.Widget.prototype.destroy.call(this, arguments);
            this.element.children("#_helloWorldMessage").remove();
        },

        disable: function () {
            $.Widget.prototype.disable.call(this, arguments);
        },

        enable: function () {
            $.Widget.prototype.enable.call(this, arguments);
        }
    });
})(jQuery);

Devemos salvar este arquivo como jquery.ui.dummy.js . Plugins jQuery UI  devem sempre ser nomeados seguindo essa convenção.

Esse código é “esqueleto” para qualquer implementação de Widget com jQueryUI. Então, vamos entender um pouco mais do que escrevemos.

• Plugins jQuery UI precisam sempre ser “encapsulados” como uma função, auto-executável, anônima, que cria o “alias” $ garantindo que o método noConflict() funcione como planejado;
• Usamos $.widget para definir o plugin. Este método aceita dois argumentos
  1. o nome do widget, que deve sempre estar no namespace ui (no nosso exemplo, ui.dummy);
  2. options, que contem as propriedades e métodos que “formam” o plugin. Através desse parâmetro, podemos definir um conjunto de opções customizáveis que vão ser utilizáveis pelos desenvlvedores usuários do plugin;
• o próximo parâmetro é uma função e tem a chave _create . Esta função é usada para iniciar nosso widget. Nela, montamos todo o markup necessário.
• Devemos adicionar um “underline” como prefixo para qualquer método que desejamos manter privados.;
• Devemos manter conformidade com a “interface” comum dos Widgets do jQuery UI provendo os métodos destroy, disable e enable.

Nosso HTML de teste:

Agora, vamos brincar um pouco no Console:

Evocando o destroy…

Nice!

Criando nosso segundo Widget

Já pegamos a idéia geral. Agora, vamos criar algo mais útil. Considere o seguinte Widget (arquivo jquery.io.nicebox.js)

(function ($) {
    $.widget("ui.nicebox", {
        options: {
        },

        _create: function () {
            this.element
                .addClass("ui-widget")

            this.element.children(":first")
                .addClass("ui-widget-header")
                .addClass("ui-corner-top");

            this.element.children(":last")
                .addClass("ui-widget-content")
                .addClass("ui-corner-bottom");

        },

        destroy: function () {
            $.Widget.prototype.destroy.call(this, arguments);

            this.element
                .removeClass("ui-widget")

            this.element.children(":first")
                .removeClass("ui-widget-header")
                .removeClass("ui-corner-top");

            this.element.children(":last")
                .removeClass("ui-widget-content")
                .removeClass("ui-corner-bottom");
        },

        disable: function () {
            $.Widget.prototype.disable.call(this, arguments);
        },

        enable: function () {
            $.Widget.prototype.enable.call(this, arguments);
        }
    });
})(jQuery);

Utilizado nesse.html:

    
    


    

        
Header from target1
        
Content from target1
    

    


    

        
Header from target 2
        
Content from target 2
    

    
    
    

    

Resultando em:

Bacana! Tudo que nosso “widget” faz é aplicar algum estilo CSS (da biblioteca padrão), na interface.

Repare como tomei o cuidado de escrever um destroy.

Bacana!

Por hoje, era isso!