介绍
WAB是一款所见即所得的应用,它可以使你轻松搭建Web应用。它具有强大的工具可以配置出功能丰富的HTML应用。
WAB(开发者版)为开发者提供了创建自定义widgets和themes的扩展框架。
WAB的主要功能:
1. 支持在桌面浏览器、平板、智能手机上创建HTML/JavaScript应用。
2. 集成了ArcGis Online 和 Portal for ArcGis平台。
3. 提供许多可直接使用的内置widgets,如搜索、地理处理、绘制等。
4. 支持创建自定义App模板。
5. 为开发者提供强大的创建自定义widgets和themes的可扩展框架。
可以通过4个Tab页,主题、地图、微件、属性创建应用。
从WAB2.1开发者版本开始已经支持3D应用。
开始
安装
1. 下载WAB(开发者版)到本地并解压。
2. WAB运行于Node.js之上,所以首先要安装Node.js。下载的WAB包中包含windows版本的Node.js
windows平台:请参照下一节启动WAB
其他平台:请确保安装0.10.0版本以及更新的Node.js
Tips:WAB要求最低0.10.0版本Node.js。
启动
1. 启动WAB。
windows:解压下载的WAB后,双击startup.bat。该批处理会自动启动Node.js服务器并以默认浏览器打开http://[machinename]:3344/webappbuilder
如果关掉了浏览器窗口,只要Node.js服务器未关闭可以使用上面的地址再次打开。
其他:略
2. WAB默认端口是3344.可以通过命令行参数指定端口。另外也可以以windows方式安装。
指定不同端口:
打开命令行工具,转到/server目录下,输入node_x64.exe server.js [-port=value][-proxy=value]
在浏览器中输入http://[machinename]:port/webappbuilder启动WAB,port替换为指定的端口
Tips:其中的node_x64需要自行判断node_x32
3. 以windows服务的方式运行
在命令行窗口中转到/server目录,运行 npm run-script install-windows-service
在Windows服务窗口启动ArcGISWebAppBuilder服务
指定portalUrl
1. 指定WAB接入的ArcGis Online Url或者Portal for ArcGis 账户。使用WAB,需要ArcGis Online或者Portal for ArcGis 或者ArcGis for Developers账户。
2. 点击继续。
如果你的portalUrl是使用web-tier方式认证,则可以在登录后构建app
如果你的portalUrl是使用OAuth2方式认证,请看下一节,设置App ID
设置App ID
如果是在WAB上第一次指定portalUrl,支持OAuth2方式认证的地址需要一个App ID。只需要指定一次,以后启动WAB后可直接登录到portal目录
使用以下方式获取App ID
1. 登录到你指定的portal地址上。中文地址:http://www.arcgisonline.cn/portal/home/content.html 国外地址:目前只有国外地址支持3D模板
2. 添加WAB项目
1) 点击我的内容,点击添加项目,并选择应用程序
url输入:http://localhost:3344/webappbuilder
标题、标签随便输入
2) 点击添加项目
3) 点击注册,在重定向URI中写入http://localhsot:3344,点击添加,最后点击注册。
4) 复制应用程序ID
5) 在浏览器中,粘贴App ID,如果遇到Error 400 Invalid redirect_url,尝试:
找到WAB的/server目录,删除signininfo.json
重新注册一个App ID
刷新并重新提供App ID
构建第一个应用
1. 启动WAB。
2. 登录portal。
3. 在WAB主页创建一个新的项目。
4. 选择2D模板,提供App名称和描述。
5. 使用默认的主题、地图和微件。
6. 在属性页中可以修改标题、副标题、和Logo。
7. 点击保存。
8. 点击启动。
稍等片刻便可以打开你的第一个应用了。
浏览器和ArcGisApi支持
2DApp支持Chrome、Firefox、Safari3以上、Edge、IE9以及以上,不支持兼容性视图。
3DApp支持Chrome、Firefox、Safari7以上、Edge、IE11以及以上,浏览器需要支持WebGL
2DApp支持ArcGis Api for Js3.18
3DApp支持ArcGis Api for Js4.1
开发概述
widgets
widgets是一组文件集合,你可以共享、移动、部署到WAB
widget可以是一个AMD模块。以上截图展示了一个widget包含模板文件(.html)、配置文件、style文件和国际化支持文件。
通常,一个widget用于封装独立或者集中的业务,它不仅仅起到与用户进行交互的作用,而且还能与服务器端资源进行交互。
一个widget必须有基于BaseWidget.js,通过扩展BaseWidget类,WAB的WidgetManager就可以识别出一个Js类是一个可部署的widget。
panels
panel是一个用于展示多个widget内容的UI元素,一个panel可以承载多个widget
通过使用panel,widget开发时不需要处理widget和它的内容如何展示在浏览器中。当然也可以选择不使用panel
你可以修改或者创建新的panel让它具有新的功能,比如使widget展示的时候可拖动等
themes
主题定义了WAB创建的App的UI
它定义了:
1. 微件如何展示主题panel。
2. 颜色模式、字体和其他的样式。
3. 微件定位。
技能与开发工具
技能
1. html&javascript
2. dojo&arcgis api fo js
工具
1. sublime
2. chrome