Skip to main content

A project exploring the client-side of Django website development

Project description

Ray’s Widget Exchange

Ray’s Widget Exchange is a project exploring the client-side of Django website development. The intention is to provide tools, widgets, views and other services that aren’t appropriate for the Django core, but are still essential for website development.

Initial goals:

We aim to provide a simple set of widgets that can be easily integrated into a Django form:

  • A calendar widget

  • A numerical range widget

  • A time widget

  • An AJAX autocomplete widget

  • A color palette

    • full RGB selection

    • selection from subset of colors

Longer term goals:

  • Handle compression and aggregation of CSS and JavaScript artefacts. (Note by Reinout: probably not, as an app should do only one thing: compression/aggregation can be done by other apps).

  • Client-side input validation (possibly by Ajax callback?)


Ray’s widget exchange depends on django-staticfiles as that’s the best way at the moment to handle css and javascript files. It is also, probably, going to end up in one form or the other in Django 1.3.

  • django-rays’ has an automatic dependency on django-staticfiles, so installing django-rays automatically brings in django-staticfiles.

  • Add both rays and staticfiles to your settings file’s INSTALLED_APPS.

Django-staticfiles needs a bit of boilerplate. Django 1.3 ought to make this unnecessary, btw. The official django-staticfiles documentation has more elaborate information and there’s also a blog post with a more narrative explanation and example snippets.

  • In sites where you use django-rays, you will need to add a little bit of django-staticfiles boiler plate code to your settings file

    # Used for django-staticfiles
    STATIC_URL = '/static_media/'
        # Default items.
        # Needs to be added for django-staticfiles to allow you to use
        # {{ STATIC_URL }}myapp/my.css in your templates.
  • And in your urlconf, add something like this to the end of your

    if settings.DEBUG:
        # Add this also to the projects that use this application.
        # It allows django-staticfiles to serve up the /media files
        # in DEBUG mode.
        urlpatterns += patterns('',
            (r'', include('staticfiles.urls')),
  • In production, use the build_static management command to prepare all static files for apache.

The css/js inclusion is happening by using Django’s form media handling. So don’t forget to add your equivalent of:

{{ }}

somewhere in the head of your templates.


The source code is on bitbucket. The bug tracker is also there.

For developers that want to use buildout, a small buildout.cfg that sets up a development and testing environment is provided. Otherwise use your regular virtualenv/pip setup, of course.

Run python and bin/buildout to initialize the buildout environment and to fetch all dependencies. Now you can check run tests with bin/test. You can setup a simple example project with bin/django syncdb. Now run bin/django runserver to start the development server and point your browser to http://localhost:8000/.

Widget documentation


The AutocompleteInput widget hooks up a regular text input widget with jquery-ui’s autocomplete. It currently hooks up jquery’s autocomplete with a url that provides the necessary data (see jquery’s remote datasource demo.

The url should accept a term GET parameter and return a json list of dictionaries. The dictionaries must have the key “value” and/or “label”. If one of them is missing, the other is used twice. The label is the user-visible string and the value is the value being put into the form data.

You can pass the widget either a url (just the url to be called) or a urlname (a name that’s looked up in the urlconf).

Example usage:

from django import forms
from rays.widgets import AutocompleteInput

class AnimalForm(forms.Form):
    name = forms.CharField(
        label=_('Enter animal name'),


The DatepickerInput widget hooks up a regular text input widget with jquery’s datepicker.

Example usage:

from django import forms
from rays.widgets import DatepickerInput

class DatepickerForm(forms.Form):
    start_date = forms.DateField(widget=DatepickerInput())
    end_date = forms.DateField(widget=DatepickerInput(format='%Y.%m.%d'))


The PRIMARY AUTHORS of Ray’s Widget Exchange are:

Russell Keith-Magee <>

Gregory Müllegger <>

Reinout van Rees

Glen Somerville <>

And here is an inevitably incomplete list of MUCH-APPRECIATED CONTRIBUTORS – people who have submitted patches, reported bugs, and generally made Ray’s Widget Exchange that much better:


0.0.1 (unreleased)

  • Added autocomplete widget.

  • Added dateinput widget.

  • Added jquery and jquery ui + css and i18n.

  • Added django-staticfiles dependency as that’s the best thing nowadays for dealing with static js/css files.

Project details

Release history Release notifications | RSS feed

This version


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

django-extrawidgets-1.tar.gz (13.1 kB view hashes)

Uploaded source

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page