java - jsf。如何将 backbean 对象从 jsf 表单发布到 javascript

Question

我将 Primefaces/JSF 与纯 JavaScript 工具结合使用，以实现图像查看器和注释器。图像查看器基于 OpenLayers framework 构建.

当用户在 Canvas 上注释(绘制形状)时，将创建一个 JSON 对象，并在保存操作时将其传递到后台 bean。 Back bean 检索对象(反序列化)并将其存储到文件中。

相关代码如下:

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}]);
        ...

上面的图像查看器/ map 工具是通过 primefaces 的 p:outputPanel 组件加载的，并使用 sendJSONToServer RemoteCommand 来获取 JSON 层:

<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 对象并将其存储在文件中(实现是原始的):

@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 中获取？

Answer 1

即使我不能给出所有答案，对我来说，您的 hiddenInput 的填充应该按如下方式管理:

@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 来解析字符串并更新您的客户端模型。这可以通过 on* - 可以与 Primefaces 按钮连接的事件来完成。

伙计们，有人可以帮忙解决其他部分吗？