Folks,
The ImageMap widget is done. Doc about the widget is included in this
message, as it is the field styling changes, while the Java source can
be downloaded at http://www.lucamorandini.it/imagemap.zip
...enjoy :)
----------------------
IMAGEMAP CONFIGURATION
----------------------
This element has to be added to the forms-form.xconf:
<widget name="imagemap"
src="org.apache.cocoon.forms.formmodel.ImageMapDefinitionBuilder"/>
-------------------------
IMAGEMAP WIDGET REFERENCE
-------------------------
ImageMap widget
It is used to display a server-side image map and it triggers an
ImageMap event on the server side when clicked.
It behaves much as an Action widget, but you can bind the source URI of
the image using the binding framework "fb:value" element, set the image
at runtime using the setImageURI() method, and retrieve the mouse
coordinates with getX() and getY() methods.
A simple example follows:
Form definition document:
<fd:imagemap id="map">
<fd:imageuri>test.gif</fd:imageuri>
<fd:hint>Click on this map to zoom-in</fd:hint>
<fd:on-action>
<javascript>onClickMap(event);</javascript>
</fd:on-action>
</fd:imagemap>
Form binding document (you can set the image URI with binding as well):
<fb:value id="map" path="@src"/>
Form template:
<ft:widget id="map">
<fi:styling
xmlns:fi="http://apache.org/cocoon/forms/1.0#instance";
border="2"/>
</ft:widget>
Flow:
This is another way to set the image URI:
frm.getWidget().lookupWidget("map").setImageURI("test2.gif");
This is the handler of the imagemap event:
function onClickMap (event) {
var x= event.getX();
var y= event.getY();
var uri;
uri= map.zoomIn(new Rectangle(new Point(x, y), 1, 1));
if ( uri != "map.zoominTooFar" ) {
event.getSource().setImageURI(uri);
}
}
---------------------------------
CHANGES TO FORM-FIELD-STYLING.XSL
---------------------------------
<!--+
| fi:imagemap
+-->
<xsl:template match="fi:imagemap">
<xsl:element name="input">
<xsl:attribute name="type">image</xsl:attribute>
<xsl:attribute name="name"><xsl:value-of
select="@id"/></xsl:attribute>
<xsl:attribute name="src"><xsl:value-of
select="@imageuri"/></xsl:attribute>
<xsl:attribute name="title"><xsl:copy-of
select="fi:hint"/></xsl:attribute>
<xsl:attribute name="ismap">true</xsl:attribute>
<xsl:apply-templates select="." mode="styling"/>
</xsl:element>
</xsl:template>
-----------------
JAVA SOURCE FILES
-----------------
Event package:
ImageMapEvent.java
FormModel package:
ImageMap.java
ImageMapDefinition.java
ImageMapDefinitionBuilder.java
--------------------
Luca Morandini
www.lucamorandini.it
--------------------
