Yii: Trabalhando com temas.

Ao criarmos uma aplicação web pelo Yii, ela, por padrão, fica com essa “cara”:

Ok, é um tema simples e (relativamente) até bonito, mas qual seria a graça se todos os sites tivessem a mesma aparência? Nenhuma! Por isso, neste artigo irei mostrar como você poderá exercer sua criatividade e colocar um tema diferente em sua aplicação. Falando em criatividade, design não é o meu forte, por isso usarei como exemplo um tema free desses encontrados facilmente na Web. Logo postarei o link de onde você poderá baixá-lo, mas antes disso, iremos ver primeiramente como o Yii trata a questão dos temas.

Primeiramente, navegue até a pasta protected\views\layouts da aplicação. Nessa pasta você encontrará 3 arquivos:

  • main.php – esse arquivo é o “esqueleto” do nosso tema. É ele quem define o layout do nosso site.
  • column1.php e column2.php – Pense nesses dois como “peças de código” que serão inseridas no layout principal. Alguns controllers utilizam o column1.php, outros o column2.php. Na verdade, nenhum dos dois é obrigatório quando você utiliza seu próprio tema.

Vamos entender melhor como esses 3 arquivos funcionam.

Abra o arquivo protected\views\layouts\main.php. Não irei colar o conteúdo dele aqui, pois não será necessário. Nele, procure pela linha abaixo:
echo $content;

Quando chamamos uma view, essa linha faz com que o conteúdo processado pela view seja exibido em nosso layout. Mas como é gerado esse tal $content? Quando um Controller chama o método render, ele retorna uma string com o conteúdo da view. Essa string é passada para nosso layout através da variável $content. Então é aí que nosso arquivo de layout exibe o conteúdo da view.

Tá, mas e os arquivos column1.php e column2.php? Falaremos deles agora. Mas antes, abra o arquivo do nosso Controller “pai”, em protected\components\Controller.php. Todos os nossos controllers derivam dele. Dê uma olhada na linha 12:

 public $layout='//layouts/column1';

Essa declaração define o valor da variável $layout. Ele indica que nosso controller deverá utilizar o layout indicado pela variável (no caso, column1.php). Como estamos no código de nosso Controller “pai”, todos os controllers derivados dele usarão esse mesmo layout, a não ser que seja especificado de outra forma (logo veremos). Abra então o arquivo protected\views\layouts\column1.php. Veja o conteúdo dele:

 /* @var $this Controller */
 $this--->beginContent('//layouts/main'); ?></pre>
<div id="content"></div>
<pre>
<!-- content -->
 <!--?php $this----->endContent(); ?>

A linha 2 chama o método beginContent de nosso controller. Esse método pega o conteúdo da view main.php (pois nosso layout é em si, uma view), processa-o e substitui o conteúdo da variável $content (do arquivo main.php) pelo conteúdo que está entre o beginContent e o endContent (linha 6). Repare que nesse meio há outra variável $content. Quando usamos um arquivo de layout diferente, o conteúdo da view chamada é passada para a variável $content desse layout (no caso, column1.php). Só então esse conteúdo é passado para a variável $content do layout “principal” (no caso, main.php).
Confuso? Nem tanto. Pegue como exemplo a action Index da classe SiteController:

 public function actionIndex()
 {
  // renders the view file 'protected/views/site/index.php'
  // using the default layout 'protected/views/layouts/main.php'
  $this->render('index');
 }
  1. A linha 32 chama o método render do controller.
  2. Como nosso controller “pai” define que o layout column1 deverá ser usado, o conteúdo da view index é passado para a variável $content do arquivo column1.php.
  3. O método beginContent dentro de column1.php pega então o conteúdo do layout principal (main.php) e procura pela variável $content, substituindo-a pelo conteúdo que está entre os métodos beginContent e endContent.
O mesmo acontece com o arquivo column2.php. A diferença é que o column2 acrescenta o menu para edição de dados. Ele é chamado, por exemplo, nos controllers ClientesController (linha 9) e UsuariosController (linha 9). Dê uma olhada tanto nos controllers quanto no arquivo column2.php.
Acredito que até aqui deu para entender o funcionamento básico do tema padrão.
Mas eu quero usar o meu tema. E aí?
Agora vamos à parte mais divertida. Primeiramente, baixe o template que usaremos como base. Após baixá-la, descompacte-a em uma pasta qualquer.
O Yii usa a pasta Themes para armazenar templates personalizados. Vá até essa pasta (que está na pasta raiz de nossa aplicação) e crie uma subpasta chamada tutorial. Na pasta tutorial, crie uma subpasta chamada views, e dentro desta, outra subpasta, chamada layouts. Ou seja, você criará essa estrutura de pastas: Themes\tutorial\views\layouts\.
Copie então a pasta images e o arquivo style.css baixados anteriormente. Cole-os na pasta tutorial. Copie o arquivo index.html e cole-o na pasta layouts de nosso tema. Não usaremos o arquivo index2.html. Renomeie o arquivo index.html para main.php.

Vamos então configurar nosso sistema para que use nosso tema. Para isso, abra o arquivo de configuração (protected\config\main;php). Logo no começo dele, você verá:

return array(
 'basePath'=>dirname(__FILE__).DIRECTORY_SEPARATOR.'..',
 'name'=>'My Web Application',

Façamos um teste. Substitua a linha ‘name’=>’My Web Application’, por ‘name’=>’Tutorial do Yii’,. Abra o site e veja que o título no topo da página foi alterado:

Para indicar ao Yii que queremos utilizar o nosso tema é simples: acrescente a linha ‘theme’=>’tutorial’, logo após a linha do name. Então essa parte da configuração ficará assim:

return array(
 'basePath'=>dirname(__FILE__).DIRECTORY_SEPARATOR.'..',
 'name'=>'Tutorial do Yii',
 'theme'=>'tutorial',

Abra o site novamente. Repare que o layout mudou, mas ainda não está do jeito que gostaríamos:

As imagens não aparecem, e o css não está sendo executado. Para corrigirmos isso, teremos que editar o arquivo main.php.
Abra-o então em seu editor preferido. Procure pela linha:

		<link href="style.css" rel="stylesheet" type="text/css" />

Troque-a por:

		<link href="<?php echo Yii::app()->theme->baseUrl ?>/style.css" rel="stylesheet" type="text/css" />

A propriedade theme->baseUrl guarda a url do tema. Precisamos usá-la para indicarmos corretamente arquivos de estilo, scripts e imagens que estejam na pasta de nosso tema. Salve o arquivo e abra novamente o site. Você verá que agora o layout está correto. Faltam apenas as imagens. Corrija-as, acrescentando o trecho “theme->baseUrl ?>/” ao atributo src das mesmas.

Ok, as imagens estão aparecendo e o layout está correto, mas…cadê o nosso conteúdo?
Lembra-se da variável $content? Iremos utilizá-la agora. Com o main;php ainda aberto, procure pela div “content”:

</pre>
<div id="content"><a class="advertising" href="#">Advertising</a>
 <img alt="" src="<?php echo Yii::app()->theme->baseUrl ?>/images/photo.jpg" width="721" height="132" />
<div class="bigblock"><img alt="" src="<?php echo Yii::app()->theme->baseUrl ?>/images/title1.gif" width="136" height="33" />

Lorem ipsum dolor sit amet, consectetuer adipi scing elit.Mauris urna urna, varius et, interdum a, tincidunt quis, libero. Aenean sit amturpis.

Maecenas hendrerit, massa ac laoreet iaculipede mnisl ullamcorpermassa, cosectetuer feipsum eget pede. Proin nunc. Donec nonummy, tellus er sodales enim, in tincidunmauris in odio. Massa ac laoreet iaculipede nisl ullamcorpermassa, ac consectetuer feipsum eget pede. Proin nunc. Donec massa. Nulla pulvinar, nisl ac convallis nonummy, tellus eros sodales enim, in tincidunt mauris in odio. massa ac laoreet iaculipede niorpermassa,consectetuer feipsum eget pede. Proin nunc. Donec massa. Nulla pulvinar, nisl ac convallis nonummy, tellus eros sodales enim, in tincidunt mauris in odio. Lorem ipsum dolor sit amet, consectetuer adipi scing elit.Mauris urna urna, varius et, interdum a, tincidunt quis, libero. Aenean sit amturpis.

Maecenas hendrerit, massa ac laoreet iaculipedenisl ullamcorpermassa, ac consectetuer feipsum eget pede. Proin nunc. Donec massa. Nulla pulvinar, nisl ac convallis nonummy, tellus eros sodales enim, in tincidunt mauris in odio. massa ac laoreet iaculipede nisl ullamcorpermassa, ac consectetuer feipsum eget pede. Proin nunc. Donec massa. Nulla pulvinar, nisl ac convallis nonummy, tellus eros sodales enim, in tincidunt mauris in odio. massa ac laoreet iaculipede nisl ullamcorpermassa,consectetuer feipsum eget pede. Proin nunc. Donec massa. Nulla pulvinar, nisl ac convallis nonummy, tellus eros sodales enim, in tincidunt mauris in odio.

Maecenas hendrerit, massa ac laoreet iaculipede mnisl ullamcorpermassa, cosectetuer feipsum eget pede. Proin nunc. Donec nonummy, tellus er sodales enim, in tincidunmauris in odio. Massa ac laoreet iaculipede nisl ullamcorpermassa, ac consectetuer feipsum eget pede.

 <a href="#">Our Services</a></div>
<div class="news"><img alt="" src="<?php echo Yii::app()->theme->baseUrl ?>/images/title2.gif" width="83" height="33" />
<div class="newsblock">
23 december

Lorem ipsum dolor sit asectetuer adip scing elit mauris urna urna, unt quis, libero. Maecenas hen- drerit, massa ac laoreet iaculip- edenisl ullamcorpermassa.

<a href="#">read more</a></div>
<div class="newsblock">
11 december

Lorem ipsum dolor sit asectetuer adip scing elit mauris urna urna, unt quis, libero. Maecenas hendrerit, massa ac laoreet iaculipedenisl. Donec massa. Nulla pulvinar, nisl ac convallis nonummy, tellus eros sodales enim, in tincidunt mauris in odio. massa ac laoreet iaculipede nisl ullamcorpermassa.

<a href="#">read more</a></div>
</div>
</div>
<pre>

Substitua seu conteúdo por esse:

</pre>
<div id="content">echo $content;</div>
<pre>

Aproveite também e comente a linha 12 do arquivo protected\components\Controller.php:

    //public $layout='//layouts/column1';

Foi necessário comentar essa linha pois não queremos usar o layout column1. Se você remover o comentário, perceberá que esse layout será usado, mesmo não existindo na pasta de nosso template. Isso ocorre porque o Yii primeiro procura pelas views na pasta do tema que está sendo usado. Caso não as encontre, ele procura na pasta views da aplicação. Comente também as chamadas para o layout column2, nos controllers Clientes e Usuarios.

Vemos então que nosso conteúdo já está sendo exibido no site, mas usando nosso tema personalizado:

Como você deve ter percebido, o tema não está totalmente adaptado. Deixo para você como exercício. Tente personalizar o header, os menus e o login da página. Garanto que aprenderá muito mais fazendo isso.

Na próxima (e última) parte deste tutorial mostrarei como personalizar pesquisas de dados.

felipebastos disse:
2

olá,

poderia explicar como incluir thema usando o yii-bootstrap? Segui o setup fornecido no site oficial mas não funciona. sempre aparece o tema classic. tentei de outras formas (copiando e colando views, etc) mas aí só aprece a view, e o layout () não aparece.

Seria de grande ajuda, vlw

Julia disse:
0

Olá, não entendi a parte:
Faltam apenas as imagens. Corrija-as, acrescentando o trecho theme->baseUrl ?>/ ao atributo src das mesmas.

???

Wagner disse:
0

Olá, Julia.

Aqui, você deve abrir o arquivo do tema e procurar pelas tags das imagens, fazendo as alterações necessárias.

Por exemplo, onde tem:
<img alt=”” src=”images/title2.gif” width=”83″ height=”33″ />

Troque por
<img alt=”” src=”<?php echo Yii::app()->theme->baseUrl ?>/images/title2.gif” width=”83″ height=”33″ />