Webappbuilder自定义widget模板

Webappbuilder自定义widget模板

by 李远祥

 

1. 到 \\widgets\samplewidgets目录下拷贝  CustomWidgetTemplate 文件并重命名为MyWidget

   

2. 设置widget的类名。在MyWidget 目录下打开Widget.js ，将baseClass 改为

   baseClass: 'jimu-widget-mywidget' 如下图

 

 

1. 自定义widget的UI界面。在Widget.html 文件中可以添加其widget的界面。可以尝试将以下代码加入到这个html页面中。

   

2. 将自定义的widget注册到应用中。打开 stemapp/sample-configs 文件，找到widgetPool->widgets ，添加一个节点内容，然后保存文件

   

3. 测试widget 。 打开 http://[your host name:3344]/webappviewer/?config=sample-configs/config-demo.json  点击图标，出现其图标，操作结果如下

   

4. 让widget变得更加灵活可配

   a.打开MyWidget  文件夹下的 config.json 文件，添加json的结构文本到查建中，如下

   

   b. 将原来的widget.html 页面代码改为，让其可以直接读取配置的关键变量

   

   c.打开第5步的测试连接，查看修改的内容。Widget的内容则变为config文件对应的变量。

    

5. 让界面更加友好一些。一般来说，html的界面布局和美化都使用css文件，widget同样可以使用CSS文件来让整个界面变得比较美观。打开 css/style.css 文件，增加css代码到该文件中，如下图所示：

   

   该代码的作用是将页面的第一个div标签的内容设置为红色。这样做的好处是更好的结构化，让美工人员参与到应用程序的开发过程中。其最终的效果如下

   

6. 访问地图
   1. 打开widget.js文件，删除startup函数的注释

      

   2. 修改widget.html的页面代码，加入map ID 属性，如下图

      

   3. 重新刷新页面，可以看到map空间的ID被现实出来
   4. 最终的结果是读取了应用中map控件的ID

      

7. 国际化支持

   可以通过编写配置文件去适配多国语言。例如前面所用到的插件是英文的提示"This is my widget" and "This is configurable" ，可以通过编写MyWidget文件夹的配置文件去实现中文本地化。

   1. 打开nls/strings.js 文件，增加以下代码

      

   2. 在 nls目录下 创建子文件夹 zh-cn ，如图所示

      

   3. 将string.js 拷贝到zh-cn文件夹中
   4. 修改 zh-cn/strings.js 文件里面的内容，如下

      

   5. 将widget.html的内容修改为读取配置代码，如下图

      

   6. 重新刷新页面即可查看到中文的配置。效果如下图

      

8. 部署widget
   1. 打开MyWidget文件夹里面的 manifest.json 文件，更改里面的属性，如name、author、description等，其中name属性必须与widget的文件夹名称相同。

      

      具体的每个属性可以查看网址 https://developers.arcgis.com/web-appbuilder/guide/widget-manifest.htm 的说明。

   2. 将MyWidget 文件夹拷贝到\stemapp\widgets 文件夹下，启动node.js(最快的港式是直接打开webappbuilider文件夹下的start.bat文件)，输入http://[your host name:3344]/webappbuilder，这样在使用webappbuilder创建应用的时候就可以使用自定义的widget了。如下图在微件选择的时候就会出现定义的插件