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 jQuery e 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 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 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 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 <button class="button close small">Fechar</button>
Com isto, podemos criar um arquivo .css, e dentro dele inserir seus estilos
Arquivo hellow.css
01 .hello-world-win .button.close{ 02 color : red; 03 } 04 .hello-world-win .button.small{ 05 height: 24px; 06 }
É 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