Posts Tagged ‘Programming’

Rendering Dojo Stylesheets with a view helper

Tuesday, October 26th, 2010

I’ve been fervently coding Blitzaroo the passed week and I ran into a rather annoying issue when using AJAX with the Zend Framework and Dojo. Take, for example, using AjaxContext to load content for a dijit.layout.TabContainer that houses several dijit.layout.ContentPane(s).

$ajaxContext = $this->_helper->getHelper('AjaxContext');
$ajaxContext->addActionContexts(array(
    'overview' => 'html',
    'events' => 'html',
    'members' => 'html',
    'recruits' => 'html'))->initContext();

Now then, when the getHref() from a ContentPane is called they load the Ajax data which, in this case, happens to be a dojox.grid.DataGrid. The grid renders just fine without Ajax but when Ajax is used ZF fails to load the proper Stylesheets which need to be loaded manually. I thought, no big deal, I’ll just hit up $this->dojo()->{some method to spit out stylesheets} and to my dismay found that the method is protected. Why? I’m not quite sure. I went ahead and wrote a view helper to fix the problem which is merely a copy/paste of the _renderStylesheet() method but without requiring the Dojo container object. If there is another way around the issue I’m all ears!

class My_View_Helper_DojoStylesheets extends Zend_View_Helper_Abstract
{
        public function dojoStylesheets()
        {
                $dojo = $this->view->dojo();
                $isXhtml = $this->view->doctype()->isXhtml();
                
                if ($dojo->useCdn()) {
                        $base = $dojo->getCdnBase() . $dojo->getCdnVersion();
                } else {
                        $base = $dojo->_getLocalRelativePath();
                }
                
                $registeredStylesheets = $dojo->getStylesheetModules();
                foreach ($registeredStylesheets as $stylesheet) {
                        $themeName = substr($stylesheet, strrpos($stylesheet, '.') + 1);
                        $stylesheet = str_replace('.', '/', $stylesheet);
                        $stylesheets[] = $base . '/' . $stylesheet . '/' . $themeName . '.css';
                }
                
                foreach ($dojo->getStylesheets() as $stylesheet) {
                        $stylesheets[] = $stylesheet;
                }
                
                if ($dojo->registerDojoStylesheet()) {
                        $stylesheets[] = $base . '/dojo/resources/dojo.css';
                }
                
                if (empty($stylesheets)) {
                        return '';
                }
                
                array_reverse($stylesheets);
                $style = '';
                
                return $style;
        }
}

Now my {action}.ajax.phtml script is nice and happy.

// call the regular members action page - no need to duplicate code!
echo $this->render('team-manager/members.phtml');

// inlineScript contains all the formatters for the grid
echo $this->inlineScript();

// New view helper to include the data grid CSS files generated by my DataGrid view helper
echo $this->dojoStylesheets();

Zend_Dojo_View_Helper_Dialog

Friday, March 12th, 2010

Quickie

I’m going to make this one short & sweet. I’ve created a view helper for Dialogs (and an extended Dijit view helper).

Zend_Dojo_View_Helper_Dijit_Extended (wtb: namespaces)

view;
                        self::$_dojo = self::$_view->dojo();
                }

                // Determine path to use
                if (null === self::getScriptBase()) {
                        if (self::$_dojo->useLocalPath()) {
                                self::setScriptBase(self::$_dojo->getLocalPath());
                        } else {
                                self::setScriptBase(self::$_dojo->getCdnBase() . self::$_dojo->getCdnVersion());
                        }
                }

                self::$_dojo->addStylesheet(self::getScriptBase() . $path);
        }
}

Zend_Dojo_View_Helper_Dialog

Pretty simple view helper that renders a dialog using the regular (dijit.Dialog) method or the dojox (dojox.widget.Dialog) method.

Usage

// Regular dialog
dialog('myDialog', array('title' => 'w00t!', 'content' => 'I am a w00tastic dialog'));?>

// Enhanced dojox dialog
dialog('myDialog', array('title' => 'w00t!', 'content' => 'I am a w00tastic dialog'), array('useDojox' => true);?>

Code

dojo->requireModule($dialogType);

                // Add styles
                if ($dialogType == self::DIALOG_DOJOX) {
                        self::addStylesheet('/dojox/widget/Dialog/Dialog.css');
                }

                // Programmatic
                if ($this->_useProgrammatic()) {
                        if (!$this->_useProgrammaticNoScript()) {
                                $this->dojo->addJavascript('var ' . $id . ";\n");
                                $js = $id . ' = ' . 'new ' . $dialogType . '(' . Zend_Json::encode($attribs) . ");";
                                $this->dojo->_addZendLoad("function(){{$js}}");
                        }
                        return '';
                }

                // Set extra attribs for declarative
                if (!array_key_exists('id', $attribs)) {
                        $attribs['id'] = $id;
                }

                if (!array_key_exists('jsId', $attribs)) {
                        $attribs['jsId'] = $id;
                }

                if (!array_key_exists('dojoType', $attribs)) {
                        $attribs['dojoType'] = $dialogType;
                }

                if (array_key_exists('content', $attribs)) {
                        $content = $attribs['content'];
                        unset($attribs['content']);
                }

                return '_htmlAttribs($attribs) . '>' . $content . "
\n"; } }

Hope it makes life a little easier. Enjoy!