# bricks的事件处理 bricks的事件处理是在控件描述文件的binds区域中添加事件处理说明来实现的 ## bricks支持的事件处理类型 * urlwidget * method * script * registerfunction * event 例外还支持一种混合型 * actions ## 事件处理定义数据要素 所有事件处理类型都有的数据要素有 ### 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, 分别是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](registerfunction.md) 支持以下属性: * rfname:字符串,已注册的函数名称 * params:对象类型,调用注册函数时作为参数传递给注册函数。 ``` ``` 在上述例子中,使用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事件处理方式来处理,但是在处理前需要显示信息,让用户确认是否继续,如果用户放弃则不处理事件,确认后正常的处理事件。