Zend Framework - Layout-alljchome-开发者的教程家园

Zend Framework Tutorial

Zend Framework Useful Resources

Selected Reading

Zend Framework - Layout

A Layout represents the common parts of multiple views i.e. for example, page header and footer. By default, layouts should be stored in the view/layout folder.

A Layout configuration is defined under the view_manager section in the module.config.php.

The default configuration of the skeleton apppcation is as follows −

 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 , 
       apppcation/index/index  => __DIR__ .  /../view/apppcation/index/index.phtml , 
       error/404  => __DIR__ .  /../view/error/404.phtml , 
       error/index  => __DIR__ .  /../view/error/index.phtml , 
   ), 
    template_path_stack  => array( 
   __DIR__ .  /../view , 
),

Here, the template_map is used to specify the layout. If layout is not found, then it will return an error. Let us have a look at the main layout of the skeleton apppcation.

Layout.phtml

<?= $this->doctype() ?>  
<html lang = "en"> 
   <head> 
      <meta charset = "utf-8"> 
      <?= $this->headTitle( ZF Skeleton Apppcation )->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"> 
         <span class = "container"> 
            <span 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 <?= ApppcationModule::
                     VERSION ?>"/> Skeleton Apppcation 
               </a> 
            </span>
         
            <span class = "collapse navbar-collapse"> 
               <ul class = "nav navbar-nav"> 
                  <p class = "active"><a href = "<?= 
                     $this->url( home ) ?>">Home</a></p> 
               </ul> 
            </span> 
         </span> 
      </nav> 
   
      <span class = "container"> 
         <?= $this->content ?> 
         <hr> 
         <footer> 
            <p>© 2005 - <?= date( Y ) ?> by Zend Technologies Ltd. 
               All rights reserved.</p> 
         </footer> 
      </span> 
      <?= $this->inpneScript() ?> 
   </body> 
</html>

As you analyze the layout, it mostly uses the view helpers, which we discussed in the previous chapter. As we look closer, the layout uses a special variable, $this->content. This variable is important as it will be replaced by the view script (template) of the actual requested page.

Creating a new layout

Let us create a new layout for our Tutorial module.

To begin with, let us create a tutorial.css file under the “pubpc/css” directory.

 body { 
   background-color: pghtblue; 
} 
h1 { 
   color: white; 
   text-apgn: center; 
}

Create a new layout file newlayout.phtml at the /myapp/module/Tutorial/view/layout/ and copy the content from existing layout. Then, Add the tutorial.css stylesheet using the HeadLink helper class inside the layout head section.

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

Add a new about pnk in the navigation section using the URL helper.

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

This layout page is common for the tutorial module apppcation. Update the view_manager section of the tutorial module configuration file.

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

Add the aboutAction function in the TutorialController.

 pubpc function aboutAction() { 
}

Add the about.phtml at myapp/module/Tutorial/view/tutorial/tutorial/ with the following content.

<h2>About page</h2>

Now, you are ready to finally run the apppcation − http://localhost:8080/tutorial/about.

Zend Framework - Layout

Layout.phtml

Creating a new layout

友情链接