1

JavaScriptからバックBeanにロケーションポイントの配列を渡すことに問題があります。このポイントの配列を使用してポリゴンを作成します。そのためには、JavaScriptからバックBeanに配列を取得して、データベースに保存する必要があります。

これが私のxhtmlスニペットです：

<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="UTF-8">
            <title>Drawing Tools</title>
            <script type="text/javascript"
            src="http://maps.google.com/maps/api/js?sensor=false"></script>
            <style type="text/css">
                #map, html, body {
                    padding: 0;
                    margin: 0;
                    height: 400px;
                    width: 400px;
                }

                #panel {
                    width: 200px;
                    font-family: Arial, sans-serif;
                    font-size: 13px;
                    float: right;
                    margin: 10px;
                }

                #color-palette {
                    clear: both;
                }

                .color-button {
                    width: 14px;
                    height: 14px;
                    font-size: 0;
                    margin: 2px;
                    float: left;
                    cursor: pointer;
                }

                #delete-button {
                    margin-top: 5px;
                }
            </style>
            <script type="text/javascript">
                var drawingManager;
                var selectedShape;
                var colors = ['#1E90FF', '#FF1493', '#32CD32', '#FF8C00', '#4B0082'];
                var selectedColor;
                var colorButtons = {};
                var polyOptions;

                function clearSelection() {
                    if (selectedShape) {
                        selectedShape.setEditable(false);
                        selectedShape = null;
                    }
                }

                function setSelection(shape) {
                    clearSelection();
                    selectedShape = shape;
                    shape.setEditable(true);
                    //selectColor(shape.get('fillColor') || shape.get('strokeColor'));
                }

                function deleteSelectedShape() {
                    if (selectedShape) {
                        selectedShape.setMap(null);
                    }
                }


                function initialize() {
                    var map = new google.maps.Map(document.getElementById('map'), {
                        zoom: 10,
                        center: new google.maps.LatLng(40.344, 39.048),
                        mapTypeId: google.maps.MapTypeId.ROADMAP,
                        disableDefaultUI: true,
                        zoomControl: true
                    });

                    polyOptions = new google.maps.Polygon({
                        strokeColor: '#ff0000',
                        strokeOpacity: 0.8,
                        strokeWeight: 0,
                        fillOpacity: 0.45,
                        fillColor: '#ff0000',
                        editable: false,
                        draggable: true
                    });

                    polyOptions.setMap(map);

                    google.maps.event.addListener(map, 'click', addPoint);

                }

                function addPoint(e) {
                    var vertices = polyOptions.getPath();

                    vertices.push(e.latLng);
                    document.getElementById('verticeForm:sth').value= vertices;

                }
                google.maps.event.addDomListener(window, 'load', initialize);
            </script>
        </meta></meta>
</head>
<body>
    <div id="map"></div>

    <p:commandButton onclick="o.show();"  value="Show">
        <p:dialog widgetVar="o" >
            <h:form id="verticeForm">
                <h:outputLabel id="input">
                    <h:inputHidden id="sth" value="#{projectsController.list}" />
                </h:outputLabel>
            </h:form>
            <h:outputText value="#{projectsController.asd}" />
        </p:dialog>
    </p:commandButton>
</body>

そして、これが私のバックビーンスニペットです：

    private String sth;

    public String getSth() {
        return sth;
    }

    public void setSth(String sth) {
        this.sth = sth;
    }
    private List<String> list = new ArrayList<String>();

    public List<String> getList() {
        return list;
    }

    public void setList(List<String> list) {
        this.list = list;
    }
    private String asd;

    public String getAsd() {
        if(list.size()>0){
            asd = list.get(0);
            System.out.println(asd);
        }
        return asd;
    }

    public void setAsd(String asd) {
        this.asd = asd;
    }
}

基本的に、頂点配列（gmap上にポイントがある）をJSFのバックBeanに送信するにはどうすればよいですか？

4

1 に答える 1

3

その配列（JSONの方が良い）をマネージドBeanのフィールドの値として追加し、それ<h:inputHidden/>を実行してレンダリングして<f:ajax/>データを送受信できるように設定します。

<h:inputHidden id="verticesHiddenContainer" value="#{yourBean.vertices}" />

次に、Beanにはセッターとゲッターの両方が必要です。JSONとして送信することを選択した場合は、Gsonを使用して解析することをお勧めします（すでにGoogleの立場にあるため）。

手順は次のようになります。

まずvertices、サーバーに送信するデータを含むJSONを生成し、それを非表示の入力に設定します。私はjQueryを使用していますが、プレーンなJavaScriptを使用する場合は、同じことを行う必要がありますが、document#getElementById代わりに次を使用します。

var vertices = // You set your JSON here.
$("input[id='verticesHiddenContainer'").val(vertices);

次に、とを使用して非表示のコンポーネントを次のように実行しf:ajaxますcommandLink。

<h:commandLink value="Send data to server" action="#{yourBean.process}" >
    <f:ajax execute="verticesHiddenContainer" />
</h:commandLink>

リンクは、入力の現在の値でBeanのフィールドを更新するajaxリクエストをトリガーします。JSONを渡すので、それを解析する必要があることを忘れないでください。Gsonを使用している場合は、非常に簡単です。

public void setVertices(String verticesString) {
    //Since I don't know what kind of structure you use, I suposse
    //something like [[x,y]]. It can be more complex, but the
    //idea would be the same. You parse the string here.
}

SOには、JSONのシリアル化と解析に関する優れた回答がすでにあります。疑問がある場合は、それらを確認することをお勧めします。

于 2013-03-11T14:46:22.150 に答える