Creating A Base Debian System

We will create a Qemu machine and install Debian Lenny on it first:

# Download Debian image
wget http://debian.osuosl.org/debian-cdimage/current/i386/iso-cd/debian-504-i386-businesscard.iso

# Create base VM image
qemu-img create -f qcow2 debian.qcow2 2G

Our disk image will have a 2 Gigabyte size limit. You can pick a different size if you need.

Now we need to power on our VM and install Debian:

# Install Debian
qemu -enable-kvm -k tr -cdrom debian-504-i386-businesscard.iso -hda debian.qcow2 -boot d

You don’t need to allocate a large swap disk, 128MB should do just fine for a file/web server. Also I wouldn’t bother creating a seperate partition for /home/.

Next let’s log in as the user (www here) we have created to make final changes:

# logged in as user
dpkg-reconfigure console-data
aptitude install ssh sudo
echo "www ALL=(ALL) ALL" >> /etc/sudoers

At this point you might want to take a backup of debian.qcow2. (Even though we will open it only read-only from now on)

Creating The Actual VM

To save time and space we will use copy-on-write disks and re-use debian.qcow2.

# Create the actual VM's disk
qemu-img create -f qcow2 -o backing_file=debian.qcow2 actual.qcow2

Actually we are done. You can log in to your VM using the following command and start installing/configuring/running:

qemu -enable-kvm -k tr -hda actual.qcow2 -net user -net nic \
                                         -redir tcp:5022::22 \
                                         -redir tcp:9080::80

A few things to note about the command above:

• -enable-kvm is meaningful only if you have kvm kernel module installed. It improves performance a great deal, so it’s highly recommended.
• You probably need to change -k tr according to your keyboard’s layout.
• We are setting up two TCP redirections. 22 is for SSH and 80 is for HTTP. You can add more ports if you need.

Finally, I suggest you to prefer SSHing your VM instead of logging in directly:

# SSH into the VM
ssh -p 5022 www@localhost

I hope some of you find this useful.

Related posts:

1. GALFTHW Style Tutorial On Python Coroutines
2. Using Layouts In Qooxdoo – Index
3. Freedays’09 Videos

Where do I put my media files?

Django can’t find my foo.gif!

How can I link my CSS?

First of all, just to make it clear; just because a server returns a response body with an internal URL doesn’t necessarily mean it will be available on that server. It is one thing that your templates produce the correct URL to a media file and another thing that your server actually serves that resource on that URL. Django development server doesn’t automagically serve media files¹.

Settings

There are three settings to get right: MEDIA_ROOT, MEDIA_URL and ADMIN_MEDIA_PREFIX. MEDIA_ROOT is the absolute filesystem path where your media files are. I usually set it like:

MEDIA_ROOT = os.path.join(os.path.abspath(os.path.dirname(__file__)), 'media')

This will set MEDIA_ROOT to point to the media directory in your project directory². MEDIA_URL and ADMIN_MEDIA_PREFIX are URL’s:

MEDIA_URL = '/media/'
ADMIN_MEDIA_PREFIX = '/media/admin/'

With this setup, to serve admin media in production, all I need to do is to symlink media folder of admin app into my media directory. Of course you can set MEDIA_URL to point to another domain/subdomain. Such as http://media.mydomain.com/. But this way you can’t serve your media from development server.

URL Configuration

Add the following code snipplet at the end of your root urls.py:

   1 if settings.DEBUG:
   2     from django.views.static import serve
   3     _media_url = settings.MEDIA_URL
   4     if _media_url.startswith('/'):
   5         _media_url = _media_url[1:]
   6         urlpatterns += patterns('',
   7                                 (r'^%s(?P<path>.*)$' % _media_url,
   8                                 serve,
   9                                 {'document_root': settings.MEDIA_ROOT}))
  10     del(_media_url, serve)

settings.DEBUG == True doesn’t necessarily mean development server is running. But it is a good indicator since deploying with development server is not a good idea for many reasons. Notice here we don’t serve media unless MEDIA_URL is an absolute URL on our server.

Templates

Finally we need to specify media URL’s correctly. To avoid hard-coding media path we will be using {{ MEDIA_URL }} context variable in our templates. To have {{ MEDIA_URL }} included automatically in each template we need to do two things:

1. Make sure you have django.core.context_processors.media in your TEMPLATE_CONTEXT_PROCESSORS.
2. Make sure each view is using a RequestContext.

Afterwards all we need to do is to specify our media URL’s like this:

<img src="{{ MEDIA_URL }}img/header.jpeg" />

This will be translated to:

<img src="/media/img/header.jpeg" />

Bonus

While we are at it, why not serve our 500 and 404 pages statically. When DEBUG == True, 500 (server error) and 404 (not found) situations are handled with special debugging views. So there’s no chance to test your error pages. Add the following code, just like static serving code:

   1 if settings.DEBUG:
   2     urlpatterns += patterns('',
   3                             (r'^404/',
   4                                 'django.views.generic.simple.' \
   5                                 'direct_to_template',
   6                                 {'template': '404.html'}),
   7                             (r'^500/',
   8                                 'django.views.generic.simple.' \
   9                                 'direct_to_template',
  10                                 {'template': '500.html'}))

Now when you visit /500/ and /404/ on your development server you will be served a fake error page.

1: There is an exception here. If you configured your settings correctly, development server will serve admin media.

2: Assuming your settings.py is directly inside your project directory, hence the __file__.

Related posts:

1. Sad State of Web Development Industry in Türkiye
2. django-formfieldset
3. django-renderformplain

Complete list of parts:

1. Introduction
2. VBox Layout
3. HBox Layout
4. Grid Layout
5. Basic & Canvas Layouts

Related posts:

1. Using Layouts In Qooxdoo – Part 1
2. Using Layouts In Qooxdoo – Part 2: VBox Layout
3. Using Layouts In Qooxdoo – Part 3: HBox Layout

• It is written well and examples are clean and to the point. I’ve just read the slides and I have a much better understanding about coroutines now.
• It aims to give a better understanding about the subject. But doesn’t just Hello World the examples, all code included is practical and useful. (Death to Fibonacci! LOL)
• Author explains thing from a wide perspective, including counter-arguments and possible bottlenecks and necessary warnings…

All in all I really enjoyed this tutorial. Highly recommended.

1: Multitasking possibly within a single thread/process.

Related posts:

1. django-formfieldset
2. django-renderformplain
3. What’s New in django-formfieldset 1.1

I use Kate for (almost) all my text editing. I think it suits my needs perfectly. It is both as simple as I would be comfortable with and has as many features (such as multi document interface, regex search and replace, etc.) as I need to be productive. I am not an IDE person. Nothing against IDE’s, I have just never been comfortable with them. On the other side I have never taken the time to learn the classic (read antique) editors such as Emacs and Vim. I am sure learning them would be worth my time. But I doubt I will ever take the time for that. At present, I just fire up my Kate and it works pretty well.

Meanwhile, I keep hearing about these neat hacks with Emacs that when you do C-t, C-M-w and then C-k your active buffer is translated to Chinese and then automatically sent to your grandmother’s cell phone as SMS. Wow! And you can write your own macros (in Lisp, elisp) to extend the editor’s capabilities. There is virtually no limit to what you can do and it is not rare that these extensions exceed the borders of an editor. Of course you have to use (and learn) Emacs to take advantage.

This was true, before I discovered Pâté. It was always possible to write plugins for Kate, but Kate was not scriptable. Now using Pâté, you can extend Kate with ease (at least much much easier than writing C). The only thing that bugs me is I couldn’t figure out a way to reload my plugins without restarting Kate.

Creating Simple Pâté Plugins

The first plugin we write will turn the selection into a Django password hash. I use this when I want to create initial_data fixtures for User‘s quickly.

Since we do not want to instantiate a complete Django environment we won’t be able to import anything from django.contrib.auth.models. Instead let us copy a dumbed down version of get_hexdigest into our own module.

import random


def get_hexdigest(algorithm, salt, raw_password):
    try:
        import hashlib
    except ImportError:
        import sha
        return sha.new(salt + raw_password).hexdigest()
    else:
        return hashlib.sha1(salt + raw_password).hexdigest()

It should be clear enough, it returns a hash of the given password using the given salt[1]. Now we simply add kate to our imports (remember kate and not pate):

import kate

And add our own callback code:

@kate.onAction('Django Password', 'Shift+Alt+P')
def setPassword():
    v = kate.view()
    raw_password = v.selection.text
    v.selection.removeSelectedText()
    algo = 'sha1'
    salt = get_hexdigest(algo, str(random.random()), \
        str(random.random()))[:5]
    hsh = get_hexdigest(algo, salt, raw_password)
    v.insertText('%s$%s$%s' % (algo, salt, hsh))

The first line makes our function kate-aware. 'Django Password' will be the label for our menu item (it will be listed under Tools) and Shift-Alt-P will be the keyboard shortcut. The rest of the code should be self-explanatory.[2]

Now we copy our module into ~/.kde/share/apps/kate/pyplugins/ and restart Kate. It should show up in the menu and work now.

Second example is a JSON prettifier. I use JSON format for my fixtures, but valid JSON is not very readable. So I have this small plugin to convert a document between JSON and Python literals:

import sys, pprint
import kate
from django.utils import simplejson


HEADER = '# Pretty Printed\\n'

@kate.onAction('Django Pretty Json', 'Shift+Alt+J')
def togglePrettyJsonFormat():
    d = kate.document()
    source = d.text
    if source.startswith(HEADER):
        target = simplejson.dumps(eval(source))
    else:
        pp = pprint.PrettyPrinter(indent=2)
        target = HEADER + pp.pformat(simplejson.loads(source))
    d.text = target

I need HEADER to distinguish between two states. It can actually be anything, but it would be a good idea to make it a quote to have valid Python just in case.

Pâté Is Fun

I have enjoyed experimenting with Pâté. I hope it gets more attention and therefore ends up a much better plugin. If you ask me it should already ship with Kate. Kate is a nice editor, and empowering the users would only make it nicer and more popular.

If you have any ideas for pâté plugins, especially stuff that is useful in Django context, please add it to the comments. I would love to play a little more with pâté.

1: If it is not clear, take a look at django.contrib.auth.models.

2: To learn API, you can fire up Interactive Console under View and type help(kate).

Related posts:

1. GALFTHW Style Tutorial On Python Coroutines
2. A Civilized Way Display Lots Of Data
3. Web Site Performance Optimizations

Qooxdoo is well documented and has a clean API. It comes with a Python program to help with builds. Because it is such a big framework you test on a partially compiled source and when finished this build program generates a single (actually two, it also generates a loader), compact (and somewhat obfuscated) file for performance. I strongly advise you to give it a try. The following is a small introductory tutorial. It aims to go little further than Hello World. This is not a tutorial explaining object oriented programming concepts, I assume you are already fluent in OOP.

Create The Skeleton

Screenshot of finished application

We’ll create a simple calculator-like application. I am assuming you have downloaded (latest version is 0.8 for today) and extracted the source into a directory. Let’s call it qxtut. The first thing we will do is to create a skeleton of our application with the following command;

./qooxdoo-0.8-sdk/tool/bin/create-application.py --name basicmath

This command has created the following directory structure under ./basicmath;

qxtut/
  qooxdoo-0.8-sdk/
  basicmath/
    source/
    build/
    cache/
    api/
    config.json
    Manifest.json

Well, some of the directories (build & cache) are not there yet. But as we go on they will appear, I just wanted you to see how the application is organized. config.json and Manifest.json files are configuration files for the build tool. We don’t need to change them for this tutorial, but you are welcome to check their contents.

Let us build our source for the first time;

cd basicmath
./generate.py source

Now if you open ./source/index.html in your browser you can see a Hello World application in action. We’ll replace this with our own program. But before we proceed I’d like to point out a few things;

• When we define our classes, we call a class method define on qx.Class and pass our class’ name (along with its namespace) and its contents as arguments. We don’t define our classes using prototypes, in order to take advantage of Qooxdoo’s object oriented programming features.
• Qooxdoo supports single inheritance (with mixins). We define our base class, if we have one, using extend key.
• Instance members are defined inside the members key and class members are defined inside the statics key.
• construct and destruct are two special functions for initialization and cleanup of the class.
• Qooxdoo supports [properties](http://en.wikipedia.org/wiki/Property_(programming)) as well, but it is outside of this tutorial’s scope.
• Finally, “#asset(basicmath/*)” line tells the build program to include assets (images etc) in qxtut/basicmath/source/resource/basicmath directory.

Custom Classes

Let’s start building our application now. Here is a compact version of Application.js;

/* ************************************************************************
#asset(basicmath/*)
************************************************************************ */

qx.Class.define("basicmath.Application", {
    extend: qx.application.Standalone,
    members: {
        main: function()
        {
            this.base(arguments);
            if (qx.core.Variant.isSet("qx.debug", "on")) {
                qx.log.appender.Native;
                qx.log.appender.Console;
            }
            // Our code will come here
        }
    }
});

Now we will create a custom class named Operation. This class will take two operands and perform an operation on them, and then later we will add it the ability to report the result of the operation. Paste this as Operation.js;

/* ************************************************************************
#asset(basicmath/*)
************************************************************************ */

qx.Class.define("basicmath.Operation", {
    extend: qx.ui.container.Composite,
    construct: function() {
        this.base(arguments);
        var layout = new qx.ui.layout.HBox(6);
        this.setLayout(layout);
        this.operand1 = new qx.ui.form.TextField("0");
        this.operator = new qx.ui.form.SelectBox();
        this.operator.add(new qx.ui.form.ListItem("add"));
        this.operator.add(new qx.ui.form.ListItem("subtract"));
        this.operator.add(new qx.ui.form.ListItem("multiply"));
        this.operator.add(new qx.ui.form.ListItem("divide"));
        this.operand2 = new qx.ui.form.TextField("0");
        this.result = new qx.ui.basic.Label("0");
        this.add(this.operand1);
        this.add(this.operator);
        this.add(this.operand2);
        this.add(this.result);
    },
    members: {
        operand1: null,
        operator: null,
        operand2: null,
        result: null
    }
});

The code should be self explanatory. Notice here, we define operand1, operator, operand2 and result as members of the class. Also notice we initialize those members in the constructor and not in the class body¹. This is because their respected values (classes) are derived from the non-primitive Object type. Therefore if we have assigned them a non-primitive type (such as the array [1, 2, 3]) in the members section; all instances would point to the same object.

Let us now plug this object in our application. Replace the comment line “// Our code will come here” with the following;

this.getRoot().add(new basicmath.Operation);

Now, when we compile the source and run index.html we should see our widgets in place.

Screenshot of an Operation widget we have just created

Simple Behaviour

We want our widget to calculate the operation and show us the result. Let’s update the members section of Operation with the following;

members: {
    operand1: null,
    operator: null,
    operand2: null,
    result: null,
    updateResult: function() {
        var v1 = this.cleanField(this.operand1);
        var v2 = this.cleanField(this.operand2);
        var r;
        switch(this.operator.getValue()) {
            case "add": r = v1+v2; break;
            case "subtract": r = v1-v2; break;
            case "multiply": r = v1*v2; break;
            case "divide": r = v1/v2; break;
        }
        this.result.setContent(String(r));
        this.operand1.setValue(String(v1));
        this.operand2.setValue(String(v2));
    },
    cleanField: function(field) {
        var val = parseInt(field.getValue());
        return isNaN(val) ? 0 : val;
    }
}

We have added two functions here updateResult and cleanField. Now we make use of them, change the construct with the following;

construct: function() {
    this.base(arguments);
    var layout = new qx.ui.layout.HBox(6);
    this.setLayout(layout);
    this.operand1 = new qx.ui.form.TextField("0");
    this.operand1.addListener("input", this.updateResult, this);
    this.operator = new qx.ui.form.SelectBox();
    this.operator.add(new qx.ui.form.ListItem("add"));
    this.operator.add(new qx.ui.form.ListItem("subtract"));
    this.operator.add(new qx.ui.form.ListItem("multiply"));
    this.operator.add(new qx.ui.form.ListItem("divide"));
    this.operator.addListener("changeValue", this.updateResult, this);
    this.operand2 = new qx.ui.form.TextField("0");
    this.operand2.addListener("input", this.updateResult, this);
    this.result = new qx.ui.basic.Label("0");
    this.add(this.operand1);
    this.add(this.operator);
    this.add(this.operand2);
    this.add(this.result);
}

We just added these three listeners to update the result when an operand or the operator changes;

this.operand1.addListener("input", this.updateResult, this);
this.operator.addListener("changeValue", this.updateResult, this);
this.operand2.addListener("input", this.updateResult, this);

The last parameter (this) for addListener (even though it is sometimes unnecessary) set the scope within the listener code (the second parameter). Qooxdoo handles most of the binding automatically, I think this is included for flexibility.

Let’s compile and run again. The result of the operation should update as you change the values now.

Events To Tie All Together

I’ll give you the finished code first and then we can go over the details. Here is Operation.js;

/* ************************************************************************
#asset(basicmath/*)
#asset(qx/icon/Oxygen/*)
************************************************************************ */

qx.Class.define("basicmath.Operation", {
    extend: qx.ui.container.Composite,
    construct: function() {
        this.base(arguments);
        var layout = new qx.ui.layout.HBox(6);
        this.setLayout(layout);
        this.operand1 = new qx.ui.form.TextField("0");
        this.operand1.addListener("input", this.updateResult, this);
        this.operator = new qx.ui.form.SelectBox();
        this.operator.add(new qx.ui.form.ListItem("add"));
        this.operator.add(new qx.ui.form.ListItem("subtract"));
        this.operator.add(new qx.ui.form.ListItem("multiply"));
        this.operator.add(new qx.ui.form.ListItem("divide"));
        this.operator.addListener("changeValue", this.updateResult, this);
        this.operand2 = new qx.ui.form.TextField("0");
        this.operand2.addListener("input", this.updateResult, this);
        this.result = new qx.ui.form.TextField("0");
        this.result.setReadOnly(true);
        var close_button = new qx.ui.form.Button(
            null,
            "qx/icon/Oxygen/16/actions/application-exit.png"
        );
        close_button.addListener("execute", function(e) {
            this.fireDataEvent(
                "changeResult",
                0,
                parseFloat(this.result.getValue()),
                false
            );
            this.destroy();
        }, this);
        this.add(this.operand1);
        this.add(this.operator);
        this.add(this.operand2);
        this.add(new qx.ui.basic.Label("="));
        this.add(this.result);
        this.add(new qx.ui.core.Spacer(8));
        this.add(close_button);
    },
    events: {
        "changeResult": "qx.event.type.Data"
    },
    members: {
        operand1: null,
        operator: null,
        operand2: null,
        result: null,
        updateResult: function() {
            var v1 = this.cleanField(this.operand1);
            var v2 = this.cleanField(this.operand2);
            var r;
            switch(this.operator.getValue()) {
                case "add": r = v1+v2; break;
                case "subtract": r = v1-v2; break;
                case "multiply": r = v1*v2; break;
                case "divide": r = v1/v2; break;
            }
            this.fireDataEvent("changeResult",
                r,
                parseFloat(this.result.getValue()),
                false
            );
            this.result.setValue(String(r));
            this.operand1.setValue(String(v1));
            this.operand2.setValue(String(v2));
        },
        cleanField: function(field) {
            var val = parseInt(field.getValue());
            return isNaN(val) ? 0 : val;
        }
    }
});

And Application.js;

/* ************************************************************************
#asset(basicmath/*)
#asset(qx/icon/Oxygen/*)
************************************************************************ */

qx.Class.define("basicmath.Application", {
    extend : qx.application.Standalone,
    members : {
        main : function()
        {
            this.base(arguments);
            if (qx.core.Variant.isSet("qx.debug", "on")) {
                qx.log.appender.Native;
                qx.log.appender.Console;
            }
            var layout = new qx.ui.container.Composite(
                new qx.ui.layout.VBox(8)
            );
            var layout_footer = new qx.ui.container.Composite(
                new qx.ui.layout.HBox(6)
            );
            var total = new qx.ui.basic.Label("0");
            var add_button = new qx.ui.form.Button(
                "Add New",
                "qx/icon/Oxygen/16/actions/list-add.png"
            );
            add_button.addListener("execute", function(e) {
                var new_operation = new basicmath.Operation();
                layout.addBefore(new_operation, layout_footer);
                new_operation.addListener("changeResult", function(e) {
                    var old_total = parseFloat(total.getContent());
                    var new_total = old_total - e.getOldData() + e.getData();
                    total.setContent(String(new_total));
                }, this);
            }, this);
            layout_footer.add(add_button);
            layout_footer.add(total);
            layout.add(layout_footer);
            add_button.execute();
            this.getRoot().add(layout);
        }
    }
});

Let’s go top-down and begin with the changes in the Application.js;

var layout = new qx.ui.container.Composite(new qx.ui.layout.VBox(8));
this.getRoot().add(layout);

We don’t necessarily need to subclass everytime we need specialized behaviour. Since I had intented to re-use Operation I have it as a seperate class. But for the layout of the application I just instanciated some classes and tweaked them inside Application.main. layout here is the topmost widget, we will put everything else in it. Basically one or more Operation‘s and a footer to dispay the grand total. VBox layout is by the way a layout manager that stacks children vertically, and a HBox stacks horizontally.

var layout = new qx.ui.container.Composite(new qx.ui.layout.VBox(8));
var layout_footer = new qx.ui.container.Composite(new qx.ui.layout.HBox(6));
var total = new qx.ui.basic.Label("0");
var add_button = new qx.ui.form.Button(
    "Add New",
    "qx/icon/Oxygen/16/actions/list-add.png"
);
add_button.addListener("execute", function(e) {
    var new_operation = new basicmath.Operation();
    layout.addBefore(new_operation, layout_footer);
    new_operation.addListener("changeResult", function(e) {
        var old_total = parseFloat(total.getContent());
        var new_total = old_total - e.getOldData() + e.getData();
        total.setContent(String(new_total));
    }, this);
}, this);

We define a label total to hold the grand total of all operations and an add button for new operations. Notice the closures work on 7th line. Although we limit ourselves a little bit to take advantage of OOP, we are still in a dynamic environment. Finally we tie all these components together and finally add the layout to the application root.

add_button.execute();

This instantiates the first Operation for us. We execute the button instead of creating the widget programmatically to avoid the code duplication (see the “execute” listener on the add_button).

Now let’s take a look at the changes in Operation.js. I have replaced the result Label with a TextField (remember to run “generate.py source” each time dependencies change). I wanted to take advantage of the getOldData function on TextField‘s changeValue event. But appereantly it doesn’t supply the old data. But I kept it as a TextField anyway, setting it read-only.

Then I decided that Operation should signal for a result change (maybe this is more politically correct) and added a custom event changeResult on it.

events: {
    "changeResult": "qx.event.type.Data"
}

This event is fired inside Operation.updateResult;

this.fireDataEvent(
    "changeResult",
    r,
    parseFloat(this.result.getValue()),
    false
);

The second parameter is returned from e.getData() and the third is from e.getOldData(). Therefore we can calculate the grand total without iterating all Operations;

var new_total = old_total - e.getOldData() + e.getData();

An important point here is to fire changeResult to correct the grand total before we destroy an Operation;

close_button.addListener("execute", function(e) {
    this.fireDataEvent(
        "changeResult",
        0,
        parseFloat(this.result.getValue()),
        false
    );
    this.destroy();
}, this);

Wrapping Up

Now it should work correctly, if I haven’t made a typo of course. Let us build it with;

./generate.py build

It generates a loader (~150kb) and an application script (~400kb). You don’t need the Qooxdoo source anymore, you can just upload the contents of the build directory and your application would run.

This concludes my a little further than Hello World tutorial. If you find errors or typos, or have any questions please leave a comment here or contact me at muhuk@jabber.org.

1: Here is an explanation in Qooxdoo manual.

Related posts:

1. Using Layouts In Qooxdoo – Index
2. Using Layouts In Qooxdoo – Part 1
3. Using Layouts In Qooxdoo – Part 2: VBox Layout