Layout TelEduc - Smarty

Toda a parte visual do TelEduc (código HTML) está organizada em arquivos .tpl, através da ferramenta Smarty.
Temos 2 tipos de arquivos "pai", responsáveis pela interface geral do TelEduc a partir dos quais todas as páginas serão derivadas. Tais arquivos são o layout_inside.tpl e layout_outside.tpl.

layout_inside.tpl e layout_outside.tpl

Arquivos "pai" de todas as páginas do TelEduc. Os arquivos _outside são os arquivos responsáveis pela interface "externa" do TelEduc, ou seja, quando o usuário ainda não está logado (páginas iniciais). Já os arquivos _inside são os responsáveis pelo layout após o login.

Cada arquivo layout_inside.tpl ou layout_outside.tpl é subdividido nas seguintes partes:

  • head.tpl: contém todas as marcações que devem ficar dentro da tag <head> </head> do HTML: title, meta, link, script.
  • header_outside.tpl/ header_inside.tpl: como mostrado nas figuras abaixo, contém o cabeçalho do TelEduc (parte superior).
  • menu_outside.tpl/ menu_inside.tpl: menu lateral esquerdo
  • content.tpl: responsável pelo conteúdo principal da página ("miolo"). Tal arquivo, por sua vez, contém o arquivo content_header.tpl que contém o cabeçalho do conteúdo.
  • footer.tpl: arquivo comum a todas as páginas do TelEduc, contém o rodapé das páginas.

Exemplo layout_outside:

Exemplo layout_inside:

Herança

Como dito anteriormente, cada ferramenta será criada a partir dos templates layout_inside/layout_outside. Para tal, nos arquivos .tpl citados anteriormente, foram especificados como {/block} o intervalo de código a ser modificado de acordo com cada página.

Os trechos a serem especificados por cada ferramenta são:

Arquivo content.tpl: btAuxTabs
Parte anterior a tabela que contém os botões superiores à tabela do conteúdo.

<tr>
   <td valign="top">
      <ul class="btAuxTabs">
         {block name=conteudo_btAuxTabs}{/block}
      </ul>
   </td>
</tr>

Arquivo content.tpl: tabInterna
Tabela principal, onde ficará o conteúdo da ferramenta.

<table cellspacing="0" class="tabInterna">
   {block name=conteudo_tabInterna}{/block}
</table>

Arquivo layout_inside.tpl: conteudo_popup

{block name=conteudo_popup}{/block}

Sendo assim, cada ferramenta deve estender o conteúdo do seu pai (layout_inside.tpl ou layout_outside.tpl) e especificar o bloco de código que achar necessário. Mostraremos 2 exemplos a seguir:

Exemplo 1: Página inicial (auntenticacao.tpl):

{extends file="layout_outside.tpl"}

{block name=conteudo_tabInterna}
<tbody>
//código da ferramenta
</tbody>
{/block}

Exemplo 1: Ferramenta Agenda (agenda.tpl):

{extends file="layout_inside.tpl"}

{block name=conteudo_btAuxTabs}
  <li><span onclick="NovaAgenda();">Nova Agenda</span></li>                  
  <li><a href="ver_editar.php?cod_curso=1&amp;cod_usuario=-1">Editar Agendas</a></li>
  <li><a href="ver_anteriores.php?cod_curso=1&amp;cod_usuario=-1&amp;cod_usuario=-1">Agendas Anteriores</a></li>
{/block}

{block name=conteudo_tabInterna}
<tbody>
  <tr class="head">
    <td class="alLeft">Título</td>
  </tr>
  <tr>
    <td colspan="5">Nenhuma agenda adicionada ainda!</td>
  </tr>
</tbody>
{/block}

{block name=conteudo_popup}
<div class="popup" id="layer_nova_agenda">
  //conteudo
</div>
{/block}

layout_inside.png (73,022 KB) Alline Kobayashi, 31/01/2011 12:29

layout_outside.png (79,538 KB) Alline Kobayashi, 31/01/2011 12:30