A Brief Pyjamas + Django Tutorial

Update: (June 19, 2009) Since the writing of this post, Pyjamas has been updated and the below code no longer works, though the principles discussed are still valid. The example code is now being maintained in the pyjamas Sourceforge repo, located here.


Intro:

Django is a web framework written in Python. Pyjamas is a Python port of the google web toolkit (written in Java). Pyjamas can be used with Django to create web applications.

In terms of an MVC framework, Django acts as the Model and Pyjamas acts as the Views and Controller.

The "Todo List" Application:

In this brief tutorial, we will create a very simple todo list. The primary purpose of this tutorial is to briefly demonstrate how to serve data with Django, how to create and display widgets with Pyjamas, and how to handle user events with Pyjamas.

Prerequesits:

Here is the software that is needed:

• Python
• Mysql
  
• Django
• Pyjamas
• Pimentech's libcommonDjango

This tutorial will not go into how to install each of these components, nor their basic usage. Hopefully, some of them can be downloaded as packages for your linux distribution. One reader recommended that you have a fairly recent Django version. > 1.0 should work.

The Code:

pyjsDemo/urls.py:

from django.conf.urls.defaults import *
from django.conf import settings

urlpatterns = patterns('',
(r'^services/$', 'todo.views.service'),
(r'^site_media/(?P.*)$', 'django.views.static.serve',
{'document_root': settings.STATIC}),
)

pyjsDemo/settings.py

# ADD THIS
import os
STATIC = str(os.path.join(os.path.dirname(__file__), 'media').replace('\\','/'))

# MODIFY THIS  
DATABASE_ENGINE = 'mysql'           # 'postgresql_psycopg2', 'postgresql', 'mysql', 'sqlite3' or 'oracle'.
DATABASE_NAME = 'todo'             # Or path to database file if using sqlite3.
DATABASE_USER = 'todo'             # Not used with sqlite3.
DATABASE_PASSWORD = ''         # Not used with sqlite3.
DATABASE_HOST = ''             # Set to empty string for localhost. Not used with sqlite3.
DATABASE_PORT = ''             # Set to empty string for default. Not used with sqlite3.

# MODIFY THIS
INSTALLED_APPS = (
'pyjsDemo.todo',
)

pyjsDemo/todo/models.py:

from django.db import models

class Todo(models.Model):
task = models.CharField(max_length=30)

def __unicode__(self):
return str(self.task)

pyjsDemo/todo/views.py:

from django.pimentech.network import *
from todo.models import Todo

service = JSONRPCService()

@jsonremote(service)
def getTasks (request):
return [(str(task),task.id) for task in Todo.objects.all()]


@jsonremote(service)
def addTask (request, taskFromJson):
t = Todo()
t.task = taskFromJson
t.save()
return getTasks(request)

@jsonremote(service)
def deleteTask (request,idFromJson):
t = Todo.objects.get(id=idFromJson)
t.delete()
return getTasks(request)

pyjsDemo/media/TodoApp.html:

See the download for this.  It's short, but I can't figure out how to paste html into my blog.  I'm lazy.

pyjsDemo/media/TodoApp.py:

from ui import Label, RootPanel, VerticalPanel, TextBox, KeyboardListener, ListBox
from JSONService import JSONProxy

class TodoApp:
def onModuleLoad(self):
self.remote = DataService()
panel = VerticalPanel()

self.todoTextBox = TextBox()
self.todoTextBox.addKeyboardListener(self)

self.todoList = ListBox()
self.todoList.setVisibleItemCount(7)
self.todoList.setWidth("200px")
self.todoList.addClickListener(self)

panel.add(Label("Add New Todo:"))
panel.add(self.todoTextBox)
panel.add(Label("Click to Remove:"))
panel.add(self.todoList)
RootPanel().add(panel)


def onKeyUp(self, sender, keyCode, modifiers):
pass

def onKeyDown(self, sender, keyCode, modifiers):
pass

def onKeyPress(self, sender, keyCode, modifiers):
"""
This functon handles the onKeyPress event, and will add the item in the text box to the list when the user presses the enter key.  In the future, this method will also handle the auto complete feature.
"""
if keyCode == KeyboardListener.KEY_ENTER and sender == self.todoTextBox:
  id = self.remote.addTask(sender.getText(),self)
  sender.setText("")
if id<0: id =" self.remote.deleteTask(sender.getValue(sender.getSelectedIndex()),self)" method ="=" method ="=" method ="=">

pyjsDemo/media/build.sh

python ~/python/pyjamas-0.3/builder/build.py TodoApp.py

A very brief walk through of how to get this running:

Extract the demo:

• tar -xvvzf pyjamasDjango.tar.gz

Create the db:

• mysql -u root
• > CREATE DATABASE todo;
• > grant all privilages to todo.* to 'todo'@'localhost'; (or possibly > grant all on todo.* to 'todo'@'localhost';)
• > exit;

Create the tables:

• cd pyjsDemo
• python manage.py syncdb

Build the javascript:

• vim media/build.sh
• (edit this so that it points to the build.py of pyjamas)
• media/build.sh

Run the server:

• python manage.py runserver

Test it out:

• In your browser, goto: http://127.0.0.1:8000/site_media/output/TodoApp.html

Here are the demo source files:

• pyjsDemo.tar.gz