wiki:versoes/24/HowTo/Templating/HelloWorld

Version 2 (modified by gustavo, 12 years ago) (diff)

sobre css

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    <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