DO NOT REPLY [Bug 35462] New: - ImageMap widget

[bugzilla]

DO NOT REPLY TO THIS EMAIL, BUT PLEASE POST YOUR BUG·
RELATED COMMENTS THROUGH THE WEB INTERFACE AVAILABLE AT
<http://issues.apache.org/bugzilla/show_bug.cgi?id=35462>.
ANY REPLY MADE TO THIS MESSAGE WILL NOT BE COLLECTED AND·
INSERTED IN THE BUG DATABASE.

http://issues.apache.org/bugzilla/show_bug.cgi?id=35462

           Summary: ImageMap widget
           Product: Cocoon 2
           Version: Current SVN 2.1
          Platform: Other
        OS/Version: other
            Status: NEW
          Severity: enhancement
          Priority: P2
         Component: CocoonForms
        AssignedTo: dev@cocoon.apache.org
        ReportedBy: [EMAIL PROTECTED]


----------------------
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">
                <input type ="image" name="[EMAIL PROTECTED]" src="[EMAIL 
PROTECTED]"
                        title="{fi:hint}" ismap="true">
                        <xsl:apply-templates select="." mode="styling"/>
                </input>
        </xsl:template>

-----------------
JAVA SOURCE FILES
-----------------

Java source can be downloaded at http://www.lucamorandini.it/imagemap.zip 

Event package:
ImageMapEvent.java

FormModel package:
ImageMap.java
ImageMapDefinition.java
ImageMapDefinitionBuilder.java

-- 
Configure bugmail: http://issues.apache.org/bugzilla/userprefs.cgi?tab=email
------- You are receiving this mail because: -------
You are the assignee for the bug, or are watching the assignee.