单击图像时如何将鼠标坐标传递到支持Bean [英] How to pass mouse coordinates to backing bean when clicking on an image

问题描述

我尝试了多种方法来使用户单击图像时将鼠标坐标添加到支持Bean中.我可以在javascript中获取坐标，然后调用ajax侦听器，但参数不在请求中.

I have tried various methods of getting the mouse coordinates into the backing bean when a user clicks on an image. I can get the coordinates in the javascript, it then calls the ajax listener, but the parameters are not in the request.

我的js:

if (!cis) var cis = {}
if (!cis.sarwinds) {
  var focusLostTimeout
  cis.sarwinds = {   
    errorHandler: function(data) { 
      alert("Error occurred during Ajax call: " + data.description) 

    },

    updateZoomValues: function(input, event) { 



       jsf.ajax.addOnError(cis.sarwinds.errorHandler)
          var offset = jQuery(input).offset();       

          jsf.ajax.request(input, event, { 
             render: "imagePan2 message",
             x: event.pageX - offset.left,
             y: event.pageY - offset.top
          })
    },

    getGraphicImageId: function(input) {
      var clientId = new String(input.name)
      var lastIndex = clientId.lastIndexOf(":")
      return clientId.substring(0, lastIndex) + ":imagePan2"
    }
  } 
}

我的jsf页面元素:

    <h:graphicImage id="imagePan2" library="images" styleClass="wind_map" name="testImage.jpg" style="#{SarWindsImagesBean.imageStyle('testImage.jpg')}">
           <f:ajax event="click" onevent="cis.sarwinds.updateZoomValues(this, event)" listener="#{SarWindsImagesBean.zoomInClick}" render="imagePan2 message"/>
    </h:graphicImage>

我的后备豆:

    public void zoomInClick(AjaxBehaviorEvent event) {
    double width;
    double height;
    double top;
    double left;
    double mouseX;
    double mouseY;
    String fileName = "testImage";


    Map<String, String> reqParams = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap();
    mouseX = Double.parseDouble(reqParams.get("x"));
    mouseY = Double.parseDouble(reqParams.get("y"));


    width = imageItems.get(fileName).getImageWidth() * 1.1;
    height = imageItems.get(fileName).getImageHeight() * 1.1;

    // We need the mouse position on the image here, and we need to calculate
    top = mouseY - ((mouseY - imageItems.get(fileName).getImageTop()) * 1.1);
    left = mouseX - ((mouseX - imageItems.get(fileName).getImageLeft()) * 1.1);

    if (this.imageLock == false){

        imageItems.put(fileName, new SarWindImageItem(width, height, top, left));
    } else {
        Iterator<String> it = imageItems.keySet().iterator();
        while (it.hasNext()) {

                String key = (String)it.next();

                imageItems.put(key, new SarWindImageItem(width, height, top, left));
            }
    }
}

reqParams为空.

The reqParams are empty.

丹

推荐答案

jsf.ajax.request()的使用方式并不完全正确.< f:ajax> 已经创建了一个，但随后您将另一个嵌套在其 onevent 中(请注意，onevent 称为三次；在发送请求之前，响应到达之后以及HTML DOM更新之后).这是不对的.

The way how you used jsf.ajax.request() isn't entirely right. The <f:ajax> already creates one, but then you're nesting another one in its onevent (note that the onevent is called thrice; before the request is been sent, after the response is arrived and after the HTML DOM is updated). This isn't right.

从技术上讲，您应该改为在 onclick 属性中调用 jsf.ajax.request()并删除< f:ajax> 总共.但是，这基本上需要用自制的 UIComponent 替换< h:graphicImage> ，该组件在 decode()方法中完成请求参数的收集工作.以便适当地更新适当的模型值.

Technically, you should be calling jsf.ajax.request() in the onclick attribute instead and remove the <f:ajax> altogether. However, this basically requires replacing the <h:graphicImage> by a homebrewed UIComponent which does the request parameter collecting job in decode() method so that the appropriate model values can properly be updated.

忘记使用独立的 jsf.ajax.request().仅当您真正在开发自定义 UIComponent 时在其中使用 decode()执行所需的后处理时，才应使用它.

Forget using the jsf.ajax.request() standalone. It should only be used when you're really developing a custom UIComponent wherein you perform the desired postprocessing in decode().

普通香草HTML为此提供了< input type ="image" name ="foo"> ，坐标将作为 foo.x 发送和 foo.y 参数.这在JSF中可以与< h:commandButton image ="some.png"> 一起使用，但是，当您使用< f:ajax>时，不会发送那些特殊参数; .所以算了吧.

Plain vanilla HTML offers an <input type="image" name="foo"> for this on which the coordinates would be sent as foo.x and foo.y parameters. This works in JSF with <h:commandButton image="some.png">, however, those special parameters aren't been sent when you're using <f:ajax>. So forget this.

您最好的选择是使用所需的坐标设置隐藏的输入值，然后按照常规方式将这些隐藏的输入绑定到托管bean属性.

Your best bet would be setting hidden input values with the desired coordinates and in turn bind those hidden inputs to managed bean properties the usual way.

例如

<h:form>
    <h:graphicImage id="image" name="image1.png">
        <f:ajax event="click" execute="x y" listener="#{bean.listener}" />
    </h:graphicImage>
    <h:inputHidden id="x" value="#{bean.x}" />
    <h:inputHidden id="y" value="#{bean.y}" />
</h:form>

<h:outputScript>
    jQuery("img[id$=':image']").on("mousedown", function(event) {
        var $form = jQuery(this).closest("form");
        $form.find("input[id$=':x']").val(event.pageX);
        $form.find("input[id$=':y']").val(event.pageY);
    });
</h:outputScript>

(注意: jQuery.on()仅从1.7开始可用，如果您使用的是旧版本，请改用 jQuery.bind())

(note: jQuery.on() is only available since 1.7, if you're using an older version, use jQuery.bind() instead)

使用

@ManagedBean
@RequestScoped
public class Bean {

    private Integer x;
    private Integer y;

    public void listener() {
        System.out.println(x + ", " + y);
    }

    // ...
}

请注意，我还修复了错误的获取鼠标位置的方法.您只是返回了图像元素本身的位置，而不是鼠标指针在其上的位置.

Note that I also fixed your incorrect way of getting the mouse position. You just returned the position of the image element itself, not the position of the mouse pointer on it.

这篇关于单击图像时如何将鼠标坐标传递到支持Bean的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！