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. PHP用正则批量替换Img中src内容,用正则表达式获取图片路径实现缩略图功能

    PHP用正则批量替换Img中src内容,用正则表达式获取图片路径实现缩略图功能 网上很多正则表达式只能获取或者替换一个img的src内容,或者只能替换固定的字符串,要动态替换多个图片内容的试了几个小时 ...

  2. js中几个正则表达式相关函数使用时g标志的作用

    首先,javascript中涉及到正则表达式的函数总共有6个,可分为两种: 1.第一种是作为字符串对象的方法,即以 String.fun(); 形式调用,这里包括 split.search.match ...

  3. 利用PS脚本自动删除7天之前建立的目录-方法1!

    目前有一个备份目录,目录名称为d:\temp\bak目录,在这目录下,根据备份要求,自动生成了如下目录的列表: 20131012 20131011 20131010 20131009 20131008 ...

  4. 通过WebClient/HttpWebRequest实现http的post/get方法

    ///<summary>/// 通过WebClient类Post数据到远程地址,需要Basic认证: /// 调用端自己处理异常 ///</summary>///<par ...

  5. ASP.NET 页面间数据传递的方法

    在做WEB开发时,很多地方会涉及到页面间的数据传递.这几天在完善教务基础系统,遇到了这个问题,上网查了一些资料,现总结如下: 说到页面间数据传递,很多人都会想到通过像Session这样的全局变量,但是 ...

  6. SIM卡尺寸及剪卡教程

    手机SIM卡有全尺寸SIM卡.Mini-SIM卡.Micro-SIM卡.Nano-SIM卡.Embedded-SIM卡等类型,目前主流手机基本都是趋向使用Micro-SIM卡和Nano-SM卡. 一. ...

  7. ionic3 环境配置 + 運行第一個項目

    1.首先我們先下載個 nodejs安裝包 地址:https://nodejs.org/en/ 安裝 檢查是否安裝成功,打開命令提示符 輸入 node -v 回車 查看版本 結果: 2.安裝ionic ...

  8. 如何从RxJava升级到RxJava2

    如何从RxJava升级到RxJava2. RxJava2已经推出有一年半的时间,由于之前RxJava已经在现有项目中广泛使用,而RxJava2在除了很多命名外并没有太多革新,所以相信有很多人跟我一样都 ...

  9. jQuery搜索框自动补全功能插件实现-autocomplete.js

    最近用nodeclub实现股票的输入关键字自动补全股票信息进行搜索功能,原先用jQuery-ui,结果jQuery-ui库太大,所以考虑用其他插件,最终选择使用autocomplete.js,控件简单 ...

  10. 大型互联网架构概述 关于架构的架构目标 典型实现 DNS CDN LB WEB APP SOA MQ CACHE STORAGE

    大型互联网架构概述 目录 架构目标 典型实现 DNS CDN LB WEB APP SOA MQ CACHE STORAGE 本文旨在简单介绍大型互联网的架构和核心组件实现原理. 理论上讲,从安装配置 ...