Featured Post

[PL] Recenzja książki Zend Framework 2 Application Development, wyda

Recenzja książki Zend Framework 2 Application Development from Packt Publishing Na początku tej recenzji chciałbym zaznaczyć, iż jest to moja druga książka o Zend Framework 2 (ZF2), jaką miałem okazję czytać. Daje mi szerszy obraz na literaturę poświęconą nowej wersji znanego frameworka...

Read More

CSS and JavaScript files order in Zend Framework templates

Posted by evolic | Posted in Programming, Web development | Posted on 07-06-2013

Tags: , , , , , , , , , , ,

0

Today I would like to focus on one thing in Zend Framework (no matter if I talk about version 1.x or 2.x).

There is a problem with positioning CSS and JavaScript files in templates (using headLink() and headScript() helpers). I will demonstrate it in below samples and give the solution for that situation.

So let’s begin!

Overview

As mentioned above, we are using templates in Zend Framework, and in fact, there are two kind of them:

  • layout template (usually stored in views/layouts/ folder),
  • and page template (usually stored in views/scripts/ folder).

Of course there are also partials, but they are not in our interest area in this case.

Problem

To add CSS file in the template (view layer), we need to use headLink() helper in append or prepend mode.

When we follow of the flow in Zend Framework 1.x and 2.x, we notice that:

  • page templates are processed first,
  • layout template is processed at the end.

To see the problem more clearly let’s assume we have 7 CSS files we would like to include in our layout (used in every page):

  1. /css/blueprint/screen.css
  2. /css/blueprint/print.css
  3. /css/blueprint/ie.css
  4. /css/html5.css
  5. /css/general.css
  6. /css/style.css
  7. /css/maps.css

We also would like to add some CSS file only at the certain pages e.g., assume we have 1 file in our page:

  1. /css/maps.5th.css

To do the mentioned things we need code like below.
At first layout.phtml:

And this is the code for our maps-fifth.phtml:

Because page template is processed first (as mentioned above) our maps.5th.css file will be at the beginning of the list.

And that’s the problem, because files order is crucial in Cascade Style Sheets!

The same situation we have with attaching JavaScript files to HTML document! using headScript().

Solution 1 – prepending files in inversed order

The name of this solution can seems strange, but it is easy to understand, but not very intuitive when you analyse the code, which you need to update with new CSS/JavaScript file.

Here is the sample code using headScript().

At first our layout.phtml template:

And code for our maps-fifth.phtml template:

As you can see we are appending the list in page template, and prepending files list turned upside down in the layout. It works, but as I mentioned – it is not intuitive.

Solution 2 – using the offsets

As you probably was expecting – I am going to demonstrate better solution, which will be simple and also intuitive.

The clue is function offsetSetStylesheet() for including CSS files and offsetSetFile() for JavaScript.

Here is the updated code of our layout.phtml:

And code for page maps-fifth.phtml template:

The code is simple and clear.

I reserved indexes 1-100 for the layout and greater than 100 for the controller action. I think nobody exceeds that limit (which in fact can be increased if needed).

Exceptionally, I don’t put any code on GitHub not this time.

Write a comment