From 5060f20ba8c2015760aa336bcb231341be5f0213 Mon Sep 17 00:00:00 2001 From: yumoqing Date: Mon, 13 May 2024 13:04:47 +0800 Subject: [PATCH] bugfix --- docs/cn/descjson.md | 380 +++++++++++++++++++++++++++++++++++++- examples/aaa.ui | 38 ---- examples/script_action.ui | 2 +- 3 files changed, 378 insertions(+), 42 deletions(-) delete mode 100644 examples/aaa.ui diff --git a/docs/cn/descjson.md b/docs/cn/descjson.md index c7fa598..d743608 100644 --- a/docs/cn/descjson.md +++ b/docs/cn/descjson.md @@ -16,8 +16,8 @@ widgettype是一个字符串属性。其值为Bricks中的所有控件类型或" 参见widgetBuild函数的desc说明 ## binds -一个数组,在控件上定义一到多个事件绑定,数组中的每一个元素定义一个绑定, -Bricks支持5种数据绑定 +列表属性,定义控件的事件处理,在列表中的每一项,定义一个事件处理, Bricks支持5种事件处理方法,分别是urlwidget, method, script, registedfunction和event + 每种绑定类型都支持下述属性 ### wid 字符串类型或控件类型,绑定事件的控件,缺省是binds坐在的构造控件。 @@ -42,13 +42,112 @@ datamethod 优先datascript,从datawidget控件中通过datamethod ### target 字符串或控件实例,目标控件实例,如果是字符串,使用”getWidgetById“函数获得目标控件实例 +### confform +如果一个事件处理需要用户确认,可以在事件处理中指定一个conform属性来引发,当此事件发生时,会弹出一个确认窗口,用户确认后才会处理此事件,否则不处理 + ### urlwidget绑定 +urlwidget事件处理方法是从后台获取一个控件描述文件,动态生成bricks控件,并将控件添加(添加,添加或替换)到事件处理指定的控件中。 urlwidget绑定需要一个options属性和一个mode属性,在此属性中需要 * url:字符串类型, 获取desc数据的url * mehtod:字符串类型,url调用的方法,缺省”GET“ * params:对象类型,调用的参数 绑定创建的控件添加到target控件中 + +请参考[例子](../../examples/urlwidget.ui) +``` +{ + "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:类型为字符串或控件类型, @@ -57,10 +156,126 @@ urlwidget绑定需要一个options属性和一个mode属性,在此属性中需 * 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) @@ -68,11 +283,170 @@ method绑定方法,将事件绑定到target控件的一个方法,并用param rfname:字符串,已注册的函数名称 params:对象类型,调用注册函数时作为参数传递给注册函数。 +``` + + + + + + + + + + + + + + + +``` +在上述例子中,使用bricks.RF注册了一个setText函数, 并在主控件的binds区域定义了当changetext按钮点击后调用注册函数“setText”来处理 + ### event 绑定事件,需指定target,触发target对象的一个事件 支持以下属性 dispatch_event:需触发的事件名 params:传递给事件的参数,处理函数可以使用evemt.params获得此参数 -作为参数调用target实例的方法 +``` +{ + "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一个消息 + diff --git a/examples/aaa.ui b/examples/aaa.ui deleted file mode 100644 index fe1632a..0000000 --- a/examples/aaa.ui +++ /dev/null @@ -1,38 +0,0 @@ -{ - "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":"script", - "target":"txt1", - "script":"this.set_text('estrdyfguihojkl')", - "dispatch_event":"gpc" - }, - { - "wid":"txt1", - "event":"gpc", - "actiontype":"script", - "target":"self", - "script":"alert('yield');" - } - ] -} diff --git a/examples/script_action.ui b/examples/script_action.ui index 0ebe0ee..0680b10 100644 --- a/examples/script_action.ui +++ b/examples/script_action.ui @@ -12,7 +12,7 @@ "event":"click", "actiontype":"script", "target":"self", - "script":"console.log(target, params, event);" + "script":"console.log(this, params, event);" } ] }