Question

I’ve got a page which loads a picture and the user is able to crop it. The thing is, the value of (x1,y1) and (x2,y2) are js and I need them on my backBean. How will I pass it to my BackBean?

<script type="text/javascript">

    $(function(){

        $('#jcroptarget').Jcrop({

        trackDocument: true,

        onChange: showCoords,

        onSelect: showCoords,

        aspectRatio: 1

        });
    });

    function showCoords(c)
    {

        $('#x').val(c.x);

        $('#y').val(c.y);

        $('#x2').val(c.x2);

        $('#y2').val(c.y2);

        $('#w').val(c.w);

        $('#h').val(c.h);

    };

</script>

<div>
    <label>X1 <input type="text" name="x" id="x" size="4" /></label>
    <label>Y1 <input type="text" name="y" id="y" size="4" /></label>
    <label>X2 <input type="text" name="x2" id="x2" size="4" /></label>
    <label>Y2 <input type="text" name="y2" id="y2" size="4" /></label>
    <label>W <input type="text" name="w" id="w" size="4" /></label>
    <label>H <input type="text" name="h" id="h" size="4" /></label>
</div>

Answer 1

If those inputs are in the same form which submits to the backing bean, then you can grab them from the request parameter map:

Map<String, String> params = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap();
String x = params.get("x");
String y = params.get("y");
String x2 = params.get("x2");
String y2 = params.get("y2");
String w = params.get("w");
String h = params.get("h");

---

Or, you can declare them as a managed properties, so that JSF will set them upon construction of the request scoped bean:

@ManagedProperty("#{param.x}")
private Integer x;
@ManagedProperty("#{param.y}")
private Integer y;
@ManagedProperty("#{param.x2}")
private Integer x2;
@ManagedProperty("#{param.y2}")
private Integer y2;
@ManagedProperty("#{param.w}")
private Integer w;
@ManagedProperty("#{param.h}")
private Integer h;

---

Or, you can bind those inputs to bean properties, so that you don’t need to grab them manually or get them as managed properties:

<label>X1 <h:inputText id="x" value="#{bean.x}" size="4" /></label>
<label>Y1 <h:inputText id="y" value="#{bean.y}" size="4" /></label>
<label>X2 <h:inputText id="x2" value="#{bean.x2}" size="4" /></label>
<label>Y2 <h:inputText id="y2" value="#{bean.y2}" size="4" /></label>
<label>W <h:inputText id="w" value="#{bean.w}" size="4" /></label>
<label>H <h:inputText id="h" value="#{bean.h}" size="4" /></label>

with just those properties:

private Integer x;
private Integer y;
private Integer x2;
private Integer y2;
private Integer w;
private Integer h;

and don’t forget to fix the jQuery selectors to prepend the <h:form id> value:

$('#formId\\:x').val(c.x);
$('#formId\\:y').val(c.y);
$('#formId\\:x2').val(c.x2);
$('#formId\\:y2').val(c.y2);
$('#formId\\:w').val(c.w);
$('#formId\\:h').val(c.h);