= !HelloWorld = 

== !HelloWorld parte 1 ==

Considerando a estrutura atual do !ExpressoMail na versão 2.4 do Expresso Livre, vamos construir uma janelinha simples utilizando o componente !DataLayer da nova API. Esta estrutura do !ExpressoMail pressupõe a disponibilidade das funções do [http://jquery.com/ jQuery] e [http://jqueryui.com/ jQuery UI].


Podemos começar com a definição de um elemento (neste caso, uma DIV) que será container da janela a ser criada. Este elemento colocaremos no arquivo {{{expressoMail1_2/templates/default/index.tpl}}}, que já existe no !ExpressoMail.

'''Arquivo''' {{{index.tpl}}}
{{{
...
<div class="hello-world-win" style="display: none;"></div>
}}}

Este elemento pode ser qualquer elemento, bastando que ele seja acessível por um seletor adequado. No caso acima definimos uma classe {{{hello-world-win}}} da tag para este fim. É importante que o seletor seja definido conforme as orientações de [wiki:versions/24/HowTo/Templating/BoasPraticas boas práticas].

Para que o elemento permaneça oculto até que seja solicitada a exibição da janela, utilizamos estilo inline {{{style="display: none;"}}}. E isto é o máximo de estilo inline que deveríamos utilizar.

----


Devemos agora criar um arquivo de template para a nossa janela de !HelloWorld. Para isso vamos criar o arquivo {{{prototype/modules/mail/templates/hellow.ejs}}}.

'''Arquivo''' {{{hellow.ejs}}}
{{{
01    <h1>Hello World!</h1>
02    <p>Templating like a boss!</p>
}}}


----

Precisamos agora de um ponto de partida para abrirmos a tela. Para isto podemos usar qualquer evento -- exemplos de eventos são:
 * {{{$('.hello-world-win').ready()}}};
 * {{{$('.container-específico .button').click()}}};
 * {{{$('.container-específico .button').change()}}};
 * {{{$('.container-específico .button').keydown()}}};
 * {{{$('.container-específico .button').mouseover()}}};
 * entre diversos [http://api.jquery.com/category/events/ outros permitidos pelo jQuery].

Neste exemplo utilizaremos o evento {{{click}}}. Para simplificar, podemos utilizar um elemento já existente na tela do módulo, no qual ao ser clicado, nosso template será carregado e processado. Assim, elegemos arbritrariamente o botão "Atualizar" da tela principal do módulo !ExpressoMail, cujo seletor é {{{#em_refresh_button}}}.

Assim, nosso próximo passo é criar um arquivo que contenha o javascript responsável por carregar e processar o template na tela, quando nosso botão "Atualizar" for clicado. Para isso vamos criar o arquivo {{{prototype/modules/mail/js/hellow.js}}}.

Obedecendo as normas de inclusão de arquivos do Expresso, deverá ser incluído o {{{prototype/modules/mail/js/hellow.js}}} no {{{index.php}}} do módulo do qual a funcionalidade está sendo implementada, no caso !ExpressoMail.

'''Arquivo''' {{{hellow.js}}}
{{{
01    $('#em_refresh_button').click{function() {
02        var data = {};
03        var templateContent = DataLayer.render('../prototype/modules/mail/templates/hellow.ejs', data);
04        var dialog = $('.hello-world-win');
05
06        dialog.html(templateContent);
07    
08        dialog.dialog();
09    });
}}}

Na linha 8 utilizamos o widget [http://jqueryui.com/demos/dialog/ dialog] do jQuery UI.


== !HelloWorld parte 2 ==

Podemos deixar mais interessante, adicionando o nome do usuário na nossa janela de exemplo. 
'''Arquivo''' {{{hellow.ejs}}}
{{{
01    <h1>Hello <%= data.user.name %>!</h1>
02    <p>Templating like a boss!</p>
}}}


'''Arquivo''' {{{hellow.js}}}
{{{
01    $('#em_refresh_button').click{function() {
02        var userObj = DataLayer.get('user', '1003');
03        var data = {user: userObj};
04        var templateContent = DataLayer.render('../prototype/modules/mail/templates/hellow.ejs', data);
05        var dialog = $('.hello-world-win');
06
07        dialog.html(templateContent);
08    
09        dialog.dialog();
10    });
}}}

Na alteração do arquivo {{{hellow.js}}} acima adicionamos uma linha que obtém uma representação do usuário cujo id é igual a {{{1003}}} e passa para o template. No template esta variável é utilizada para escrever o nome do usuário no título do texto dentro da janela.

== !HelloWorld parte 3 ==

Seguindo o exemplo, começaremos a usar o css para estilizar nossa interface, para isso vamos alterar nosso template 

'''Arquivo''' {{{hellow.ejs}}}
{{{
01    <h1>Hello <%= data.user.name %>!</h1>
02    <p>Templating like a boss!</p>
03    <div class="my-div">Div que vai ser estilizada</div>
}}}

Com isto, podemos criar um arquivo .css, e dentro dele inserir seus estilos

'''Arquivo''' {{{hellow.css}}}
{{{
01   .hello-world-win .my-div{
02      background-color : red;
03   }
}}}

É importante notar que, como estamos fazendo um estilo para a hellow, sempre começaremos um estilo dessa forma

'''Arquivo''' {{{hellow.css}}}
{{{
01   .hello-world-win ... {//Continua
02   //Meus estilos
03   } //final da classe
}}}

Isto é, sempre estamos dizendo que este estilo é somente para os dados que estão dentro da hello-world-win, que é o nosso foco