Dojo: Creating image using dojo script

Dojo provides numerous functionality like:
1.Easy and smooth creation of different widget such as dojo grid, forms, datapicker, calendar etc.
2.Prolific method of interacting with html elements.
3.Achievement of ajax functionality with far more less code.
In this article I am going to discuss how to create an image element using dojo script and attach that image to certain html element.
In order to achieve functionality on loading the page, you will need to use dojo.addOnLoad() method. This takes the following form.

Now in the next few lines we are going to put the actual functionality.

The most important things here are extending dojo.NodeList and then adding addImage function that initially has nothing, but we are going to add real functionality to it later on. This addImage method will contain the functionality for creating an image.
The question here however is, why we extend NodeList.
Well this is pretty simple. If you want to achieve functionality like;

dojo.query(‘input[id=name]’).addImage().removeClass(‘complusory_image’);

you will need to extend you method from NodeList. Doing so will enable you to access entire NodeList method in the way above.
Don’t worry about dojo.query() method, I will explain it shortly for you.
Now lets put the real script for creating img tag in our addImage method.

var img = dojo.doc.createElement('img');
dojo.attr(img, {
    src: "path/to/imges/img.png",
    alt: "This is my simple image",
    style: {cursor: "pointer"}
});

In the first line we have created img tag. In the second line we have attached different attributes to the img. You can define as many valid attributes associated with img tag as you wish.

The code in the addImage function looks, however, a bit different. See the following code.

The function for addImage contain args as parameter. This means that the image tag created can be attached to as many html elements as you like. In the forEach loop we create image tag and attach at to the arguments passed to it.
Now in the dojo.addOnLoad function, at the end, write the following script.

dojo.query(‘input[id=name]’).addImage();

The above script states that attach an image to input tag having id equals to name.
It you want to attach element to all input tags on your page, write

dojo.query(‘input’).addImage(); 

The final script on my page look like this.

Creating dojo datepicker with dojo script

Creating dojo datepicker with dojo scriptEdit | Delete
by fahimabas on August 26, 2009
Dojo date picker is nice and beautiful widget. The nice thing about any dojo widgets is that they can be easily attached to appropriate html tag. To assign date picker to input box take the following cod.

require('dijit.form.DateTextBox');




    

If you correctly include dojo.js and tundra.css, you will see a nice calendar attached to your input field.

The same can be achieved writing javascript code for it.
Lets assume you have an input box like the following.

Here we are using onclick even to show our calendar. Place the following code in your showCalendar() method.

In the script above we first create our calendar/datepicker widget. Then call dijit.popup.open() method that connect our datepicker widget to the input box. Note that in the around: ‘datepicker’, “datepicker” is the id of our input box.
Next we connect “onValueSelected” to our calendar. When value is selected, it will be assigned to the input box. Another important thing here is date formatting before assigning it to our input field.
Line

dojo.date.locale.format(cal.value, {selector: "date", formatLength: "long"});

format date for us.
That’s it. If you have any issue, you can ask freely.

Zend Framework, dojo and Json

I have already written about json in one, actually some of my articles. Cool functionality can be achieved using json. Thanks to http://www.json.org, http://www.zend.com and http://www.dojotoolkit.org for providing easier solutions.

I’m not gonna talk what these three are all about, but instead share a little secret about these.
Json creation in dojo is as simple as this.

var arr = new Array();
arr[0] = "apple";
arr[1] = "ball";
arr[2] = "cat";

dojo.toJson(arr);

Using Zend to convert array into json took only one line of code.

Zend_Json::encode($arr);

And decoding- converting json to array, is as simple as this

Zend_Json::decode(json_string);

Create dojo tab cotainer in Zend Framework

In my previous posts I discussed how to create accordion container holding accordion panes and border container having content panes.
In this article I am going to show you how easy it is to create tab continer that hold contents panes. Each content pane having different contents. Contents in one tab pane are shown at a time. when use click on the tab pane’s title, contents in that tab pane are shown.
Before reading this post, you better read and implement what I have discussed in my article “Zend Framework and Dojo: configuration”. Before creating tab continer and panes, you will need to understand and perform necessary configuration.I assume that you have read the post I have mentioned and have done the necessary configuration. Now let’s get started.
First of all, you will need to create your controller as

class ContainerController extends Zend_Controller_Action
{
 public function tabAction()
 {
  
 }
}

In the code above we have defined our ContainerController extending it from Zend_Controller_Action, and then we have defined our tabAction.
Now, the next step is to create tab.phtml in /application/views/scripts/container/ and place the following code in it.

$this->tabContainer()->captureStart('main-container',
                        array('design' => 'headline'),
                        array(
                             'style'=>'height:400px;width:800px'
                          ));

echo $this->contentPane(
 'home',
 'This is home page',
 array('region' => 'top','title'=>'Home'),
 array('style' => 'background-color: white;')
);

echo  $this->contentPane(
 'gallery',
 'Contents of gallery here',
 array('region' => 'left', 'title'=>'Gallery'),
 array('style' => 'width: 200px; background-color: white;')
);
                             
echo $this->contentPane(
 'Blog',
 'Blog post here',
 array('region' => 'center','title'=>'Blog'),
 array('style' => 'background-color: white;')
);

echo $this->contentPane(
 'about',
 'Information about your company etc',
 array('region' => 'bottom', 'title'=>'About Us'),
 array('style' => 'background-color: white;')
);

echo $this->tabContainer()->captureEnd('main-container');
?>

We first call captureStart() method of tabContainer() dojo view helper, giving it an id, and array containing tab container special attributes. Next we define content panes. Each content pane holds the data. The contents panes in the tab container will become tab panes.
each content pane is defined as

echo $this->contentPane(
 'home',
 'This is home page',
 array('region' => 'top','title'=>'Home'),
 array('style' => 'background-color: white;')
);

Here “home” is the id of the content page, Next “string” is the contents that will appear in the tab pane. Next we have defined the array of the special attributes of the contents. Here title is the most important attribute. This title will appear on the tab. The last array contain css related attributes.
That’s it. we have now written all necessary code for creating nice and beautiful Tab container.
Cheers.

Creating dojo border container in Zend Framework

In my previous artilce I discuss how to create accordion container and panes. If you wish to create accordion container and panes, read my article “Creating dojo accordion Container in Zend”.
If you don’t know how to configure dojo and Zend Framework, read here.
In this article, however I am going to discuss how to create border container. Border continer divide our page in different section so that we can display different contents in those sectitons.

To create the border container we first need to create our controller as

class ContainerController extends Zend_Controller_Action
{
	public function borderAction()
	{
	
	}
}

Now in your /application/views/scripts/container/border.phtml, place the following code.

$this->borderContainer()->captureStart('main-container',
                                   array('design' => 'headline'),
                                   array(
                                           'style'=>'height:400px;width:800px',
                                        'align' => 'center'
                                    ));

echo $this->contentPane(
'menuPane',
'This is the menu pane',
array('region' => 'top'),
array('style' => 'background-color: darkblue;color:white')
);

echo  $this->contentPane(
'navPane',
'This is the navigation pane',
array('region' => 'left'),
array('style' => 'width: 200px; background-color: lightblue;')
);
                           
echo $this->contentPane(
'mainPane',
'This is the main content pane area',
array('region' => 'center'),
array('style' => 'background-color: white;')
);

echo $this->contentPane(
'statusPane',
'Status area',
array('region' => 'bottom'),
array('style' => 'background-color: lightgray;')
);

echo $this->borderContainer()->captureEnd('main-container');

Here we have called captureStart() method to start our border container, and then we have placed different content panes.
Each content pane has an “id”, “contents” it holds, array containing content panes attributes, and an array containing css attributes.

Creating dojo accordion Container/panes in Zend

Dojo provide very easy and nice way of creating different containers such as accordion, tab, border, and stack etc.
These containers hold different type of panes. These different panes in turn use to hold contents. contents can be simple text or it can be complete html.
Zend Framework collaboration with Dojo has made things quite easy. Zend Framework provide view helpers to achieve different type of dojo functionality.
In this article I am going to discuss how to create Accordion Container. accordion Container hold accordion panes. Each accordion pane hold different contents and open in a stylish way when user click on the title of the pane.
In order to enable dojo helpers in you Zend Framework application, you will need to make some initial configuration. read my tutorial “Zend Framework and Dojo: configuration” before reading this tutorial. After successfull configuration create a controller called “ContinerController.php” in your controllers directory and place the following code in it.

class ContainerController extends Zend_Controller_Action
{
   public function accordionAction()
   {
      
   }
}

We have only defined an action in our controller, putting no code at all. you however can put whatever code you wish.
Now in /application/views/scripts/container/accordion.phtml place the following code.

$this->accordionContainer()->captureStart('main-container',
                                      array('design' => 'headline'),
                                      array(
                                              'style'=>'height:400px;width:400px'
                                       ));

echo $this->accordionPane(
     'home',
   'This is home page',
   array('region' => 'top','title'=>'Home'),
   array('style' => 'background-color: white;')
);

echo  $this->accordionPane(
   'gallery',
   'Contents of gallery here',
   array('region' => 'left', 'title'=>'Gallery'),
   array('style' => 'background-color: white;')
);
                                 
echo $this->accordionPane(
   'Blog',
   'Blog post here',
   array('region' => 'center','title'=>'Blog'),
   array('style' => 'background-color: white;')
);

echo $this->accordionContainer()->captureEnd('main-container');

The code is pretty simple. we first call captureStart() method on accordionContainer(). this will start accordion container for us.
Once the accordion continer is started, we need to put accordion panes in it and at the end we will need to call captureEnd() method to end our accordion container.
The container holding the following accordion pane.

echo $this->accordionPane(
     'home',
   'This is home page',
   array('region' => 'top','title'=>'Home'),
   array('style' => 'background-color: white;')
);

The above code call accordionPane() helper method. This dojo helper method take an “id”, “contents” to be displayed in the accordion pane, an array containing the special attributes of the accordion pane, and array of css attributes.