The Sample Application Layout
Saturday, October 17, 2009

We looked at Zend_Layout in general terms in the previous now; now we are going to examine the main layout script used in the sample application.

The script begins by rendering the DOCTYPE at the head of the page:

<?php echo $this->doctype() . PHP_EOL; ?>

This has previously been set by the custom view resource plugin, as described in the previous post Bootstrapping the Application: a Custom View Resource Plugin.

The rest of the page is enclosed inside an html block:

<html xmlns="http://www.w3.org/1999/xhtml" 
  dir="ltr" lang="en" xml:lang="en">
  <!-- Page content is rendered here -->
</html>

The html tag has the following attributes set:

  • xmlns: This specifies the namespace to use; it is required, as the DOCTYPE is set to XHTML, and it is set to the standard value http://www.w3.org/1999/xhtml.
  • dir: This specifies the text direction for the content. It is set to ltr (left to right), which is the correct value for English.
  • lang: This specifies a language code for the content. It is set to en (English).
  • xml:lang: This specifies a language code for the content in XHTML documents. It is set to en (English).

Inside the html block are the head and body blocks:

<head>
  <!-- Head content is rendered here -->
</head>
<body>
  <!-- Body content is rendered here -->
</body>

The head block is generated programmatically using Zend Framework view helpers:

<?php
// Title
echo $this->headTitle('GM-RAM Limited') . PHP_EOL;
 
// Metadata
$this->headMeta()->appendHttpEquiv
  ('Content-Type', 'text/html; charset=UTF-8');
$this->headMeta()->appendHttpEquiv('Content-Language', 'en-GB');
$this->headMeta()->appendName('copyright', 'Copyright ' . 
  $this->placeholder('copyrightDate') . ' GM-RAM Limited');
$this->headMeta()->appendName('verify-v1', '...'); 
  // Google verification code
echo $this->headMeta() . PHP_EOL;
 
// jQuery
$this->jQuery()->setLocalPath('/js/jquery-1.3.2.min.js');
$this->jQuery()->setUiLocalPath('/js/jquery-ui-1.7.2.custom.min.js');
$this->jQuery()->addStylesheet
  ('/css/smoothness/jquery-ui-1.7.2.custom.css');
echo $this->jQuery() . PHP_EOL;
 
// Links
$this->headLink()->appendStylesheet('/css/default.css');
$this->headLink(array('rel' => 'shortcut icon', 
  'href' => '/img/favicon.ico', 'type' => 'image/x-icon'));
echo $this->headLink() . PHP_EOL;
?>

The view helpers used are:

  • Zend_View_Helper_HeadTitle (headTitle)
  • Zend_View_Helper_HeadMeta (headMeta)
  • Zend_View_Helper_HeadLink (headLink)
  • ZendX_JQuery_View_Helper_JQuery (jQuery)

These all employ the same pattern of usage: one or more calls are made to the relevant function, which aggregates the content to be rendered; each call returns the content so far, but only the last call is actually echoed to the page.

The above code should be fairly self-explanatory in terms of what is being rendered. The call to headTitle is used to generate the title element; the calls to headMeta are used to generate the various metadata elements; the calls to headLink are used to add the links to the stylesheet and shortcut icon. As the site makes use of the jQuery JavaScript library, there are calls to the jQuery view helper to generate the appropriate elements for including the necessary JavaScript files and also generating the code which sets jQuery to perform certain actions on start up; the latter will be covered in more detail in later posts.

The skeleton structure of the body section is:

<div id="wrapper">
  <div id="header">
    <!-- Header content is rendered here -->
  </div>
  <div id="content">
    <!-- Main page content is rendered here -->
  </div>
  <div id="footer">
    <!-- Footer content is rendered here -->
  </div>
</div>

The header breaks down into:

  • The navigation menu at the top
  • The company’s logo
  • The description of the company’s area of business
  • The company’s phone number

The navigation menu is rendered like this:

  <div id="nav">
    <?php echo $this->navigation()->menu()->render() . PHP_EOL; ?>
  </div>

This uses the Zend_Navigation object, which is initialised using the configuration file as described in the post Bootstrapping the Application: the Standard Navigation Resource Plugin. Here, the pages in the navigation are rendered as a menu, which generates an unordered list of links.

The other three elements are rendered as follows:

  <img src="/img/logo.gif" alt="GM-RAM Limited" title="GM-RAM Limited" />
  <div>Software Development and Consultancy</div>
  <div>
    <strong>Phone:</strong> 
    <?php echo $this->placeholder('phoneNumber'); ?>
  </div>

Note the use of the placeholder view helper. This makes use of the placeholders set up using a custom resource plugin, as described in the post Bootstrapping the Application: a Custom View Resource Plugin.

The main page content simply consists of a call to fetch the layout object, so that its content member variable can be rendered:

<?php echo $this->layout()->content . PHP_EOL; ?>

This results in the output generated by the view script for the specific page being injected into the content div.

The footer consists of the following markup:

<div>
  <a href="http://framework.zend.com/">
    <img src="/img/PoweredBy_ZF_4LightBG.png" alt="Zend Framework" />
  </a>
</div>
<div>
  Copyright &copy; <?php echo $this->placeholder('copyrightDate'); ?> 
  GM-RAM Limited
</div>

Note again the use of the placeholder view helper.

In the next post, I shall look at the stylesheet for the website, in particular how it applies to the layout script.

Posted by James at 2:52 pm   0 comments

Leave a Reply