Dojo | SpiffyJr's Blogaroo

Category Archives: Dojo

Rendering Dojo Stylesheets with a view helper

Posted on October 26, 2010 by SpiffyJr

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 = '<style type="text/css">' . PHP_EOL . (($isXhtml) ? '<!--' : '<!--') . PHP_EOL;
		foreach ($stylesheets as $stylesheet) {
			$style .= '    @import "' . $stylesheet . '";' . PHP_EOL;
		}
		$style .= (($isXhtml) ? '-->' : '-->') . PHP_EOL . '</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();

GD Star Rating
loading...

Categories: Blitzaroo, Dojo, PHP, View Helpers, Zend Framework | Tags: Ajax, api, Blitzaroo, Dojo, Dojo Toolkit, JavaScript, php, Programming, Scripts, Style Sheets, zend, Zend Framework

Google Code project online

Posted on March 18, 2010 by SpiffyJr

2 comments

I finally created a Google Code project for all my source code. You can find it at http://bit.ly/bgVXTq.

GD Star Rating
loading...

Categories: Dojo, PHP, Projects, Technologies, Zend Framework

Creating a fadeOut loader with Dojo

Posted on March 3, 2010 by SpiffyJr

4 comments

Image via Wikipedia

Intro

If you’re building a large site and utilizing Dojo you can get pages that are crammed full of widgets, layout containers, dialogs and more. All these useful features give your site a clean and very user-friendly experience. One side-effect, however, is that the HTML/CSS is loaded and then Dojo begins parsing which can cause your page to jump around while each element is rendered. I found this highly annoying so I scoured the web (<3 Google!) and managed to find a solution. I utilize a #loader div which covers the entire screen and then fade it out using dojo.addOnLoad(). This is extremely simple to implement and should only take a few minutes.

Live Demonstration

Take a peak at the live demonstration of the basic loader (or the fancy loader) to see where we’re headed. If you’re interested in how I got there keep on reading!

The HTML

The HTML consists of a single div located directly under the <body> tag of your page and another for content that will be parsed by Dojo.

<div id="loader"></div>
<div id="content">I AM SOME CONTENT!</div>

The CSS

CSS stretches the div to the full viewport of the page. I color the #loader the same color as the background of the page I’m loading to give it a nice and smooth transition.

<style type="text/css">
	body {
		background: #fff;
	}

	#content {
		text-align: center;
		width: 100%;
	}

	#loader {
		background: #fff;
		height: 100%;
		left: 0;
		margin: 0;
		padding: 0;
		position: absolute;
		top: 0;
		vertical-align: middle;
		width: 100%;
		z-index: 999;
	}
</style>

The Script

Even the Dojo code is easy! We tell dojo to manually parse the content div and then we add a fadeOut animation to the #loader div and onComplete set the loader display to none.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.4.1/dojo/dojo.xd.js"></script>
<script type="text/javascript">
   	//CDATA[
	dojo.require("dojo.parser");
	dojo.addOnLoad(_initLoader);

	function _initLoader() {
		var content = dojo.byId("content");
		var loader = dojo.byId("loader");

		// Parse the content manually
		dojo.parser.parse(content);

		// Fade the loader div out
		dojo.fadeOut({
			node: loader,
			duration: 250,
			onEnd: function() {
				loader.style.display = "none";
			}
		}).play(250);
	}
    //]]>
</script>

Pump it up!

So, we created a loader, and it’s pretty nifty but let’s pump it up a bit by adding a “Loading…” message a la Google’s GMail. First, we need to modify the #loader div to include a #loaderInner which will house our loading message like so:

<div id="loader"><div id="loaderInner">Loading...</div></div>
<div id="content">I AM SOME CONTENT!</div>

Next, we tweak the CSS a bit to colorize the loading message, throw in some padding, and give it a bit of flare.

	body {
		background: #fff;
	}

	#content {
		text-align: center;
		width: 100%;
	}

	#loader {
		background: #fff;
		height: 100%;
		left: 0;
		margin: 0;
		padding: 0;
		position: absolute;
		top: 0;
		vertical-align: middle;
		width: 100%;
		z-index: 999;
	}

	#loaderInner {
		-webkit-box-shadow: -1px 1px 5px #888;
		background-color: #FFFFCB;
		color: #c99800;
		display: table;
		font-size: 16px;
		padding: 5px 13px;
		text-align: center;
	}
</style>

That’s one sexy loader if I do say so myself – enjoy it!

GD Star Rating
loading...

Categories: Dojo, Random, Technologies | Tags: Cascading Style Sheets, CSS, Data Formats, Google, HTML, HTML element, JavaScript, Style sheet

SpiffyJr's Blogaroo

Rendering Dojo Stylesheets with a view helper

Google Code project online

Creating a fadeOut loader with Dojo

Intro

Live Demonstration

The HTML

The CSS

The Script

Pump it up!

Recent Posts

Categories

Tag Cloud

Archives