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. 访问地图 [list=1] [*] 打开widget.js文件，删除startup函数的注释
   
7. 修改widget.html的页面代码，加入map ID 属性，如下图
   
8. 重新刷新页面，可以看到map空间的ID被现实出来
9. 最终的结果是读取了应用中map控件的ID
   

[/*]
[*] 国际化支持 可以通过编写配置文件去适配多国语言。例如前面所用到的插件是英文的提示"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. 重新刷新页面即可查看到中文的配置。效果如下图
   

[/*]
[*] 部署widget

1. 打开MyWidget文件夹里面的 manifest.json 文件，更改里面的属性，如name、author、description等，其中name属性必须与widget的文件夹名称相同。
   
   具体的每个属性可以查看网址 <a href="https://developers.arcgis.com/ ... gt%3B https://developers.arcgis.com/ ... t.htm 的说明。
2. 将MyWidget 文件夹拷贝到\stemapp\widgets 文件夹下，启动node.js(最快的港式是直接打开webappbuilider文件夹下的start.bat文件)，输入http://[your host name:3344]/webappbuilder，这样在使用webappbuilder创建应用的时候就可以使用自定义的widget了。如下图在微件选择的时候就会出现定义的插件
   

[/*]
[/list]
文章来源：http://blog.csdn.net/liyuanxiang1984/article/details/52774283