Dojowithindjangoexample

Using dojo in your django pages

After setting up dojango for your django project (see GettingStarted), it is now time to create your first own dojo-driven page.

First you need your own app within our django project, so we create it:

cd mysite
./manage.py startapp myapp

And add it to our INSTALLED_APPS. Open your project's settings file (mysite/settings.py) and add your new app:

INSTALLED_APPS = (
    ...
    'myapp',
)

You also need a template folder for your templates:

mkdir mysite/myapp/templates
# creating a sub-directory with your appname is recommended
mkdir mysite/myapp/templates/myapp

Open mysite/myapp/views.py and add the following lines:

from django.shortcuts import render_to_response
from django.template import loader, Context, RequestContext

def first_page(request):
    return render_to_response("myapp/my_first_page.html", context_instance=RequestContext(request))

Now map this view within your mysite/urls.py. Add the following url to your urlpatterns:

(r'^my-first-page/$', 'myapp.views.first_page'),

And finally create the html template mysite/myapp/templates/myapp/my_first_page.html with the following content:

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

{# setting the <title> attribute #}
{% block dojango_page_title %}My first dojo page{% endblock %}
{% block dojango_header_extra %}
<style type="text/css">
    .box {
        margin-top: 10px;
        color: #292929;
        width: 300px;
        border: 1px solid #BABABA;
        background-color: #ddd;
        padding-left: 10px;
        padding-right: 10px;
        margin-left: 10px;
        margin-bottom: 1em;
        -o-border-radius: 10px;
        -moz-border-radius: 12px;
        -webkit-border-radius: 10px;
        -webkit-box-shadow: 0px 3px 7px #adadad;
        border-radius: 10px;
        -moz-box-sizing: border-box;
        -opera-sizing: border-box;
        -webkit-box-sizing: border-box;
        -khtml-box-sizing: border-box;
        box-sizing: border-box;
        overflow: hidden;
    }
</style>
<script type="text/javascript">
    // load the modules you need on the page!
    dojo.require("dijit.form.Button");
    var textBigger, textSmaller;
    // just access your dom after everything is loaded!
    dojo.addOnLoad(function(){
        // defining some animations
        textBigger = dojo.animateProperty(
            {node: "animDiv",
            duration: 1000,
            properties: {fontSize: {end: 25, unit: "px"}}
        });

        textSmaller = dojo.animateProperty(
            {node: "animDiv",
            duration: 1000,
            properties: {fontSize: {end: 10, unit: "px"}}
        });
    });
</script>
{% endblock %}
{% block dojango_content %}
<button dojoType="dijit.form.Button" onClick="textBigger.play();">Text Embiggen</button>
<button dojoType="dijit.form.Button" onClick="textSmaller.play();">Text UnEmbiggen</button>
<div id="animDiv" class="box">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
semper sagittis velit. Cras in mi. Duis porta mauris ut ligula.
Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla
facilisi. Maecenas luctus venenatis nulla. In sit amet dui non mi
semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum
magna. Sed vitae risus.
</p>
</div>
{% endblock %}

Now you can startup your server:

./manage.py runserver

And visit the following URL:

http://localhost:8000/my-first-page/

This was just a simple example how dojo can be used on the frontend side. More examples how you can enhance your django application with dojo and how you feed your dojo with the rich internet backend django will follow soon.