Zend Framework and Dojo

27 Oct

“Sorry this blog is deprecated”

“Read this article here .” http://zendgeek.blogspot.com/2009/06/zend-framework-and-dojo-configuration.html

Latest version of Zend framework- ZF 1.6.0 ship dojo toolkit. You can find it in ZendFramework-1.6.0/external/ directory when you download ZF.

Recently I come across a problem using third party “calendar”- Java script Calendar, and as Zend has now done collaboration with Dojo, so people using zend will definitely start using Dojo for java scripts and all other functionality Dojo is providing. And that’s why I decided to study and use Dojo and implement it in my application instead of fixing the issue in the third party calendar.

Although Zend has done excellent job and has made things quite easy for those who wish to use dojo in their applications, however novice and those with little experience may find it a bit difficult to configure Zend for Dojo.

It this post I will tell you how to configure Zend for working with Dojo.

The first and most important thing is to copy “external/dojo” into your js directory under www/public folder.

After you copy the dojo folder add the following code in your bootstrap.

Ignore the first line $view= new Zend_View() if you have already instantiated view object in your bootstrap file.

<body class=”tundra”>. Thats it you will now have a page like the following

30 Responses to “Zend Framework and Dojo”

  1. David Tay November 10, 2008 at 3:55 am #

    Thanks, this was extremely helpful.

  2. Mike December 17, 2008 at 3:14 pm #

    Well done for this tutorial. I have searched for a longtime before I read it. Thanks a lot !!

  3. Thang January 8, 2009 at 2:34 am #

    Why I do exactly what you said in this entry but my DateTextbox does not work?
    I used ZF 1.7 and have some ajax function using DOJO in my app.
    Thanks

  4. Faheem Abbas January 8, 2009 at 6:16 am #

    Dear Thang,
    I have tested this example and then written article, you can see the comments of two other developers. they may have tested it too.
    Please tell me what error you encounterd.

  5. frq January 8, 2009 at 6:29 pm #

    hey,
    got some problems with that too. Probably i’m doing something wrong, but i’m getting exception at:
    $this->addElement(…) in MyForm.php
    From what i’ve seen in the debugger, the function is trying to find ‘DateTextBox.php’ somewhere in my ZF’s library/zend/form/ directory. Why is it looking for .php file in the first place? And why there, and not in dojo directory tree?
    I can’t get why the location of DateTextBox is set after and not before running addElement() – in the View (index.phtml), function requireModule. Maybe that code should be placed elsewhere?

    Maybe that all sounds lame but i’m total beginner with Zend, started today:) thanks in advance if you can help me though,
    Greetings
    PS. why do you post code as images?

  6. Faheem Abbas January 8, 2009 at 7:30 pm #

    Yes when you use dojo in Zend, Zend will look for dojo view helpers when rendering form. It will look dojo helper in the library/Zend/Dojo directory. so this directory must be present in your library/zend folder. if not then you probably using old version of Zend. so get the latest version of the Zend.
    If the directory is there, your directory structure may be different from the one i have and you may not be configuring your bootstrap and your layout files correctly.
    It is also important to set valid path to your dojo.js and your css file.
    goto your dojo.js file, open it and place alert(‘dojo’); at the top. if browser alert the message it means your dojo.js file is successfully added otherwise not.
    If you still find bugs please post your code in the bootstrap file, your directory structure and code in the layout file and view template file, so that i give you more explanation.

  7. Thang January 9, 2009 at 4:13 am #

    Thanks Faheem Abbas for your quick reply both here and in ZFforum (and sorry for any bad feeling if you faced by my question).
    Actually I don’t have any output error. When I use Firebug, I see some JS error:
    http://localhost/math/public/js/dojo/dijit/form/nls/en/validate.js 404
    http://localhost/math/public/js/dojo/dijit/form/nls/en-us/validate.js 404
    http://localhost/math/public/js/dojo/dijit/form/templates/ValidationTextBox.html 404

    Firebug needs to POST to the server to get this information for url:
    http://localhost/math/public/js/dojo/dijit/form/templates/ValidationTextBox.html

    This second POST can interfere with some sites. If you want to send the POST again, open a new tab in Firefox, use URL ‘about:config’, set boolean value ‘extensions.firebug.allowDoublePost’ to true
    This value is reset every time you restart Firefox This problem will disappear when https://bugzilla.mozilla.org/show_bug.cgi?id=430155 is shipped.

    I use this tutorial by adding to my existing code, not build this example alone.

    Thanks for your help

  8. Faheem Abbas January 9, 2009 at 7:25 am #

    No bad feeling at all. I am here to help you and other developers.
    Anyhow I will feel good if your problem has solved.
    Thanx

  9. Magnums January 26, 2009 at 10:03 am #

    I’m newbie for ZF. I followed this tutorial but not sucessed.
    i saw the DateTextBox on broswer. but java scripts form dojo not working.
    There is no calendar like tutorial appear. Why?

    I’d also notice, May this line typo:

    echo $form;

    it’s should be:
    echo $this->$form

    Thank in advance.

  10. Faheem Abbas January 26, 2009 at 11:57 am #

    Yeah. echo $form is typo. thanks for correction.
    If you have any javascript error, it means
    1. you don’t have latest version of ZF. should be > 1.6.
    2. your local path to dojo.js is not correctly defined.
    Please tell me your error and let me check what is causing the bug.

  11. Magnums January 26, 2009 at 1:28 pm #

    Hi,
    I’m sure to made the following of tutorial. but dojo still seem not work. it’s only have text box without calendar.

    I used “ZendFramework-1.7.3PL1” and my web root is “/home/demo1/htdocs”
    then copy “ZendFramework-1.7.3PL1/externals/dojo” to “htdocs/js/” which have structure as below:

    root [ /home/demo1/htdocs ]# ls -l js/dojo/
    total 3
    drwxrwxr-x 14 apache apache 376 2009-01-21 20:43 demos
    drwxrwxr-x 12 apache apache 960 2009-01-21 21:01 dijit
    drwxrwxr-x 13 apache apache 1064 2009-01-21 21:01 dojo
    drwxrwxr-x 48 apache apache 1824 2009-01-21 20:32 dojox
    drwxrwxr-x 6 apache apache 184 2009-01-21 21:01 util
    root [ /home/demo1/htdocs ]#

    So i decided to posting our files as the following:
    ==========================================================================
    .htaccess
    ==========================================================================
    RewriteEngine on
    RewriteRule !\.(js|ico|txt|gif|jpg|png|css)$ index.php

    ==========================================================================
    bootstrap:
    ==========================================================================
    addHelperPath(‘Zend/Dojo/View/Helper/’, ‘Zend_Dojo_View_Helper’) ;
    $viewRenderer = new Zend_Controller_Action_Helper_ViewRenderer() ;
    $viewRenderer->setView($view) ;
    Zend_Controller_Action_HelperBroker::addHelper($viewRenderer);

    //Zend_Dojo::enableView($view);
    //$view->dojo()->setDjConfigOption(‘usePlainJson’, true)
    // ->addStylesheetModule(‘dijit.themes.tundra’)
    // ->addStylesheet(‘/js/dojo/dojox/grid/_grid/tundraGrid.css’)
    // ->setLocalPath(‘/js/dojo/dojo/dojo.js’)
    // ->enable();

    // load configuration
    $config = new Zend_Config_Ini(‘../application/config.ini’, ‘general’);
    $registry = Zend_Registry::getInstance();
    $registry->set(‘config’, $config);

    // setup database
    $db = Zend_Db::factory($config->db);
    Zend_Db_Table::setDefaultAdapter($db);
    Zend_Registry::set(‘db’, $db);

    //get the front contorller instance
    $front = Zend_Controller_front::getInstance();
    $front->throwExceptions(true);
    $front->setControllerDirectory(‘../application/controllers’);

    //Go Go Go
    $front->dispatch();

    ?>

    ==========================================================================
    models/MyForm.php
    ==========================================================================
    setname(‘upload’) ;
    $this->setAttrib(‘enctype’, ‘multipart/form-data’);

    $this->addElement(
    ‘DateTextBox’,
    ‘foo’,
    array(
    ‘label’ => ‘Date: ‘,
    ‘required’ => true,
    ‘invalidMessage’=> ‘Invalid date specified’,
    ‘formatLength’ => ‘long’,
    )
    );
    }
    }

    ?>

    ==========================================================================
    controllers/IndexController.php
    ==========================================================================
    view->form=$form;

    }//index

    }//main

    ?>

    ==========================================================================
    index.phtml
    ==========================================================================

    dojo()->isEnabled()) {
    $this->dojo()->setLocalPath(‘js/dojo/dojo/dojo.js’)
    ->addStyleSheetModule(‘dijit.themes.tundra’);
    echo $this->dojo();
    }

    ?>

    dojo()->enable()
    ->setDjconfigOption(‘paeseonLoad’, true)
    ->requireModule(‘dijit.from.DateTextBox’);
    ?>

    form ; ?>

    =======================================================================

    Sorry for long posting text.
    Thank you in advance.

    Magnums

  12. Faheem Abbas January 26, 2009 at 1:40 pm #

    Dear Magnums,
    At first glance all code seems to me correct, however you should consider two things.
    1. open js/dojo/dojo.js and write
    alert(‘dojo loaded’);
    at the start of the file.
    if browser alert the message, it means you are successfully loading dojo.js file.
    if not, please set your local path to dojo.js file correctly, so that it alert the above message.

    2. change your .htacess file to

    RewriteEngine on
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule .* index.php

    And better read me article
    https://zendguru.wordpress.com/2008/11/17/zend-framework-and-dojo-javascript-error/

  13. Magnums January 26, 2009 at 2:20 pm #

    hi,
    After change .htaccess and put alert to dojo.js then i put code below between . Now my browser showed the “dojo loaded” windows alert. but text box still not show calendar. Why?

    ===============
    dojo()->enable()
    ->setDjconfigOption(‘paeseonLoad’, true)
    ->requireModule(‘dijit.from.DateTextBox’);
    $this->dojo()->setLocalPath(‘/js/dojo/dojo/dojo.js’)
    ->addStyleSheetModule(‘dijit.themes.tundra’);
    echo $this->dojo();
    ?>

    form ; ?>

    ============

    Thank you in advance.

  14. Marian January 26, 2009 at 10:13 pm #

    Hi all,
    I had exactly the same problem like Magnums, that means: text box still not show calendar.Im using ZendFramework-1.7.2. Everythink I have checked a lot of times.
    ===============
    Thank you for your answer.

  15. Magnums January 27, 2009 at 6:08 am #

    Hi,
    Wow, It’s work now!!!.
    There are changing in two places.

    Bootstrap:
    $layout = Zend_Layout::startMvc();
    $layout->getView()->addHelperPath(‘Zend/Dojo/View/Helper/’, ‘Zend_Dojo_View_Helper’);

    .htacces:
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} -s [OR]
    RewriteCond %{REQUEST_FILENAME} -l [OR]
    RewriteCond %{REQUEST_FILENAME} -d
    RewriteRule ^.*$ – [NC,L]
    RewriteRule ^.*$ index.php [NC,L]

    Recommended link:
    http://www.roetgers.org/2008/08/20/my-very-first-steps-with-zend_dojo/

    Enjoy🙂

  16. kaushik March 9, 2009 at 11:43 am #

    Hi

    I get javascript error;
    my script successfully inclue js/dojo/dojo.js file.
    also alert display with wirte in dojo.js file.

    Could not load ‘dijit.form.DateTexBox’;last tried’../dijit/form/DateTexBox.js
    http://localhost/zend/public/js/dojo/_base/_loader/loader.js

    can help me?

  17. Faheem Abbas March 9, 2009 at 1:00 pm #

    Read this tutorial. hopefully this will help you out.
    https://zendguru.wordpress.com/2008/11/17/zend-framework-and-dojo-javascript-error/

  18. kaushik March 10, 2009 at 5:26 am #

    i,
    Thanks for Reply.
    I cahange in .htaccess file still error come.

    javascript error:

    Could not load ‘dijit.form.DateTexBox’;last tried’../dijit/form/DateTexBox.js
    http://localhost/zend/public/js/dojo/_base/_loader/loader.js

    Below is my project structure and code
    can you please help me where its wrong.

    //—————————————//
    index.php
    //—————————————//
    set(‘config’, $config);

    // setup database
    $db = Zend_Db::factory($config->db);
    Zend_Db_Table::setDefaultAdapter($db);

    // setup controller
    $frontController = Zend_Controller_Front::getInstance();
    $frontController->throwExceptions(true);

    $frontController->setControllerDirectory(‘../application/controllers’);
    Zend_Layout::startMvc(array(‘layoutPath’=>’../application/layouts’));

    //—Dojo——-//
    $view = new Zend_View();
    $view->addHelperPath(‘Zend/Dojo/View/Helper/’, ‘Zend_Dojo_View_Helper’);
    $viewRenderer = new Zend_Controller_Action_Helper_ViewRenderer();
    $viewRenderer->setView($view);
    Zend_Controller_Action_HelperBroker:: addHelper($viewRenderer);
    //– End Dojo ———-//

    // run!
    $frontController->dispatch();

    //—————————————//
    JobsController.php
    //—————————————//
    view->form=$form;
    }
    }
    //—————————————//
    MyForm.php
    //—————————————//
    addElementPrefixPath(‘App’, ‘/library/App’);
    parent:: _construct( $options );
    $this->SetName(‘upload’);
    $this->setAttrib(‘enctype’, ‘multipart/form-data’);

    $this->addElement( ‘DateTexBox’, ‘foo’,
    array(
    ‘label’ => ‘Date:’,
    ‘required’ => true,
    ‘invalidMessage’ => ‘Invalid Date specified’,
    ‘formatLength’ => ‘long’,
    )
    );

    }
    }
    //—————————————//
    layout.phtml
    //—————————————//

    dojo()->isEnabled() )
    {
    $this->dojo()->setLocalPath( $this->baseUrl().’/js/dojo/dojo/dojo.js’ )
    ->addStyleSheetModule(‘dijit.themes.tundra’);
    echo $this->dojo();

    }

    ?>

    escape($this->title); ?>
    <link rel=”stylesheet” type=”text/css” media=”screen” href=”baseUrl();?>/css/site.css” />
    <link rel=”stylesheet” type=”text/css” href=”baseUrl();?>/css/style.css” />

    escape($this->title); ?>
    layout()->content; ?>

    //—————————————//
    index.phtml ( view/scripts/jobs/ )
    /—————————————//
    dojo()->enable()
    ->setDjConfigOption(‘parseOnLoad’,true)
    ->requireModule(‘dijit.form.DateTexBox’);
    ?>
    form ;
    ?>
    //——————————- //
    .htaccess
    //——————————–//
    RewriteEngine on
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule .* index.php

  19. Faheem Abbas March 10, 2009 at 7:39 am #

    Dear,
    I have already written in my comments above that you need to make sure your js files successfully loaded.
    you can check this by adding in “alert” in your required files. if alert successfully executed it means that browser is loading files successfully.
    If not, it means you have problems in setting your path to those files.
    I therefore suggest you to set an absolute path like
    “http”//localhost/zend/dojo/dojo.js”.
    Kaushik,
    You have used different directory structure than me. so it will difficult for me to make the same directory structure as yours. So it will be better to make zip of your directory structure and send that to me.
    I will be able to help you then.
    You can upload that zip on rapid share or 4shared.com, or any other place and can tell me url once the zip is uploaded.
    Keep in mind that don’t include “Zend” and “dojo” directory etc, because that will take extra time in downloading.

  20. Marin March 17, 2009 at 7:39 am #

    Hi,

    Thanks for your very simple and clear tutorial. Unfortunately it doesn’t work for me. Dojo is loading successfully (I have put an alert at the beginning of dojo.js and it popup as expected).
    I’m getting the following error message at the point I’m inserting the form :

    Notice: Undefined variable: form in /home/www/6a2aea778e8c25ca266df80cfda61798/web/mbr/application/views/scripts/index/index.phtml on line 34

    Here are my files :

    [.htaccess]
    RewriteCond %{REQUEST_FILENAME} -s [OR]
    RewriteCond %{REQUEST_FILENAME} -l [OR]
    RewriteCond %{REQUEST_FILENAME} -d
    RewriteRule ^.*$ – [NC,L]
    RewriteRule ^.*$ index.php [NC,L]

    [index.php]
    set(‘config’, $config);

    // Mise en place de la BDD
    $db = Zend_Db::factory($config->db);
    Zend_Db_Table::setDefaultAdapter($db);

    // Mise en place du contrôleur
    $frontController = Zend_Controller_Front::getInstance();
    $frontController->throwExceptions(true);
    $frontController->setControllerDirectory(‘./application/controllers’);
    Zend_Layout::startMvc(array(‘layoutPath’=>’./application/layouts’));

    // Mise en place du helper Dojo
    $view = Zend_Layout::getMvcInstance()->getView();
    $view->addHelperPath(‘Zend/Dojo/View/Helper/’, ‘Zend_Dojo_View_Helper’);
    $viewRenderer = new Zend_Controller_Action_Helper_ViewRenderer();
    $viewRenderer->setView($view);
    Zend_Controller_Action_HelperBroker::addHelper($viewRenderer);

    // run!
    $frontController->dispatch();

    [IndexController.php]

    function indexAction()
    {
    $this->view->title = “Mes albums”;

    $album = new Albums();
    $this->view->albums = $album->fetchAll();
    $form = new MyForm();
    $this->view->form = $form;
    }

    [index.phtml]

    $form;
    ?>

    Could you please try to help me?!

    Thanks a lot and best regards,

    Marin

  21. Faheem Abbas March 17, 2009 at 8:25 am #

    [index.phtml]

    $form; // please replace this
    ?>
    with
    [index.phtml]

    echo $this->form;
    ?>
    It will definitely work.
    Actually it was not your fault, I was missing “$this” in my example. I have fixed the code in my article now.

  22. Marin March 17, 2009 at 8:45 am #

    You saved my life😉

    Thanks a lot!

  23. Jim March 19, 2009 at 2:46 am #

    Is anyone else having issues with putting anything inside the layout.phtml for using dojo controls there? I am trying to use the bordercontainers and content panes, with no luck. Getting error about class/id already registered.

  24. Faheem Abbas March 19, 2009 at 5:22 am #

    Jim,
    you might be giving same name/id to more than one elements.

  25. Jim March 19, 2009 at 5:42 am #

    Thanks, I checked that. I think it has something to do with the way Zend puts the viewscripts into the layout. The reason I say this is that if I take any dojo elements out of the layout.phtml file, all viewscripts work fine.

    If I put them in the layout.phtml file, I can only open pages (viewscripts) that do NOT have dojo in them.

    I’ve tested this with some pretty simple stuff.

    Here is my example:

    Layout uses dojo border containers and content pages, declaratively. Right in the layout.phtml, not through startCapture/endCapture stuff.

    The viewscript has nothing in it other than a form, which is a Zend_Dojo_Form, has 3 elements on the form (user/password/remember me). The main page doesn’t have any elements aside from border container, content, tabcontainer and accordian.

    I have been banging my head over this for about 2 days. Nothing.

    I am about to revert my layout.html back to jquery.layout, but I would really like to get this working in Zend / Dojo as a standard platform.

  26. Thomas Lang March 27, 2009 at 12:24 pm #

    Hi, thanks a lot for the good tutorial, it helped me a lot !

  27. dipanwita April 14, 2009 at 4:33 am #

    Hi,

    Your tutorial is good.
    I wanna implement Zend-Dojo form.My form elements are shown but validation is not working.Please help.

    Is it possible for you to help me the step by step.
    Please help me.

    Thanks in advance.

  28. JR June 16, 2009 at 12:51 am #

    Hi,
    is there a specific reason you posted pictures of the code and not the code itself. Just trying to understand the logic behind that.
    Thanks,
    JR

Trackbacks/Pingbacks

  1. Form with Dojo - Zend Framework Forum - January 8, 2009

    […] with Dojo Hey all, I’ve followed this tutorial but after completing exactly what they said, I can not make it work. Does anyone have the same […]

  2. Step by step for setting up dojo for use with forms? - Zend Framework Forum - March 7, 2009

    […] Ah – this helped: Zend Framework and Dojo Zend Framework […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: