[Checkins] SVN: z3c.formjs/trunk/src/z3c/formjs/ Greatly improved
usability of widget switcher code.
Stephan Richter
srichter at cosmos.phy.tufts.edu
Thu Aug 23 17:32:36 EDT 2007
Log message for revision 79184:
Greatly improved usability of widget switcher code.
Changed:
U z3c.formjs/trunk/src/z3c/formjs/ajax.py
U z3c.formjs/trunk/src/z3c/formjs/configure.zcml
U z3c.formjs/trunk/src/z3c/formjs/interfaces.py
A z3c.formjs/trunk/src/z3c/formjs/jquery-switch.js
U z3c.formjs/trunk/src/z3c/formjs/jqueryrenderer.py
U z3c.formjs/trunk/src/z3c/formjs/jqueryrenderer.txt
U z3c.formjs/trunk/src/z3c/formjs/jqueryrenderer.zcml
U z3c.formjs/trunk/src/z3c/formjs/jsswitch.py
U z3c.formjs/trunk/src/z3c/formjs/jsswitch.txt
-=-
Modified: z3c.formjs/trunk/src/z3c/formjs/ajax.py
===================================================================
--- z3c.formjs/trunk/src/z3c/formjs/ajax.py 2007-08-23 21:29:42 UTC (rev 79183)
+++ z3c.formjs/trunk/src/z3c/formjs/ajax.py 2007-08-23 21:32:35 UTC (rev 79184)
@@ -24,7 +24,7 @@
from z3c.traverser import traverser
from z3c.form.util import SelectionManager
from z3c.traverser.interfaces import ITraverserPlugin
-from z3c.formjs import util, interfaces
+from z3c.formjs import interfaces
class AJAXHandlers(SelectionManager):
Modified: z3c.formjs/trunk/src/z3c/formjs/configure.zcml
===================================================================
--- z3c.formjs/trunk/src/z3c/formjs/configure.zcml 2007-08-23 21:29:42 UTC (rev 79183)
+++ z3c.formjs/trunk/src/z3c/formjs/configure.zcml 2007-08-23 21:32:35 UTC (rev 79184)
@@ -21,7 +21,7 @@
factory=".ajax.AJAXRequestTraverserPlugin"
/>
- <class class=".ajax.AJAXHandler">
+ <class class=".ajax.AJAXView">
<allow interface="zope.publisher.interfaces.browser.IBrowserPage" />
</class>
Modified: z3c.formjs/trunk/src/z3c/formjs/interfaces.py
===================================================================
--- z3c.formjs/trunk/src/z3c/formjs/interfaces.py 2007-08-23 21:29:42 UTC (rev 79183)
+++ z3c.formjs/trunk/src/z3c/formjs/interfaces.py 2007-08-23 21:32:35 UTC (rev 79184)
@@ -279,11 +279,43 @@
"""
class IWidgetSwitcher(zope.interface.Interface):
- pass
+ """Switches the widhet to another mode."""
+ form = zope.schema.Field(
+ title=u"Form",
+ description=u"The form.",
+ required=True)
+
+ widget = zope.schema.Field(
+ title=u"Widget",
+ description=u"The widget that is being switched.",
+ required=True)
+
+ mode = zope.schema.TextLine(
+ title=u"Mode",
+ description=u"The mode to which to switch to.",
+ required=True)
+
+ def render():
+ """Render the switcher into JavaScript."""
+
class IWidgetSaver(zope.interface.Interface):
- pass
+ """Saves a widget's value to the server."""
+ form = zope.schema.Field(
+ title=u"Form",
+ description=u"The form.",
+ required=True)
+
+ widget = zope.schema.Field(
+ title=u"Widget",
+ description=u"The widget for which the value is saved.",
+ required=True)
+
+ def render():
+ """Render the saver into JavaScript."""
+
+
# -----[ AJAX ]--------------------------------------------------------
Added: z3c.formjs/trunk/src/z3c/formjs/jquery-switch.js
===================================================================
--- z3c.formjs/trunk/src/z3c/formjs/jquery-switch.js (rev 0)
+++ z3c.formjs/trunk/src/z3c/formjs/jquery-switch.js 2007-08-23 21:32:35 UTC (rev 79184)
@@ -0,0 +1,29 @@
+function switchWidget(widgetId, mode, code) {
+ element = $('#' + widgetId + '-row div.widget');
+ element.html(code);
+ if (mode == 'input') {
+ $('#' + widgetId).focus()
+ }
+}
+
+function saveWidget(widgetId, msg) {
+ element = $('#' + widgetId + '-row div.error');
+ if (element) {
+ element.remove();
+ }
+ $('#' + widgetId + '-row').append(
+ '<div class="error">' + msg+ '</div>');
+
+ var error = false;
+ if (msg != '') {
+ $('#' + widgetId).removeClass('valid');
+ $('#' + widgetId).addClass('invalid');
+ $('#' + widgetId).focus()
+ error = true;
+ }
+ else {
+ $('#' + widgetId).removeClass('invalid');
+ $('#' + widgetId).addClass('valid');
+ }
+ return error
+}
Modified: z3c.formjs/trunk/src/z3c/formjs/jqueryrenderer.py
===================================================================
--- z3c.formjs/trunk/src/z3c/formjs/jqueryrenderer.py 2007-08-23 21:29:42 UTC (rev 79183)
+++ z3c.formjs/trunk/src/z3c/formjs/jqueryrenderer.py 2007-08-23 21:32:35 UTC (rev 79184)
@@ -154,9 +154,9 @@
def render(self):
ajaxURL = self._ajaxURL()
widget = self.context.widget
- switcherCall = '%s("%s", html)' % (self.function, widget.id)
- ajax = '$.get(%s,\nfunction(html){%s}\n)' % (ajaxURL, switcherCall)
- return ajax
+ switcherCall = '%s("%s", "%s", html)' % (
+ self.function, widget.id, self.context.mode)
+ return '$.get(%s,\nfunction(html){%s}\n)' % (ajaxURL, switcherCall)
class JQueryWidgetSaverRenderer(object):
@@ -192,5 +192,6 @@
ajaxURL = self._ajaxURL()
widget = self.context.widget
saveCall = '%s("%s", msg)' % (self.function, widget.id)
- ajax = '$.get(%s,\nfunction(msg){%s}\n)' % (ajaxURL, saveCall)
- return ajax
+ switchCall = 'if (error == false) {%s}' %self.context.switcher.render()
+ return '$.get(%s,\nfunction(msg){error=%s; %s}\n)' % (
+ ajaxURL, saveCall, switchCall)
Modified: z3c.formjs/trunk/src/z3c/formjs/jqueryrenderer.txt
===================================================================
--- z3c.formjs/trunk/src/z3c/formjs/jqueryrenderer.txt 2007-08-23 21:29:42 UTC (rev 79183)
+++ z3c.formjs/trunk/src/z3c/formjs/jqueryrenderer.txt 2007-08-23 21:32:35 UTC (rev 79184)
@@ -172,7 +172,7 @@
>>> renderer.update()
>>> print renderer.render()
$.get("http://127.0.0.1/form.html/@@ajax/getDisplayWidget?widget-name=zip",
- function(html){switchWidget("form-zip", html)}
+ function(html){switchWidget("form-zip", "display", html)}
)
``IWidgetSaver`` Renderer
@@ -181,8 +181,9 @@
This renderer defines how JavaScript saves the value of a widget. The widget
submits the data to the form and waits for the response. The response and the
widget id are then forwarded to a JavaScript function
-``saveWidget('widget-id', 'message')``. It is up the user to implement that
-function for their Web site.
+``saveWidget('widget-id', 'message')``. The function must return a boolean
+stating whether an error occurred. The renderer also decides whether to switch
+back to display mode.
So let's create a widget saver instance:
@@ -209,5 +210,8 @@
>>> renderer.update()
>>> print renderer.render()
$.get("http://127.0.0.1/form.html/@@ajax/saveWidgetValue?widget-name=zip&form.zip=" + $("#form-zip").val(),
- function(msg){saveWidget("form-zip", msg)}
+ function(msg){error=saveWidget("form-zip", msg);
+ if (error == false) {$.get("http://127.0.0.1/form.html/@@ajax/getDisplayWidget?widget-name=zip",
+ function(html){switchWidget("form-zip", "display", html)}
+ )}}
)
Modified: z3c.formjs/trunk/src/z3c/formjs/jqueryrenderer.zcml
===================================================================
--- z3c.formjs/trunk/src/z3c/formjs/jqueryrenderer.zcml 2007-08-23 21:29:42 UTC (rev 79183)
+++ z3c.formjs/trunk/src/z3c/formjs/jqueryrenderer.zcml 2007-08-23 21:32:35 UTC (rev 79184)
@@ -1,6 +1,6 @@
<configure
xmlns="http://namespaces.zope.org/zope"
- i18n_domain="z3c.formjs">
+ xmlns:browser="http://namespaces.zope.org/browser">
<adapter
factory=".jqueryrenderer.JQueryIdSelectorRenderer"
@@ -21,4 +21,12 @@
factory=".jqueryrenderer.JQueryWidgetSaverRenderer"
/>
+ <!-- Resources -->
+
+ <browser:zrt-resource
+ name="jquery-switch.js"
+ file="jquery-switch.js"
+ layer="jquery.layer.IJQueryJavaScriptBrowserLayer"
+ />
+
</configure>
Modified: z3c.formjs/trunk/src/z3c/formjs/jsswitch.py
===================================================================
--- z3c.formjs/trunk/src/z3c/formjs/jsswitch.py 2007-08-23 21:29:42 UTC (rev 79183)
+++ z3c.formjs/trunk/src/z3c/formjs/jsswitch.py 2007-08-23 21:32:35 UTC (rev 79184)
@@ -43,9 +43,12 @@
class WidgetSaver(object):
zope.interface.implements(interfaces.IWidgetSaver)
+ switcherClass = WidgetSwitcher
+
def __init__(self, form, widget):
self.form = form
self.widget = widget
+ self.switcher = self.switcherClass(form, widget, DISPLAY_MODE)
def render(self):
renderer = zope.component.getMultiAdapter(
@@ -64,11 +67,8 @@
return WidgetSwitcher(self, selector.widget, 'input').render()
@jsaction.handler(zope.schema.interfaces.IField, jsevent.BLUR)
- def switchToDisplayWidget(self, event, selector):
- return u';\n'.join((
- WidgetSaver(self, selector.widget).render(),
- WidgetSwitcher(self, selector.widget, 'display').render()
- ))
+ def saveWidgetValue(self, event, selector):
+ return WidgetSaver(self, selector.widget).render()
def _getWidget(self, mode):
# Step 1: Determine the name of the widget.
@@ -81,7 +81,7 @@
(self, self.request, self.getContent()), IWidgets)
self.widgets.mode = mode
self.widgets.update()
- # Step 4: Return the widget
+ # Step 4: Return the widget.
return self.widgets[shortName]
@ajax.handler
Modified: z3c.formjs/trunk/src/z3c/formjs/jsswitch.txt
===================================================================
--- z3c.formjs/trunk/src/z3c/formjs/jsswitch.txt 2007-08-23 21:29:42 UTC (rev 79183)
+++ z3c.formjs/trunk/src/z3c/formjs/jsswitch.txt 2007-08-23 21:32:35 UTC (rev 79184)
@@ -123,30 +123,21 @@
<head>
<script type="text/javascript">
$(document).ready(function(){
+ $("#form-widgets-name").bind("blur", function(){$.get('saveValue',
+ function(msg){saveWidget("form-widgets-name", msg)}
+ )});
+ $("#form-widgets-age").bind("blur", function(){$.get('saveValue',
+ function(msg){saveWidget("form-widgets-age", msg)}
+ )});
$("#form-widgets-name").bind("click",
function(){$.get('/switchWidget',
function(html){switchWidget("form-widgets-name", html)}
)});
- $("#form-widgets-age").bind("click",
- function(){$.get('/switchWidget',
- function(html){switchWidget("form-widgets-age", html)}
+ $("#form-widgets-age").bind("click", function(){$.get('/switchWidget',
+ function(html){switchWidget("form-widgets-age", html)}
)});
- $("#form-widgets-name").bind("blur",
- function(){$.get('saveValue',
- function(msg){saveWidget("form-widgets-name", msg)}
- );
- $.get('/switchWidget',
- function(html){switchWidget("form-widgets-name", html)}
- )});
- $("#form-widgets-age").bind("blur",
- function(){$.get('saveValue',
- function(msg){saveWidget("form-widgets-age", msg)}
- );
- $.get('/switchWidget',
- function(html){switchWidget("form-widgets-age", html)}
- )});
- })
- </script>
+ })
+ </script>
</head>
<body>
<form action=".">
@@ -197,9 +188,7 @@
name="form.widgets.age"
class="text-widget required int-field"
onblur="$.get('saveValue',
- function(msg){saveWidget("form-widgets-age", msg)} );
- $.get('/switchWidget',
- function(html){switchWidget("form-widgets-age", html)} )"
+ function(msg){saveWidget("form-widgets-age", msg)} )"
value="27" />
Once the editing is complete, the value gets saved:
More information about the Checkins
mailing list