The view script is used in conjunction with a layout, which we will not discuss here. The only thing we will mention here is that the layout script contains the following code in the head section:

// jQuery
echo $this->jQuery() . PHP_EOL;
 
// Links
echo $this->headLink() . PHP_EOL;

This uses the jQuery and headLink view helpers to:

• Render the appropriate tags for including the core jQuery files
• Render the link tags used to include the stylesheet.

The latter point is of relevance, as the first lines of the view script are:

// Append the login page stylesheet
$this->headLink()->appendStylesheet($this->baseUrl('/css/login.css'));

The stylesheet file appended here needs to be rendered, and the echo $this->headLink() statement in the layout script does just that.

The styles in the file are as follows:

#login_title
{
	text-align: center;	
}
 
#login_error
{
	text-align: center;
}
 
#login_form
{
	margin-left: auto;
	margin-right: auto;
	position: relative;
	width: 400px;
}
 
#login_form dl
{
	float: left;
	width: 400px;
	padding: 20px 0 20px 0;
	background: #d3d3d3;
	border: 1px solid gray;
}
 
#login_form dt
{
	clear: left;
	float: left;
	width: 120px;
	margin: 0;
	padding: 5px;
	text-align: right;
	font-weight: bold;
}
 
#login_form dd
{
	float: left;
	width: 240px;
	margin: 0;
	padding: 5px;
	text-align: left;
}

The form is rendered as a definition list (dl), so the main task of the above styling is to ensure that the label (dt) and input control (dd) are on the same line. This rendering is the default behaviour of Zend_Form.

The jQuery include is necessary, as the script makes use of it to give focus the appropriate field in the form.

The script first enables jQuery, then includes a general purpose JavaScript file, used to give focus to fields on a form.

// Add the form JavaScript file
ZendX_JQuery::enableView($this);
$this->jQuery()->addJavascriptFile($this->baseUrl('/js/form.js'));

The form.js JavaScript file contains the following script:

var Form = function()
{
	Form.prototype.FirstFieldFocus = function(form_id)
	{
		$("#" + form_id + " :input:visible:enabled:first").focus();
	};
 
	Form.prototype.ErrorFieldFocus = function(field_id)
	{
		$("#" + field_id).focus();
	};
};
 
var theForm = new Form();

The above provides two basic functions:

• Select the first field on a form
• Select a specific field on a form

The first requires an elaborate jQuery selector, which detemines the first input field on the form which is visible and enabled.

The script now moves on to render the page title:

// Display the page title
echo '<h3 id="login_title">Login</h3>' . PHP_EOL;

Finally, the script renders the form and any error messages. In addition to the form itself, the script also create the appropriate JavaScript to invoke the functions defined in form.js in order to either select the error field, if there was an error when the form was submitted, or the first field of the form, if the form has not yet been submitted.

// Display any error messages and set focus to the appropriate form field
if (isset($this->errorMessage))
{
	printf('<div id="login_error" class="error">%s</div>' . 
PHP_EOL, $this->errorMessage);
	$script = sprintf('theForm.ErrorFieldFocus("%s");', 
$this->errorField);
	$this->jQuery()->addOnload($script);
}
else
{
	$script = sprintf('theForm.FirstFieldFocus("%s");', 
$this->form->getAttrib('id'));
	$this->jQuery()->addOnload($script);
}
 
// Render login form
$this->form->setAction($this->baseUrl('/login'));
echo $this->form;

Note the use of $this->jQuery()->addOnload(). The script is not rendered directly to the page in the view script, but rather in the layout script, by the echo $this->jQuery() statement. It is wrapped inside a jQuery ready event, so that it is only executed when the whole page is loaded.

Lightbox is a simple, unobtrusive script used to overlay images on the current page. It’s a snap to setup and works on all modern browsers.

I decided to add the script to the GM-RAM website in order to allow visitors to view full-sized versions of the screen shots there without having to navigate to a separate page.

I downloaded the Lightbox JavaScript, style sheet and images that need to be placed in the publically-accessible part of the website. The JavaScript files were stored under /js/lightbox/, the style sheet at /css/lightbox.css and the images under /img/lightbox.

The first challenge arose from the fact that the site already uses jQuery, while Lightbox is based on Prototype and Scriptaculous. As both use the dollar ($) symbol, it was necessary to put jQuery into no conflict mode. Fortunately, as I was using ZendX_JQuery, there is a built-in mechanism for handling this.

In order to make sure that you use the correct jQuery “handler” character ($ or something else), you should dynamically determine what this is. An example of this is from the view handler I wrote to create the JavaScript used to load the results of an AJAX request into a block on the page:

class Application_View_Helper_LoadScript extends Zend_View_Helper_Abstract
{
  public function loadScript($id, $url)
  {
    $jqHandler = ZendX_JQuery_View_Helper_JQuery::getJQueryHandler();
    $script = sprintf($jqHandler . '("#%s").html("Loading..."); ' . 
      $jqHandler . '("#%s").load("%s");', $id, $id, $url);
    return $this->view->jQuery()->addOnload($script);
  }
}

Lightbox works unobtrusively by looking for links with the rel attribute set to either just lightbox or lightbox[group-name], where group-name is set to the same value for a series of images that the user should be able to view by navigating forwards and backwards. The links are wrapped around an image.

I changed the attributes of the images in line with this on the relevant pages. I then created a common script to be included in all the pages, which would set up Lightbox on them. The script is called lightbox.phtml and is located in /application/views/scripts. It is added to the pages’ view scripts by the following line:

<?php echo $this->render('lightbox.phtml'); ?>

The lightbox.phtml script starts by activating jQuery no conflict mode; as noted before, this is because Lightbox uses Prototype and Scriptaculous.

ZendX_JQuery_View_Helper_JQuery::enableNoConflictMode();

The script then adds the Lightbox JavaScript files. It is possible to do this here, as the view script is rendered before the layout, and therefore when echo $this->headScript() is used in the layout script to finally generate the list of script tags in the header, these are included in the output generated.

$this->headScript()->appendFile(
  $this->baseUrl('/js/lightbox/prototype.js'));
$this->headScript()->appendFile(
  $this->baseUrl('/js/lightbox/scriptaculous.js?load=effects,builder'));
$this->headScript()->appendFile(
  $this->baseUrl('/js/lightbox/lightbox.js'));

Because the implementation of Lightbox assumes locations for its images that are not always correct, we need to add some JavaScript to change them. The script we generate is added using the same mechanism as for the basic script files, although here we are using inline script that we have generated.

$this->headScript()->appendScript(
  'LightboxOptions.fileLoadingImage = "' . 
  $this->baseUrl('/img/lightbox/loading.gif') . '";');
$this->headScript()->appendScript(
  'LightboxOptions.fileBottomNavCloseImage = "' . 
  $this->baseUrl('/img/lightbox/closelabel.gif') . '";');

Then we add the Lightbox style sheet using a similar mechanism, this time using the headLink helper. This helper is called via echo $this->headLink() in the layout script, which renders this link along with the others added there.

$this->headLink()->appendStylesheet($this->baseUrl('/css/lightbox.css'));

Finally, we need to override some of the styling, which relates to the location of images. We used the headStyle helper for this; as with the headScript and headLink helpers, this relies on the layout script making a call to the helper, this time via echo $this->headStyle(). Note that this call to headStyle should come after the call to headLink in the header to ensure the overriding of the styling.

$this->headStyle()->captureStart();
?>
#prevLink:hover, #prevLink:visited:hover
{
  background: url(<?php echo $this->baseUrl('/img/lightbox/prevlabel.gif'); ?>) 
left 15% no-repeat;
}
 
#nextLink:hover, #nextLink:visited:hover
{
  background: url(<?php echo $this->baseUrl('/img/lightbox/nextlabel.gif'); ?>) 
right 15% no-repeat;
}
<?php
$this->headStyle()->captureEnd();

Note the use of the captureStart and captureEnd methods to allow the CSS to be rendered inline.

Regarding the calls to headScript, headLink and headStyle, the relevant section of the layout script is as follows:

// Scripts
echo $this->headScript() . PHP_EOL;
 
// Links
$this->headLink()->prependStylesheet($this->baseUrl('/css/default.css'));
$this->headLink(array('rel' => 'shortcut icon', 
  'href' => $this->baseUrl('/img/favicon.ico'), 'type' => 'image/x-icon'));
echo $this->headLink() . PHP_EOL;
 
// Styles
echo $this->headStyle() . PHP_EOL;

Now the Lightbox effect should be applied to all the tagged images on the page.

Zend_Paginator works as follows:

1. The paginator is passed either an actual set of data, or a database query that can be used to retrieve the data.
2. The paginator will by default retrieve the first page and 10 items on that page; the page and the items per page can be set at this point if necessary.
3. The paginator can be used to render a navigator, by retrieving the current page and the number of pages.
4. The paginator can be used to render the current page, by iterating over the paginator to retrieve each item in order.

I shall give a concrete example of how this can be implemented below, based on an application I am currently developing.

First, let us start with the controller. In this instance, the controller is user and the action is index. The skeleton for this code is as follows:

class UserController extends Zend_Controller_Action
{
  public function indexAction()
  {
    // Insert implementation here
  }
}

The current page will be passed via the URL as a parameter. The first task in the action handler is therefore to retrieve the page number. If it is not specified, it will default to 1.

    // Get the current page
    $page = $this->getRequest()->getParam('page', 1);

The next step is to construct a Zend_Db_Select object that represents the database query. To do this we need a database adapter; below, we assume that this has been created during the bootstrapping process and can be retrieved via the bootstrap object. The query simply retrieves all records from the user table, ordering them by the user’s display name.

    // Get the boostrap object
    $bootstrap = $this->getInvokeArg('bootstrap');
 
    // Get the database adapter
    $dbAdapter = $bootstrap->getResource('db');
 
    // Create the selection object
    $select = $dbAdapter->select()->from('user')->order('name');

Now we have the select object, we can use it to create the paginator object.

    // Get a Paginator object using Zend_Paginator's built-in factory
    $paginator = Zend_Paginator::factory($select);

We can then set the number of items per page and the current page.

    // Set the number of items to show per page
    $paginator->setItemCountPerPage(5);
 
    // Select the requested page
    $paginator->setCurrentPageNumber($page);

Finally, we should pass the paginator object to the view script.

    $this->view->paginator = $paginator;

The view script used is given below. Note that the application uses Zend_Layout, so only the unique content of the page needs to be generated here.

<h3>User Management</h3>
 
<?php
// Display pagination control
echo $this->paginationControl($this->paginator, 'Elastic', 'paginator.phtml');
?>
<table>
  <thead>
    <tr>
      <th width="25%">Username</th>
      <th width="25%">Role</th>
      <th width="50%">Name</th>
    </tr>
  </thead>
  <tbody>
    <?php
    // Render each item for the current page in a table row
    foreach ($this->paginator as $item)
    {
    ?>
    <tr>
      <td><?php echo $this->escape($item['username']); ?></td>
      <td><?php echo $this->escape(ucfirst($item['role'])); ?></td>
      <td><?php echo $this->escape($item['name']); ?></td>
    </tr>
    <?php
    }
    ?>
  </tbody>
</table>

The script uses the PaginationControl view helper to render the navigator. The view script for the navigator markup is specified as one of the parameters as paginator.phtml; this script is found in the /application/views/scripts directory. The following standard script is used:

<?php if ($this->pageCount): ?>
<div class="paginator">
 
<!-- First page link -->
<?php if (isset($this->previous)): ?>
  <a href="<?php echo $this->url(array('page' => $this->first)); ?>">
    First
  </a> |
<?php else: ?>
  <span class="disabled">First</span> |
<?php endif; ?>
 
<!-- Previous page link -->
<?php if (isset($this->previous)): ?>
  <a href="<?php echo $this->url(array('page' => $this->previous)); ?>">
    < Previous
  </a> |
<?php else: ?>
  <span class="disabled">< Previous</span> |
<?php endif; ?>
 
<!-- Next page link -->
<?php if (isset($this->next)): ?>
  <a href="<?php echo $this->url(array('page' => $this->next)); ?>">
    Next >
  </a> |
<?php else: ?>
  <span class="disabled">Next ></span> |
<?php endif; ?>
 
<!-- Last page link -->
<?php if (isset($this->next)): ?>
  <a href="<?php echo $this->url(array('page' => $this->last)); ?>">
    Last
  </a>
<?php else: ?>
  <span class="disabled">Last</span>
<?php endif; ?>
 
</div>
<?php endif; ?>

The section used to render the current page as a table makes use of the fact that the paginator object can be iterated over to retrieve each item on the current page in turn.

The following styling is applied to the navigator:

.paginator { padding: 5px; }

The following styling is applied to the table:

table { width: 100%; }
 
th, td { padding: 5px; }
 
th { background-color: #4E7DD1; color: #FFFFFF; }

The stylesheet starts with the general styling for the page:

body {
  font-size: 0.9em;
  line-height: 1.3em;
  margin: 0;
  padding: 3em;
  background-image: url(/img/background.png);
  background-repeat: repeat-x;
  border-top: 10px solid gray;
  font-family: trebuchet ms, tahoma, verdana, arial, helvetica;
  text-align: left;
}

The CSS elements fall into the following groupings:

• Text styling: The font family and size; the line height; the text alignment.
• Background: The background image.
• The page border: The margin; the padding; the thick line across the top.

Then come the styling for the header elements:

h1 {
  font-size: 1.5em;
  font-weight: bold;
}
 
h2 {
  font-size: 1.2em;
  font-weight: bold;
}
 
h3, h4, h5, h6 {
  font-size: 1em;
  font-weight: bold;
}

The headings are in bold text and are larger than normal text; they get smaller from h1 to h6 as is customary.

Next come the link styling:

a, a:link, a:visited, a:active {
  color: #930;
  text-decoration: none;
}
 
a:hover {
  color: #aaa;
  text-decoration: none;
}

Links are not underlined, as is the default behaviour. When the user hovers over a link, the colour changes; otherwise it stays the same.

The images are styled to stop them being given a border, if they are also links:

img {
  border: 0;
}

The remaining styling is concerned with the page layout.

The first part is the most important, a wrapper which fixes the page content width and centers it within the page:

#wrapper {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  width: 800px;
}

The top section within this is the header, which has its contents centered by default:

#header {
  text-align: center;
  padding-bottom: 10px;
}

However, the navigation is right-aligned; it is rendered in the form of an unordered list, but this is styled to be displayed as a horizontal row of links:

#nav {
  text-align: right;
}
 
#nav ul {
  padding-left: 0;
}
 
#nav li {
  display: inline;
  padding-right: 10px;
  font-weight: bold;
}

The styling for the content is pretty simple:

#content {
  padding-top: 5px;
}

The following sets the width of the submit button on the contact page:

#submit {
  width: 80px;
}

The footer has its content centered, like the header:

#footer {
  padding-top: 20px;
  text-align: center;
}

Finally, there are stylings for error text (coloured red) and warning text (coloured orange):

.error {
  color: red;
}
 
.warning {
  color: orange;
}