How to use Zend headLink and headScript

Zend has a very nice feature in that you can add your stylesheets and javascripts to your layout. I normally always load a few of these sheets and scripts for every website. The downside is that the user needs to make a lot more requests to the server, but other than that it really improves coding time and reusability.

Let's look at stylesheets first. Adding javascripts will be the same method. To include a stylesheet in the layout, you would add the following in the head tag:

/application/views/layouts/layout.phtml
    headLink()->appendStylesheet($this->baseUrl() . '/css/global.css')
        ->headLink()->prependStylesheet($this->baseUrl() . '/css/resets.css')
    ?>
headLink() ?>

That will add the stylesheet to your page. Note how I've used prepend for the rest css file, and append for my global css file — that way my resets will be placed above other appended stylesheets. Normally it loads in the order in which it is added.

That's all well and good, but let's there's another method which I prefer. And that is to load your CSS stylesheets form the bootstrap file. You can in your bootstrap also add the files like so:

/application/Bootstrap.php (function not complete)
 function _initView()
 {
  $view->headLink()->prependStylesheet('css/resets.css')
   ->headLink()->appendStylesheet('css/global.css')
   ->headLink()->appendStylesheet('css/forms.css')
   ->headLink()->appendStylesheet('css/pages.css');
 }

Why I prefer this method is because you reduce your layout file. All that is now left in the layout file is:

/application/views/layouts/layout.phtml
headLink() ?>

Very important!

Take a look at the first headLink example at top. Note how I add the CSS stylesheets to the Zend layout with a headLink()->etc for all your stylesheets it will add the current one and echo all the stylesheets that has been added to the headLink before as well. This leads to CSS stylesheets being added multiple times, instead of being linked once. Remember to set your headLink and once all are linked then echo it.

Javascripts works the same way, but it uses headScript instead. I'm just going to give the bootstrap way of how I attach my javascripts. I'm sure you can figure out how to use and implement it yourself.

/application/Bootstrap.php (function not complete)
 function _initView()
 {
  $view->headScript()->prependFile('js/jquery-1.3.2.min.js')
   ->headScript()->appendFile('js/jquery-ui-1.7.min.js')
   ->headScript()->appendFile('js/jquery.easing.1.3.js')
   ->headScript()->appendFile('js/docready.js');   

 }

As you can see I link my jQuery javscript and just echo it in the layout file like so:

/application/views/layouts/layout.phtml
 headScript() ?>

My docready is the file I use to start my scripts once the document is loaded, i.e. that file contains the $(function() {}); function and others as well.

Take care!

Tjorriemorrie