OpenLayers Klient Beispiel
**************************
* http://openlayers.org
* http://openlayers.org/dev/examples
* `wps.html <_images/wps.html>`_

Editing Tool Bar Example

.. highlight:: javascript
   :linenothreshold: 5

Global Variablen::

            var wpsns = "http://www.opengis.net/wps/1.0.0";

            var xmlTemplate = '<wps:Execute service="WPS" version="1.0.0" '+
                'xmlns:wps="http://www.opengis.net/wps/1.0.0" '+
                'xmlns:ows="http://www.opengis.net/ows/1.1" '+
                'xmlns:xlink="http://www.w3.org/1999/xlink" '+
                'xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" '+
                'xsi:schemaLocation="http://www.opengis.net/wps/1.0.0/wpsExecute_request.xsd">'+
                    '<ows:Identifier>exampleBufferProcess</ows:Identifier>'+
                    '<wps:DataInputs>'+
                        '<wps:Input>'+
                        '<ows:Identifier>data</ows:Identifier>'+
                            '<wps:Data>'+
                                '<wps:ComplexData>PYWPS_DATA</wps:ComplexData>'+
                            '</wps:Data>'+
                        '</wps:Input>'+
                        '<wps:Input>'+
                            '<ows:Identifier>width</ows:Identifier>'+
                            '<wps:Data>'+
                                '<wps:LiteralData>PYWPS_WIDTH</wps:LiteralData>'+
                            '</wps:Data>'+
                        '</wps:Input>'+
                    '</wps:DataInputs>'+
                    '<wps:ResponseForm>'+
                        '<wps:ResponseDocument wps:lineage="false" wps:storeExecuteResponse="true" wps:status="false">'+
                            '<wps:Output wps:asReference="true">'+
                                '<ows:Identifier>buffer</ows:Identifier>'+
                            '</wps:Output>'+
                        '</wps:ResponseDocument>'+
                    '</wps:ResponseForm>'+
                '</wps:Execute>';

.. highlight:: javascript
   :linenothreshold: 5

WPS Funkzionen::

            /*******************
             * WPS starts here *
             *******************/

            // On ClearButton Clicked - destroy all features within vector
            // layer
            var onClearClicked = function() {
                vlayer.destroyFeatures();
                rlayer.destroyFeatures();
            };

            // On BufferButton Clicked - call the WPS Process
            var onBufferClicked = function() {
                var xmlData = OpenLayers.Format.GML.prototype.write(vlayer.features);
                var width = document.getElementById("width").value;
                var xml = xmlTemplate.replace("PYWPS_DATA",xmlData).replace('PYWPS_WIDTH',width);

                console.log(xml);

                OpenLayers.Request.POST({
                            url: 'http://localhost/cgi-bin/fossgiswps', 
                            data: xml,
                            success: wpsArrived,
                            failure: wpsFailed,
                            scope:  this
                        });

            };

            // WPS Response arrived
            var wpsArrived = function(resp) {
                try {
                    map.removeLayer(rlayer);
                    rlayer.destroy();
                }catch(e) {}
                var url = resp.responseXML.getElementsByTagNameNS(wpsns,"Reference")[0].getAttribute("xlink:href");
                rlayer = new OpenLayers.Layer.GML("Result",url);
                map.addLayer(rlayer);
            };

            // WPS Response failed
            var wpsFailed = function(resp) {
                rlayer.destroyFeatures();
            };

.. highlight:: html
   :linenothreshold: 5

HTML::

        <div>
            <input type="button" value="Clear" onclick="onClearClicked()"></input>
            <input type="button" value="Buffer" onclick="onBufferClicked()"></input> 
            Width:&nbsp;<input type="text" value="2" id="width"></input>
        </div>

.. image:: data/wps.html