事件面板简介
更新时间:2023-04-04 09:31:58功能概述
事件面板是iVX项目中交互的基础,所有的事件触发后的动作都需在事件面板进行编写。
在事件面板中,我们可以设置和规定某一事件触发-后续发生的动作及这些动作执行的顺序。
事件面板构成
事件作为交互中不可或缺的一环,因而事件面板基于交互的四要素进行展开。
如上图所示,交互四要素中的触发对象-触发事件-目标对象以及目标动作这一核心的流程在事件面板上均很明确,但是针对这四个要素,需要注意:
- 触发对象并不能直接在事件面板上进行设置,在为某一个组件添加事件后,触发对象就自动绑定为该组件;
- 触发事件会随着触发对象的差异而有所差异,例如“前台”作为触发对象时会有“网址变化”这一触发事件,但该触发事件不会出现在 以“按钮”为触发对象的触发事件列表中;
- 目标对象可以任意的选择,目标对象选取的不同会影响到最后目标动作,对象之间所能执行的动作有较大差异;
- 目标动作是目标对象执行的具体动作,在目标动作中可以引用到事件参数(即某一事件触发时附带的该事件触发的相关信息,触发对象和触发事件会共同影响到事件参数的内容,如下图为点击事件触发时会附带上的信息,当触发事件变成滚动时就获取不到点击的X和Y坐标)。
除了交互的四要素外,事件面板上还可以进行更多内容的设置:
右侧可以为每一条语句添加备注。
事件面板的上端,“事件+”可以为同一触发对象添加多条触发事件,即某个组件作为触发对象的所有事件 都存在于同一个事件面板下;“循环”、“动作”等在按钮高亮时可以点击,为当前的触发事件添加相应的新的执行内容;“子层/同层”这一选择钮。控制当前要添加的新的执行内容、放在当前事件面板选择内容的同层或者子层。
事件面板与服务、动作组
在编写服务和动作组时,你大概会发现这两个组件的编写面板和事件面板极为相似。
实际上,服务和动作组编写的面板是一种特殊的事件面板。
如上为服务的编辑界面,触发对象与触发事件已经被限死,不能进行更改(也就不能再添加事件了),其余添加动作、循环和条件等的操作都和一般的事件面板相同。
动作
更新时间:2023-04-04 09:32:37动作的简介
在整个事件的流程中,动作可以看做是某一主体对触发对象、触发事件的响应。当一件事件触发后,所有后续发生和执行的内容都可以称作动作,它可以是一个赋值 的过程,也可以是某个组件的隐藏。
动作包含了交互中的两个要素—目标对象和目标动作,其中目标对象为该动作的主体,目标动作就是该动作的具体内容。
动作的添加
在事件面板中,有两种方式为事件添加动作:
- 点击事件面板上方按钮-添加动作,该动作添加到的位置会随着“子层/同层”按钮的值以及当前选中项变化,一般会添加到最后的位置;
- 点击某一个动作上的“+”号,会将该动作直接添加在下方。
此时该动作为空,我们需要为其指定目标对象和目标动作。
目标对象的添加-可以使用前面的三角指针在对象树上进行选择,或者直接在下拉列表中进行选择:
目标动作的添加只能通过下拉菜单进行选择,有的目标动作会用到参数,这时该动作的完整添加就需要去填写公式编辑器,填写完必要的参数后,该动作才能正常地执行(如下图,必须在公式编辑器中为该动作设置最大值和最小值,其才能正常地生成随机数)。
动作的执行
正常情况下,动作会在事件触发后按照事件面板添加动作从上到下的顺序执行,每个动作都会等上一个动作完成后才开始执行。
在事件面板中,我们可以为动作设置延时来改变执行的顺序,被添加延时的动作之后的其他动作不会等待延时的动作执行完成后才执行,同时被延时动作会在延迟时间结束后执行(如下图所示,其中延时时间单位为秒s)。
条件
更新时间:2023-04-04 09:33:14条件简介
在事件面板中为特定的动作添加条件,可以让项目的交互体验更加丰富完整。在交互中,我们并不总是希望每次事件触发都执行 我们所设定好的动作,而是希望触发之后有一定的条件限制动作的执行,只有满足了条件,动作才执行。 就像我们在注册账号的时候,我们希望输入的账号、密码不为空才能发起注册请求,毕竟当账号、密码其一为空时都会使注册失去意义。
根据条件添加的位置,条件分为两种——直接添加在触发事件后面的为附加条件,添加在触发事件下的是分支条件;每一个触发事件只能添加一个附加条件,而分支条件可以无限添加。
条件的添加和执行
上面我们对动作面板上的条件有一个基础的了解,接下来我们尝试一下如何将条件添加到我们的交互中。
附加条件和分支条件的添加有些许差异,事件的附加条件通过点击触发事件后的“+”添加,事件的分支条件则通过事件面板上方的蓝色“条件”按钮进行添加。
条件的添加重点在于条件的设置,我们可以设置的条件包括判断是否等于、大于、属于、类型为等(如下图)。
如果一个事件中存在多个条件判断,那么会依照从上到下的添加顺序进行判断并执行动作。如下图会先进行条件A的判断,满足则执行A下面的动作,否则结束A,进入条件B的判断,满足就执行,不满足则进入C的判断……以此类推,是以单线程的模式进行条件判断和动作执行。
且和其余
在事件面板上为动作添加条件,可以选择“且”或者“其余”,其中“且”相当于JavaScript中的 if ,“其余”相当于 else if(当其余后不跟随条件设置,使用默认为空的设置时,相当于 else ),完全遵循JavaScript的语法规则。 一个“且” 可以搭配多个“其余”组合使用,事件触发时,“且”和“其余”构成了一个完整的条件判断,只会执行其中一个条件下的动作,一旦满足某一个条件便会执行动作并跳出“且” 和“其余”组合构成的条件判断。
如上图为根据数值变量 x 的大小来判断其为正负数的例子,在事件触发后,如果 x > 0 成立,便不会进入 x = 0 和后续的判断。
我们可以发现上图的例子中,不使用“其余”,全部使用“且”也可以达到相同的效果,但是这其中还是有本质的差异:下面的每一个判断都会执行,即便满足某一个判断后也不会跳出,而是进入下一个“且”的条件。
循环
更新时间:2023-04-04 10:29:25循环简介
在实际的开发中,我们有时候会需要重复一个动作,直接一条一条添加动作会非常麻烦,甚至当我们不能预知动作发生的次数时,这种的方式就完全无法完成我们的期望, 而事件面板上的循环正是用作此种用途。多次循环执行单个或多个动作时,可使用“循环”,在iVX中一共存在四种循环: + 次数循环即循环内设有限制条件,循环到设定次数后自动终止; + 条件循环即可添加限制条件,当满足条件时才执行循环内的动作; + 对象循环,只能在画布下使用,用于遍历某一类型的对象; + 随机对象循环,使用同对象循环,但是不会遍历所有该类型的对象,而是随机选取设定数目的对象进行循环。
循环的添加方式同条件,点击事件面板上方的紫色“循环”按钮添加循环,并将要循环的动作放在循环的内部。
次数循环
次数循环下,我们可以为次数循环设置一个循环的次数,同时循环体内的动作可以在公式编辑器上引用到每一次的循环次数(从0开始,最大值为循环次数 - 1)。以下为一个次数循环的案例:
我们让计数器初始值为0,经历6次循环,每次循环让计数器自加一个当前的循环次数,但需要注意循环次数是从0开始计算的,也就是0+0+1+2+3+4+5 = 15,因此最终计数器的值为15。
条件循环
条件循环中可以添加条件筛选,当且仅当条件满足时,循环体内的动作才执行,当条件不满足就跳出循环。
需要注意的是,在使用条件循环时,在每次循环的动作中。一定记得去改变用作判断的变量,否则循环的条件永久成立,会导致死循环。
如上。我们的条件循环中的条件为变量 x (初始值)的值小于5,当条件满足时让计数器自加1。但是我们没有在循环时改变 x 的值,导致系统会一直执行 这个循环,而导致后续的事件失效和网页的卡死。要让循环能够在适当时刻结束,我们就必须在循环体的动作后。加上一条改变条件变量值的动作。如下图,在每次循环后将变量 x 的值都加1,最后就会在 x = 5 时循环跳出。
对象循环
对象循环只能应用在画布下,其本质是选定某一类的对象然后遍历这些对象,每一次循环都是针对该类型不同的对象进行操作。
要实现对该类型每个对象的操作,对象范围一定是一个对象组;对象类型则必须是对象范围的子对象(即对象循环是在某个对象组内部进行);满足条件这部分的设置可以为空,如添加了条件则是对该类型对象按照此条件再进行一次筛选;循环体内的目标对象一定只能是通过下拉列表选择的“循环对象”,通过这些的设置,循环体内的动作才能执行。
如上图在事件面板上添加对象循环,在点击矩形1后会让对象组1内类型为“矩形”的所有对象变色。
随机对象循环
在理解对象循环的基础上,理解随机对象循环会非常容易。 随机对象循环相较对象循环多出了一个“随机个数”的值可以设置,其他的设置则是和对象循环完全一致,因而我们只需着重关注这一个值就能学会随机对象循环的使用。
对象循环会对满足条件的所有对象进行一次遍历,而随机对象循环会在满足条件的所有对象中筛选出随机个数的对象来进行遍历,这里的“随机个数”实质上决定了每一次事件触发后循环的次数,被随机选中的对象才会进入循环体被操作。
我们仍旧以对象循环中的事件做示例,当我们将随机个数设置为1时,我们的每一次点击只会改变随机一个对象的填充颜色(被随机到过的对象是有机会再次 被随机到)。
如果我们在随机对象循环中将随机个数空缺,不对其进行设置,其默认值就为符合条件的对象的总数,此时的随机对象循环就完全等同于对象循环。 ## 回调 更新时间:2023-04-04 10:30:34
回调简介
在没有特别设置的情况下,事件触发后动作会按照事件面板从上到下的顺序挨个执行,一个动作执行完成后才会执行下一个动作。但是有些动作的执行并不能立马完成而且也不能预估到其会花费的时间,那么事件面板上该动作后的其他动作就会被阻塞,同时一些动作的执行依赖于这些耗时动作的完成而必须等待其执行完成。 为了避免阻塞后续的其他事件,且保证需要等待的动作都可以正常执行,此时回调便可以发挥其作用。
将需要等待耗时动作完成的动作-放在耗时动作的回调内,便可以做到不阻塞后续动作,并且回调内的动作会在原本动作序列和耗时操作结束后正确执行。例如图片的上传、数据库输出等都是耗时操作,那么需要用到上传的图片的数据或数据库输出数据的动作都需要放在回调内。
以上传图片为例,要使用到的数据为—上传的图片·url地址,该数据需要在回调内才能获取到。
回调的添加
一般而言,耗时动作在添加之后会自动附带上其回调,我们只需要在回调内编写相应动作即可。
但是有的耗时动作不会自动附带其回调函数,如果在开发过程中想为这些耗时动作(例如在需要等动作组执行,数据库更新后返回等)添加回调,我们可以手动去添加,先在事件面板选中耗时动作,然后通过事件面板上方的橙色按钮“回调”来添加动作的回调。 某个动作能否添加回调、可以通过“回调”按钮是否高亮能够点击进行区分,选中某个动作后,该按钮高亮显示则表明能为其添加回调,否则不支持添加回调。
耗时动作可以添加多个回调事件,可以根据耗时动作的状态不同。添加不同的回调事件,例如图片上传的回调事件,其状态有多个,其中不同的状态下都可以分别添加回调的事件,以实现针对耗时动作不同的结果来执行相应的操作。
公式编辑器
更新时间:2023-04-04 10:53:52常见功能
在 iVX 中,每一个可由用户键入内容的赋值窗口均为“公式编辑器”。例如属性窗格中的宽度、高度等属性(需在数值绑定状态下,详见“数值绑定”),事件动作窗格中的赋值窗格,事件条件窗格的数值判定窗格:
公式编辑器不仅允许我们直接键入固定值(例如:为文本赋值为“这是一段文本”),还允许通过编辑公式的方法调用动态值,例如:
- 通过选取的方式调用其他对象的属性值,例如某输入框的内容,某图片的宽度,某变量的值等。几乎所有对象的所有属性都可以通过该方式调用。
- 通过下拉菜单调用系统内置参数,例如当前值、当前对象的属性值、循环次数、上传图片的地址等。下拉列表的内容依照引用对象的不同而有差异,通常仅能引用与当前对象有关联的一些参数;
- 数学运算符,例如四则运算、取整、取余等;例如,我们可通过公式设定某个图片的宽度为当前值的 100倍:
- 加入 javascript 数学函数及字符串或数组等的方法及属性;
- 对于公式编辑器中的非运算符、文本等内容,建议使用英文引号将内容括起来,否则可能无法得到计算结果。
- 对于变量、对象属性的绑定、系统内部参数的调用,应使用箭头或下拉列表选取,而不是直接输入变量名称。
基本用法
1. 变量的引用
当我们需要引用某个对象的属性值时,可使用公式编辑器的变量引用功能。点击赋值窗口前面的箭头按钮,此时对象树窗格将出现橙色外框,表明当前对象树处于可选取状态。此时点击其中的任意对象,即视为选中。 如下图,则选取了图片:
选中某对象后,可在赋值窗格的下拉列表中选取需要引用的属性。如下图:
除了通过选取方式,还可通过下拉列表引用某些变量。通常只能引用与该对象或当前事件有关联的变量,例如当前值、当前对象(属性值)、循环次数(对于处于循环中的动作)、返回参数(对于处于回调中的动作)等:
2. 数学对象及数学函数
除了基本对象,公式编辑器允许调用数学对象和数学函数完成一些数学运算任务。
常见的数学对象如下表所示:
调用数学对象的方法是 “ Math.XX(对象名)”,例如,
常见的数学函数如下表所示:
调用数学函数的方法是“ Math.XX(函数名)(Y)(参数名或参数值)”, 例如,使用向下取整函数将输入框的值取整并赋值给文本: