示例应用程序

本节给出了基于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文件 hogan 和 query-string 目录。首先，您需要安装查询字符串。

npm install query-string

那你就复制 query-string.js 和 hogan-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库和可能的配置，然后可以添加任何相关的代码。

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行。

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 ，您设置 url 和 delay 到中定义的值 first.js 在第35行。从第10行到第40行，定义一个简单的 initialize 函数，它将调用 getCapabilities （第12至18行） describeProcess （从第20行到第26行）和 execute （从第28行到第39行）方法。对于每一个，都定义一个回调函数，该函数只在浏览器控制台中显示结果数据。