I have been using Zend Framework (ZF) quite heavily in projects with lots of XHR requests aka ajax.

I have recently discovered of some good practices, which I will show below.

When having an action in your controller, you can quite as easily grab the info from your model, echo it out on screen and just exit.

However, ZF provides a much nicer way of doing so. If you have multiple formats, eg json, xml, html, you could use ContextSwitch

As I’m only using text/html and json, I use it in the following way:

When I want to output text/html, I use inside my action:

 
// for reference, name controller to MyxhrController
public function xhrAction()
{
   // don't actually need the layout, just the text I am about to pass
   $this->_helper->layout->disableLayout();
 
   $this->view->stuff = '<h1>Going deeper underground...</h1>';
}

In my view script xhr.phtml I just need to output the variable

  echo $this->stuff;

Now, if you look at: http://localhost/myxhr/xhr

You should see a blank page with only the text we are passing.

As I want my users to only see that when I am passing it using an xhr, I will add the following:

 
public function xhrAction()
{
		if(!$this->getRequest() ->isXmlHttpRequest()){
			$this->view->stuff = 'Put here something meaningful for your users...';
                        // if loading a full page, add a title
                        $this->view->headTitle('A meaningful title goes here...');
		}else{
			$this->_helper->layout->disableLayout();
			$this->view->stuff = '<h1>Going deeper underground...</h1>;
		}
}

So, with the above code, we have nicely dealt with an xhr request returning text/html.

Now, let’s see what we can do if we want to pass a json string.

public function jsonAction()
{
   $jsonStuff  = array('test1' => 'my test 1', 'test2' => 'my test 2');
 
   // no need to disable layout	
   $this->_helper->json($jsonStuff);
}

We don’t need to disable the layout, that is one of the things that the json helper is doing. The other things it does:

• Disables the view renderer
• Encodes array to json
• Sets response header to application/json

For more info, look at the nicely written zf documentation: JSON Action Helper

Dojo has some really cool features.

This is just a quick demo for:
Wipe In (dojo.fx.wipeIn)
and
Wipe Out (dojo.fx.wipeOut)

Not so much of a blog entry… so just checkout the code on source:
I am showing a show/hide button that it will change its text accordingly as well as show/hide the container.

This is what it looks like:

Using the ‘style’ attribute directly does make it easier. Otherwise, the animation might not work that well.

Here I’ve used the old fashion ‘onclick’ property. However you could just as easily do a ‘dojo.connect’ instead.

This is the html:

<div class="claro">
 
<button dojoType="dijit.form.Button" id="toggleaction" onclick="toggleme(); return false;">
<span id="show_label">Show</span>
<span id="hide_label" class="hideme">Hide</span>
</button>
<div id="toggle_container" style="display:none;"><strong>
Now you see me...
</strong></div>
</div>

And here is the js:

    dojo.require("dijit.form.Button");
    dojo.require("dojo.fx");
 
 
    function toggleme()
    {
    	// only for styling purposes
    	dojo.query('#toggleaction_label br').orphan();
 
        // if shown, hide it        
    	if ( dojo.hasClass( "toggle_container", 'showinfo') )
    	{
        	// hide it
    		dojo.fx.wipeOut({node: "toggle_container", duration: 500 }).play();
 
    		// change the button label to 'show'
    		dojo.style('show_label', "display", "block");
    		dojo.style('hide_label', "display", "none");
 
    		//dojo.toggleClass("toggle_container", 'hideme');
 
    	}
    	else
    	{
    		//dojo.toggleClass("toggle_container", 'hideme');
        	// else, show it
    		dojo.fx.wipeIn({node:"toggle_container", duration: 300}).play();
 
    		// change the button label to 'hide'
    		dojo.style('show_label', "display", "none");
    		dojo.style('hide_label', "display", "block");
 
    	}
 
		// add/remove showinfo class
    	dojo.toggleClass("toggle_container", 'showinfo');
    }

On this month’s PHPEM meeting, I gave my first talk on Zend Framework‘s integration with Dojo.

Both ZF and Dojo, are some very powerful frameworks which have been around for a while and have matured greatly over time.

The idea for this talk was to focus primarily on the integration of the two frameworks, and to give an intro to Dojo.

The structure

Once we have our ZF project up and running, we just need to let the application know we are going to be using Dojo.

On our main template (default location: application/layouts/layout.phtml), we add:

	$this->dojo()->enable()
				->setDjConfigOption('parseOnLoad', true)
				// from View Helper - see akrabat's notes (http://akrabat.com)
				->setLocalPath($this->baseUrl() . '/js/dojo/dojo.js')
				// add Json support
				->setDjConfigOption('usePlainJson', true);
				echo $this->dojo();

(continue reading…)

When I started with LAMP development, I did it the easy way, using XAMPP in my Windows system.

As I moved from creating simple websites to developing web applications I saw the need to use for my testing and development server the same OS/distro as the one that would be for production.

I really enjoyed using Ubuntu natively for a while, but as my requirements changed, I needed more, much more! And it was then when I entered the world of virtualisation… ;P

There are many good posts on how to install Ubuntu using VirtualBox. I will concentrate on the ‘hands on’ stuff for the configuration that took me a while to get my head around.
I will be referring to Ubuntu Server but the same goes for Ubuntu Desktop as well.

(continue reading…)

For those of us using Zend Framework, forms are possibly one of the most difficult things to master.

On this example, I will be using a simple class I wrote at work that will let you keep your sanity and create a tableless form using dojo and zend form.

To get started, let’s see what we want to achieve:

tabular data example

So, as seen in the image above, we want a table container, a row and cells.

The common way to do this is by using CSS with float.

<div id="tablecontainer">
 <div class="row">
  <div style="float:left:"></div>
  <div style="float:left:"></div>
  <div style="float:left:"></div>
  <br style="clear:both;" />
 </div>
</div>

The above code will give us three boxes next to each other.

(continue reading…)