schooltool-developers team mailing list archive

[Douglas Cerna <douglascerna@xxxxxxxxx>]

[warning: tl;dr threat below, so have your coffee next to you...]

Hey everybody.

I've created a branch for my experiments with jQuery UI. It's at:

lp:~replaceafill/schooltool/schooltool_jquery-ui

Also, I've set up a testing instance at: http://69.164.203.135:7080 You will want to add a course.

Here's what I've done so far:

0. I download the default js and theme files and added them as resources to the default skin.

1. I ported the add form for courses to z3c.form. The current form is implemented using an <addform ...> zcml directive. Please, let's kill those :)

2. Having the new form ported to z3c.form makes easy to extract specific parts of it using the macros provided for each part of the form (header, errors, form body, buttons, etc).

3. So, I subclassed this new form into a new view that renders only the <form>...</form> part and I attached javascript behaviour to the two form buttons (Add and Cancel). This behaviour allows the form to send the POST data and receive the response using jQuery, so we avoid the full reload of the page. Any validation error is inserted into the form body using jQuery. This "inline" form works correctly by its own.

4. For the last step, I customized the course container view to create the actual jQuery UI dialog and insert the inline form. The set up of the dialog uses only four self-explaining options:

* autoOpen: false,
* modal: true,
* resizable: false,
*draggable: false

The width of the dialog is calculated based on the width of the inserted form:

width: $(addform_id).find('form').width() + 30

and the height of the dialog adjusts itself to height of the inserted form (when the form displays validation errors, the dialog resizes automatically).

Finally, the container view attaches all the javascript behaviour to the "New Course" action button and shows all this functionality only if the user can edit the container (remember that the course container view is public).

Some comments and questions:

* We're not using jQuery modal forms per se. Just a modal dialog. This means that the dialog doesn't have any buttons. However, inserting the whole form in the dialog saves us trouble regarding, client vs server validation and translations. You can see the translations working in the inserted form in the testing instance. I enabled two languages, English and Spanish. You can change between them using the links next to the "Log Out" link.

* Our default z3c-schooltool-form.pt template renders the ul.errors element conditionally. For the inserted form I needed something that was always rendered, so I used div.required-info for displaying the errors. No biggie, it can be fixed easily.

* The dialog is reused, this means that if the user closes the dialog or clicks the Cancel button, the data and validation errors are kept and displayed again if the user clicks the "New Course" button again. You can test this: click "New Course", click Add (you'll get a validation error), click Cancel (or click the X in the dialog title bar or press ESC), click "New Course" again and you will see that the validation error is still there. We could retrieve a new form on each click on "New Course" if you think that's appropriate.

* Justas and I already talked about having a better way to attach JavaScript behaviour to our action buttons, and I think he has an idea on how to do it.

* Finally and less importantly, we should roll out a jQuery UI theme with SchoolTool colors. That orange title bar for the dialogs looks weird.

My next goal with this task is the datepicker. Specifically, how to display the appropriate translation based on the browser's locale.

Feedback and comments are welcome.

Douglas

"... allí­ es cuando te das cuenta que las cosas malas pueden resultar bastante buenas..." - Lionel Messi

Por favor, evite enviarme adjuntos de Word, Excel o PowerPoint.
Vea http://www.gnu.org/philosophy/no-word-attachments.es.html