将数组从javascript传递回back bean

时间:2013-03-11 14:37:56

标签: java javascript google-maps jsf primefaces

我有一个关于将位置点数组从javascript传递到back 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;
    }
}

基本上,如何在JSF中将顶点数组(在gmap上有点)发送到我的后端bean?

1 个答案:

答案 0 :(得分:3)

添加该数组(JSON会更好)作为托管bean字段的值,然后将其设置为<h:inputHidden/>,您可以执行并通过<f:ajax/>呈现它以发送和接收数据:

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

然后,你的bean应该有一个setter和一个getter。如果您选择将其作为JSON发送,我建议您使用Gson(因为您已经在谷歌的基础上)来解析它。

程序将是这样的:

首先,您生成vertices JSON,其中包含您要发送到服务器的数据,然后将其设置为隐藏输入。我正在使用jQuery,但是如果你使用普通的javascript,你将不得不这样做,而是使用document#getElementById代替:

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

然后,使用f:ajaxcommandLink执行隐藏的组件,如下所示:

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

该链接现在将触发ajax请求,该请求使用输入的当前值更新bean中的字段。请记住,既然你传递了一个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序列化和解析的答案。如果有疑问,我建议你看看他们: