cocoon-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Luca Morandini <luca.morandi...@tin.it>
Subject ImageMap: the donation
Date Fri, 10 Jun 2005 14:37:23 GMT
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
--------------------


Mime
View raw message