= Camada de Visualização =
[[WikiInclude(WF/tableofcontents)]]

Corresponde à interface do sistema, onde as pessoas irão interagir com formulários para entrada de dados. Podemos também considerar como camada de visualização outras formas de interação, como as interfaces para programas (API) ou webservices, mas não é o caso do módulo workflow por enquanto.

== Características ==

 * Essa camada deve saber apenas como apresentar os dados gerados pelo sistema; 
 * Manipulada diretamente apenas pela camada Control, como um de seus atributos; 
 * Não deve fazer restrições de segurança ou validação de dados, que são funções da camada Model; 
 * Apresenta interface para interação (entrada de dados) com o usuário; 
 * Formata e exibe dados vindos da camada Model.

== Estrutura ==

O módulo workflow faz uso do gerenciador de templates Smarty, que é um conhecido projeto do mundo PHP para gerenciar a camada de visualização. Por conseguência, não será necessário criar classes como foi feito nas camadas de Controle e Modelo, mas as interfaces serão contruídas como Templates a serem executados pelo Smarty.

Os templates podem ser editados diretamente na pasta templates do modelo de estrutura de diretórios do processo, mas também podem ser editados pela [wiki:WF/Edicaodecodigo interface de edição de código], na aba 'Templates'.

É importante dar uma olhada no [http://smarty.php.net/ site do projeto Smarty] para conhecer suas potencialidades. Aqui nesta documentação será tratado somente o essencial.

O exemplo abaixo corresponde ao template 'Solicitar.tpl' do processo Music Cd Loans', que é um dos processos de exemplo que acompanham o módulo workflow. O seu objetivo é mostrar uma lista de Cds para o usuário e colocar um botão para solicitar o empréstimo:

{{{
{wf_default_template}
<div id="conteudo_corpo">
<h2>Solicitar Empréstimo</h2>
<table class="form_tabela" width="100%" cellspacing="0" border="0" align="center">
  <tr>
    <td width="100%">
      <table id="list_tabela_clara" width="60%" cellspacing="0"> 
        <tr>
          <th>CD Desejado:</th>
        </tr>
        <tr>
          <td>
            <select id="cdsel">
              {section name=ix loop=$cds}
                <option value="{$cds[ix].cdid}">{$cds[ix].title}</option>
              {/section}
            </select>				
          </td>
        </tr>
        <tr>
          <td>
            <input type="button" class="form_botao" onclick="dispatch('Solicitar',        
                document.getElementById('cdsel').options[document.getElementById('cdsel').selectedIndex].value)" 
                value="Solicitar"/>
          </td>
        </tr>
      </table>
    </td>
  </tr>	
</table>
</div>
}}}

O exemplo começa com a inserção de um plugin responsável pelo cabeçalho e rodapé da página: {wf_default_template}

A seguir prossegue montando uma tabela em que uma das colunas terá um campo de seleção, representado pela tag "<select>". Para montar o conteúdo desta tag, está sendo usando o comando Smarty {section} que fará um loop sobre a variável $cds. O resultado será uma lista de tags <options>.

Depois o exemplo continua com a inserção de um botão cuja ação principal é a chamada da função javascript dispatch() que irá invocar a camada de Controle passando a ação solicitada pelo usuário.

Concluindo, em um template Smarty pode-se fazer muitas coisas, e o mais importante é entender que o template terá comportamento dinâmico conforme forem os dados passados para ele. No exemplo anterior, vê-se uma mistura de html, javascript, css e comandos do Smarty. Tudo aquilo que começar com o caracter cifrão ($) representa uma variável que foi carregada pela camada de Controle com o método loadViewVars. Quando o Smarty executar o template irá substituir as variáveis pelos seus respectivos valores, e executar os comandos. O resultado será a página a ser enviada para o usuário.