bricks/docs/cn/event.md
2024-05-13 15:33:51 +08:00

493 lines
12 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# bricks的事件处理
bricks的事件处理是在控件描述文件的binds区域中添加事件处理说明来实现的
## bricks支持的事件处理类型
* urlwidget
* method
* script
* registerfunction
* event
例外还支持一种混合型
* actions
在事件处理定义中使用"actiontype"属性来定义事件处理类型
## 事件处理定义数据要素
所有事件处理类型都有的数据要素有
### wid
事件发起方id关于wid规则请查看[控件id](widgetid)
### event
支持控件的html原生事件以及控件类中定义的事件或者是event事件处理类型中dispatch_event属性中定义的事件
### actiontype
指定事件处理类型支持“urlwidget", "method", "script", "registerfunction", "event" 或者“actions”混合型
### conform
对象类型确认控件的options如存在则此绑定需要用户确认后再执行
### datawidget
给事件添加动态参数时定义获取动态参数的控件的id关于datawidget规则请查看[控件id](widgetid)
### datamethod
获取动态参数的方法
### datascript
获取动态参数的脚本
### dataparams
获取动态参数时需给定的参数
### 获取动态参数说明
绑定任务获取实时数据作为参数,需要给定以下属性:
* datawidget字符串或控件类型获取实时数据的控件
* datamethod字符串类型控件的方法使用params作为参数调用
获取实时数据的方法
* datascript字符串类型 js脚本使用return返回数据
* dataparams参数
datamethod 优先datascript从datawidget控件中通过datamethod
### target
字符串或控件实例目标控件实例如果是字符串使用”getWidgetById“函数获得目标控件实例关于target规则请查看[控件id](widgetid)
### conform
如果一个事件处理需要用户确认可以在事件处理中指定一个conform属性来引发当此事件发生时会弹出一个确认窗口用户确认后才会处理此事件否则不处理
不同的事件处理方法也有部分不同的事件处理属性,一下分别说明:
### urlwidget方法
urlwidget事件处理方法是从后台获取一个控件描述文件动态生成bricks控件并将控件添加添加添加或替换到事件处理指定的控件中。
urlwidget绑定需要一个options属性和一个mode属性在此属性中需要
* url字符串类型 获取desc数据的url
* mehtod字符串类型url调用的方法缺省”GET“
* params对象类型调用的参数, 从datawidget获取的数据影响此属性
绑定创建的控件添加到target控件中
例子
```
{
"widgettype":"VBox",
"options":{
"width":"100%",
"height":"100%"
},
"subwidgets":[
{
"widgettype":"HBox",
"options":{
"height":"40px"
},
"subwidgets":[
{
"id":"replace",
"widgettype":"Button",
"options":{
"width":"80px",
"i18n":true,
"label":"replace mode"
}
},
{
"id":"insert",
"widgettype":"Button",
"options":{
"width":"80px",
"i18n":true,
"label":"insert mode"
}
},
{
"id":"append",
"widgettype":"Button",
"options":{
"width":"80px",
"i18n":true,
"label":"append mode"
}
}
]
},
{
"id":"main",
"widgettype":"Filler"
}
],
"binds":[
{
"wid":"replace",
"event":"click",
"actiontype":"urlwidget",
"target":"main",
"options":{
"url":"{{entire_url('replace_text.ui')}}",
"params":{
"text":"Insert before"
}
}
},
{
"wid":"insert",
"event":"click",
"actiontype":"urlwidget",
"target":"main",
"options":{
"url":"{{entire_url('insert_text.ui')}}",
"params":{
"text":"Insert before"
}
},
"mode":"insert"
},
{
"wid":"append",
"event":"click",
"actiontype":"urlwidget",
"target":"main",
"options":{
"url":"{{entire_url('subtext.ui')}}",
"params":{
"text":"Append After"
}
},
"mode":"append"
}
]
}
```
在上述例子中我们使用了一个竖向排列的容器VBox并在此容器中添加了两个字控件分别是一个横向排列的容器HBox和一个填充器Filler
并在横向排列的子控件中添加了3个按钮控件, 每个Button定义了id 分别是replaceinsert和append在主控件VBox的binds中分别定义了三个事件处理分别对应于3个Button的click事件演示了三种子控件在target控件中插入的模式替换所有子控件插入在已有子控件之前添加到已有子控件之后
### method方法
需要指定target参数和method参数
* target类型为字符串或控件类型
如果是字符串使用“getWidgetById”函数获取控件实例。
* method字符串target实例的方法
* params传递给方法的参数
method绑定方法将事件绑定到target控件的一个方法并用params传递参数
例子
```
{
"widgettype":"VBox",
"options":{
"width":"100%",
"height":"100%"
},
"subwidgets":[
{
"widgettype":"HBox",
"options":{
"height":"40px"
},
"subwidgets":[
{
"id":"changetext",
"widgettype":"Button",
"options":{
"dynsize":false,
"width":"80px",
"i18n":true,
"label":"Change text"
}
},
{
"id":"smaller",
"widgettype":"Button",
"options":{
"dynsize":false,
"width":"80px",
"i18n":true,
"label":"Small size"
}
},
{
"id":"larger",
"widgettype":"Button",
"options":{
"dynsize":false,
"width":"80px",
"i18n":true,
"label":"larger size"
}
}
]
},
{
"widgettype":"Filler",
"options":{},
"subwidgets":[
{
"id":"text_1",
"widgettype":"Text",
"options":{
"dynsize":true,
"text":"original text"
}
}
]
}
],
"binds":[
{
"wid":"changetext",
"event":"click",
"actiontype":"method",
"target":"text_1",
"params":"new text",
"method":"set_text"
},
{
"wid":"smaller",
"event":"click",
"actiontype":"method",
"target":"app",
"method":"textsize_smaller"
},
{
"wid":"larger",
"event":"click",
"actiontype":"method",
"target":"app",
"method":"textsize_bigger"
}
]
}
```
上述例子中三个Button分别驱动app中textsize_smaller()textsize_bigger()来改变bricks字符大小从而影响到text_1控件的显示大小
### script方法
绑定脚本,此方法将事件绑定到一个脚本,支持以下属性
* script字符串脚本正文
* params对象类型脚本可以访问params变量来获取参数。
脚本中可以使用以下变量:
* this 事件处理中target对应的控件实例
* params参数对象datawidget获得的数据会添加到params中
例子
```
{
"id":"insert",
"widgettype":"Button",
"options":{
"width":"80px",
"i18n":true,
"label":"click me"
},
"binds":[
{
"wid":"self",
"event":"click",
"actiontype":"script",
"target":"self",
"script":"console.log(this, params, event);"
}
]
}
```
在上述例子中定义了使用“script”事件处理方法来处理Button的“click事件” 在click后在控制台上把事件传过来的参数显示出来
### registerfunction方法
事件绑定一个注册函数, 参看[RegisterFunction](registerfunction.md)
支持以下属性:
* rfname字符串已注册的函数名称
* params对象类型调用注册函数时作为参数传递给注册函数。
```
<link rel="stylesheet" href="http://localhost:80/bricks/css/bricks.css">
<!-- support IE8 (for Video.js versions prior to v7) -->
<script src="http://localhost:80/bricks/3parties/videojs-ie8.min.js"></script>
</head>
<body>
<script src="http://localhost:80/bricks/3parties/marked.min.js"></script>
<script src="http://localhost:80/bricks/3parties/xterm.js"></script>
<script src="http://localhost:80/bricks/3parties/video.min.js"></script>
<script src="http://localhost:80/bricks/3parties/recorder.wav.min.js"></script>
<!--- <script src="http://localhost:80/bricks/3parties/videojs-contrib-hls.min.js"></script> --->
<script src="http://localhost:80/bricks/bricks.js"></script>
<script>
/*
if (bricks.is_mobile()){
alert('wh=' + window.innerWidth + ':' + window.innerHeight);
}
*/
var myfunc = function(params){
this.set_text(params.text);
}
bricks.RF.register('setText', myfunc);
const opts = {
"widget": {
"widgettype":"VBox",
"options":{
"width":"100%",
"height":"100%"
},
"subwidgets":[
{
"widgettype":"HBox",
"options":{
"height":"40px"
},
"subwidgets":[
{
"id":"changetext",
"widgettype":"Button",
"options":{
"dynsize":false,
"width":"80px",
"i18n":true,
"label":"Change text"
}
},
{
"id":"smaller",
"widgettype":"Button",
"options":{
"dynsize":false,
"width":"80px",
"i18n":true,
"label":"Small size"
}
},
{
"id":"larger",
"widgettype":"Button",
"options":{
"dynsize":false,
"width":"80px",
"i18n":true,
"label":"larger size"
}
}
]
},
{
"widgettype":"Filler",
"options":{},
"subwidgets":[
{
"id":"text_1",
"widgettype":"Text",
"options":{
"dynsize":true,
"text":"original text"
}
}
]
}
],
"binds":[
{
"wid":"changetext",
"event":"click",
"actiontype":"registerfunction",
"target":"text_1",
"params":{
"text":"new text"
},
"rfname":"setText"
},
{
"wid":"smaller",
"event":"click",
"actiontype":"method",
"target":"app",
"method":"textsize_smaller"
},
{
"wid":"larger",
"event":"click",
"actiontype":"method",
"target":"app",
"method":"textsize_bigger"
}
]
} };
const app = new bricks.App(opts);
app.run();
</script>
</body>
</html>
```
在上述例子中使用bricks.RF注册了一个setText函数 并在主控件的binds区域定义了当changetext按钮点击后调用注册函数“setText”来处理
### event方法
绑定事件需指定target触发target对象的一个事件
支持以下属性
dispatch_event需触发的事件名
params传递给事件的参数处理函数可以使用evemt.params获得此参数
```
{
"widgettype":"VBox",
"options":{},
"subwidgets":[
{
"id":"btn1",
"widgettype":"Button",
"options":{
"label":"press me"
}
},
{
"id":"txt1",
"widgettype":"Text",
"options":{
"otext":"I will dispatch a event when btn1 pressed",
"i18n":true
}
}
],
"binds":[
{
"wid":"btn1",
"event":"click",
"actiontype":"event",
"target":"txt1",
"dispatch_event":"gpc"
},
{
"wid":"txt1",
"event":"gpc",
"actiontype":"script",
"target":"self",
"script":"alert('yield');"
}
]
}
```
上述例子中在主控件的binds区域定义了btn1的按钮点击后使用event处理类型来处理btn1的click事件即转而触发“txt1”正文控件的“gpc”事件并定义了当”txt1“正文控件在gpc事件发生后使用script事件处理方法alert一个消息
## 定义需要确认的事件处理
有时候我们需要客户确认后在处理事件,如果用户不确认,则放弃处理事件,比如在删除数据时我们通常需要用户确认一下
例子
```
{
"id":"insert",
"widgettype":"Button",
"options":{
"width":"80px",
"i18n":true,
"label":"click me"
},
"binds":[
{
"wid":"self",
"event":"click",
"actiontype":"script",
"conform":{
"title":"conformtest",
"message":"测试事件处理前的用户确认功能,确认码?"
},
"target":"self",
"script":"alert('确认过眼神!')"
}
]
}
```
上述例子中定义了Button的click事件使用script事件处理方式来处理但是在处理前需要显示信息让用户确认是否继续如果用户放弃则不处理事件确认后正常的处理事件。
## actions方法