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:对象类型,调用注册函数时作为参数传递给注册函数。 +``` + + + + + +
+ + + + + + + + +