source: trunk/docs/client/example.rst @ 794

Last change on this file since 794 was 725, checked in by djay, 9 years ago

Fix issue with rst files displayed from Trac. Fix strings to be translated. Always use the same string in all messages.

  • Property svn:keywords set to Date Author
  • Property svn:mime-type set to text/plain
File size: 5.4 KB
Line 
1.. _client-example:
2
3Example application
4=====================
5
6This section gives a detailed example of ZOO-Client based JavaScript appliclation.
7
8.. note::
9   For this example application, first setup a ``/zoo-client-demo`` directory accessible from your web server at `http://localhost/zoo-client-demo`.
10
11The following subdirectories must be created in the ``/zoo-client-demo`` directory:
12
13::
14
15    assets
16    assets/js
17    assets/js/lib
18    assets/js/lib/hogan
19    assets/js/lib/jquery
20    assets/js/lib/query-string
21    assets/js/lib/xml2json
22    assets/js/lib/zoo
23    assets/tpl
24
25You will need to copy your node_modules javascript files copied in the
26`hogan` and `query-string` directories. First, you wil need to install
27query-string.
28
29::
30
31    npm install query-string
32
33Then you will copy `query-string.js` and `hogan-3.0.2.js` files in
34your `zoo-client-demo` web directory. Those files are located in your
35`~/node_modules` directory.
36
37For other libraries, you will need to download them from their
38official web sites and uncompress them in the corresponding
39directories.
40
41Loading the modules from your web application
42*********************************************
43
44Before using the ZOO-Client, you will first have to include the
45javascript files from your web page. With the use of requirejs you
46will need only one line in your HTML page to include everything at
47once. This line will look like the following:
48
49::
50
51    <script data-main="assets/js/first" src="assets/js/lib/require.js"></script>
52
53In this example, we suppose that you have created a `first.js` file
54in the `assets/js` directory containing your main application
55code. First, you define there the required JavaScript libraries and
56potentially their configuration, then you can add any relevant code.
57
58.. code-block:: javascript
59    :linenos:
60
61    requirejs.config({
62        baseUrl: 'assets/js',
63        paths: {
64            jquery: 'lib/jquery/jquery-1.11.0.min',
65            hogan: 'lib/hogan/hogan-3.0.2',
66            xml2json: 'lib/xml2json/xml2json.min',
67            queryString: 'lib/query-string/query-string',
68            wpsPayloads: 'lib/zoo/payloads',
69            wpsPayload: 'lib/zoo/wps-payload',
70            utils: 'lib/zoo/utils',
71            zoo: 'lib/zoo/zoo',
72            domReady: 'lib/domReady',
73            app: 'first-app',
74        },
75        shim: {
76            wpsPayloads: {
77                deps: ['hogan'],
78            },
79            wpsPayload: {
80                deps: ['wpsPayloads'],
81                exports: 'wpsPayload',
82            },
83            hogan: {
84                exports: 'Hogan',
85            },
86            xml2json: {
87              exports: "X2JS",
88            },
89            queryString: {
90                exports: 'queryString',
91            },
92        },
93    });
94   
95    requirejs.config({
96        config: {
97            app: {
98                url: '/cgi-bin/zoo_loader.cgi',
99                delay: 2000,
100            }
101        }
102    });
103   
104    require(['domReady', 'app'], function(domReady, app) {
105        domReady(function() {
106            app.initialize();
107        });
108    });
109
110On line 2, you define the url where your files are located on the web
111server, in `assets/js`. From line 3 to 14, you define the JavaScript
112files to be loaded. From line 15 to 21, you configure the dependencies
113and exported symbols. From line 35 to 42, you configure your main
114application.
115
116In this application, we use the `domReady
117<http://github.com/requirejs/domReady>`__ module to call the
118`initialize` function defined in the `app` module, which is defined in
119the `first-app.js` file as defined on line 13.
120
121
122
123.. code-block:: javascript
124    :linenos:
125
126    define([
127        'module','zoo','wpsPayload'
128    ], function(module, ZooProcess, wpsPayload) {
129       
130        var myZooObject = new ZooProcess({
131            url: module.config().url,
132            delay: module.config().delay,
133        });
134       
135        var initialize = function() {
136            self = this;       
137            myZooObject.getCapabilities({
138               type: 'POST',
139                 success: function(data){
140                         console.log(data);
141                }
142            });
143
144            myZooObject.describeProcess({
145                type: 'POST',
146                identifier: "all",
147                success: function(data){
148                    console.log(data);
149                }
150            });
151
152           myZooObject.execute({
153               identifier: "Buffer",
154               dataInputs: [{"identifier":"InputPolygon","href":"XXX","mimeType":"text/xml"}],
155               dataOutputs: [{"identifier":"Result","mimeType":"application/json","type":"raw"}],
156               type: 'POST',
157               success: function(data) {
158                    console.log(data);
159               },
160               error: function(data){
161                    console.log(data);
162               }
163            });
164        }
165   
166        // Return public methods
167        return {
168            initialize: initialize
169        };
170   
171    });
172
173On line 5 you create a "global" `ZooProcess` instance named
174`myZooObject`, you set the `url` and `delay` to the values defined in
175`first.js` on line 35. From line 10 to 40,  you define a simple
176`initialize` function which will invoke the `getCapabilities` (line
17712 to 18), `describeProcess` (from line 20 to 26) and `execute` (from
178line 28 to 39) methods. For each you define a callback function which
179will simply display the resulting data in the browser's console.
180
181
Note: See TracBrowser for help on using the repository browser.

Search

Context Navigation

ZOO Sponsors

http://www.zoo-project.org/trac/chrome/site/img/geolabs-logo.pnghttp://www.zoo-project.org/trac/chrome/site/img/neogeo-logo.png http://www.zoo-project.org/trac/chrome/site/img/apptech-logo.png http://www.zoo-project.org/trac/chrome/site/img/3liz-logo.png http://www.zoo-project.org/trac/chrome/site/img/gateway-logo.png

Become a sponsor !

Knowledge partners

http://www.zoo-project.org/trac/chrome/site/img/ocu-logo.png http://www.zoo-project.org/trac/chrome/site/img/gucas-logo.png http://www.zoo-project.org/trac/chrome/site/img/polimi-logo.png http://www.zoo-project.org/trac/chrome/site/img/fem-logo.png http://www.zoo-project.org/trac/chrome/site/img/supsi-logo.png http://www.zoo-project.org/trac/chrome/site/img/cumtb-logo.png

Become a knowledge partner

Related links

http://zoo-project.org/img/ogclogo.png http://zoo-project.org/img/osgeologo.png