Yii - Layouts

Os layouts representam as partes comuns de várias visualizações, por exemplo, cabeçalho e rodapé da página. Por padrão, os layouts devem ser armazenados noviews/layouts pasta.

Vamos dar uma olhada no layout principal do modelo básico de aplicativo -

<?php
   /* @var $this \yii\web\View */ /* @var $content string */
   use yii\helpers\Html;
   use yii\bootstrap\Nav;
   use yii\bootstrap\NavBar;
   use yii\widgets\Breadcrumbs;
   use app\assets\AppAsset;
   AppAsset::register($this); ?> <?php $this->beginPage() ?>
<!DOCTYPE html>
<html lang = "<?= Yii::$app->language ?>"> <head> <meta charset = "<?= Yii::$app->charset ?>">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <?= Html::csrfMetaTags() ?>
      <title><?= Html::encode($this->title) ?></title> <?php $this->head() ?>
   </head>
	
   <body>
      <?php $this->beginBody() ?> <div class = "wrap"> <?php NavBar::begin([ 'brandLabel' => 'My Company', 'brandUrl' => Yii::$app->homeUrl,
                  'options' => [
                     'class' => 'navbar-inverse navbar-fixed-top',
                  ],
               ]);
					
               echo Nav::widget([
                  'options' => ['class' => 'navbar-nav navbar-right'],
                  'items' => [
                     ['label' => 'Home', 'url' => ['/site/index']],
                     ['label' => 'About', 'url' => ['/site/about']],
                     ['label' => 'Contact', 'url' => ['/site/contact']],
                     Yii::$app->user->isGuest ? ['label' => 'Login', 'url' => ['/site/login']] : [ 'label' => 'Logout (' . Yii::$app->user->identity->username.')',
                           'url' => ['/site/logout'],
                           'linkOptions' => ['data-method' => 'post']
                        ],
                  ],
               ]);
					
               NavBar::end();
            ?>
            <div class = "container">
               <?= Breadcrumbs::widget([
                  'links' => isset($this->params['breadcrumbs']) ? $this>params
                     ['breadcrumbs'] : [],
               ]) ?>
               <?= $content ?> </div> </div> <footer class = "footer"> <div class = "container"> <p class = "pull-left">© My Company <?= date('Y') ?></p> <p class = "pull-right"><?= Yii::powered() ?></p> </div> </footer> <?php $this->endBody() ?>
   </body>
</html>
<?php $this->endPage() ?>

Este layout gera a página HTML comum a todas as páginas. o$contentvariável é o resultado da renderização das visualizações do conteúdo. Os métodos a seguir acionam eventos sobre o processo de renderização para que os scripts e tags registrados em outros lugares possam ser injetados adequadamente -

  • head()- Deve ser chamado na seção principal . Gera um espaço reservado, que será substituído pelo HTML registrado direcionado à posição principal.

  • beginBody()- Deve ser chamado no início da seção do corpo . Aciona oEVENT_BEGIN_BODYevento. Gera um marcador que será substituído pelo HTML registrado direcionado à posição inicial do corpo.

  • endBody()- Deve ser chamado no final da seção do corpo . Aciona oEVENT_END_BODYevento. Gera um espaço reservado, que será substituído pelo HTML registrado direcionado à posição final do corpo.

  • beginPage()- Deve ser chamado no início do layout. Aciona oEVENT_BEGIN_PAGE evento.

  • endPage()- Deve ser chamado ao final do layout. Aciona oEVENT_END_PAGE evento.

Crie um Layout

Step 1 - Dentro do diretório views / layouts, crie um arquivo chamado newlayout.php com o seguinte código.

<?php
   /* @var $this \yii\web\View */ /* @var $content string */
   use yii\helpers\Html;
   use yii\bootstrap\Nav;
   use yii\bootstrap\NavBar;
   use yii\widgets\Breadcrumbs;
   use app\assets\AppAsset;
   AppAsset::register($this); ?> <?php $this->beginPage() ?>
<!DOCTYPE html>
<html lang = "<?= Yii::$app->language ?>"> <head> <meta charset = "<?= Yii::$app->charset ?>">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <? = Html::csrfMetaTags() ?>
      <title><? = Html::encode($this->title) ?></title> <?php $this->head() ?>
   </head>

   <body>
      <?php $this->beginBody() ?> <div class = "wrap"> <div class = "container"> <? = $content ?>
            </div>
         </div>
			
         <footer class = "footer">
            <div class = "container">
               <p class = "pull-left">© My Company <?= date('Y') ?></p>
               <p class = "pull-right"><? = Yii::powered() ?></p>
            </div>
         </footer>
      <?php $this->endBody() ?> </body> </html> <?php $this->endPage() ?>

Removemos a barra de menu superior.

Step 2 - Para aplicar este layout ao SiteController, Adicione o $layout propriedade para o SiteController classe.

<?php
   namespace app\controllers;
   use Yii;
   use yii\filters\AccessControl;
   use yii\web\Controller;
   use yii\filters\VerbFilter;
   use app\models\LoginForm;
   use app\models\ContactForm;
   class SiteController extends Controller {
      public $layout = “newlayout”;
      /* other methods */
   }
?>

Step 3 - Agora, se você acessar o navegador da web em qualquer visualização do SiteController, verá que o layout mudou.

Step 4 - Para registrar várias metatags, você pode chamar yii\web\View::registerMetaTag() em uma visualização de conteúdo.

Step 5 - Modifique o ‘About’ vista do SiteController.

<?php
   /* @var $this yii\web\View */ use yii\helpers\Html; $this->title = 'About';
   $this->params['breadcrumbs'][] = $this->title;
   $this->registerMetaTag(['name' => 'keywords', 'content' => 'yii, developing, views, meta, tags']); $this->registerMetaTag(['name' => 'description', 'content' => 'This is the description
      of this page!'], 'description');
?>
<div class="site-about">
   <h1><?= Html::encode($this->title) ?></h1>
   <p>
      This is the About page. You may modify the following file to customize its content:
   </p>
   <code><?= __FILE__ ?></code>
</div>

Acabamos de registrar duas metatags - keywords and description.

Step 6 - Agora vá para http://localhost:8080/index.php?r=site/about, você encontrará as meta tags na seção principal da página, conforme mostrado na imagem a seguir.

As visualizações acionam vários eventos -

  • EVENT_BEGIN_BODY - acionado em layouts pela chamada de yii\web\View::beginBody().

  • EVENT_END_BODY - acionado em layouts pela chamada de yii\web\View::endBody().

  • EVENT_BEGIN_PAGE - acionado em layouts pela chamada de yii\web\View::beginPage().

  • EVENT_END_PAGE - acionado em layouts pela chamada de yii\web\View::endPage().

  • EVENT_BEFORE_RENDER - acionado em um controlador no início da renderização de um arquivo.

  • EVENT_AFTER_RENDER - acionado após renderizar um arquivo.

Você pode responder a esses eventos para injetar conteúdo nas visualizações.

Step 7 - Para exibir a data e hora atuais no actionAbout do SiteController, modifique-o desta forma.

public function actionAbout() {
   \Yii::$app->view->on(View::EVENT_BEGIN_BODY, function () {
      echo date('m.d.Y H:i:s');
   });
   return $this->render('about');
}

Step 8 - Tipo http://localhost:8080/index.php?r=site/about na barra de endereço do navegador da web e você verá o seguinte.

Pontos importantes

Para tornar o Views mais gerenciável, você deve -

  • Divida as vistas complexas em várias outras menores.
  • Use layouts para seções HTML comuns (cabeçalhos, rodapés, menus e assim por diante).
  • Use widgets.

Visualizações deveriam -

  • Contém HTML e código PHP simples para formatar e renderizar dados.
  • NÃO processar solicitações.
  • NÃO modifique as propriedades do modelo.
  • NÃO execute consultas de banco de dados.