javascript JSON object to JSF back bean

Question

I know this is going to sound a bit weird, but here is the case... I have a JSF form which in the bottom load an "image viewer", implemented purely with javascript:

...
<p:fieldset legend="Viewer">
    <p:outputPanel layout="block" styleClass="imageEditorImagePanel" />
</p:fieldset> 
...

and the javascript code to load the image editor (OpenLayers):

...
function setImageEditorHeight(){
    imageEditorID = $(".imageEditorImagePanel")[0].id;
    ....
}
...
function initialiseMap(){
    ...
    map = new OpenLayers.Map(imageEditorID, options);
    ...
    imageLayer = new OpenLayers.Layer.TMS(imgURL, "", {
        url : '',
        serviceVersion : '.',
        layername : '.',
        alpha : true,
        type : 'png',
        getURL : overlay_getTileURL,
        transitionEffect: 'resize'
    });
    map.addLayer(imageLayer);

    var vlayer = new OpenLayers.Layer.Vector("Editable");
    map.addLayer(vlayer);
    //add controls for drawing shaped on the map like:
    var drawPointControl = new OpenLayers.Control.DrawFeatureOpt(vlayer, OpenLayers.Handler.Point,
            {title:'Draw a point', text: 'Point','displayClass':'olControlDrawFeaturePoint'});
    ...
    //add a save button to store shapes as geoJSON object
    var save = new OpenLayers.Control.Button({
        title: 'Save', text: 'Save',
        trigger: function(){
        var GEOJSON_PARSER = new OpenLayers.Format.GeoJSON();        
        var vectorLayerAsJson = GEOJSON_PARSER.write(vlayer.features);
        alert(vectorLayerAsJson);
        //i want something similar
        //just for demonstrating, instead of URL i would like a way to post JSON object to bean
        jQuery.ajax({
            type: 'POST',
            url: '/ajax/add',
            dataType: 'json',
            data: {"vLayerAsJson": vectorLayerAsJson}
         });
    }, 'displayClass': "olControlSaveFeatures"  
    });
    ...
    panel.addControls([hand, zoomToDrawControl, drawPointControl, drawPathControl, drawPolygonControl, drawRegularPolygonControl,
        new OpenLayers.Control.ZoomToMaxExtent({title:"Zoom to the max extent", text: "World"}), modifyFeatureControl, deleteFeatureControl, save]); 
    ...
    map.addControl(panel); 
    ...

Finally when i press the javascript "Save" button, i would like to submit somehow in my backing bean this JSON object ... In particular i would like to call a bean method in order to process JSON object and store it as XML.

Any ideas?

score 0 · Answer 1 · answered Sep 19 '13 at 14:53

0

You can't do that via jQuery. That's why jsf provides the <f:ajax> tag, you can set it in the submit button action. JSF is kind of different from "classic" web development, in JSF you think more on events and desktop-like development.

answered Sep 19 '13 at 14:53

Omar

689
3
16

Omar thanks for responding. I am aware about JSF. The problem is that my Image Viewer (google map like) is totally built on javascript and that shapes on the image are drawn dynamically. How can i submit the JSON string representing them back to my bean? – thanili Sep 19 '13 at 14:57
When you perform an ajax action in jsf you can "update" an entire container such divs. That said, you could update the ImageViewer container after the ajax action completion. The thing with JSF is to use in a higher level the web, with advantages and disadvantages of it. – Omar Sep 19 '13 at 15:13
Other way is to keep your jQuery code and use a Servlet that provides a JSON as response. – Omar Sep 19 '13 at 15:14

score 0 · Answer 2 · edited May 23 '17 at 12:28

You could also have your button call a Rest service which passes the info along to where it needs to be. The Javascript just needs to call it using the onclick event of the button. Jax-rs allows you to set the consumes annotation to JSON. I actually use this approach quite often. Its really easy to create the Rest service with your JSF web app project.

This answer might also be of help pass array from javascript to back bean

javascript JSON object to JSF back bean

2 Answers2