示例应用程序

本节给出了基于Zoo客户端的JavaScript应用程序的详细示例。

注解

对于这个示例应用程序,首先设置 /zoo-client-demo 可从您的Web服务器访问目录 http://localhost/zoo-client-demo .

必须在中创建以下子目录 /zoo-client-demo 目录:

assets
assets/js
assets/js/lib
assets/js/lib/hogan
assets/js/lib/jquery
assets/js/lib/query-string
assets/js/lib/xml2json
assets/js/lib/zoo
assets/tpl

您需要复制节点模块中的javascript文件 hoganquery-string 目录。首先,您需要安装查询字符串。

npm install query-string

那你就复制 query-string.jshogan-3.0.2.js 您的 zoo-client-demo Web目录。这些文件位于 ~/node_modules 目录。

对于其他库,您需要从它们的官方网站下载它们,并将它们解压缩到相应的目录中。

从Web应用程序加载模块

在使用Zoo客户机之前,首先必须包含网页中的javascript文件。通过使用RequireJS,HTML页面中只需要一行就可以同时包含所有内容。此行将如下所示:

<script data-main="assets/js/first" src="assets/js/lib/require.js"></script>

在这个例子中,我们假设您已经创建了 first.js 文件中 assets/js 包含主应用程序代码的目录。首先,在这里定义所需的JavaScript库和可能的配置,然后可以添加任何相关的代码。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
requirejs.config({
    baseUrl: 'assets/js',
    paths: {
        jquery: 'lib/jquery/jquery-1.11.0.min',
        hogan: 'lib/hogan/hogan-3.0.2',
        xml2json: 'lib/xml2json/xml2json.min',
        queryString: 'lib/query-string/query-string',
        wpsPayloads: 'lib/zoo/payloads',
        wpsPayload: 'lib/zoo/wps-payload',
        utils: 'lib/zoo/utils',
        zoo: 'lib/zoo/zoo',
        domReady: 'lib/domReady',
        app: 'first-app',
    },
    shim: {
        wpsPayloads: {
            deps: ['hogan'],
        },
        wpsPayload: {
            deps: ['wpsPayloads'],
            exports: 'wpsPayload',
        },
        hogan: {
            exports: 'Hogan',
        },
        xml2json: {
          exports: "X2JS",
        },
        queryString: {
            exports: 'queryString',
        },
    },
});

requirejs.config({
    config: {
        app: {
            url: '/cgi-bin/zoo_loader.cgi',
            delay: 2000,
        }
    }
});

require(['domReady', 'app'], function(domReady, app) {
    domReady(function() {
        app.initialize();
    });
});

在第2行中,定义文件在Web服务器上的URL,位于 assets/js .从第3行到第14行,定义要加载的javascript文件。从第15行到第21行,配置依赖项和导出的符号。从第35行到第42行,配置主应用程序。

在这个应用程序中,我们使用 domReady 调用的模块 initialize 在中定义的函数 app 模块,在 first-app.js 文件定义见第13行。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
define([
    'module','zoo','wpsPayload'
], function(module, ZooProcess, wpsPayload) {

    var myZooObject = new ZooProcess({
        url: module.config().url,
        delay: module.config().delay,
    });

    var initialize = function() {
        self = this;
        myZooObject.getCapabilities({
           type: 'POST',
             success: function(data){
                     console.log(data);
            }
        });

        myZooObject.describeProcess({
            type: 'POST',
            identifier: "all",
            success: function(data){
                console.log(data);
            }
        });

       myZooObject.execute({
           identifier: "Buffer",
           dataInputs: [{"identifier":"InputPolygon","href":"XXX","mimeType":"text/xml"}],
           dataOutputs: [{"identifier":"Result","mimeType":"application/json","type":"raw"}],
           type: 'POST',
           success: function(data) {
                console.log(data);
           },
           error: function(data){
                console.log(data);
           }
        });
    }

    // Return public methods
    return {
        initialize: initialize
    };

});

在第5行,您创建了一个“全局” ZooProcess 名为的实例 myZooObject ,您设置 urldelay 到中定义的值 first.js 在第35行。从第10行到第40行,定义一个简单的 initialize 函数,它将调用 getCapabilities (第12至18行) describeProcess (从第20行到第26行)和 execute (从第28行到第39行)方法。对于每一个,都定义一个回调函数,该函数只在浏览器控制台中显示结果数据。