jsf. How to post backbean object from jsf form to javascript

Question

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 .

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.

Here is the relevant code:

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

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

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

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?

Answer 1

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

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?