Dojo Dijit Interface

I need to create a complex web interface for an application I am working on. I know from past experience that Dojo has some very interesting widgets for creating Web 2.0 GUIs but its been a while since I’ve worked with Dojo and I’ve never integrated it with Django before. So here goes…

D0jo – Django Integration

The first issue that occurred to me was how to integrate Dojo into my Django templates in a consistent and manageable way. Luckily there is already a Django application for exactly this purpose. Dojango is an application that helps you to use Dojo within Django. I simply downloaded and extracted the latest release.

tar xzvf dojango-0.5.1.tar.gz

cd dojango-0.5.1

sudo python setup.py install

Then I just added dojango as an application in my settings.py:

INSTALLED_APPS = (
‘django.contrib.auth’,
‘django.contrib.contenttypes’,
‘django.contrib.sessions’,
‘django.contrib.sites’,
‘shizzle.event’,
‘django.contrib.admin’,
‘django.contrib.gis’,
‘haystack’,
‘tinymce’,
‘dojango’
)

Then just enable dojango urls as in step 2 and you can verify by loading the test page http://localhost:8000/dojango/test/ . Now I can add dojo features to my pages by extending dojango/base.html like in this example. I don’t even have to import the javascript (its done in base.html) and if I decide to change to using a custom dojo build I can simply change the dojango configuration rather than changing imports all over the place.

Dijit Layout with Dojango

So dojango allows me get started with dojo but how to lay out my application is my next question. I haven’t discovered any good tutorials on starting work on a complex web application with dijit so I suggest you start by taking one of the layout examples from the dojo website and integrate it with dojango. I tried starting from scratch but its too easy to do something stupid like forget to set the size of the body element and end up with a blank page (It seems the dijit.layout containers have size zero by default).

Anyway here is my initial page based on the first example from the dojo website the “my first page” from dojango:


{% extends \"dojango/base.html\" %}

{% block dojango_page_title %}Event Dashboard{% endblock %}
{% block dojango_header_extra %}
<style type=\"text/css\">
            html, body { width: 100%; height: 100%; margin: 0; }
</style>
<script type=\"text/javascript\">
    dojo.require(\"dijit.form.DateTextBox\");
    dojo.require(\"dijit.form.TimeTextBox\");
    dojo.require(\"dijit.layout.ContentPane\");
    dojo.require(\"dijit.layout.BorderContainer\");
    dojo.require(\"dijit.layout.TabContainer\");
    dojo.require(\"dijit.layout.AccordionContainer\");
    dojo.require(\"dijit.layout.SplitContainer\");
</script>
{% endblock %}
{% block dojango_content %}
 <div dojoType=\"dijit.layout.BorderContainer\" style=\"width: 100%; height: 100%;\">
            <div dojoType=\"dijit.layout.ContentPane\" region=\"top\">
                Title
            </div>
            <div dojoType=\"dijit.layout.ContentPane\" region=\"leading\">
                <input type=\"text\" dojoType=\"dijit.form.DateTextBox\" value=\"T09:00\" />
                <input type=\"text\" dojoType=\"dijit.form.TimeTextBox\" value=\"T09:00\" />
            </div>
            <div dojoType=\"dijit.layout.SplitContainer\" region=\"center\">
                <div dojoType=\"dijit.layout.ContentPane\" title=\"Feed Entries\" >
                    Feeds
                </div>
                <div dojoType=\"dijit.layout.ContentPane\" title=\"Related Entries\">
                    Related
                </div>
            </div>
            <div dojoType=\"dijit.layout.ContentPane\" region=\"trailing\">
                Broad search results:
                    vids, links, wikipedia
            </div>
            <div dojoType=\"dijit.layout.ContentPane\" region=\"bottom\">
                Preview
            </div>
        </div>
{% endblock %}

Which gives me a layout like this:

Advertisements

About bebblebrox

I am an experienced software developer with over five year’s commercial experience with strong software design and development skills. I am searching for an ambitious start-up company with a shared passion for delivering quality software products.
This entry was posted in Dojo. Bookmark the permalink.

One Response to Dojo Dijit Interface

  1. Pingback: Menggunakan Dojo Dijit dengan Django : Weldan Jamili

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s