引言
接下来要介绍的是DWF表单控件家族中一个“很能打”的成员——超级控件(新版被改名为html),它基本原理是直接将一个完整的html页面,或者是一个vue文件编译成html页面,放到DWF的后端Web服务器中,然后在表单里用iframe方式嵌入画布区里。
...
这使得超级控件可以将各种的效果嵌入到表单中,比如:日历、词云、地图、甚至三维模型嵌入进去,所以,叫它超级控件,比如这样的效果:
图-利用超级控件嵌入日历
将三维地球嵌入超级控件
还是先举一个例子吧,在DWF内部提供了一个地图控件,但是我们希望显示一个3D地图,比如这样:
...
接下来,在DWF里面建立一个空白页面,将超级控件拖入,设置一下高度,将上述代码拷贝(再次提醒,记得修改第9行的秘钥,进去运行,即可看到下面的效果:
图-超级控件嵌入3D地球演示
在超级控件中访问DWF数据
“切~,不就是一个iframe嵌入嘛,有什么了不起“,一般有点”水平“的前端程序员们都能做。
...
代码块 | ||||
---|---|---|---|---|
| ||||
<!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=?????"></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表单呢?
这也不难,可以利用dwf_ctx的executeOperation完成单击后触发操作。
...
上面的代码中,在初始化标记的时候将设备对象带入机marker.asset = a,然后每个标签里添加了一个click事件,并使用openForm方法打来表单,结果如下所示:
图-点击标签弹出DWF表单
表单控件的收藏打包
最后,除了上面介绍的内容以外,DWF的表单引擎还为超级控件提供了一个收藏打包带走的能力,也就是说,你可以写一个超级控件,收藏起来,然后在其他表单里反复使用它。
...
不仅如此,还可以把这个超级控件打包到模型包里,带走或者发给你小伙伴。
图-在模型包内部打包超级控件
注意事项
最后,超级控件虽好,但也不要贪杯,下面看看使用超级控件的时候需要注意的地方:
...