Webappbuilder开发快速预览

by 李远祥

Webappbuilder for ArcGIS 是由ArcGIS JavaScripit API和dojo创建的,它允许通过创建自己的widget和主题来扩展其功能。

1.      了解widgets(微件),panels(面板)和themes(主题)

Widget

微件是一系列的text文件,可以在webappbuilder的应用中共享、移动和分发。

微件可以是单个符合AMD模型的JavaScript文件或者是编译好的AMD包,像Dojo的包一样。上图是微件的结构,包含一个模板、配置文件、央视文件和国际化支持。

通常情况下,微件被单独封装在一个分离或特定的业务逻辑中,一个微件不仅可以与用户视觉上互动,也可以连接到ArcGIS Portal和ArcGIS Online中获服务器端地图和数据资源。

Widget必须扩展BaseWidget 类(BaseWidget.js),通过扩展BaseWidget类,产生一个新的JavaScript类会由Web Appbuilder 的WidgetManager 作为一个可部署的插件。

2.      Panel(面板)

Panel是一个UI元素,用于显示widget的内容。复杂的微件可以在一个panel中展示出来。通过使用Panel板,Widget开发者不需要处理微件及其内容(数据)如何在HTML查看器显示。然而,微件开发人员可以选择不使用所提供的面板(更多的细节,见小微件开发部分)。例如,比例尺微件都有自己独特的用户界面。

您可以修改或创建新的panel,以获得新的功能,例如使微件可以移动和拖拽。

3.      Theme(主题)

主题是由Web AppBuilder创建的Web应用所定义的界面。主题定义了以下内容:

l  如何通过微件布局主题面板

l  颜色、字体、界面样式等方案

l  微件在viewer中的位置

Web AppBuilder开发者需要掌握的软件和技巧

开发人员需要足够的HTML和JavaScript开发Web应用程序的知识和经验

Dojo是WebAppBuilder和ArcGIS JavaScript API的基础平台

使用Web AppBuilder去开发微件,需要熟悉ArcGIS JavaScript API,至少要熟悉由Esri官网上提供的代码实例。

尽管开发的环境只需要基础的文本编辑器、标准兼容的web浏览器和网络连接,但还是推荐使用一些有效的开发工具:

  • Sublime or Aptana Studio IDE
  • Chrome (最新版)
  • Firefox (最新版) with the Firebug plug-in

4.      可参考的资源

可以参考以下的资源网站

Webappbuilder开发快速预览的更多相关文章

  1. Windows 10 开发人员预览版中的新增功能(转自 IT之家)

    Windows 10 开发人员预览版中的新增功能 在Win10预览版中安装工具与SDK后,即可着手创建Windows通用应用或先浏览目前的环境与此前相比都发生了什么变化. 应用建模 文件资源管理器: ...

  2. Android开发 Camera2开发_2_预览分辨率或拍照分辨率的计算

    前言 不管在Camera1或者Camera2在适配不同手机/不同使用场景的情况下都需要计算摄像头里提供的分辨率列表中最合适的那一个分辨率.所以在需要大量机型适配的app,是不建议不经过计算直接自定义分 ...

  3. 【macOS使用技巧】使用空格键快速预览文件内容

    Quickview 是mac系统上一个强大的预览功能, 可以预览 mp4 mov等音频文件, 当然图片.文本.也都可以进行预览. 在系统中如果你希望快速浏览一下文件而不想打开的文件的话只要选择文件然后 ...

  4. Sublime Text3如何快速预览html文件

    Sublime Text3 步骤1:选择 Tools----> Build System ----> New Build System... 步骤2:输入以下内容 "cmd&qu ...

  5. 玩转Android Camera开发(四):预览界面四周暗中间亮,仅仅拍摄矩形区域图片(附完整源代码)

    杂家前文曾写过一篇关于仅仅拍摄特定区域图片的demo.仅仅是比較简陋.在坐标的换算上不是非常严谨,并且没有完毕预览界面四周暗中间亮的效果,深以为憾.今天把这个补齐了. 在上代码之前首先交代下,这里面存 ...

  6. Rider中Winform开发支持预览(5)

    1.Rider .netCore3.0 winform设计器支持预览,这点vs目前还不支持. 2.不过winform下控件选择工具栏都是没有图标的

  7. 高精度快速预览打开dwg文件的CAD控件CAD Image DLL介绍及下载

    CAD Image DLL对于DXF格式, DWG格式(AutoCAD R12 到AutoCAD 2004/2005), PLT 以及 HPGL/HPGL2文件都有快速的显示速度和精度,开发者再也不会 ...

  8. angularjs学习总结(快速预览版)

    对html标签的增强 -> 指令 指令的本质是什么 声明的方式调用相应的脚本,实现一些操作,声明的所在的dom就是脚本的执行上下文? 自定义标签 -- 标签指令自定义属性 -- 属性指令特定格式 ...

  9. .NET ORM框架 SqlSugar4.0 功能快速预览【开源】

    SqlSugar 4.0 ORM框架的优势 为了未来能够更好的支持多库分布式的存储,并行计算等功能,将SqlSugar3.x全部重写,现有的架构可以轻松扩展多库. 源码下载: https://gith ...

随机推荐

  1. LPC1768的USB使用-枚举过程

    枚举过程如下 #ifndef __USBCORE_H__ #define __USBCORE_H__ /* USB端点0 发送数据结构体*/ typedef struct _USB_EP_DATA { ...

  2. APP被苹果APPStore拒绝的各种原因

    APP被苹果APPStore拒绝的各种原因 1.程序有重大bug,程序不能启动,或者中途退出.2.绕过苹果的付费渠道,我们之前游戏里的用兑换码兑换金币.3.游戏里有实物奖励的话,一定要说清楚,奖励由本 ...

  3. Memcached源码分析之thread.c

    /* * 文件开头先啰嗦几句: * * thread.c文件代表的是线程模块.但是你会看到这个模块里面有很多其它方法, 例如关于item的各种操作函数,item_alloc,item_remove,i ...

  4. 设置ubuntu下使用ls命令显示文件颜色显示

    文件颜色属性: # Attribute codes: 字符属性# 00=none 01=bold 04=underscore 05=blink 07=reverse 08=concealed#00无 ...

  5. nodejs那些事

    安装篇: 1.从http://nodejs.cn/上下载了nodejs-v4.4.4版安装包(已存入360云盘) 2.在windows下双击——下一步——下一步安装即可(注意:安装路径就默认安装到C: ...

  6. 前言(Core Data 应用开发实践指南)

    Core Data 并不是数据库,它其实是一个拥有多种功能的框架.其中,有个功能是把程序与数据库之间的交互过程自动化,不用再编写SQL代码,改用Objective-C对象来实现. Core Data ...

  7. centos7.0之Lnmp和Lamp

    首先配置防火墙 CentOS 7.0默认使用的是firewall作为防火墙 1.关闭firewall: systemctl stop firewalld.service #停止firewall sys ...

  8. 一个简单版的波纹css3动画

    ul{width: 300px;border: red;}ul li{width: 300px;height: 70px;line-height: 70px;background: #fff;text ...

  9. 浅谈tomcat的配置及数据库连接池的配置

    1.如何修改tomcat的端口 在某些情况下,可能需要修改tomcat监听的端口8080,比如: a.需要启动两份tomcat服务器 b.某个服务占用了8080端口(1433,1521,3306... ...

  10. JavaScript 扯几句单线程相关

    JavaScript 扯几句单线程相关 众所周知,Javascript是单线程执行的,这也就是说:JavaScript在同一个时间上只能处理一件事.他不像C,Java等这些多 线程的,可以开不同的线程 ...