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时就有啦!
后续有时间我会继续更新!
- ArcGIS WebApp Builder使用之自定义Widget
- ArcGIS WebApp Builder 使用指南
- arcgis webapp builder 安装试用
- arcgis viewer for flex 之 自定义widget(arcmap设计pie圆饼图)
- 使用样式表自定义widget
- ArcGis server api for flex widget的 理解--自定义组件。
- 使用AlertDialog.Builder自定义对话框
- Web App Builder For ArcGIS 安装部署使用
- 使用Flash Builder的一些自定义设置
- Android使用Builder模式自定义Dialog
- android 使用Builder模式 构建自定义title
- Java 之 Builder模式使用
- Searchable之五(使用Search Widget)
- maven自定义webapp目录
- android的widget中使用自定义的字体TTF~
- 大数据可视化之空间可视化Arcgis flex 手动版widget
- ArcGIS Viewer for Flex 学会使用flex做webGIS widget控件
- 移动WebApp之iScroll插件的使用介绍
- C++ 堆内存
- appframework3.0(JQmobi)入门教程
- [mysql]创建数据库并指定编码
- OC堆栈
- JS控制 input 输入字符限制
- ArcGIS WebApp Builder使用之自定义Widget
- OC多线程
- java多进程 -CD7-孙鑫-(1)-程序/进程/线程/设置后台线程/将当前线程暂停
- Java中的垃圾回收器
- Grunt 从零开始
- 对C++中类的继承方式的认识
- tarjan -LCA POJ-3417-Network
- 2015年读书
- 提示框与动画的结合使用