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文件参考

猜你喜欢

转载自blog.csdn.net/u014752033/article/details/106792836