Zend Framework - Diseño

Un diseño representa las partes comunes de varias vistas, por ejemplo, encabezado y pie de página. Por defecto, los diseños deben almacenarse en elview/layout carpeta.

Una configuración de diseño se define en el view_manager sección en el module.config.php.

La configuración predeterminada de la aplicación esqueleto es la siguiente:

'view_manager' => array( 
   'display_not_found_reason' => true, 
   'display_exceptions' => true, 
   'doctype' => 'HTML5', 
   'not_found_template' => 'error/404', 
   'exception_template' => 'error/index', 
   'template_map' => array( 
      'layout/layout' => __DIR__ . '/../view/layout/layout.phtml', 
      'application/index/index' => __DIR__ . '/../view/application/index/index.phtml', 
      'error/404' => __DIR__ . '/../view/error/404.phtml', 
      'error/index' => __DIR__ . '/../view/error/index.phtml', 
   ), 
   'template_path_stack' => array( 
   __DIR__ . '/../view', 
),

Aquí el template_mapse utiliza para especificar el diseño. Si no se encuentra el diseño, devolverá un error. Echemos un vistazo al diseño principal de la aplicación esqueleto.

Layout.phtml

<?= $this->doctype() ?>  
<html lang = "en"> 
   <head> 
      <meta charset = "utf-8"> 
      <?= $this->headTitle('ZF Skeleton Application')->setSeparator(' - ')>
         setAutoEscape(false) ?>
      <?= $this->headMeta() 
         ->appendName('viewport', 'width = device-width, initial-scale = 1.0') 
         ->appendHttpEquiv('X-UA-Compatible', 'IE = edge') 
      ?>  
      
      <!-- Le styles --> 
      <?= $this->headLink(['rel' => 'shortcut icon', 'type' => 
         'image/vnd.microsoft.icon', 
         'href' => $this->basePath() . '/img/favicon.ico']) 
         ->prependStylesheet($this->basePath('css/style.css')) 
         ->prependStylesheet($this->basePath('css/bootstraptheme.min.css')) 
         ->prependStylesheet($this->basePath('css/bootstrap.min.css')) 
      ?>  
      
      <!-- Scripts --> 
      <?= $this->headScript() 
         ->prependFile($this->basePath('js/bootstrap.min.js')) 
         ->prependFile($this->basePath('js/jquery-3.1.0.min.js')) 
      ?> 
   </head> 
   
   <body> 
      <nav class = "navbar navbar-inverse navbar-fixed-top" role = "navigation"> 
         <div class = "container"> 
            <div class = "navbar-header"> 
               <button type = "button" class = "navbar-toggle" data-
                  toggle = "collapse" data-target = ".navbar-collapse"> 
                  <span class = "icon-bar"></span> 
                  <span class = "icon-bar"></span> 
                  <span class = "icon-bar"></span> 
               </button> 
            
               <a class = "navbar-brand" href = "<?= $this->url('home') ?>"> 
                  <img src = "<?= $this->basePath('img/zf-logo-mark.svg') ?>
                     " height = "28" alt = "Zend Framework <?= \Application\Module::
                     VERSION ?>"/> Skeleton Application 
               </a> 
            </div>
         
            <div class = "collapse navbar-collapse"> 
               <ul class = "nav navbar-nav"> 
                  <li class = "active"><a href = "<?= 
                     $this->url('home') ?>">Home</a></li> 
               </ul> 
            </div> 
         </div> 
      </nav> 
   
      <div class = "container"> 
         <?= $this->content ?> 
         <hr> 
         <footer> 
            <p>© 2005 - <?= date('Y') ?> by Zend Technologies Ltd. 
               All rights reserved.</p> 
         </footer> 
      </div> 
      <?= $this->inlineScript() ?> 
   </body> 
</html>

A medida que analiza el diseño, utiliza principalmente los ayudantes de vista, que discutimos en el capítulo anterior. Cuando miramos más de cerca, el diseño usa una variable especial,$this->content. Esta variable es importante ya que será reemplazada por el script de vista (plantilla) de la página solicitada real.

Creando un nuevo diseño

Creemos un nuevo diseño para nuestro módulo Tutorial.

Para empezar, creemos un tutorial.css file en el directorio "public / css".

body { 
   background-color: lightblue; 
} 
h1 { 
   color: white; 
   text-align: center; 
}

Crea un nuevo archivo de diseño newlayout.phtmlen / myapp / module / Tutorial / view / layout / y copie el contenido del diseño existente. Luego, agregue eltutorial.css hoja de estilo usando el HeadLink helper class dentro de la sección de encabezado de diseño.

<?php echo $this->headLink()->appendStylesheet('/css/tutorial.css');?>

Agregar una nueva about enlace en la sección de navegación usando el URL ayudante.

<li><a href = "<?= $this->url('tutorial', ['action' => 'about']) ?>">About</a></li>

Esta página de diseño es común para la aplicación del módulo de tutorial. Actualizar elview_manager sección del archivo de configuración del módulo tutorial.

'view_manager' => array( 
   'template_map' => array( 
      'layout/layout' => __DIR__ . '/../view/layout/newlayout.phtml'), 
   'template_path_stack' => array('tutorial' => __DIR__ . '/../view',), 
)

Añade el aboutAction función en el TutorialController.