ImageMap: the donation

[Luca Morandini <lu...@tin.it>]

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
--------------------

Re: ImageMap: the donation

[Luca Morandini <lu...@tin.it>]

Peter Hunsberger wrote:

> On 6/10/05, Luca Morandini <lu...@tin.it> wrote:
> 
> Note there is no need for the verbose XSLT element, attribute syntax
> here, you can just use something like:

Sure, that was a leftover from various experiments I did and then forgot 
to streamline.

Regards,
--------------------
    Luca Morandini
www.lucamorandini.it
--------------------

Re: ImageMap: the donation

[Peter Hunsberger <pe...@gmail.com>]

On 6/10/05, Luca Morandini <lu...@tin.it> wrote:

<snip/>

> ---------------------------------
> CHANGES TO FORM-FIELD-STYLING.XSL
> ---------------------------------
> 

Note there is no need for the verbose XSLT element, attribute syntax
here, you can just use something like:

   <!--+
       | fi:imagemap
       +-->
    <xsl:template match="fi:imagemap">
                 <input type ="image" name="{@id}" src="{@imageuri}"
title="{fi:hint}" ismap="true">
                     <xsl:apply-templates select="." mode="styling"/>
                 </input>
    </xsl:template>

<snip/>

-- 
Peter Hunsberger

Re: ImageMap: the donation

[Vadim Gritsenko <va...@reverycodes.com>]

Luca Morandini wrote:
> 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 :)

You may want to drop this into the bugzilla.

Vadim