交互逻辑基础概念
交互逻辑基础概念
事件面板用来编辑iVX中组件与组件之间的交互逻辑。一个“交互逻辑”包括两个部分，一是触发事件，二是响应动作。 比如，一个按钮组件被点击的时候，一个图片组件会隐藏，此时，“按钮组件被点击”，就是触发事件，“图片组件隐藏”，就是响应动作。
任何一个应用，都可以理解是成一系列触发事件与响应动作的有机组合。 比如，一个电商应用，是对用户的搜索、查看、购买等事件的一系列响应动作，一个聊天应用，是对用户的输入，发送，切换联系人等事件的一系列响应动作。 因此，通过配置一系列组件与组件之间的交互逻辑，就可以完成任意复杂的应用逻辑设置。
在iVX中，每个组件都有一系列预置的事件和动作（也称为方法），通过选择一个组件的事件，触发另一个组件的动作，就可以完成一个基本的交互关系配置：
多个组件可以配置**多组交互**关系，一个组件自己的事件也可以触发自己的动作：
注意，每一种类型的组件**预置的事件和方法可能不同，比如按钮组件，有点击、长按等事件，而变量组件，只有数据**改变事件。
#### 基础交互逻辑配置
在iVX中，一个基础的交互关系在事件面板中实现方法如下：
1、在对象树中，为需要添加触发事件的组件，添加一个事件
首先我们在对象树中。选中需要添加事件的对象，接着点击逻辑工具类中感叹号图标的事件图标，点击后即可添加一个事件， 添加之后，事件会自动选中 并出现事件面板：
2、选择触发组件的一个事件，完成触发事件的配置
接着我们在事件面板的触发事件的下拉菜单中、选择一个触发事件（例如点击），选择后就完成了触发事件的配置：
3、选择一个响应组件
接着单击事件面板中【选择对象】的前的鼠标图标，激活从对象树选择模式，在对象树中选择“图片”组件，即可完成相应组件的配置：
4、选择一个响应动作（方法）
接下来在相应组件的选择动作下拉菜单中、选择一个目标对象要执行的动作（例如“交替显示”）：
以上我们完成了一个最**基础的交互逻辑配置，其最终的实现效果**就会在我们点击按钮时交替显示图片。 #### 多个响应动作
在实际的应用中，一个事件通常对应多个响应动作，以实现复杂逻辑的拼接，通过鼠标悬停在动作块下的“加号”上，再点击动作按钮，可以在当前动作后再添加一个动作：
也可以使用事件面板工具栏，或右键菜单来插入动作块：
当一个触发事件下，有多个动作块时，动作将顺序执行，即先执行完上面的动作，再执行下面的动作。如果一个动作的执行需要时间，比如请求服务，API，那么也是先等API返回后，再执行下一个动作。 即在iVX的事件面板中，所有动作执行都是同步的。 如果需要执行异步操作，可以使用前端的触发器或后台的消息队列组件来实现。
#### 动作的执行参数（入参）
大多数的组件的动作，在调用时都需要指定一个或多个参数，即“入参”， 而不是像图片组件的“交替显示”这样可直接调用，不需要指定任何入参。 比如，前台的翻页动作，需要指定翻到哪一页，打开外链动作，需要指定需要打开的URL地址，文本的赋值动作，需要指定设置的具体的值。
在事件面板中选择一个有入参的动作时，会自动出现入参输入框：
入参可能是简单的列表形式来填写，比如下图中的“打开外链”动作，需要指定一个外部链接地址，以及选择是否在当前窗口打开：
上图中的“外部链接”的输入框，不是普通的输入框，而是iVX中通用的表达式输入工具，称为“公式编辑器”， 公式编辑器非常重要，其使用方法请参考“公式编辑器”介绍文档。
有一些动作的入参可能会相对复杂，比如数据库的输出：
入参的格式不同，是为了适应各种动作不同的需求，比如数据库输出，需要指定筛选条件，而筛选条件并不能简单通过一个输入框来指定，因此在动作块中根据不同参数的需求，提供了不同的输入结构。鼠标移上动作名称与参数名称旁边的小问号，可以获取到这个动作/参数的说明。
#### 动作的返回参数
当我们执行一个组件的动作后，某些时候这个动作可能有返回的数据， 比如，请求一个API来询问天气，发起请求后，这个API会返回天气数据。我们后续会用到这个返回数据，比如存入数据库，或显示在UI上。 这里，一个动作的返回数据，我们称之为返回参数，或回参。在事件面板中，可以在一个动作块后面的任意一个动作块，引用到这个动作的回参。 比如，在以下例子中，我们请求了两个API，然后将这两个API 的结果，作为另一个动作组的入参：
在公式编辑器 下拉菜单的“返回结果”分类中，可以选择到所有当前块-之前的动作块的返回结果。这些返回结果可以作为动作块的入参，条件块或循环块的参数来引用。
注意，在iVX新版事件面板中，所有动作的执行都是“同步”的，即从上到下按顺序执行， 即使这个动作执行需要时间，比如API请求，设置延时。因此下面的块总是可以拿到上面动作块（先执行）的结果。 ## 动作的条件执行
更新时间：2024-07-01 17:00:43
1.添加条件块
在程序编写中，条件判断是一个重要的组成部分。当一个事件被触发时，我们很多时候并不希望固定的执行一系列动作，而是根据当前的一些条件，来选择执行不同的动作，或向动作传入不同的入参。在iVX中，我们通过条件块来实现条件判断。
条件有两种常用的添加方法，一种是鼠标选中触发事件或情况块，再点击事件面板上方的蓝色“条件”按钮添加条件，这种方法会将条件添加到事件末尾； 第二种是鼠标悬停在事件下的+号上，点击出现的“条件”按钮，即可在该事件后添加一个条件块：
在iVX中，添加条件块时、会自动带出情况1，既一个条件判断分支， 关系运算符的左右两侧都是公式编辑器，单击关系运算符右侧的下拉菜单-可展开关系运算符，可以设置的条件包括判断是否等于、大于、包含、属于、类型为等，若左右俩边的公式编辑器满足条件，则进入该分支：
需要注意，与4.0的条件判断有所区别，在同一个条件块下只会进入其中一个分支，既满足任何情况便不会执行后续情况判断；若所有情况均不满足，则进入其余分支。
这里我们以一个成绩判断的事件为例，输入框中输入成绩，根据成绩的分数显示良好、及格与不及格。
我们先写入第一个条件：判断输入框中的成绩，如果输入框的成绩大于等于80分，则对结果文本赋值为“良好”；
我们将关系运算符修改为大于等于，并在左侧的公式编辑器中选择对象树中的成绩输入框，右侧输入数字80，在这种情况下，我们对条件分支中的动作进行设置，选择对象为对象树中的结果文本，选择动作为赋值，在赋值的公式编辑器里输入字符串“良好”：
#### 2.添加分支条件
当我们去设置显示及格的逻辑时，需要去添加一个条件分支，我们单击条件块的情况+图标，添加一个条件分支：
#### 3.添加多条件
我们在情况2中写入第二个条件：如果输入框中的成绩大于等于60分且小于80分，则对结果文本赋值为“及格”；
我们的逻辑涉及到了需要同时满足的多个条件，可以点击情况2右侧的+号添加多条件：
#### 3.1并列且条件
默认情况下多条件是“且”关系，既该情况块下的所有条件都需要满足，才会进入该分支，在我们示例中，输入框中的成绩需要大于等于60分且小于80分，我们去设置情况2的条件：
3.2并列或条件
单击多条件前的下箭头，可以把多条件从“且”关系切换到“或”关系，在“或”关系下，只要满足任意一个条件，则可进入该分支，下图为一个用户权限大于3或者为管理员都会进入该逻辑分支的事件面板截图：
#### 4.添加其余条件
如果条件块中的所有情况都未满足，便会进入其余分支：
我们单击条件块的+其余图标，添加一个其余分支
我们补齐其余分支中的动作
接着我们可以预览查看效果了：
#### 5.条件的嵌套
在某些情况下，也会存在多种条件的嵌套， 例如在我们上述案例中，增加一个需求，添加一个计数器，如果有100分的人，我们则让满分人数这个计数器+1；
所以我们选中 情况1，单击事件面板上侧的条件标签，在情况1内添加条件，并设置事件：
6.多条件的嵌套
多条件也会存在嵌套的情况，例如在一个并列的且关系条件中，有一个条件判断是或关系（任意满足一个即可），那么可以点击方框+号去添加一个嵌套的条件块，嵌套条件块前的“且”“或”决定整个嵌套块需要满足全部条件还是满足任意一个，这个整体的判断结果又会作为外部这个多条件块的一个条件，以此来实现多条件的嵌套。 下图是判断一个整数。是否为可被3或5整除的正整数：
上图事件面板的逻辑=等价为如下的代码逻辑，所以我们可以把每一个条件块理解为用括号括起来的一个整体：
动作的循环执行
1.循环简介
在实际的开发中，我们有时候会需要重复一个动作，直接一条一条添加动作会非常麻烦，甚至当我们不能预知动作发生的次数时，这种的方式就完全无法完成我们的期望，而事件面板上的循环正是用作此种用途。多次循环执行单个或多个动作时，可使用“循环”，在iVX中存在多种循环：
- 次数循环，循环到设定次数后自动终止；
- 条件循环，可添加限制条件，当满足条件时才执行循环内的动作；
- 数组循环，循环到遍历数组后自动终止；
循环的添加方式同条件，点击事件面板上方的紫色“循环”按钮添加循环，并将要循环的动作放在循环的内部，可以点击循环的下拉菜单，切换不同循环的类型：
2.次数循环
次数循环下，我们可以为次数循环设置一个循环的次数，同时循环体内的动作可以在公式编辑器上引用到每一次的循环次数（从0开始，最大值为循环次数 - 1）。以下为一个次数循环的案例：
我们让计数器初始值为0，经历6次循环，每次循环让计数器自加一个当前的循环次数 ，但需要注意循环次数是从0开始计算的，也就是0+0+1+2+3+4+5 = 15，因此最终计数器的值为15。
#### 3.条件循环
条件循环中可以添加条件筛选，当且仅当条件满足时，循环体内的动作才执行，当条件不满足就跳出 循环。
需要注意的是，在使用条件循环时，在每次循环的动作中一定记得去改变用作判断的变量，否则循环的条件永久成立，会导致死循环。
如上我们的条件循环中的条件为整数变量 （初始值）的值小于5，当条件满足时让计数器自加1。 但是我们没有在循环时改变整数变量的值，导致系统会一直执行这个循环，而导致后续的事件失效和网页的卡死。 要让循环能够在适当时刻结束，我们就必须在循环体的动作后。加上一条改变条件变量值的动作。 如下图，在每次循环后将整数变量的值都加1，最后就会在 整数变量= 5 时循环跳出。
#### 4.数组循环
数组循环下，我们需要为数组循环选择一个数组，同时循环体内的动作可以在公式编辑器上引用到每一次的循环对象， 如果数组选择为一维数组，那么循环对象就是一维数组中每个元素值； 如果数组选择为对象数组，那么循环对象就是每一个对象（如果你已经理解了循环创建，那么你可以将循环对象理解为循环创建中的当前数据）。以下为一个数组循环的案例：
5.终止循环（break）
循环体内的动作。可以在下拉菜单中选择为当前循环，目标动作会自动选择为终止循环， 当终止循环被执行时，会立即结束整个循环，并跳出循环体外（在终止循环后的事件不会再执行），所以终止循环。一般需配合条件一起使用。以下为一个终止循环的案例：
## 事件块的自动日志追踪
更新时间：2024-07-01 17:01:00
前后台均支持自动日志追踪，方便大家进行 debug，可在事件面板的右侧 点击log图标开启：
1.前端自动日志追踪
开启后、前端可在浏览器的检查模式 下在console中查看相关信息
它会打印开启自动日志追踪事件块对应的组件名称（name），公式编辑器里的入参（input），在该事件块下返回的结果（output）
2.后台自动日志追踪
同样的，后台也可在事件面板的右侧点击log图标开启自动日志追踪
开启日志后、可在日志中查看额外的log信息
若有收获，就点个赞吧
0 人点赞
