Floodfill with primefaces. Catch coordinate of click on p:graphicImage

Asked

Viewed 248 times

1

I want to make an image painting application using java. As it is for the web environment I chose primefaces as a framework for the vast documentation that exists about it.

However I did not find any component that was useful in this type of application.

seeing the showcase of the first faces I saw that there is a component p:graphicImage that could solve what I need. But I have no idea how to figure out the coordinate of the click on such a component. If I could get this information I could process the image and display it painted to the user.

Has anyone made any such app?

Thank you.

java jsf image primefaces web-application

1 answer

2


The great @Balusc posted a solution for this, but not specific to Primefaces. I will transcribe the relevant part below...

The best way to do this is to place hidden fields with their coordinates, linked to properties of your Managed bean and update these values via Javascript/jQuery.

Example:

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

Note: you need jQuery at least in version 1.7 to use jQuery jQuery.on(). In previous versions, use jQuery.bind().

And the Managed Bean would be so:

@ManagedBean
@RequestScoped
public class Bean {

    private Integer x;
    private Integer y;

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

    // ...
}

However, instead I would not use JSF components for this task.

Create a Web Service REST or a simple Servlet that receives the appropriate parameters and returns the image.

Then you can put a normal HTML image (<img/>), use jQuery to capture the click and then, at each event, go changing the URL of the image tag, because the Servlet will be called and will return the updated image.

Browser other questions tagged java jsf image primefaces web-application

You are not signed in. Login or sign up in order to post.