引言
接下来要介绍的是DWF表单控件家族中一个“很能打”的成员——超级控件（新版被改名为html），它基本原理是直接将一个完整的html页面，或者是一个vue文件编译成html页面，放到DWF的后端Web服务器中，然后在表单里用iframe方式嵌入画布区里。
...
这使得超级控件可以将各种的效果嵌入到表单中，比如：日历、词云、地图、甚至三维模型嵌入进去，所以，叫它超级控件，比如这样的效果：
图-利用超级控件嵌入日历
将三维地球嵌入超级控件
还是先举一个例子吧，在DWF内部提供了一个地图控件，但是我们希望显示一个3D地图，比如这样：
...
接下来，在DWF里面建立一个空白页面，将超级控件拖入，设置一下高度，将上述代码拷贝（再次提醒，记得修改第9行的秘钥，进去运行，即可看到下面的效果：
图-超级控件嵌入3D地球演示
在超级控件中访问DWF数据
“切~，不就是一个iframe嵌入嘛，有什么了不起“，一般有点”水平“的前端程序员们都能做。
...
回顾一下，第六章 表单中的事件脚本 中1.2节，介绍了restful api调用方法，这个例子里可以提取设备类“Asset”的所有对象：objects，所以接入的路径为：“/omf/entities/Asset/objects”，设置参数为空，调用方式如下：
| 代码块 | ||
|---|---|---|
| ||
let param = {};
this.dwf_axios.post(`/omf/entities/Asset/objects`,param).then(initRes => {
//在回调中处理
console.log(initRes.data.data);
}); |
在超级控件里希望加载所有设备类的对象，就可以这么做：
| 代码块 | ||
|---|---|---|
| ||
let param = {};
let ctx = window.parent.dwf_ctx
ctx.dwf_axios.post(`/omf/entities/Asset/objects`,param).then(initRes => {
//在回调中处理
console.log(initRes.data.data);
}); |
可以看到，有了dwf_ctx就可以完成之前说的很多事情了，接下来，将地图中的代码修改成这样：
| 代码块 | ||||
|---|---|---|---|---|
| ||||
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=？？？ZslE5E0BGrzXi2adSptlLmfoBnMzddMk"></script>
<title>地球模式</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
// GL版命名空间为BMapGL
var map = new BMapGL.Map("allmap"); // 创建Map实例
map.centerAndZoom(new BMapGL.Point(118.5, 27.5), 5); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
map.setMapType(BMAP_EARTH_MAP); // 设置地图类型为地球模式
var ctx = window.parent.dwf_ctx;
let param = {};
ctx.dwf_axios.post(`/omf/entities/Asset/objects`,param).then(initRes => {
//在回调中处理
console.log(initRes.data.data);
let assets = initRes.data.data;
assets.forEach(a => {
var marker = new BMapGL.Marker(new BMapGL.Point(a.locationX, a.locationY));
// 在地图上添加点标记
map.addOverlay(marker);
});
});
</script> |
就可以看到如下的效果：那么如果希望点击地图上的覆盖物，希望打开表单跳出控件呢？
超级控件里调用DWF表单
如果希望点击地图上的覆盖物，希望打开表单跳出控件呢？这也不难，可以利用dwf_ctx的executeOperation完成单击后触发操作。
| 代码块 | ||
|---|---|---|
| ||
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=ZslE5E0BGrzXi2adSptlLmfoBnMzddMk"></script>
<title>地球模式</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
// GL版命名空间为BMapGL
var map = new BMapGL.Map("allmap"); // 创建Map实例
map.centerAndZoom(new BMapGL.Point(118.5, 27.5), 5); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
map.setMapType(BMAP_EARTH_MAP); // 设置地图类型为地球模式
var ctx = window.parent.dwf_ctx;
let param = {};
ctx.dwf_axios.post(`/omf/entities/Asset/objects`,param).then(initRes => {
//在回调中处理
console.log(initRes.data.data);
let assets = initRes.data.data;
assets.forEach(a => {
var marker = new BMapGL.Marker(new BMapGL.Point(a.locationX, a.locationY));
marker.asset = a;
marker.addEventListener('click', function () {
console.log(marker.asset);
let initParams={ obj:marker.asset };
ctx.openForm('Asset','AssetComposition',null,'visit',initParams);
});
map.addOverlay(marker);
});
});
</script> |
上面的代码中，在初始化标记的时候将设备对象带入机marker.asset = a，然后每个标签里添加了一个click事件，并使用openForm方法打来表单，结果如下所示：
图-点击标签弹出DWF表单
表单控件的收藏打包
最后，除了上面介绍的内容以外，DWF的表单引擎还为超级控件提供了一个收藏打包带走的能力，也就是说，你可以写一个超级控件，收藏起来，然后在其他表单里反复使用它。
...