<!DOCTYPE html>
<html>
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
   <meta name="apple-mobile-web-app-capable" content="yes">
   <title>OpenLayers WPS Builder Example</title>
   <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
   <link rel="stylesheet" href="style.css" type="text/css">
   <style type="text/css">
       .olControlEditingToolbar .olControlModifyFeatureItemInactive {
           background-image: url(../theme/default/img/draw_point_off.png);
       }
       .olControlEditingToolbar .olControlModifyFeatureItemActive {
           background-image: url(../theme/default/img/draw_point_on.png);
       }
       textarea {
           display: block;
           width: 100%;
           height: 3em;
       }
       label {
           display: block;
       }
       .notsupported {
           color: red;
       }
       button {
           display: block;
           margin-top: 10px;
       }
       #docs {
           top: 6em;
           left: 550px;
           position: absolute;
           margin-right: 10px;
       }
   </style>
 </head>
 <body>
   <h1 id="title">WPS Builder Example</h1>
   <div id="tags">
       wps, process, advanced
   </div>
   <div id="shortdesc">Using WPS formats to interact with WPS</div>
   <div id="docs">
       <p>This example shows WPS in action by using the WPSCapabilities,       
WPSDescribeProcess and WPSExecute formats. See
       <a target="_blank" href="wps.js">wps.js</a> for the
       source code. <b>Note: For applications using WPS, the high level
       approach shown in the <a href="wps-client.html">wps-client</a> example
       is recommended instead.</b></p>
       <ol>
           <li>Select a process from the list below the map. The list is
           populated with the result of a WPS 
GetCapabilities request, parsed
           using <code>OpenLayers.Format.WPSCapabilities::read</code>.</li>
           <li>Fill out the Input form. Hover over fields to get a description.
           Required fields are marked with a "*".
           To use a geometry from the map as input, select the geometry on the
           map (using the pen symbol on the left of the toolbar) and just
           click the field. The form is generated from the object returned by
           <code>OpenLayers.Format.WPSDescribeProcess::read</code></li>
           <li>Click "Execute" and examine the result in the result text area.
           If the result can be parsed as features, it will be displayed on
           the map as well. The process data is sent to the server with the
           serialized XML from <code>OpenLayers.Format.WPSExecute::write</code>,
           which can use a modified
           <code>OpenLayers.Format.WPSDescribeProcess</code> result object as
           input.</li>
       </ol>
   </div>
   <div id="example" style="width:520px">
       <div id="map"></div>
       <div>
           <select id="processes"><option>Select a process</option></select>
           <p id="abstract"></p>
           <div id="input"></div>
           <div id="output"></div>
       </div>
   </div>
   <script src="../lib/OpenLayers.js"></script>
   <script src="wps.js"></script>
 </body>
</html>