TWaver自动化设计平台Legolas —— 交互事件响应动作
2015-05-25 12:00
239 查看
http://v.youku.com/v_show/id_XOTYxMzYxNTA4.html
在“自定义数据响应动作”篇中,介绍了“动作”相关内容,了解到“动作”分为多种,各种动作的添加方式相同,但是应用方式各自不同。
在视频中能看到两种阀门(扳手式和旋转式)的不同动作,这里就以它们的实现为例,来介绍交互事件响应动作的使用
交互事件响应动作指人机交互时的事件响应动作,例如鼠标、键盘,w3c中对各种交互事件有规范的命名,Legolas中交互事件响应动作也遵循w3c中命名规范,在事件名前“on”前缀。
对于交互事件响应动作的应用,当交互事件触发时,模板对象会按照命名规则查找对应的动作并执行,所以无需手动绑定
选中扳手式阀门,对其添加onclick交互动作
![](http://twaver.servasoft.com/wp-content/uploads/2015/05/1012.png)
![](http://twaver.servasoft.com/wp-content/uploads/2015/05/1042.png)
代码意思为当点击模板对象后,弹出对话框
表示弹出对话框内容为diagram,这里用到了diagram的嵌套。方法参数分别为弹出框的配置参数和diagram的配置参数。在diagramSetting指定了需要加载的diagram名
这里需要加载的是handleValve01Control图纸,从下图可以看到handleValve01Control图纸中只有一组单选按钮,那么改变阀门状态的动作又在哪呢?选中单选按钮能看到在其“动作”列表中定义了changeValue动作
![](http://twaver.servasoft.com/wp-content/uploads/2015/05/1032.png)
到这里对扳手式阀门交互就完成了,是不是很简单
对于旋转式阀门只是弹出的图纸不同而已
在“自定义数据响应动作”篇中,介绍了“动作”相关内容,了解到“动作”分为多种,各种动作的添加方式相同,但是应用方式各自不同。
在视频中能看到两种阀门(扳手式和旋转式)的不同动作,这里就以它们的实现为例,来介绍交互事件响应动作的使用
交互事件响应动作指人机交互时的事件响应动作,例如鼠标、键盘,w3c中对各种交互事件有规范的命名,Legolas中交互事件响应动作也遵循w3c中命名规范,在事件名前“on”前缀。
对于交互事件响应动作的应用,当交互事件触发时,模板对象会按照命名规则查找对应的动作并执行,所以无需手动绑定
选中扳手式阀门,对其添加onclick交互动作
![](http://twaver.servasoft.com/wp-content/uploads/2015/05/1012.png)
![](http://twaver.servasoft.com/wp-content/uploads/2015/05/1042.png)
function (event){ var self = this; var dialogSetting = { "title":'阀门', "size":{"width":260,"height":100}, } var onLoaded = function(dview){ var vi = dview.getVIsByID("valveControl")[0]; vi._refVi = self; var angle = self.getValue('angle'); vi.setData(angle==90?'close':'open'); settingView = dview; } var diagramSetting = { "type":DIAGRAMCONTENTTYPE[1], "src":"handleValve01Control", "isRuntime":true, "onLoaded":onLoaded } Toolkits.showDiagramViewDialog(dialogSetting,diagramSetting); }
代码意思为当点击模板对象后,弹出对话框
Toolkits.showDiagramViewDialog(dialogSetting,diagramSetting);
表示弹出对话框内容为diagram,这里用到了diagram的嵌套。方法参数分别为弹出框的配置参数和diagram的配置参数。在diagramSetting指定了需要加载的diagram名
这里需要加载的是handleValve01Control图纸,从下图可以看到handleValve01Control图纸中只有一组单选按钮,那么改变阀门状态的动作又在哪呢?选中单选按钮能看到在其“动作”列表中定义了changeValue动作
function (v){ var angle = 0; if(v == 'close'){ angle = 90; } this._refVi.rotatePartByAxis('handle', {x:0,y:1,z:0}, {x:0,y:15,z:0}, angle); }this._refVi为点击的模板对象
![](http://twaver.servasoft.com/wp-content/uploads/2015/05/1032.png)
到这里对扳手式阀门交互就完成了,是不是很简单
对于旋转式阀门只是弹出的图纸不同而已
相关文章推荐
- Legolas工业自动化平台入门(三)交互事件响应动作
- TWaver自动化设计平台Legolas —— 数据响应动作
- TWaver家族新成员 — Legolas工业自动化设计平台
- TWaver自动化设计平台Legolas —— 入门流程
- TWaver家族新成员 — Legolas工业自动化设计平台
- Legolas工业自动化平台入门(二)数据响应动作
- 进行animation时点击事件无法响应的解决办法(animation进行时默认是禁止交互)
- WPF: 在 MVVM 设计中实现对 ListViewItem 双击事件的响应
- SimpleRpc-网络事件响应Reactor设计模式
- Android WebView JS交互之响应WebView中的图片点击事件
- android webview js交互, 响应webview中的图片点击事件 .
- android webview js交互, 响应webview中的图片点击事件
- [置顶] 事件响应,让网页交互
- 交互设计的那些事:Android、iOS和WP平台的六大差异
- android webview js交互, 响应webview中的图片点击事件
- QQ会员活动运营平台架构设计实践——高效自动化运营
- QQ会员活动运营平台的架构设计演变——高效自动化运营
- 事件响应,让网页交互
- 不同平台下菜单的交互设计探析
- 【远控编写07】客户端界面的设计和编写--为对话框添加菜单栏并添加事件响应