Webappbuilder自定义widget模板
Webappbuilder自定义widget模板
by 李远祥
- 到\\widgets\samplewidgets目录下拷贝 CustomWidgetTemplate 文件并重命名为MyWidget
- 设置widget的类名。在MyWidget 目录下打开Widget.js ，将baseClass 改为
baseClass: 'jimu-widget-mywidget' 如下图
- 自定义widget的UI界面。在Widget.html 文件中可以添加其widget的界面。可以尝试将以下代码加入到这个html页面中。
- 将自定义的widget注册到应用中。打开stemapp/sample-configs 文件，找到widgetPool->widgets ，添加一个节点内容，然后保存文件
- 测试widget 。 打开 http://[your host name:3344]/webappviewer/?config=sample-configs/config-demo.json 点击图标，出现其图标，操作结果如下
- 让widget变得更加灵活可配
a.打开MyWidget 文件夹下的 config.json 文件，添加json的结构文本到查建中，如下
b. 将原来的widget.html 页面代码改为，让其可以直接读取配置的关键变量
c.打开第5步的测试连接，查看修改的内容。Widget的内容则变为config文件对应的变量。
- 让界面更加友好一些。一般来说，html的界面布局和美化都使用css文件，widget同样可以使用CSS文件来让整个界面变得比较美观。打开css/style.css 文件，增加css代码到该文件中，如下图所示：
该代码的作用是将页面的第一个div标签的内容设置为红色。这样做的好处是更好的结构化，让美工人员参与到应用程序的开发过程中。其最终的效果如下
- 访问地图
- 打开widget.js文件，删除startup函数的注释
- 修改widget.html的页面代码，加入map ID 属性，如下图
- 重新刷新页面，可以看到map空间的ID被现实出来
- 最终的结果是读取了应用中map控件的ID
- 国际化支持
可以通过编写配置文件去适配多国语言。例如前面所用到的插件是英文的提示"This is my widget" and "This is configurable" ，可以通过编写MyWidget文件夹的配置文件去实现中文本地化。
- 打开nls/strings.js 文件，增加以下代码
- 在nls目录下创建子文件夹 zh-cn ，如图所示
- 将string.js 拷贝到zh-cn文件夹中
- 修改zh-cn/strings.js 文件里面的内容，如下
- 将widget.html的内容修改为读取配置代码，如下图
- 重新刷新页面即可查看到中文的配置。效果如下图
- 部署widget
- 打开MyWidget文件夹里面的 manifest.json 文件，更改里面的属性，如name、author、description等，其中name属性必须与widget的文件夹名称相同。
具体的每个属性可以查看网址 https://developers.arcgis.com/web-appbuilder/guide/widget-manifest.htm 的说明。
- 将MyWidget 文件夹拷贝到\stemapp\widgets 文件夹下，启动node.js(最快的港式是直接打开webappbuilider文件夹下的start.bat文件)，输入http://[your host name:3344]/webappbuilder，这样在使用webappbuilder创建应用的时候就可以使用自定义的widget了。如下图在微件选择的时候就会出现定义的插件
Webappbuilder自定义widget模板相关推荐
- TFS2008自定义过程模板之 Power Tools 工具篇
上午写了一篇关于自定义过程模板的文章http://www.cnblogs.com/sansi/archive/2010/03/11/1683355.html,是手工直接处理xml文件.刚刚发现原来是有 ...
- VSCode 自定义html5模板
新建html快捷键 当我们想在VSCode中新建html代码时,可以 输入! 然后回车或者Tab即可自动生成一个html文件模板,效果如下: (二)自定义html5模板 但我们每次新建html模板时候 ...
- 类模板,多种类型的类模板,自定义类模板，类模板的默认类型,数组的模板实现，友元和类模板，友元函数，类模板与静态变量，类模板与普通类之间互相继承，类模板作为模板参数，类嵌套，类模板嵌套，类包装器
1.第一个最简单的类模板案例 #include "mainwindow.h" #include <QApplication> #include <QPush ...
- MyEclipse自定义servlet模板
每次用MyEclipse默认的servlet的模板创建servlet的时候,里面会生成好多没有用的代码.因此,我们可以自定义servlet模板.步骤如下: 找到com.genuitec.eclipse ...
- 用Visual Studio2019自定义项目模板
项目模板简介 众所周知,在我们使用VS新建项目时,都需要选择一个项目模板,如下图: 我们选择完项目模板进行创建,创建完成之后,可以发现项目中已经包含了一些基础的文件.例如MVC: 可以看到,MVC项目 ...
- ASP.NET 自定义项目模板
前言 在微服务架构盛行的时代,一言不合就新建一个服务,虽然搭建服务并没什么难度,但不可避免的是每个人搭建出来的架子会存在差异,这很合理,因为每个开发者的个人风格.工作经验都不一样,难免认为自己喜欢的才 ...
- html中的文档格式及举例,跟我一起从零开始学习WebAssembly(三)、最简单的例子hello world(使用自定义HTML模板)...
文章目录 创建C++代码片 创建我们的自定义HTML模板文件 编译 运行实例 有时我们想要使用我们自定义HTML模板.让我们来看看我们如何做到这一点. 创建C++代码片 首先,创建一个名为hello2 ...
- 模板 字段_劲爆新功能：轻流文字识别（OCR）功能支持自定义识别模板啦
Hi,又和大家见面啦- 前段时间我们的文字识别(OCR)功能推出后,由于只支持系统提供的固定识别模板,很多客户跟我们反馈说:希望可以自定义识别模板! 现应大家的要求,轻流「文字识别(OCR)」的「自定 ...
- 8、jeecg 笔记之 自定义word 模板导出（一）
8.jeecg 笔记之 自定义word 模板导出(一) 1.前言 jeecg 中已经自带 word 的导出导出功能,其所使用的也是 easypoi,尽管所导出的 word 能满足大部分需求, 但总是有 ...
最新文章
- 调试JDK源码-一步一步看HashMap怎么Hash和扩容
- 为何 Map接口不继承Collection接口
- 星辰变鸿蒙武器,星辰变手游亲手打造极品光武 成就炼器宗师
- 剑指offer:数组中重复的数字
- C++ Primer 第10章 习题 10.18
- Hbase hbck2下载编译和基本使用
- 自己动手写游戏：飞机大战
- SQLlite在安卓中的基本详解和简单使用
- StevenBoyd--Convex optimization--1. Introduction
- 【Qt教程】4.1 - Qt5 文件系统 QFile文件读写操作
- PWA进阶：Service Worker一问一答
- 没有servlet接口_Java——Servlet
- python mysql扩展_关于python：构建’_mysql’扩展错误：无法找到vcvarsall.bat
- PS中的LAB颜色模式有什么作用？给人像磨皮就很实用！
- 尚医通（二十四）微信退款(取消预约功能)
- IONIC4 苹果登录-Sign In With Apple Id
- 寒江独钓-Windows内核安全编程笔记-第4章代码
- 判断用户输入的年份(平年或闰年)
- 大数据的5大关键技术点
- 程序员的写作课：四、我们如何管理素材