Dando continuidade a nossa integração, vamos dar uma rapida olhada na criação de layouts utilizando o dojo toolkit. Basicamente ele vai construir todos os blocos que formam o seu layout. Criando os DIVs com os IDs que você definir (que terão o estilo presente no css). O código final fica bem interessante e você já vai se habituando a utilizar os helper dos dojos e seus view.
Para esse exemplo, vamos utilizar novamente o Zend_Layout para abstrair o nosso html. Exemplo:
teste.phtml
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="pt-br" xmlns="http://www.w3.org/1999/xhtml" lang="pt-br">
<head>
<link rel="stylesheet" type="text/css" href="/estilos/teste.css">
dojo()->isEnabled()){
$this->dojo()->setLocalPath('/js/dojo/dojo.js')
->setDjConfig(array(
'parseOnLoad' => true,
'extraLocale' => array('pt-br', 'en-us')
))
->addStyleSheetModule('dijit.themes.nihilo');
}
?>
dojo(); ?>
borderContainer()->captureStart('corpo', array('design' => 'headline'));
/* CABEÇALHO: INICIO */
echo $this->contentPane(
'cabecalho',
'TESTE DE LAYOUT COM DOJO'
);
/* CABEÇALHO: FIM */
/* BARRAS_EXTRAS: INICIO */
echo $this->contentPane(
'caixa_mensagem',
'CAIXA DE MENSAGEM'
);
/* BARRAS_EXTRAS: FIM */
/* CONTEUDO: INICIO */
echo $this->contentPane(
'conteudo',
$this->layout()->content
.$this->inlineScript()
);
/* CONTEUDO: FIM */
/* MENU LATERAL: INICIO */
$barra_lateral = $this->contentPane(
'menu_lateral',
'Opções
- Opção 1
- Opção 2
- Opção 3
- Opção 4
- Opção 5
'
);
echo $this->contentPane(
'box_menu_lateral',
$barra_lateral
);
/* MENU LATERAL: FIM */
echo $this->borderContainer()->captureEnd('corpo');
/* CORPO: FIM */
?>
</body>
</html>
Explicando um pouco essa sopa de código. Logo no início do arquivo, adicionamos o Dojo em nosso layout e setamos para que ele utilize o tema chamado “nihilo”. É um tema bem interessante, para se trabalhar em escala de cinza.
Na sequência, criamos um “borderContainer” Start. Desse trecho, até o “borderContainer” End, ele vai capturar todo o código e jogara dentro de um div chamado “corpo”.
Seguindo a ordem das coisas, o próximo elemento a ser criado é o cabeçalho, seguido pela barra de mensagens. O “conteudo” e a “barra_lateral” são os próximos da lista. Eles ficarão um ao lado do outro (veremos isso logo a seguir no css).
Se você já percebeu o padrão de uso, o primeiro parametro do elemento é sempre o seu ID enquanto o segundo é o seu valor.
É o elemento “conteudo”:
/* CONTEUDO: INICIO */
echo $this->contentPane(
'conteudo',
$this->layout()->content
.$this->inlineScript()
);
/* CONTEUDO: FIM */
que irá receber a saída da view do seu sistema. Os outros DIVs estão com os valores fixo, mas eles podem ser facilmente substituidos utilizando “placeholders” ou algum helper (para criar o menu por exemplo).
Para testar perfeitamente esse código, crie também esse arquivo de estilo:
teste.css
/* TAGS GENERICAS:INICIO */
body{font:12px verdana,arial,tahoma;background:#ffffff;}
ul{list-style:none;}
h3{font:13px verdana,arial,tahoma;color: #7172A3;font-weight: bold}
/* TAGS GENERICAS:FIM */
/* ELEMENTOS DO LAYOUT:INICIO */
#cabecalho{height: 40px; color: #ffffff; background-color: #794256;font-family: Georgia,"Times New Roman","Bitstream Charter",Times,serif;font-size: 22px;padding: 10px;}
#caixa_mensagem{color: gray; background-color: #fffbcc;font-family: verdana, arial;font-size: 11px;padding: 10px;border-top: 1px solid #e6db55;border-bottom: 1px solid #e6db55;margin-top: 2px}
#caixa_mensagem div{height: 15px;}
#conteudo{float: left; background-color: black; padding: 3px;margin-top: 3px}
#menu_lateral{background-color: silver; padding: 3px;}
#box_menu_lateral{float: right; width: 230px; background-color: black; padding: 3px;margin-left: 10px;margin-top: 3px}
/* ELEMENTOS DO LAYOUT:FIM */
Se tudo correu bem, você terá algo parecido com isso:
Exemplo de layout com dojo
*OBS: O texto dessa screenshot está na view que chamei.
Por fim, acredito que fora o carater educativo do dojo layout é possivel se virar muito bem sem ele. Mas para um sistema totalmente integrado e interativo com dojo, ele é fundamental. Mas se me permitem uma ultima dica: Utilizem esse aprendizado apenas nas views e deixe o dojo layout amadurecer mais.
^^
