Question

我正在使用Primefaces / JSF与纯javascript工具相结合，以实现图像查看器＆amp;注释。图像查看器基于OpenLayers framework。

构建

当用户在画布上注释（绘制形状）时，会创建一个JSON对象，并在Save操作传递给后一个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}]);
        ...

上面的图像查看器/地图工具，通过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按钮连接的事件来完成。

伙计们，任何人都可以帮助其他部分吗？

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

1 个答案: