Posts by Tag "Dojo"

This is a simple example how you would use DojoX Django Template Language component filled with data from a JSON GET Response:

<script type="text/javascript" src="/development/dojo-release-1.1.1/dojo/dojo.js" djConfig="parseOnLoad:true, isDebug:true"></script>
 
<script language="javascript" type="text/javascript"><!--
dojo.require("dojox.dtl");
dojo.require("dojox.dtl.Context");
dojo.require("dojox.dtl.ext-dojo.NodeList");
dojo.addOnLoad(
    dojo.xhrGet({url: "dojotest.php", handleAs: "json", handle: function(data,ioArgs){
        if(typeof data == "error"){
            console.log("error?",data);
        } else {
            dojo.query("#test").dtl("I am eating {{food.fruit}} and {{food.meat}}", data);
        }
    }
}));
--></script>

<?php
header('Content-type: text/json');
$food = array('food' => array('fruit' => 'apple', 'meat' => 'chicken'));
echo json_encode($food);
?>

I have to complain about the Dojo Toolkit (Considering the project I am using this for). It has the worst documentation and API guides I have ever seen. The documentation (called the Dojo Book) has an unnecessary complex structure to click through and its contents are wrapped around examples that are so overly complex that you click away the pages when they get smashed at your head.

The API too, has no clear structure and hides its contents behind cryptic names such as "dnd", "fx", "rpc". Descriptions of the functions sum to very small sentences and additional options are listed without any description at all other than a link to where they are defined in the project. There are no short examples given to any function like jQuery does.

In general I think the Dojos Site is too complex and hard to navigate. The layout seems to change massivly on each click and you it is hard recognize common patterns. Dear Dojo Team, please make your project more accessible!

With the Zend Framework nearing its 1.6 release and full Dojo Toolkit support I took some time to look up what Dojo is actually capable of. I found the DojoX Django Template Language extension and remembered my neighbor talking about why Python + Django is so much better than PHP with any other framework. So I digged into the Django template language and found that it is quite awesome.

Variable filtering and evaluation looks almost like Smarty the syntax being {{var.key|filter1|filter2:"arg1":"arg2"}}. The logical syntax is quite different though, taking an somehow object oriented view on templates you can extend an existing template and override specific parts with your more special implementation. Have a look at the following two snippets:

This is an example of Django template inheritance:
 
{% block helloworld %}Hello World!{% endblock %}

{% extends "base.html" %}
 
{%block helloworld %}Hello World for Object Oriented Views!{% endblock %}

What does Django do with this second template when rendering? It realizes it inherits logic from a parent template and substitutes all special blocks for the parent ones. With a little object oriented background you can guess the result looks like this:

This is an example of Django template inheritance:
 
Hello World for Object Oriented Views!

So what was all the talking about Dojo being able to parse this kind of templates? If you envision a helper component that would function like this: 1.) make an ajax request to $url 2.) retrieve json object from the controller 3.) render json object with $template into container $container. The helper would know that the template is needed in this HTML response and appends it to the Dojo Helper output. A link would be generated performing steps 1 and 2, handing over the json data to the template and render the output. What do you get? Templates that can be used Client and Server side.

For example on rendering the view of your blog you can send all the comments using a specific comment building Django template script. Additionally you can also use the same template to render any new comment to the comment list using via an ajax form submit, returning the (model or form) filtered data via JSON and appending it to the comment list using the DojoX DTL parser. For non-JS browsers you can always use a <noscript> variant to render the templates completly server-side.

This generally being a cool idea since it makes developing applications with AJAX technology very easy I began to port the DTL to the Zend Framework and the whole weekend later I got a working implementation that supports at least the "extends", "for", "include", and "comment" tags. As a next task I will implement the helper for DojoX DTL and will report back on my efforts.

Yesterday I had some time to test Matthews Dojo View Helper and the Zend_Dojo_Form component. At a first glance the implementation looks great and can almost instantly generate you a very nice form with all the possible Dijit form extensions that Dojo has to offer.

If one were to refactor the Dojo Component to allow for jQuery elements one bigger problem appears. Dojo has a CDN (Content Distribution Network) for all its components, that is, the Zend Dojo components can load all javascript and css files from a distant server. JQuery can only offer its main library to be loaded from a CDN. All additional components, for example the jQuery DatePicker, have to be installed locally. This significantly reduces the possibility for rapid development of Javascript/Ajax/Form components with jQuery and Zend Framework.

One could offer a complete dependency downloadable archive with all the CSS, Javascript and Images inside, but this would be very complex to maintain. Looking at the future Zend Tool capabilites one possibilty would be to offer a download client for all the relevant jQuery plugins, but there would have to be a man-middle-server that maintaines the most up to date locations of all the plugins, which also has to be maintained. Does anybody have a better solution to solve this problem? Perhaps the jQuery Team needs to be made aware that they need a CDN for their most stable plugins.

Abstracting from the CDN problem, I implemented a simple jQuery View Helper (mostly copy paste and simple rewrites from Matthews Dojo component) and a HtmlElement Form Helper which constructs a Date-Picker from within the template. This is very easy to use and looks great. In the next days I will add further helpers for the jQuery plugins I use in my day to day work live and hope to present a demo. I might even optin for a jQuery proposal aiming at inclusion in the Zend Extras Library.

Update: I got a reply on the jQuery mailing list stating that a CDN is planned for the jQuery UI library. Sadly this does not include plugins for which one might desperatly need a View Helper except for maybe the Date Picker. I will post further comments on this issue in the near future.