jsf如何将 backbean 对象从 jsf 表单发布到 javascript答案

【问题标题】：jsf. How to post backbean object from jsf form to javascriptjsf如何将 backbean 对象从 jsf 表单发布到 javascript
【发布时间】：2014-01-16 13:52:07
【问题描述】：

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

当用户在画布上注释（绘制形状）时，会创建一个 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}]);
        ...

上面的 Image Viewer/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 中获取？

【问题讨论】：

标签： java javascript json jsf primefaces

【解决方案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 按钮连接的事件来完成。

各位，有谁能帮忙看看其他部分吗？

【讨论】：