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了。如下图在微件选择的时候就会出现定义的插件

Webappbuilder自定义widget模板的更多相关文章

  1. JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案(四):自定义T4模板快速生成页面

    前言:上篇介绍了下ko增删改查的封装,确实节省了大量的js代码.博主是一个喜欢偷懒的人,总觉得这些基础的增删改查效果能不能通过一个什么工具直接生成页面效果,啥代码都不用写了,那该多爽.于是研究了下T4 ...

  2. yii2——自定义widget

    参考资料:http://www.bsourcecode.com/yiiframework2/how-to-create-custom-widget-in-yii2-0-framework/   如何使 ...

  3. VS自定义项目模板:[2]创建VSIX项目模板扩展

    VS自定义项目模板:[2]创建VSIX项目模板扩展 听语音 | 浏览:1237 | 更新:2015-01-02 09:21 | 标签:软件开发 1 2 3 4 5 6 7 分步阅读 一键约师傅 百度师 ...

  4. dedecms如何自定义专题模板

    很多人看到别人的网站也是用dedecms建的,但是他们的专题做得很漂亮,也在想如何自定义dedecms专题模板呢? 其实很简单,只要在dedecms默认专题模板上做一些修改就好了 <!DOCTY ...

  5. android自定义UI模板图文详解

    不知道大家在实际开发中有没有自定义过UI模板?今天花时间研究了一下android中自定义UI模板,与大家分享一下. 每个设计良好的App都是自定义标题栏,在自定义标题栏的过程中大部分人可能都是自定义一 ...

  6. Android Studio自定义注释模板及生成JavaDoc

    刚开始学习Android,使用了Android Studio IDE.为了将来生产JavaDoc,学习一下如何自定义注释模板. . 自定义注释模板 1. 通过 File –>Settings 或 ...

  7. ThinkPHP框架配置自定义的模板变量(十)

    原文:ThinkPHP框架配置自定义的模板变量(十) 模板替换(手册有详细介绍对应的目录) __PUBLIC__:会被替换成当前网站的公共目录 通常是 /Public/ __ROOT__: 会替换成当 ...

  8. WebAppBuilder自定义主题

    WebAppBuilder自定义主题 by 李远祥 基本步骤: 创建新主题的文件夹 注册新的主题到manifest.json 文件 覆盖HeaderController 部件的颜色. 覆盖panel的 ...

  9. Pycharm 自定义文件模板

    Pycharm 自定义文件模板 每次新建文件都有相同的代码框架,每次重复敲浪费了程序员的寿命啊 按照下面方式自定义自己的模板:

随机推荐

  1. java 自动备份MySQL 数据库(转载)

    1 package com.learn4j.bat; public class Backup { private String user_name;// 数据库用户名 private String u ...

  2. 关于iOS后台模式

    https://onevcat.com/2013/08/ios7-background-multitask/ http://zhidao.baidu.com/link?url=NUOMrLGB6Odr ...

  3. ucos调度器详解

    这一片谈谈关于ucos调度器的相关知识. ucos的调度器的实现主要靠一个函数OS_Sched 该函数将调度器的行为分为了两个部分,第一是调度部分,第二是任务切换部分,如下 void  OS_Sche ...

  4. X-006 FriendlyARM tiny4412 u-boot移植之Debug串口用起来

    <<<<<<<<<<<<<<<<<<<<<<<<< ...

  5. UISlider小结

    滑块(UISlider)是常用的界面组件,能够让用户可以用可视化方式设置指定范围内的值,比如音量设置,比如灵敏度控制等诸如此类的用途. - (void)viewDidLoad { [super vie ...

  6. 利用STM32F唯一96bit序列号实现反拷贝加密的源代码公开(转)

    源:利用STM32F唯一96bit序列号实现反拷贝加密的源代码公开 //---------------------------------------------------------------- ...

  7. 横向滚动视图scroll-into-view不起作用

    横向视图scroll-into-view指定的id为hpink,但是效果图中显示的还是第1个view(未达到效果); 纵向视图scroll-into-view指定的id为yellowgreen,效果图 ...

  8. WCF应用场景

    WCF全称Windows Communication Foundation,是Microsoft为构建面向服务的应用提供的分布式通信编程框架,是.NET Framework 3.5的重要组成部分.使用 ...

  9. UVa 10176 - Ocean Deep ! - Make it shallow !!

    题目大意:判断一个很大的二进制能否被131071整除.在二进制转十进制的过程中不断取模,最后判断结果是否是0就可以了. #include <cstdio> #include <cst ...

  10. thinkphp ,进行关联模型的时候出现的问题,版本是3.2

    看的后盾网络视频,里面操作的是3.1. 我用的是onethink,基于3.2. 在关联模式的操作时.主要是user role  role_user  3个张表 视频中可以操作,但是本地操作出现问题. ...