jsf.如何将Backbean对象从jsf表单发布到javascript [英] jsf. How to post backbean object from jsf form to javascript

问题描述

我正在将Primefaces/JSF与纯JavaScript工具结合使用，以实现图像查看器&注释者.图像查看器基于 OpenLayers框架构建.

I am using Primefaces/JSF in combination with pure javascript tools in order to implement an image viewer & annotator. Image viewer is built upon the OpenLayers framework.

当用户在画布上注释(绘制形状)时，将创建一个JSON对象，并且将Save操作传递给back bean. Back bean检索对象(反序列化)并将其存储到文件中.

When the user annotates (draws shapes) on the canvas, a JSON object is created and upon Save action passed to the back bean. Back bean retrieves the object (deserialized) and stores it in to a file.

以下是相关代码:

OpenLayers javascript(image-viewer.js):

OpenLayers javascript (image-viewer.js):

function initialiseMap(){'
    ...
    map = new OpenLayers.Map(imageEditorID, options);
    imageLayer = new OpenLayers.Layer.TMS(imgURL, "", {
    ...
    });
    map.addLayer(imageLayer);
    var vlayer = new OpenLayers.Layer.Vector("Editable");
    map.addLayer(vlayer);
    //draw controls and shape tools
    ...
    //then define save action
    var save = new OpenLayers.Control.Button({
        ...
        var GEOJSON_PARSER = new OpenLayers.Format.GeoJSON();        
        var vectorLayerAsJson = GEOJSON_PARSER.write(vlayer.features);
        //and finally post to server layer with drawn shapes
        sendJSONToServer([{name:'param', value:vectorLayerAsJson}]);
        ...

上述Image Viewer/Map工具是通过primefaces的p:outputPanel组件加载的，并使用sendJSONToServer remoteCommand获取JSON层:

The above Image Viewer/Map tool, is loaded via an p:outputPanel component of primefaces and uses sendJSONToServer remoteCommand to get JSON layer:

<h:head>
    <script src="#{facesContext.externalContext.requestContextPath}/js/image-viewer.js" />
    ...
    <h:body>
        <h:form id="imageEditor">
            <p:fieldset legend="Viewer">
                ...
                // inoutHidden does not have on* events? how am i going to post to image-viewer.js?
                <h:inputHidden value="#{imageAnnotations.fetchJsonString()}" />
                ...
                <p:outputPanel layout="block" styleClass="imageEditorImagePanel" />
                <p:remoteCommand immediate="true" name="sendJSONToServer" action="#{imageAnnotations.actionOnString}" />
            </p:fieldset>
        ....

最后在backbean中，获取JSON对象并将其存储在文件中(实现是原始的):

Finally in the backbean the JSON object is fetched and stored in a file (implementation is raw):

@ManagedBean(name="imageAnnotations")
public class ImageAnnotations  {

    //actionOnString fetches and saves the JSON string - this is a raw impementation
    public String actionOnString() {
        //Do the job and get and save JSON string
    }

    public String fetchJsonString(){
        //Do the job and get JSON string
        return jsonString;
    }
}                

问题是我如何使用JSF或primefaces元素使imageAnnotations.fetchJsonString()值可用于从js中进行提取?

The question is How am i going to use a JSF or primefaces element to make available the imageAnnotations.fetchJsonString() value for fetching from within js?

推荐答案

即使我不能给出所有答案，对我来说，hiddenInput的填充也应按以下方式进行管理:

Even I can't give all answers, for me the filling of your hiddenInput should be managed as following:

@ManagedBean(name="imageAnnotations")
public class ImageAnnotations  {

    private String jsonString;

    public void anyMethodFillingOrInitializingTheJSONString() {
        this.jsonString = resultOfYourWork();
    }

    public String getJsonString(){
        return this.jsonString();
    }

    public void setJsonString(String item) {
        this.jsonString = item;
    }
}

当您重新加载此隐藏的输入字段时，只需确保触发javascript解析String并更新您的客户端模型.这可以通过on *-您可以使用Primefaces按钮连接的事件来完成.

When you reload this hidden input field, just be sure to trigger a javascript parsing the String and updating your client-side Model. This can be done via the on* - events you can connect with Primefaces buttons.

伙计们，其他人可以帮忙吗?

Guys, can anybody help with the other parts?

这篇关于jsf.如何将Backbean对象从jsf表单发布到javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！