Managing CSS and JavaScript files within a Zend Framework App – A Different Approach: View Plugin

February 5th, 2010
 

Reading this article on the Zend Framework Blog Managing CSS and JavaScript files within a Zend Framework App, speaking personally as a front-end developer I would use a different system.

In my approach loading up different CSS/JS files per controller is the exception not the rule. We load additional CSS/JS when we need to do something very special, for example a page with a flash file uploader.

I also think loading dependent files outside of the controller can make it difficult for other developers to work on your code. You can’t just look at the controller to see what other CSS/JS dependencies are being used, you need to check the file system.

My approach is a View Plugin that manages a standard set of CSS/JS for every layout. Additional CSS/JS if needed are added in the controllers.

Onto the code!

View Plugin Example

Here is my example view plugin from a recent project:

/app/plugins/View.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<?php
class Plugin_View extends Zend_Controller_Plugin_Abstract {
    public function routeStartup() {
 
        $view = new Zend_View();
 
        $view->doctype('XHTML1_STRICT');
        $view->headTitle()->setSeparator(' - ')->append('FooBar.com');
        $view->headMeta()->appendHttpEquiv('Content-Type','text/html; charset=utf-8');
        $view->headLink()->appendStylesheet('/css/style.css');
 
        $view->addHelperPath('ZendX/JQuery/View/Helper/', 'ZendX_JQuery_View_Helper');
        $view->jQuery()->enable(); 
        $view->jQuery()->uiEnable();  
 
        $view->jQuery()->setLocalPath('/js/jquery/jquery-1.3.2.min.js');
        $view->jQuery()->setUiLocalPath('/js/jquery/jquery-ui-1.7.2.custom.min.js');  
        $view->jQuery()->addStylesheet('/css/smoothness/jquery-ui-1.7.2.custom.css');
        $view->jQuery()->addJavascriptFile('/js/interface-utils.js');
 
        $viewRenderer = new Zend_Controller_Action_Helper_ViewRenderer();
        $viewRenderer->setView($view);  
        Zend_Controller_Action_HelperBroker::addHelper($viewRenderer);
    }
}

The code in an example layout file:

/app/views/layout/login.php
1
2
3
4
5
6
7
8
9
10
11

<?= $this->doctype() ?>
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>  
  <?= $this->headMeta() ?>
  <?= $this->headLink() ?>
  <?= $this->jQuery() ?>        
  <?= $this->headScript() ?> 
  <?= $this->headTitle()?> 
 
</head> 
<body>

As you can see from the above code, the Plugin handles everything needed for the HEAD area of the page, and it is all in one place.

Adding Additional CSS/JS From A Controller

If you need to add additional CSS/JS files, you can now do this in the controller – when needed. In the following example I need to add the dependencies for “Uploadify” a flash based multifile uploader.

/app/controllers/UploadController.php
1
2
3
4
5
6
7
8
9
10
11
12
13

<?php
 
class UploadController extends Zend_Controller_Action {
 
    public function init() {    
 
    }
 
    public function indexAction() {
        $this->view->headLink()->appendStylesheet('/uploadify/uploadify.css');
        $this->view->headScript()->appendFile('/uploadify/swfobject.js');
        $this->view->headScript()->appendFile('/uploadify/jquery.uploadify.v2.1.0.min.js');          
    }

The above inserts the dependencies into the layout for this controller action only. Sweet!!

From my perspective this approach works better and I think from a code organization structure it is cleaner. Any special CSS/JS can be added on a per-controller or per-controller-action basis and it will be very clear to other developers what is being loaded and where.

 
Tags: ,
Posted in Blog, Zend Framework | 5 Comments »

5 Responses to “Managing CSS and JavaScript files within a Zend Framework App – A Different Approach: View Plugin”

  1. jesper kjeldgaard says:
    February 16, 2010 at 1:09 am

    Great tutorial.

    It is really useful when including a lot of different jquery js/css files into one application.

  2. Branko says:
    March 4, 2010 at 5:04 am

    You can move

    $this->view->headLink()->appendStylesheet …
    $this->view->headScript()->appendFile …

    from controller to view script:

    $this->headLink()->appendStylesheet …
    $this->headScript()->appendFile …

  3. David Weinraub says:
    March 5, 2010 at 11:09 pm

    Great post, thanks! I struggle with the notion of common js/css files vs page-specific files. Your post addresses a lot of that.

    Two questions:

    1. Re: the core appendStylesheet() and appendFile() calls. I’d be interested to hear thoughts about the choice of doing these in the bootstrap – in an _initView() method, for example – or in an early-running plugin as you have done?

    2. Like Barko, it seems to me that the per-page calls are best pushed down into the view script. They seem to be more presentation-layer, not controller.

    Again, thanks for a very helpful post!

  4. David Weinraub says:
    March 5, 2010 at 11:52 pm

    On further reflection…

    Although I still like the idea that the css/js inclusions are more View rather than Controller – and hence should be pushed back into the viewscripts – it is worth noting the initial insertions are done via plugin (as you have done) or via bootstrap (as I was suggesting). So we have already kind of “broken that barrier”.

    And, although adding some action-specific css/js might be satisfactorily done in the viewscript, any controller-wide css/js to apply across all the controller’s actions would probably be best specified – get ready for it – in the controller, of course! Probably in the init() method. Just as you were suggesting. ;-)

    Unless anyone has some other ideas? Maybe controller-wide css/js is not that common?

    Anyway, very interesting. Thanks again.

  5. Benjamin says:
    March 7, 2010 at 10:14 am

    My two cents. . .

    I like keeping the bootsrap file very small & tidy, this file is invoked for every request so I like to keep it fast. I try to only include boot-strappy stuff. Which I define as .. setting up configs/registry/acl/rewrites/cache. App setup.

    I like the plugin approach both because the code is in one class and the class only does one thing. I usually have a plugin for this view stuff, session & access. They each only do one thing.

    Again my personal opinion is to put the css/js add code into the controllers not the view scripts. At least for me this would be confusing when you have different view scripts coming together to make a page. Which view script should your include calls live in? The layout.. a snippet? At least by consistently putting them in the controller action another developer would have no problem figuring things out.

    Mentally this makes sense to me, when I am switching layouts or using ajax, that information is set in the controller. So adding a specific CSS/JS file feels like it should be in the same place.

    At this level I think it’s just personal opinion, (I doubt there is a performance difference) so do whatever is most practical for you and your project.

 

Leave a Reply