yumoqing/bricks

Fork 0

yumoqing 1e6c4105aa bugfix

2024-05-13 15:38:54 +08:00

12 KiB

Raw Blame History

bricks的事件处理

bricks的事件处理是在控件描述文件的binds区域中添加事件处理说明来实现的

bricks支持的事件处理类型

urlwidget
method
script
registerfunction
event

例外还支持一种混合型

actions

在事件处理定义中使用"actiontype"属性来定义事件处理类型

事件处理定义数据要素

所有事件处理类型都有的数据要素有

wid

事件发起方id，关于wid规则请查看控件id

event

支持控件的html原生事件以及控件类中定义的事件，或者是event事件处理类型中dispatch_event属性中定义的事件

actiontype

指定事件处理类型，支持“urlwidget", "method", "script", "registerfunction", "event"，或者“actions”混合型

conform

对象类型，确认控件的options，如存在，则此绑定需要用户确认后再执行

datawidget

给事件添加动态参数时定义获取动态参数的控件的id，关于datawidget规则请查看控件id

如果不需要使用动态参数，那么datawidget, datamethod, datascript, dataparams这几个属性可以不设置。

datamethod

获取动态参数的方法

datascript

获取动态参数的脚本

dataparams

获取动态参数时需给定的参数, 可选，对象类型，k,v形式给定参数

获取动态参数说明

绑定任务获取实时数据作为参数，需要给定以下属性：

datawidget：字符串或控件类型，获取实时数据的控件
datamethod：字符串类型，控件的方法，使用params作为参数调用，获取实时数据的方法
datascript：字符串类型， js脚本，使用return返回数据
dataparams：参数 datamethod 优先datascript，从datawidget控件中通过datamethod

target

字符串或控件实例，目标控件实例，如果是字符串，使用”getWidgetById“函数获得目标控件实例，关于target规则请查看控件id

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，分别是replace，insert，和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 支持以下属性：

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事件处理方式来处理，但是在处理前需要显示信息，让用户确认是否继续，如果用户放弃则不处理事件，确认后正常的处理事件。

12 KiB Raw Blame History Unescape Escape

bricks的事件处理

bricks支持的事件处理类型

事件处理定义数据要素

wid

event

actiontype

conform

datawidget

datamethod

datascript

dataparams

获取动态参数说明

target

conform

urlwidget方法

method方法

script方法

registerfunction方法

event方法

定义需要确认的事件处理

actions方法

12 KiB

Raw Blame History