ArcGIS WebApp Builder使用之自定义Widget

来源:互联网 发布:ps4全境封锁网络卡 编辑:程序博客网 时间:2024/03/29 12:43

      上一篇中给大家简单的介绍了一下ArcGIS WebApp Builder 的安装部署及配置导出,其自带的都是一些基本的GIS功能Widget,在做实际项目时必须自己根据业务需求去自定义Widget,所以这节我着重为大家讲解一下如何自定义Widget。

       在讲如何自定义Widget之前,必须先了解一个Widget的基本组成,下面这张图展现的就是组成一个Widget的几个部分

      

  • images存放该Widget用到的图片资源;
  • widge.js 微件功能实现代码文件;
  • widget.html 微件的界面文件;
  • config.json微件的配置文件;
  • css:微件的样式文件夹;
  • nls:支持多国语言资源文件夹;
  • manifest.json微件的描述文件;

       最基本的Widget有以上几个文件夹及文件就够了,大家可以在导出的App中的Widget中可以看到好多已经次写       好的Widget,如果大家想写一个自己的Widget最简单的方法就是复制一个已有的然后再基于这个去改写,这种方法是方便但是改起来会比较麻烦,接下来我就介绍另一种方法,利用Node.js和generator-esri-appbuilder构建Widget!

      首先必须安装Node.js,在此就不再累述安装过程,安装完之后还必须安装Yeoman ,在CMD中执行npm install -g yo:

         


       成功运行之后再运行如下命令安装generator-esri-appbuilder-js:

     

      


       Ok 到这一步所需环境都已准备好,下一步就是见证奇迹的一刻,构建Widget,进入你导出的WebApp根目录下:


执行命令yo esri-appbuilder-js 后如下界面所示



这一步主要是构建一个package.json文件,该文件主要是对你整个APP的描述,输入你个人或公司名字



打开你app就会在里面创建一个package.json文件内容如下:



然后继续执行命令:yo esri-appbuilder-js:widget


这一步是输入你要构建的Widget名称 



这一步是输入Widget的标题 



这里是输入对该widgetd描述

这里输入该Widget基本样式的名称,这个将在css样式文件里添加



这一步是选择该widget是否是包含在一个panel里以及是否包含本地化文件夹(nls)、样式文件(css)、配置文件(config.json)、界面文件(widget.html),这里直接Enter键就ok了;




至此一个新的Widget就构建好了,打开widget文件夹你就会看到一个名为MyWidget的文件夹



接下来打开config.json文件将你新建的Widget配置到App里加载


        

     显示效果:

      


新建的Widget里只是示例性的显示了一些内容,接下来就要根据自己的业务需求去增加相应的内容啦! 

OK  上面就是构建Widget的整个过程!

细心的同学会发现nls下面没有zh-cn文件夹,这是因为generator-esri-appbuilder模板里本身就没有,如有需要可以自己手动添加上即可,如果嫌手动添加麻烦,可以将generator-esri-appbuilder的源码下载下来之后在其中增加上该文件夹即可,然后重新安装你本地修改之后的generator-esri-appbuilder,再利用其构建Widget时就有啦!

后续有时间我会继续更新!



0 0