JS

Nosso Javascript também é simples. Veja só:

widget.js

Widget.register('previsao-meteorologica', {
    container : $('.widget'),
    load : function()
    {
        var createInfo = function(config, data, mini)
        {
            var now = (new Date).getHours();
            var isNight = (now >= 18) || (now <= 5);
            var html = '';

            if(mini)
            {
                html = '<div class="infos mini clearfix">\
                            <div class="left">\
                                <div class="status mini ' + data.icon + (isNight ? ' night' : '') + '"></div>\
                            </div>\
                            <div class="left p-l-20">\
                                <div class="clearfix">\
                                    <p class="left temperature">' + data.temperature.max + '&ordm;</p>\
                                    <p class="left temperature min">' + data.temperature.min + '&ordm;</p>\
                                </div>\
                                <time>' + data.date + '</time>\
                            </div>\
                        </div>';
            }
            else
            {
                html = '<div class="infos clearfix">\
                            <div>\
                                <p class="city text-shadow">Agora em ' + config.name + '</p>\
                                <p class="description text-shadow">' + data.status + '</p>\
                                <div class="status ' + data.icon + (isNight ? ' night' : '') + '"></div>\
                            </div>\
                            <div class="p-l-30">\
                                <p class="temperature text-shadow">' + data.temperature.max + '&ordm;</p>\
                                <p class="temperature text-shadow min">' + data.temperature.min + '&ordm;</p>\
                            </div>\
                        </div>';
            }

            return $(html);
        };
        var sidebar = this.container.find('aside'), i = -1, info;

        while(++i < this.data.weather.length)
        {
            info = createInfo(this.config, this.data.weather[i], i > 0);

            if(i == 0)
                sidebar.prev().append(info);
            else
                sidebar.append(info);
        }
    },

    animate : function()
    {
        var self = this;

        setTimeout(function(){
            self.container.addClass('animate-1');
        }, 500);

        setTimeout(function(){
            self.container.addClass('animate-2');
        }, (this.container.data('interval') / 2) * 1000);
    },

    start : function()
    {
        this.data = this.container.data('widget-data');
        this.config = this.container.data('widget-config');
        this.load();
        this.animate();
    },

    stop : function()
    {
        this.container.find('.infos').remove();
        this.container.find('[style]').attr('style', '');
    }
});

Content.on('ready', function(){
    Widget.play('previsao-meteorologica');
});

Em primeiro lugar nós registramos o widget:

Exemplo

Widget.register('previsao-meteorologica', {
    // ...
});

O registro é feito através do método Widget.register() passando dois argumentos: o nome do widget e um objeto com suas definições. Um widget válido deve ter no mínimo dois métodos: start() e stop().

Método	Descrição
start()	Chamado para iniciar o processamento do widget. Este é o ponto de entrada para o seu código.
stop()	Chamado quando a execução do widget é finalizada. Pode ser usado para limpar referências e objetos.

Portanto, a estrutura mínima para um widget deve ser:

Exemplo

Widget.register('meu-widget', {
    start : function()
    {
        // início da execução
    },
    stop : function()
    {
        // fim da execução
    }
});

No caso do nosso widget, nós definimos mais dois métodos: load(), usado para carregar os dados e montar a interface; e animate(), usado para disparar as animações CSS. Como são métodos arbitrários nós não entraremos nos detalhes.

Prosseguindo, no final do arquivo existe o seguinte código:

widget.js

Content.on('ready', function(){
    Widget.play('previsao-meteorologica');
});

Aqui nós aguardamos pelo evento ready para então iniciar o processamento do widget.

Note que é necessário passar o nome do widget para o método Widget.play(), que por sua vez recupera a instância do widget e chama o método start() que nós definimos.

Dica

Os objetos Widget e Content fazem parte da biblioteca da plataforma DSME, e sempre estarão disponíveis no momento em que o seu script for executado.

Próximo passo

Em se tratando de Javascript, isso é tudo o que você precisa fazer para ter um widget funcionando. Na próxima página você verá com mais detalhes como recuperar os dados do widget.