Zend Framework with JavaScript libraries

Question

I have been working with Zend Framework for a few months now. I have so far been succesfully using some view helpers, action helpers and partials. Now i have come across some javascript libraries i want to use in my project such as TinyMCE and others.

My question is, what is the best way to implement these in a Zend Project? Preferably i would like to be able to add or enable these javascript libraries on a view level. So for example when i go to my addSomething.phtml wich contains a zend_form, one of my text area's becomes a TinyMCE editor field. However i do not want this on all my forms or even all my text area elements.

So what is the best way to implement and then approach these libraries under ZF 1.11.11?

Thanks in advance for any advice given :)

score 4 · Accepted Answer · answered Jun 20 '12 at 15:17

You can use a view helper to load javascript and css files on a per controller/view basis. This is something I have experimented with and I find it quite helpful, although I haven't taken the step of putting it into a live project yet, I'm still assessing it.

Here is the devzone article I got the idea from. All credit to Andy Baird for posting the technique.

Basically you setup two view helpers, one for javascript:-

class Zend_View_Helper_JavascriptHelper extends Zend_View_Helper_Abstract
{   
    function javascriptHelper() {
        $request = Zend_Controller_Front::getInstance()->getRequest();
        $file_uri = 'media/js/' . $request->getControllerName() . '/' . $request->getActionName() . '.js';

        if (file_exists($file_uri)) {
            $this->view->headScript()->appendFile('/' . $file_uri);
        }
    }
}

and one for css:-

class Zend_View_Helper_CssHelper extends Zend_View_Helper_Abstract 
{ 
    function cssHelper() { 
        $request = Zend_Controller_Front::getInstance()->getRequest(); 
        $file_uri = 'media/css/' . $request->getControllerName() . '/' . $request->getActionName() . '.css'; 

        if (file_exists($file_uri)) { 
            $this->view->headLink()->appendStylesheet('/' . $file_uri); 
        } 

        return $this->view->headLink(); 

    } 
}

Then you call them from your layout script:-

<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <title>My app title</title> 
    <? $this->headLink()->appendStylesheet('/media/css/global.css') ?> 
    <? $this->headLink()->appendStylesheet('/media/css/iefix.css','screen','lt IE 7') ?>     
    <?= $this->cssHelper() ?>    
    <? $this->headScript()->appendFile('/media/js/jquery-1.3.2.min.js') ?> 
    <? $this->headScript()->appendFile('/media/js/global.js') ?> 

    <? $this->javascriptHelper() ?> 
    <?= $this->headScript() ?> 
</head>

You then store your javascript and css files in folders that reflect the name of the action they are used with, for example:-

media/js/index/index.js
media/css/index/index.css

to load css and javascript for you index action.

In practice I have found it preferable to put javascript and css in the same folder, so I miss out the js & css parts of the paths above and adjust the $file_url variable in both helpers accordingly.

This is a nice solution, i hadn't actually thought about using view helpers to load in javascript or CSS files. — Björn, Jun 21 '12 at 06:43

score 2 · Answer 2 · answered Jun 20 '12 at 12:30

2

To add JS files at a view level, I usually use the inlineScript() view helper.

So, to add TinyMCE to a given field of your form in a given view, you might write something like the following:

$this->inlineScript()->appendFile(
    $this->baseUrl('js/yourTinyMCEScript.js'),
    'text/javascript', array('charset' => 'UTF-8')
);

and then, at the end of the view (or in the layout),

echo $this->inlineScript();

Like that, you'll be able to activate TinyMCE only for certain fields of certain forms.

Hope that helps,

answered Jun 20 '12 at 12:30

dinopmi

2,683
19
24

This returns the error `Method "inlineScript" does not exist and was not trapped in __call()`. Perhaps i am using a different version of Zend then you, i am using 1.11.11 . I have been having simmilar issues with headscript()->appendScript() or appendfile(). Starting to think this is a bug in my version of ZF – Björn Jun 20 '12 at 13:44
I'm using the same version. I'm running the code above from the view scripts (i.e., the *.phtml files). – dinopmi Jun 20 '12 at 13:45
Same here, running all of it in the view now, yet it still refuses to function. While if i use an literal Include('file location'); it actually works. – Björn Jun 20 '12 at 13:57
It's funny... According to the documentation, default helpers (such as this) should always work, because the default server path (on Zend/View/Helper/) is always set. Are you using other view helpers in your project? – dinopmi Jun 20 '12 at 14:06
Yes, i have written my own helper for some other pages. However that shouldn't really affect the inner workings of another helper now should it? – Björn Jun 20 '12 at 14:34
No, it shouldn't. I'm assuming that the Zend/View/Helper/InlineScript.php file is in place (it should be). – dinopmi Jun 20 '12 at 14:40
I have managed to finally get scripts to load using the headscript()->appendFile(); function. Not sure why neither of the other options will work. Thanks for the idea thou. – Björn Jun 21 '12 at 06:39

JellyBelly · Answer 3 · 2012-06-20T12:25:04.573

I prefer ckeditor

This my solution:

Download ckeditor library and copy files into /public/scripts/ckeditor/

application.ini

; load jquery from google cdn with jquery ui
resources.jquery.version    = 1.7
resources.jquery.ui_enable  = true
resources.jquery.ui_version = 1.8
resources.jquery.stylesheets[] = "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css"

form.php

/** @var $jq ZendX_JQuery_View_Helper_JQuery_Container */
$jq = $this->getView()->jQuery();

// Add Library CKEditor
$jq->addJavascriptFile('/scripts/ckeditor/ckeditor.js');
$jq->addJavascriptFile('/scripts/ckeditor/adapters/jquery.js');
$jq->addOnload("$('#text').ckeditor();");

//textarea
$this->addElement('textarea', 'text', array('label' => 'Testo', 'required' => true));

In the file /public/scripts/ckeditor/config.js you can set your favorite tools in WYSIWYG.

If you must use tinymce read here

Thou your advice is appreciated, changing to ckeditor is not an option in my situation. — Björn, Jun 20 '12 at 12:20
then read here: http://juriansluiman.nl/en/article/100/improved-tinymce-solution-for-the-zend-framework — JellyBelly, Jun 20 '12 at 12:23

score 0 · Answer 4 · answered Jun 20 '12 at 17:58

I think the best approach is to extends zend_form_textarea and then create decaorator and view helper.

You could also write only decorator & viewhelper, but for me first option is cleaner because you avoid inject decorator each time when you creates form element.

Zend Framework with JavaScript libraries

4 Answers4

application.ini

form.php