Image Widget

The image widget allows you to submit a form to the server by clicking on an image. The “image” type of the “INPUT” element is described here:

http://www.w3.org/TR/1999/REC-html401-19991224/interact/forms.html#edef-INPUT

As for all widgets, the image widget must provide the new IWidget interface:

>>> from zope.interface.verify import verifyClass
>>> from z3c.form import interfaces
>>> from z3c.form.browser import image

>>> verifyClass(interfaces.IWidget, image.ImageWidget)
True

The widget can be instantiated only using the request:

>>> from z3c.form.testing import TestRequest
>>> request = TestRequest()

>>> widget = image.ImageWidget(request)

Before rendering the widget, one has to set the name and id of the widget:

>>> widget.id = 'widget.id'
>>> widget.name = 'widget.name'

We also need to register the template for the widget:

>>> import zope.component
>>> from zope.pagetemplate.interfaces import IPageTemplate
>>> from z3c.form.testing import getPath
>>> from z3c.form.widget import WidgetTemplateFactory

>>> zope.component.provideAdapter(
...     WidgetTemplateFactory(getPath('image_input.pt'), 'text/html'),
...     (None, None, None, None, interfaces.IImageWidget),
...     IPageTemplate, name=interfaces.INPUT_MODE)

If we render the widget we get a simple input element:

>>> print widget.render()
<input type="image" id="widget.id" name="widget.name"
       class="image-widget" />

Setting an image source for the widget effectively changes the “src” attribute:

>>> widget.src = u'widget.png'
>>> print widget.render()
<input type="image" id="widget.id" name="widget.name"
       class="image-widget" src="widget.png" />

Let’s now make sure that we can extract user entered data from a widget:

>>> widget.request = TestRequest(
...     form={'widget.name.x': '10',
...           'widget.name.y': '20',
...           'widget.name': 'value'})
>>> widget.update()
>>> sorted(widget.extract().items())
[('value', 'value'), ('x', 10), ('y', 20)]

If nothing is found in the request, the default is returned:

>>> widget.request = TestRequest()
>>> widget.update()
>>> widget.extract()
<NO_VALUE>