WebAppBuilder定制开发基础
分享
-
2018-01-10
WebAppBuilder定制开发基础
功能
自带Widget
WebAppBuilder包含许多部件，这些小部件提供基本的功能，方便创建应用程序。这些部件中大多数都有充许配置和定制的参数。窗口小部件可以在应用程序启动时自动打开。该组件分类两类：面板和面板的小部件。
面板
Attribute table：用来显示操作层的属性的表格视图。
Coordinate：当在地图上或其他坐标系中移动光标时，在当前地图投影坐标显示坐标。
Geocoder：执行goecoder操作。
Home Button：绽放到地图实始范围。
My Location：定位到你的当前位置。
Overview Map：显示鹰眼功能。
Scale bar：显示地图比例尺。
Search：执行Search功能。
Summary：提供对地图图层某些字段属性进行统计显示。
Swipe：卷帘功能
Time Slider：对时间图层，进行时态内容的查看。
Zoom Slider：提供交互式缩放滑块控制在地图上显示。
面板小部件
About：提供有关您的应用程序的信息。
Analysis：充许在你的托管数据上执行空间分析任务。
Basemap Gallery：提供底图选择。
Bookmark：书签功能。
Chart：对数据显示图表。
Directions：提供了执行网络分析的功能
Draw：绘图基本图形功能。
Edit：提供图层编辑的工具。
GeoLookup：支持在多边形要素上对CVS文件上图处理。
Geoprocessing：提供地理处理服务任务。
Layer List：显示操作图层的列表。
Legend：显示当前地图的图例。
Measurement：提供测量工具。
Print：打印地图功能。
Query：执行预定义的查询来查询操作。
Stream：对流服务进行可视化及实时数据的控制。
系统框架及底层实现
WidgetManager主要用于创建Widget、删除Widget、加载Widget、最小化、最大化、关闭Widget窗口、加载Widget配置信息。
ConfigManager主要用于加载配置信息、处理配置变化事件、处理Theme、Layout、Style变化事件、配置信息升级。
LayoutManager主要用于初始化WidgetManager、PanelManager和MapManager、加载Theme、Style、预加载的Widget、处理配置信息对界面的改变事件、所有的dijit的高亮和取消高亮。
PanelManager主要用于管理所有Theme和Widget中的panel、根据配置文件中的位置显示panel、最小化、最大化、恢复、关闭panel、In-Panel Widget的重载。
自定义扩展Widget编写方式
在正式开发之前，需要有以下基础知识：
· Html、Css、JavaScript
· Dojo core
· ArcGIS API for JavaScript
理解widget、panel、themes
Widget是一个独立的JavaScript文件，利用dojo的AMD模块进行开发，包含了模块UI文件、配置文件、样式文件和支持国际化的小部件。通常情况下，该Widget包含了特定的业务逻辑，使用户可以进行业务操作，实现widget在系统中的可视化，并与用户交互。
Panel是显示widget内容的用户界面元素，多个widget可以显示在一个面板中。通过使用面板，widget开发者不需要处理如何该控件及其内容在Html上的显示，当然widget开发人员也可以不使用所提供的面板。可以自己进行开发修改和创建新的面板，来获取新的功能。
Themes是定义WebAppBuilder的主题UI，包含了显示widget的主题面板、颜色字体样式等、widget在主题面板中的位置等更多信息。
Widget结构和组成部分
自定义Widget最少包含以下几个文件：
· JavaScript定义的widget文件(widget.js)
· 定义widget的模板文件(widget.html)
· Widget配置文件(config.json)
· 国际化文件(nls/strings.js)
· Widget样式文件(css/style.css)
Widget的文件目录结构图如下图所示：
各个文件的含义如下：
开发widget步骤
在开发widget编码之前，请确认widget是否需要一个panel，需要panel和不需要panel的区别在于：一个非panel widgets不能在panel中打开，而panel widget中的widget则必须在panel中打开。
Panel widget中可以设置closeable来设置widget默认的打开和关闭的窗口的状态。也可以在widget中的manifest.json中的inPanel属性设置面板属性。
继承BaseWidget
JavaScript本身不是面向对象的语言，WebAppBuilder是使用dojo的函数来创建和扩展类。
在开发工具中，新建FirstWidget文件夹，新建Widget.js文件，并打开该文件进行编辑，继承BaseWidget类，并定义baseClass名称，这个属性是必须的，定义部件的根元素的CSS类的名称。
在这里讲解一下部件的几个生命周期函数，组件的生命周期指的是某一个组件从创建到销毁的存续阶段。理解在各个阶段被调用的函数有助于自定义组件或继承组件的功能扩展，见下表：
我们可以根据需要来重写某个函数，来实现相关的初始化等相关工作，这里我们只重写startup和destroy方法。
定义template
Template提供基本的widget的HTML视图，使用业务代码和视图逻辑分离。在FirstWidget目录下，新建Widget.html文件，并进行编辑。
配置config.json文件
在FirstWidget目录下，新建config.json文件，可以对部件参数属性进行配置,这里作简单的配置一个地址名称，按照JSON的格式来定义，如下图：
这时我们可以在template中直接用${config.address}符来引用配置文件中address的值，例如：
国际化处理
优秀的app往往面对的是全球的使用环境，自定义的widget也支持国际化处理。在FirstWidget文件夹下，新建nls文件夹，并新建strings.js文件，该文件是默认的英文语言，对该文件进行编辑，如下图：
在该文件中设置中文语言为true,并在该文件夹下面新建zh-cn文件，并新建strings.js文件，具体目录结构如下：
对zh-cn文件夹中的strings.js文件进行编辑，如下图：
这时我们就可以利用国际化的内容，来重新编辑template内容，该模板会自动根据系统语言设置来显示template内容。
部署widget
在FirstWidget目录下，新建manifest.json文件，并编辑该文件内容，如下图：
manifest.json文件中的属性含义，参照下表：
Properties具体属性表
将创建的FirstWidget全部拷贝到webappbuilder\client\stemapp\widget目录下，同时创建一个icon.png文件放在FirstWidget\images\目录下，作为widget显示图标。
测试
重新启动WebAppBuilder系统，新建应用程序，进入应用程序。点击“微件”进行添加自定义的widget到系统界面上，这时我们会看到我们自定义的FirstWidget已经被加载了，点击“确定”，该Widget将会被放置在系统中。
添加完成后，FirstWidget加载到系统中了，点击进行测试，会打开Widget并进行交互操作，一个简单的widget就开发完成了。
功能
自带Widget
WebAppBuilder包含许多部件，这些小部件提供基本的功能，方便创建应用程序。这些部件中大多数都有充许配置和定制的参数。窗口小部件可以在应用程序启动时自动打开。该组件分类两类：面板和面板的小部件。
面板
Attribute table：用来显示操作层的属性的表格视图。
Coordinate：当在地图上或其他坐标系中移动光标时，在当前地图投影坐标显示坐标。
Geocoder：执行goecoder操作。
Home Button：绽放到地图实始范围。
My Location：定位到你的当前位置。
Overview Map：显示鹰眼功能。
Scale bar：显示地图比例尺。
Search：执行Search功能。
Summary：提供对地图图层某些字段属性进行统计显示。
Swipe：卷帘功能
Time Slider：对时间图层，进行时态内容的查看。
Zoom Slider：提供交互式缩放滑块控制在地图上显示。
面板小部件
About：提供有关您的应用程序的信息。
Analysis：充许在你的托管数据上执行空间分析任务。
Basemap Gallery：提供底图选择。
Bookmark：书签功能。
Chart：对数据显示图表。
Directions：提供了执行网络分析的功能
Draw：绘图基本图形功能。
Edit：提供图层编辑的工具。
GeoLookup：支持在多边形要素上对CVS文件上图处理。
Geoprocessing：提供地理处理服务任务。
Layer List：显示操作图层的列表。
Legend：显示当前地图的图例。
Measurement：提供测量工具。
Print：打印地图功能。
Query：执行预定义的查询来查询操作。
Stream：对流服务进行可视化及实时数据的控制。
系统框架及底层实现
WidgetManager主要用于创建Widget、删除Widget、加载Widget、最小化、最大化、关闭Widget窗口、加载Widget配置信息。
ConfigManager主要用于加载配置信息、处理配置变化事件、处理Theme、Layout、Style变化事件、配置信息升级。
LayoutManager主要用于初始化WidgetManager、PanelManager和MapManager、加载Theme、Style、预加载的Widget、处理配置信息对界面的改变事件、所有的dijit的高亮和取消高亮。
PanelManager主要用于管理所有Theme和Widget中的panel、根据配置文件中的位置显示panel、最小化、最大化、恢复、关闭panel、In-Panel Widget的重载。
自定义扩展Widget编写方式
在正式开发之前，需要有以下基础知识：
· Html、Css、JavaScript
· Dojo core
· ArcGIS API for JavaScript
理解widget、panel、themes
Widget是一个独立的JavaScript文件，利用dojo的AMD模块进行开发，包含了模块UI文件、配置文件、样式文件和支持国际化的小部件。通常情况下，该Widget包含了特定的业务逻辑，使用户可以进行业务操作，实现widget在系统中的可视化，并与用户交互。
Panel是显示widget内容的用户界面元素，多个widget可以显示在一个面板中。通过使用面板，widget开发者不需要处理如何该控件及其内容在Html上的显示，当然widget开发人员也可以不使用所提供的面板。可以自己进行开发修改和创建新的面板，来获取新的功能。
Themes是定义WebAppBuilder的主题UI，包含了显示widget的主题面板、颜色字体样式等、widget在主题面板中的位置等更多信息。
Widget结构和组成部分
自定义Widget最少包含以下几个文件：
· JavaScript定义的widget文件(widget.js)
· 定义widget的模板文件(widget.html)
· Widget配置文件(config.json)
· 国际化文件(nls/strings.js)
· Widget样式文件(css/style.css)
Widget的文件目录结构图如下图所示：
各个文件的含义如下：
开发widget步骤
在开发widget编码之前，请确认widget是否需要一个panel，需要panel和不需要panel的区别在于：一个非panel widgets不能在panel中打开，而panel widget中的widget则必须在panel中打开。
Panel widget中可以设置closeable来设置widget默认的打开和关闭的窗口的状态。也可以在widget中的manifest.json中的inPanel属性设置面板属性。
继承BaseWidget
JavaScript本身不是面向对象的语言，WebAppBuilder是使用dojo的函数来创建和扩展类。
在开发工具中，新建FirstWidget文件夹，新建Widget.js文件，并打开该文件进行编辑，继承BaseWidget类，并定义baseClass名称，这个属性是必须的，定义部件的根元素的CSS类的名称。
在这里讲解一下部件的几个生命周期函数，组件的生命周期指的是某一个组件从创建到销毁的存续阶段。理解在各个阶段被调用的函数有助于自定义组件或继承组件的功能扩展，见下表：
我们可以根据需要来重写某个函数，来实现相关的初始化等相关工作，这里我们只重写startup和destroy方法。
定义template
Template提供基本的widget的HTML视图，使用业务代码和视图逻辑分离。在FirstWidget目录下，新建Widget.html文件，并进行编辑。
配置config.json文件
在FirstWidget目录下，新建config.json文件，可以对部件参数属性进行配置,这里作简单的配置一个地址名称，按照JSON的格式来定义，如下图：
这时我们可以在template中直接用${config.address}符来引用配置文件中address的值，例如：
国际化处理
优秀的app往往面对的是全球的使用环境，自定义的widget也支持国际化处理。在FirstWidget文件夹下，新建nls文件夹，并新建strings.js文件，该文件是默认的英文语言，对该文件进行编辑，如下图：
在该文件中设置中文语言为true,并在该文件夹下面新建zh-cn文件，并新建strings.js文件，具体目录结构如下：
对zh-cn文件夹中的strings.js文件进行编辑，如下图：
这时我们就可以利用国际化的内容，来重新编辑template内容，该模板会自动根据系统语言设置来显示template内容。
部署widget
在FirstWidget目录下，新建manifest.json文件，并编辑该文件内容，如下图：
manifest.json文件中的属性含义，参照下表：
Properties具体属性表
将创建的FirstWidget全部拷贝到webappbuilder\client\stemapp\widget目录下，同时创建一个icon.png文件放在FirstWidget\images\目录下，作为widget显示图标。
测试
重新启动WebAppBuilder系统，新建应用程序，进入应用程序。点击“微件”进行添加自定义的widget到系统界面上，这时我们会看到我们自定义的FirstWidget已经被加载了，点击“确定”，该Widget将会被放置在系统中。
添加完成后，FirstWidget加载到系统中了，点击进行测试，会打开Widget并进行交互操作，一个简单的widget就开发完成了。
