使用Java + JSF 2.0中的jCrop裁剪图片

时间:2011-09-19 13:23:35

标签: java javascript jsf

我有一个加载图片的页面,用户可以裁剪它。问题是,(x1,y1)和(x2,y2)的值是js,我需要它们在我的backBean上。我如何将它传递给我的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>

1 个答案:

答案 0 :(得分:3)

如果这些输入采用提交给辅助bean的相同形式,那么您可以从请求参数映射中获取它们:

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");

或者,您可以将它们声明为托管属性,以便JSF在构造请求范围的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;

或者,您可以将这些输入绑定到bean属性,这样您就不需要手动获取它们或将它们作为托管属性获取:

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

只有这些属性:

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

并且不要忘记修复jQuery选择器以添加<h:form id>值:

$('#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);