首页 > 代码库 > 01WAB入门-开始

01WAB入门-开始

介绍

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
 



来自为知笔记(Wiz)



01WAB入门-开始