Ok. I’ve done this using some javascript and a plain ol’ image. If it helps 
anyone else…  [see https://twitter.com/mwardle/status/728250997588541441 on how 
I’m using it]. It only uses the data binding as the image is dynamically 
generated annotated with the clicks saved previously but implementing other 
bindings is left as an exercise to the reader…

Best wishes,

Mark

AjaxActiveImage.html
<webobject name="Image"/>

AjaxActiveImage.wod
Image: WOImage {
        class = ^class;
        alt = ^alt;
        border = ^border;
        data = ^data;
        mimeType = ^mimeType;
        id = safeElementID;
        style = ^style;
        onclick = onClick;
        width = ^width;
        height = ^height;
}

AjaxActiveImage.java:
package com.eldrix.news.components;

import com.webobjects.appserver.WOActionResults;
import com.webobjects.appserver.WOComponent;
import com.webobjects.appserver.WOContext;
import com.webobjects.appserver.WORequest;
import com.webobjects.appserver.WOResponse;

import er.ajax.AjaxComponent;
import er.ajax.AjaxUtils;
import er.extensions.foundation.ERXStringUtilities;

public class AjaxActiveImage extends AjaxComponent {
        private static final long serialVersionUID = 1L;

        public AjaxActiveImage(WOContext context) {
                super(context);
        }

        @Override
        protected void addRequiredWebResources(WOResponse response) {
                addScriptResourceInHead(response, "prototype.js");
                addScriptResourceInHead(response, "effects.js");
                addScriptResourceInHead(response, "wonder.js");
        }

        @Override
        public WOActionResults handleRequest(WORequest request, WOContext 
context) {
                WOComponent component = context.component();
                Integer x = 
ERXStringUtilities.integerWithString((String)request.formValueForKey("x"));
                Integer y = 
ERXStringUtilities.integerWithString((String)request.formValueForKey("y"));
                setValueForBinding(x, "x");
                setValueForBinding(y, "y");
                WOActionResults results = (WOActionResults) 
valueForBinding("action", component);
                if (results == null) {
                        String script = (String) 
valueForBinding("onClickServer", component);
                        if (script != null) {
                                WOResponse response = 
AjaxUtils.createResponse(request, context);
                                AjaxUtils.appendScriptHeader(response);
                                response.appendContentString(script);
                                AjaxUtils.appendScriptFooter(response);
                                results = response;
                        }
                }
                return results;
        }

        public String onClick() {
                StringBuilder sb = new StringBuilder();
                if (!booleanValueForBinding("disabled", false)) {
                        String actionUrl = 
AjaxUtils.ajaxComponentActionUrl(context());
                        sb.append("var canvas = document.getElementById('");
                        sb.append(safeElementID());
                        sb.append("');var rect = 
canvas.getBoundingClientRect();var x = Math.round((event.clientX - rect.left) / 
(rect.right - rect.left) * canvas.width); var y = Math.round((event.clientY - 
rect.top) / (rect.bottom - rect.top) * canvas.height);");
                        sb.append("new Ajax.Request('");
                        sb.append(actionUrl);
                        sb.append("', ");
                        sb.append("{method:'post', parameters:{x:x,y:y}");
                        String onSuccess = (String) 
valueForBinding("onSuccess", context().component());
                        if (onSuccess != null) {
                                sb.append(",onSuccess:");
                                sb.append(onSuccess);
                        }
                        sb.append("}");
                        sb.append("); return false");
                        String onClick = (String) valueForBinding("onClick", 
context().component());
                        if (onClick != null) {
                                sb.append(';');
                                sb.append(onClick);
                        }
                }
                return sb.toString();
        }

        @Override
        public boolean isStateless() {
                return true;
        }
}
> On 3 May 2016, at 16:02, Mark Wardle <[email protected]> wrote:
> 
> Hi all,
> 
> I would like the functionality of a WOActiveImage but don’t wish to have a 
> full submit. I end up reloading the whole page. Each click adds a coordinate 
> and I manually add a letter to a static PNG to show injections of botulinum 
> toxin treatment but on each click the page scrolls.
> 
> I saw a similar question on the mailing list but there was no solution that I 
> could see in obtaining the X,Y coordinates of the mouse click.
> 
> Many thanks,
> 
> Mark
> 
> 
> 
> 
> 

 _______________________________________________
Do not post admin requests to the list. They will be ignored.
Webobjects-dev mailing list      ([email protected])
Help/Unsubscribe/Update your Subscription:
https://lists.apple.com/mailman/options/webobjects-dev/archive%40mail-archive.com

This email sent to [email protected]

Reply via email to