Category: "Dojo"

dojox.data.FlickrStore - Source from favorites

I wanted to use a favorites list on Flickr (http://flickr.com) as a source for images.

dojo 1.3.0’s dojox.data.FlickrStore sources images from a public photo feed:

reg.register("default",function(_2f){return true;},_2d+"photos_public.gne");

Since I only wanted to change the feed URL, I used the following code to indicate that the request should be made to the favorites feed.

	var reg=dojox.data.FlickrStore.urlRegistry;
	reg.unregister("default");
	reg.register("default",function(a){
		return true;
		},"http://api.flickr.com/services/feeds/photos_faves.gne");

dojox.grid.DataGrid - Search for item

This is one way to search a dojox DataGrid for an item.

In this case, the id is used, but other attributes can be searched as well.

function already_in_the_grid(id)
{
         return dojo.some(member_store._getItemsArray(),(function(item){if (item.id==member_id) return true}));
}

dojo 1.7.1 AMD with Zend Framework 1.11

I have been working on a new web application using Zend Framework 1.11 and Dojo. In order to use the AMD loader of dojo 1.7.1, I modified the Zend_Dojo_View_Helper_Dojo to include a flag indicating whether to use the AMD loader or not, and updated Zend_Dojo_View_Helper_Dojo_Container to render the code for the AMD loader, if it has been selected.

Code

Zend_Dojo_View_Helper_Dojo: http://web-notes.wirehopper.com/AMD_Dojo.txt
Zend_Dojo_View_Helper_Dijit: http://web-notes.wirehopper.com/AMD_Dijit.txt
Zend_Dojo_View_Helper_ComboBox: http://web-notes.wirehopper.com/AMD_ComboBox.txt
Zend_Dojo_View_Helper_Dojo_Container: http://web-notes.wirehopper.com/AMD_Container.txt

Default application layout: http://web-notes.wirehopper.com/AMD_default.txt

This is very new code, and it has not been tested with a built version of the javascript. Be sure to make a backup of Zend before applying these changes.

The code is updated frequently, you may want to check back in a few days to see if new code has been posted. Be sure to reload if you’ve visited the pages, since .txt files tend to be cached.

The updates are running well with a non-built version of code. I’m deferring build development.

dojo 1.7.1 AMD Page Example

This is a very simple example of how you can implement a dojo page with AMD. The intended architecture is that the HTML would be used for all pages and the page content and behavior would be modified by the javascript. With that in mind, the ‘page’ javascript is in js/page/main.js. The javascript file name can be set by passing the name of the page into the script.

Be ready to think differently, because this is a new way to build pages.

There’s a significant reduction in the number of requests required to render the page, only those files which are required are loaded. To see the difference, comment out the async:true and use the FireBug Net tab to see the number of files loaded.

Excellent References

It’s well worth reading these references carefully.

http://dojotoolkit.org/blog/learn-more-about-amd
http://www.slideshare.net/jthomas/moving-to-dojo-17-and-the-path-to-20
http://dojotoolkit.org/documentation/tutorials/1.7/recipes/app_controller
http://dojotoolkit.org/documentation/tutorials/1.7/declare
http://dojotoolkit.org/documentation/tutorials/1.7/modules/

HTML

The HTML code presents a button, and the javascript adds an onClick handler to it. Use FireBug’s Console to view the output.

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<META http-equiv="Content-Style-Type" content="text/css">
<title>dojo AMD</title>
<style type="text/css">
<!--
button
{
border:1px solid #ccc;
background-color:#eee;
font-size:0.7em;
padding:3px;
}
-->
</style>
</head>
<body>
<h1>dojo AMD page</h1>
<button id="myButton">my.Button!</button>
<script type="text/javascript"> 
//<!--
var djConfig = {
    parseOnLoad:true,
        isDebug:true,
        locale:"en_US",
        async:true,
    baseUrl: "js",
    tlmSiblingOfDojo: false,
    packages: [
        { name: "dojo", location: "../dojo/dojo" },
        { name: "dijit", location: "../dojo/dijit" },
        { name: "dojox", location: "../dojo/dojox" },
        { name: "app", location: "page", main: "main" },
    ]
};
//-->
</script>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/dojo.js" type="text/javascript"></script> 
<script type="text/javascript"> 
//<!--
require(["app","dojo/domReady!"],function(app){app.init();});
//-->
</script>
</body>
</html>

js/page/main.js

The define is defining an anonymous module that requires dojo/dom and executes after dojo/domReady. It creates a module with one function - init. app.init() is called from the HTML. Note that the name app.init is file independent, so all the pages can have an init modules and the HTML can call app.init() regardless of which page is being initialized.

define(["dojo/on", "dojo/domReady!"],
        function(on){

                var filename = "js/page/main.js";

                on(document.getElementById("myButton"),"click",function(evt) {
                                console.log(filename+" click on myButton");
                };


                return {
                        init: function() {
                                console.log(filename+" init");
                        }
                };
});

This is just the tip of the iceberg. Explore. Enjoy.

For production code, be sure to use a build.

dojo - dijit Form - Create dijits programmatically

This code populates an empty form with a radio button input that has three options. It can be modified to work with check boxes and other dijits.

This is intended to be used with Zend Framework’s Zend_Dojo_Form component, the tags are created using the id naming conventions of Zend, so styling can be applied more easily.

Test data is included, this code can be copied and used as is. It does assume dojo is in the dojo directory. It is coded for dojo 1.6.1 and should work for later versions as well. DOCTYPE is HTML5, although no HTML5 tags are used.

<!DOCTYPE html><head>  
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<META http-equiv="Content-Style-Type" content="text/css">
<title>dojo Test Code</title>
<style type="text/css"> 
<!--
    @import "dojo/dijit/themes/tundra/tundra.css";
-->
dl#dl-web_admin_select
{
width:625px;
}
dl#dl-web_admin_select dt
{
font-weight:bolder;
width:550px;
float:right;
}
dd
{
}
</style>
<script type="text/javascript"> 
//<!--
    var djConfig = {"parseOnLoad":true,"isDebug":true,"locale":"en_US"};
//-->
</script>
<script type="text/javascript" src="dojo/dojo/dojo.js"></script>
<script type="text/javascript" src="dojo/dijit/dijit.js"></script>
<script type="text/javascript" src="dojo/dijit/dijit-all.js"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.RadioButton");

// Data to simulate Zend_Dojo_Data response
var data={"identifier":"id","items":[{"id":"1","url":"one.com","account_name":"AccountOne","name":"AccountOne - one.com"},{"id":"3","url":"three.com","account_name":"AccountOne","name":"AccountOne - three.com"},{"id":"2","url":"two.com","account_name":"AccountTwo","name":"AccountTwo - two.com"}]};

// Used to store the array of created inputs, so they can be destroyed if replaced
var dijit_input = new Array();

dojo.addOnLoad(function(){
		var i=0,input_type;
		// Destroy the HTML
		dojo.destroy('fieldset-web_admin_select');
		// Destroy the dijit widgets
		dijit_input.forEach(function(item){item.destroy()});

		fieldset = dojo.create('fieldset',{'id':'fieldset-web_admin_select'},'frmTest');
		dl = dojo.create('dl',{'id':'dl-web_admin_select'},'fieldset-web_admin_select');
		i=0;
		data.items.forEach(function(item){
			label = dojo.create('dt',{'id':'web_admin_select-label_'+i,'innerHTML':item.name},'dl-web_admin_select');
			input = dojo.create('dd',{'id':'dd_web_admin_select_'+i},'web_admin_select-label_'+i,'after');
			selector = dojo.create('input',{'id':'web_admin_select_'+i,'type':'radio','name':'web_admin_select'},'dd_web_admin_select_'+i);
			dijit_input.push(new dijit.form.RadioButton({
				'value': item.id,
				'id': "rb["+i+"]"},
				'web_admin_select_'+i));
			i++;
		});
});

</script>
</head>
<body class="tundra">
<h1>dojo Test</h1>
<form data-dojo-type="dijit.form.Form" data-dojo-props="'id':'frmTest','name':'frmTest','method':'post'">
</form>
</body>
</html>