1

私はこれが少し奇妙に聞こえることを知っていますが、これがケースです...私は純粋にjavascriptで実装された「画像ビューア」を一番下にロードするJSFフォームを持っています:

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

画像エディター (OpenLayers) をロードするための JavaScript コード:

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

最後に、javascript の [保存] ボタンを押すと、この JSON オブジェクトをバッキング Bean に送信したいと思います。特に、JSON オブジェクトを処理して XML として保存するために、Bean メソッドを呼び出したいと思います。

何か案は？

4

2 に答える 2

0

また、必要な場所に情報を渡す Rest サービスをボタンで呼び出すこともできます。Javascript は、ボタンの onclick イベントを使用して呼び出すだけです。Jax-rs を使用すると、consumes アノテーションを JSON に設定できます。私は実際にこのアプローチをかなり頻繁に使用しています。JSF Web アプリ プロジェクトで Rest サービスを作成するのは非常に簡単です。

この回答は、javascript からバック Bean に配列を渡すのにも役立つ場合があります

于 2013-09-19T15:00:21.790 に答える