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:

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)

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:

>>> = ''
>>> = ''

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(''), '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="" 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="" 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={'': '10',
...           '': '20',
...           '': '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()