林业地理信息数据管理之六（中）
- Web AppBuilder构建应用程序
（陈家 安徽省林业调查规划院）
上一章我介绍了如何通过门户自带的Web AppBuilder及其开发版创建第一个应用程序，本章将介绍如何利用Web AppBuilder管理和扩展应用程序。
三、门户Web AppBuilder管理应用程序
（一）在“我的内容”中可以查看应用程序的详细信息：
（二）在“详细信息”的右边，有个共享，可以将该应用程序共享给需要的人：
（三）在“详细信息”的右下方，有该应用程序的地址，可以发给需要的人：
（四）通过“详细信息”右边的“编辑应用程序”，可以再次编辑：
（五）可以将该应用程序导出为模板，这样下次需要创建类似的应用程序就可以使用该模板了：
（六）在“详细信息”的右边有个“下载”，可以将该应用程序打包下载：
（七）那应该如何将开发版的应用程序发布到门户中呢？比如说我使用Web AppBuilder开发版生成了一个应用程序，首先打包下载
（八）将该目录上传到WEB服务器中去，这样在IIS中就可以看见这个目录了：
（九）在IIS中将这个目录转换成应用程序：
（十）确定相关参数没有问题以后点击确定进行转换：
（十一）然后在客户机上输入相应的地址“https://gis.linye.cn/firt app”就可以访问应用程序了：
（十二）如果应用程序和自己的门户不在一个WEB服务器上，那么还需要在门户里将应用程序注册一下，进入门户-我的内容，选择添加应用程序：
（十三）进入该应用程序的详细信息，点击设置，点击页面下方的更新，将原来的地址删除，填入需要发布应用程序的WEB服务器地址，因为我用的都是一个服务器，所以只能填写一个地址，否则应该填写另外一个WEB服务器地址：
（十四）将获得的应用程序ID复制下来：
（十五）打开web服务器上存放该应用程序位置的文件夹，找到config.json：
（十六）进行编辑，找到“appID”这一项，在后面将刚才复制的ID粘贴上去：
（十七）保存文件，进入IIS刷新一下，就可以访问这个应用了，如果需要配置代理的话，也可以在config.json这个文件里的“httpProxy”中的“url”填入代理地址。
四、扩展应用程序
（一）示例微件
我们以二维微件示例，首先进入Web AppBuilder安装目录的“client\stemapp\widgets\samplewidgets”目录，打开叫“demo”的文件，这里面就是一个微件的示例：
（二）文件说明
要建立Web AppBuilder的ArcGis微件，首先要了解一下微件文件夹中的文件用途：
widget class -Widget.js 主文件
widget emplate(widget UI) -Widget.js Widget.html 模板文件
widget configuration file -config.json 配置文件
widget I18N file(local file) -string.js 国际化应用
widget style file -style.css 格式文件
widget icon files -icon.png 图标文件
widget manifest file -manifest.json 清单文件
有两种微件，一种是板式外微件，比如比例尺微件；一种是板式内微件，比如查询微件。在开发之前，我们需要决定是否要将微件放置在控制板中。
*
一旦决定的话，那么板式外的微件不能在控制板内打开，同样，板式内的微件也不能在控制板外打开；
* 板式外的微件具有关闭属性，可以通过“closeable”属性进行设置；
* 板式外微件不能进行分组。
（三）所需的文件
定制微件最少需要两个文件，widget.js和manifest.json，但是如果想定制功能全面的微件，则还需要模板文件、国际化文件、格式文件等等。想使用保存的微件，需要将demo这个目录的文件拷贝到Web AppBuilder目录的“client\stemapp\widgets”中去，文件夹名还是“demo”，目录结构如下：
（四）微件的manifest文件说明
打开微件目录中的manifest.json文件，
1、name，字符型，是指微件的名称，要和存放该微件的文件夹保持一致；
2、2D，布尔型，决定该微件是否支持二维；
3、3D，布尔型，决定该微件是否支持三维；
4、platform，字符型，二维应为html，三维应为html3d；
5、version，字符型，微件的版本号；
6、author，字符型，微件的作者；
7、description，字符型，微件的描述；
8、copyright，字符型，微件的版权信息；
9、license，字符型，微件的许可；
10、properties，对象，下面有属性值介绍，比如比例尺微件的定义：
11、featureActions，数组，三维微件不支持，用于表现使用该微件后的动作，比如编辑微件，点击后就会启动“EditFeatureAction.js”文件，
从而出现窗口：
关于属性值列表：
1、inpanel，布尔型，用于说明微件属于板式内还是板式外；
2、hasLocale，布尔型，如果微件有国际化文件（nls\string.js），这个属性应为是，如果没有国际化文件或者不想加载，则为否；
3、hasStyle,布尔型，如果微件有格式文件（css\style.css），则为是，如果不想加载，则为否；
4、hasConfig，布尔型，如果微件是可以配置的（config.json），则为是，会正常加载；如果不想加载的话，则为否；
5、hasUIFile,布尔型，如果微件有模板文件（widget.html），则为是，会正常加载；如果不想加载的话，则为否；
6、hasSettingPage，布尔型，如果微件有设置页面（setting\setting.js），则为是，微件在加载到应用程序的时候，就会出现设置页面；
7、hasSettingUIFile，布尔型，决定微件的设置页面样式（setting\setting.html）；
8、hasSettingLocale，布尔型，微件的设置页面是否支持国际化（setting\nls\string.js）；
9、hasSettingStyle，布尔型，微件的设置页面是否有格式文件（setting\css\style.css）；
10、isController，布尔型，该微件是否有控制微件；
11、keepConfigAfterMapSwitched，布尔型，该值为否的话，当应用程序中的地图刷新时，该微件的配置数据将清空；
12、hasVersionManager，布尔型，该微件是否有版本管理文件（VersionManager.js），使得微件可以向下兼容；
13、supportMultiInstance，布尔型，用户是否在应用程序中加载多个该微件的实例；
（五）扩展baseWiedget
Web AppBuilder的微件使用以JavaScript语言实现的开源DHTML工具包-DOJO进行创建和扩展，定义“basewidget”类中包含了各个子类。
打开“widget.js”这个文件，基本代码如下：
1、其中“baseClass”属性是必须的：
2、每个微件都需要有模板文件，这个模板文件定义该微件的界面。编辑“widget.html”文件，改写以下代码：
如果要测试微件，打开Web AppBuilder安装目录下“client\stemapp\sample-configs”中的config-demo.json文件，找到“widgetPool”，修改其中的“widgets”项，添加“demo”的代码，包括微件名称和存放目录：
然后在浏览器输入“http://[your host name:port]/webappviewer/?config=sample-configs/configdemo.json”（我的是“https://gis.linye.cn:3344/?config=sample-configs/configdemo.json”），在选择该微件，就象以下的样子，如果需要在Web AppBuilder里直接调用，则需要将“demo”目录拷贝到“client\stemapp\widgets”里面去：
3、配置微件
可以将在“config.json”里的配置文本，通过“widget.html”传递到应用程序中去，首先打开“config.json”，输入想要显示的文本：
然后在“widget.html”文件中，通过“config.configText”将文本传递到微件中：
这样，最后在应用程序中调用该微件就会象这样，在应用程序中显示汉字会是乱码，这就需要在国际化文件中定义：
4、加入i18n支持
打开“nls \string.js”文件，修改内容如下，将中文支持“zh-cn”改为true：
再打开“nls\zh-cn\string.js”文件，将内容改为中文，记得去掉root：
然后修改“widget.html”文件，将以前的固定文本改为引用“string.js”的文本：
最后记得修改“manifest.json”文件，加入国际化支持：
微件调用后显示效果如下：
5、友好的界面
通过修改“css\style.css”文件，可以让微件有不同的表现形式，比如修改颜色：
将字体颜色改为蓝色，效果如下：
好了，本章就介绍到这里，下一章我会继续为大家介绍微件的定制开发，再次强调一下如果想在应用程序内测试微件的话，一定要将微件目录拷贝到Web AppBuilder安装目录下的“client\stemapp\widgets”中，然后输入“http://[your host name:port]/webappbuilder/?id=stemapp”，我的就是“https://gis.linye.cn:3344/webappbuilder/?id=stemapp”，这样就可以在应用程序是调用这个微件了。
（如需转载，请注明出处）