Django/Dojo integration: take a look and speak up
James Bennett
this is, essentially, the Django admin app refactored to make use
exclusively of Dojo packages (both from Dojo itself and from a custom
Django namespace) for all its JavaScript needs. So I've bundled it up
and made it available for download; if you've got some spare time,
please grab a copy, take a look and let me know what you think. If
this is generally well-received, hopefully Jacob or Adrian or someone
else with the appropriate privileges will commit it sometime in the
near future.
You can get a copy here:
http://files.shtuff.us/dojo-admin.tgz
Some caveats:
* The file will unpackage and leave you with an 'admin' folder, which
is intended to just be a drop-in replacement for the 'admin' folder of
your current Django installation. No manage.py stuff necessary, just
drop it in and see how it goes.
* This is being developed against magic-removal; if you're on trunk it
won't work.
* I've done a fair bit of refactoring of the old admin JS to take
advantage of features Dojo offers, but not all of it has been
rewritten; my focus was on "make it work", not "make it use 100% Dojo
functions". Also, though they live in a 'widgets' folder, the Django
admin's many-to-many filter and date/time widgets are *not* instances
of Dojo widget classes. For this first attempt at Dojo integration, it
was easier and quicker to get something working than to worry about
completely rewriting them.
* The 'dojo.js' file loaded by the admin app is the "Event + I/O"
edition of Dojo, which seemed the best fit for the modules the admin
was needing. There is not currently a customized build of the Django
namespace, which means some pages will need to make a number of
XMLHttpRequests to load everything they need.
* I've tested this pretty thoroughly, but there's always a chance that
there's a bug that's escaped my attention. If you see something not
working, please let me know so I can fix it ASAP. Even better, send me
a patch :)
Thoughts?
--
"May the forces of evil become confused on the way to your house."
-- George Carlin
James Bennett
provides all the Dojo modules the admin needs at the moment, the
package includes a full Dojo source tree, so if you want to start
playing with this and improving it or experimenting with things you've
wanted to do once Dojo/Django integration was available, all the
packages are accessible to you.
Bryan Chow
I tried installing the Dojo integration package into magic-removal from
svn (latest revision = 2607). First impressions are that generally
things seem to work without issue, although admittedly I haven't spent
much time looking through the code yet.
One issue I noticed is that the calendar and clock widgets do not
render properly on Firefox -- they're positioned above the top of the
page instead of beside the field.
Cheers,
Bryan
James Bennett
> One issue I noticed is that the calendar and clock widgets do not
> render properly on Firefox -- they're positioned above the top of the
> page instead of beside the field.
What version of Firefox are you using? I'm unable to replicate that
with FF 1.5 on Mac or Linux (don't have Windows handy).
Bryan Chow
Tested on Debian Sarge (Firefox from backports.org) and Windows XP.
James Bennett
That's extremely weird... I just set up a fresh copy and tested on FF
1.5 on Ubuntu, and it looks fine. It also was fine on FF 1.5 on a Mac
at work. Could you completely clear your cache and try it again?
Bryan Chow
Windows.
I just realized that both the calendar and clock widgets were within a
fieldset with 'classes': 'collapse'
I removed the classes and the problem went away.
Note that it works fine in the non-Dojo admin with 'classes':
'collapse'
Hope this helps :)
James Bennett
> fieldset with 'classes': 'collapse'
Hmm. I'll try that tomorrow and see if I can replicate it and find out
what causes it.
James Bennett
> fieldset with 'classes': 'collapse'
I've got a test app running with date/time fields inside a collapsed
fieldset, and it's rendering just fine in all the browsers I can throw
at it...
James Bennett
> On 4/4/06, Bryan Chow <fullf...@gmail.com> wrote:
> > I just realized that both the calendar and clock widgets were within a
> > fieldset with 'classes': 'collapse'
OK, now I'm able to replicate it, and I've found the source of the
problem but it's probably going to take me a little while to build a
workaround. I'll update the tarball once that's done.
James Bennett
> fieldset with 'classes': 'collapse'
http://files.shtuff.us/admin-dojo.tgz
Fixed now :)
Bjørn Stabell
branch?
James Bennett
> Could you make it available as a patch against the latest magic-removal
> branch?
Already done; it's in Trac: http://code.djangoproject.com/ticket/1613
Jacob Kaplan-Moss
> Already done; it's in Trac: http://code.djangoproject.com/ticket/1613
FYI, I'm working on making a custom Dojo build with all the sweetness
that James put together but having some issues with the build
system. Once that's done, I'll be checking this into the branch.
Jacob
olive
to make it work I had to replace in your views all occurences of:
ManyToOne by ForeignKey
ManyToMany by ManyToManyField
The only problem for me so far is that TextField are no more handled by
TinyMCE.
Just one reproach: the widget use for ManyToMany was better before Dojo
(MultiSelect combolists are ugly).
Good work anyway.
Olivier.
James Bennett
> to make it work I had to replace in your views all occurences of:
> ManyToOne by ForeignKey
> ManyToMany by ManyToManyField
The patch was extracted from a modified copy of magic-removal which
I'd been running for a while, there should have been no need to change
anything.
> The only problem for me so far is that TextField are no more handled by
> TinyMCE.
Most likely whatever event handler you were using to attach TinyMCE is
conflictign with Dojo's event system, and Dojo's event system is
winning. Dojo does include a rich-tetx editing widget, though.
> Just one reproach: the widget use for ManyToMany was better before Dojo
> (MultiSelect combolists are ugly).
No changes were made to the many-to-many selection widget, other than
wrapping it up as a Dojo package; the resulting visual effect is
identical to what it was before.
olive
How do I specify the use of Dojo rich-text editing widget in my model ?
I don't know why M2M does not render properly, here is an excerpt of
the displayed page source:
...
<link rel="stylesheet" type="text/css" href="/media/css/base.css" />
<script type="text/javascript" src="../../../jsi18n/"></script>
<script type="text/javascript"
src="../../../../media/js/dojo/dojo.js"></script>
<script type="text/javascript">
dojo.setModulePrefix('django', '../django');
var admin_media_prefix = '/media/';
dojo.require('django.admin');
</script>
...
<div class="form-row" >
<label for="id_os">Operating system:</label>
<select id="id_os" class="vSelectMultipleField" name="os" size="7"
multiple="multiple">
<option value="5">HP/UX</option>
<option value="3">IBM AIX</option>
<option value="2">IBM OS/390</option>
<option value="6">Sun Solaris</option>
<option value="4">Windows 2000</option>
<option value="7">Windows 2000 sp4</option>
<option value="1" selected="selected">Windows NT</option>
</select>
<p class="help">Hold down "Control", or "Command" on a Mac, to select
more than one.</p>
</div>
James Bennett
You'll want to take a look at Dojo's documentation at
http://dojotoolkit.org/docs/
> I don't know why M2M does not render properly, here is an excerpt of
> the displayed page source:
The page source makes no difference; the widget code dynamically
creates elements in the page which will *not* show up in "View
Source". What I'm interested in is that apparently now you see
something that visually looks different than what there was before; I
need to know what that difference is.
olive
What I see is a simple multiselection list, so I suspect that the
related Dojo is not loaded.
James Bennett
> related Dojo is not loaded.
Does your browser report any JavaScript errors?
olive
is better now.
But the filter above the left list does not work, JS console says:
Erreur : SelectFilter is not defined
Fichier source : http://localhost:8000/media/js/dojo/dojo.js
Ligne : 187
Erreur : SelectFilter is not defined
Fichier source : http://localhost:8000/media/js/dojo/dojo.js
Ligne : 186
Note: the fact that I have to rename this is still relevant:
ManyToOne by ForeignKey
ManyToMany by ManyToManyField
Now just a silly question: what is the value added by Dojo ?
James Bennett
A few things.
The one that most people have been clamoring for is easy AJAX
functionality; Dojo's libraries for that are really simple to use.
But the big deal for me is the packaging system; for example, the
admin currently has to do all sorts of convoluted logic in the views
and the templates to figure out which scripts it needs for a given
page, but with Dojo we can include a single JavaScript file, and it
will dynamically load whatever packages are needed. This keeps all the
JavaScript-related logic in JavaScript, which is a huge win. It also
makes the JavaScript used in the admin much more portable, so that
it'll be a lot easier to use the fancy admin stuff in your own
applications.
James Bennett
> ManyToOne by ForeignKey
> ManyToMany by ManyToManyField
In what files and locations are you having to do this?
olive
need to do this modification.
If it happens again wih a fresher svn update I will let you know.
Now I'm convinced that we need Dojo, I will help as much as I can.
olive
tonemcd
around Dojo - this is really appreciated James!
Cheers,
Tone