WAB for arcgis(一)创建自定义面板内小部件

(WAB 【一】)创建自定义面板内小部件


拿到一个新的web app builder(WAB)项目,创建自定义面板内小部件,过程如下:
设要创建的小部件文件夹路径为: 项目名/widgets/小部件文件夹名

1.修改项目名/widgets/小部件文件夹名/Widget.js文件

define([
    'dojo/_base/declare',
    'jimu/BaseWidget'
], function(declare,
            BaseWidget) {
     return declare([BaseWidget], {
        // Custom widget code goes here 
        baseClass: 'jimu-widget-zhuanti'//jimu-widget-name
      });
});

2.修改项目名/widgets/小部件文件夹名/Widget.html文件

<div style="width: 100%;height: 100%;">
    <div style="width: 100%;height: 100%;">This is my widget.</div>
</div>

3.修改项目名/config.json文件,找到"widgetPool"下的"widgets"

{
        "name": "Zhuanti",//与小部件文件夹名相同
        "label": "Zhuanti",//随意,这是小部件在web上显示的名称
        "version": "2.15",//WAB版本号
        "uri": "widgets/Zhuanti/Widget",//Widget.js的路径
        "index": 1,
        "id": "widgets_Zhuanti_Widget_10",//随意取个id
        "icon": "widgets/Zhuanti/images/icon.png"//图标
},

4.修改项目名/widgets/小部件文件夹名/manifest.json文件

{
  "name": "Zhuanti",//与文件夹名相同
  "2D": true,//是否支持2D
  "3D": true,//是否支持3D
  "platform": "HTML3D",
  "version": "2.15",
  "wabVersion": "2.15",
  "author": "Esri R&D Center Beijing",
  "description": "",
  "copyright": "",
  "license": "http://www.apache.org/licenses/LICENSE-2.9",
  "properties": {
    "inPanel": true,//重要。设置为true才会显示在面板中
    "hasUIFile": true
  }
}

该过程即实现生成一个小部件,点击小部件弹出位于面板内的内容。

结果

官网参考:
manifest.json文件参考

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值