AWStudio专业版

# 2. 基础功能案例

根据上文中的说明，我们知道使用 AWStudio 开发 AWFlow+AWTK 低代码应用的基本操作如下：

  • 使用 AWFlow Designer 编辑流图实现程序业务逻辑;
  • 使用 AWTK Designer 编辑UI文件实现程序界面设计。

本章将具体介绍在完成以上步骤后，如何将程序的业务逻辑和界面关联起来，即怎么实现二者之间的数据交互，并且还将介绍致远电子推出的物联网 IoT 云平台 ZWS 云 (opens new window)，演示如何实现设备和云端之间的数据交互。

# 2.1 流图数据传送到界面上显示

此处我们假设需要实现一个空调控制器，需要将当前的温度值显示到 GUI 界面上。

首先使用 AWStudio 新建一个工作区，并在工作区中分别新建一个 AWFlow 项目和一个 AWTK MVVM-JS 项目。其中 AWFlow 流图负责实现采集温度数据逻辑，再将数据传送到 AWTK GUI 界面上显示。

将 AWFlow 流图中的数据显示到界面上需要借助流图中的锁存器（即"hold"节点），AWTK GUI 可以读取该节点的数据并显示出来（通过 AWTK MVVM 机制将数据与控件进行绑定）。

# 2.1.1 定时随机生成一个温度值

为了方便演示，这里定时随机生成一个温度值，用于后续显示到界面上。首先在工作区中双击打开 AWFlow 项目，进入 AWFlow Desigenr 后，新建一张流图。

步骤一：将"节点列表"中"timer"类型的节点拖到流图编辑区，并将"定时周期"属性设置为 1000 ms，每隔一秒触发一次，如下图所示：

图2.1 添加定时器
图2.1 添加定时器

步骤二：将"节点列表"中的"random_number"类型的节点拖到流图编辑区，其输入口与上文中创建的"timer"节点相连，设置如下：

  • 将生成的随机数名称（''主题''属性）设置为"temperature"；
  • 将随机数的范围限制在 0 到 40 之前；
图2.2 生成随机温度值
图2.2 生成随机温度值

# 2.1.2 使用锁存器保存温度值

上一小节中我们定时生成了一个随机数作为温度值，接下来使用锁存器（"hold"节点）将其保存起来，步骤如下：

步骤一：将"节点列表"中"hold"类型的节点拖到流图编辑区，设置如下：

  • 设置"名称"属性为"temperature"。
  • 设置"显示名称"属性为"temperature"。
  • 设置需要保存的数据"Key"为上一个节点（random_number节点）传输过来的"payload"。
图2.3 使用锁存器保存温度值
图2.3 使用锁存器保存温度值

# 2.1.3 将温度值绑定到界面上显示

步骤一：在工作区中双击打开 AWTK MVVM-JS 项目，进入 AWTK Desigenr 后，默认打开主页 home_page，为其创建一个 ViewModel，如下图所示：

图2.4 新建ViewModel
图2.4 新建ViewModel

步骤二：参考本文第一章的内容导入我们上一小节中编辑好的流图，如下图所示：

图2.5 导入流图
图2.5 导入流图

步骤三：在主页 home_page 中创建一个 label 控件，如下图所示：

图2.6 创建label控件
图2.6 创建label控件

步骤四：将 label 控件的 text 属性与锁存器（"hold"节点）中保存的"temperature"温度值绑定起来，操作如下图所示，只需在”绑定的数据“一栏选择对应flow的节点：

/* 此处为温度值的访问路径：全局模型对象.hole节点.value值 */
/* > 备注：hole节点的名称为temperature */
objects_manager.temperature.value
图2.7 绑定温度值
图2.7 绑定温度值

# 2.1.4 运行效果

完成以上操作后，就把流图中的温度值绑定到界面的 label 控件上了，当温度值更新时会刷新到界面上。

我们可以通过 AWTK Designer 中的"模拟运行"来查看效果，如下图所示：

图2.8 点击"模拟运行"
图2.8 点击"模拟运行"
图2.9 将流图数据显示到界面上
图2.9 将流图数据显示到界面上

这里为了更好得展示效果，调大了 label 控件显示文本的字号。

# 2.2 界面数据传送到流图

此处依旧以实现一个空调控制器为例，假设点击界面上的按钮时，将界面上编辑框中输入的温度值传送到流图。在流图中可以对温度值做进一步处理，比如控制开关启动压缩机等。

该功能需要借助 AWFlow 中的界面事件接收器（即"ui_input"节点），它主要用于接收 AWTK GUI 界面中的事件输入，进而触发后续的流图逻辑运行。

# 2.2.1 添加界面事件接收器

打开 AWFlow Designer，将"节点列表"中"ui_input"类型的节点拖到流图编辑区，然后将节点的"名称"属性和”显示名称“属性都设置为"set_temperature"，如下图所示：

图2.10 添加界面事件接收器
图2.10 添加界面事件接收器

# 2.2.2 在界面中绑定事件并发送数据

步骤一：打开 AWTK Designer，在主页 home_page 中创建一个 edit 控件和一个button 控件，并调整它们的字体大小，方便后续演示，如下图所示：

图2.11 创建edit控件和button控件
图2.11 创建edit控件和button控件

步骤二：选中 button 控件，在控件编辑器中切换到"事件"页面，点击右上角的"+"按钮，为其添加一个点击（click）事件，事件设置如下：

  • 设置"动作"为"执行视图模型中的命令"。
  • 设置"命令的名称"为"objects_manager.set_temperature.run"，即触发上一小节在流图中添加 "ui_input" 节点（名称为"set_temperature"）。
  • 设置"命令的参数"为 edit 控件中的文本，操作如下图所示：
图2.12 设置命令的参数
图2.12 设置命令的参数

点击"命令的参数"输入框，打开"命令参数编辑"页面，更改''参数类''为''表达式列表''，点击“添加参数”，在“名称”与“值”一栏分别填写对应名称与表达式，点击“确定”按钮完成编辑。

  1. AWTK-MVVM 命令传参的相关介绍详见：awtk-mvvm/docs/11.command_binding.md (opens new window);
  2. FScript 脚本的介绍与具体用法详见：awtk/docs/fscript.md (opens new window)。

# 2.2.3 处理流图收到的温度数据

完成以上步骤后，模拟运行时点击程序中的按钮应该就会触发流图中对应名称的"ui_input"节点，根据 AWTK-MVVM 的命令传参规定 (opens new window)，命令的入参为字符串类型的，即"ui_input"节点收到的参数形式如下：

/* 此处在edit控件中输入33，再点击button控件，uiinput节点收到的参数如下 */
string?temp=33

如果传入多个参数，参数之间采用"&"符号相连，比如：string?args1=value1&args2=value2。

该数据不能直接使用，因此，我们需要使用"fscript"节点对"ui_input"节点收到的数据进行处理，步骤如下，操作如下图所示：

图2.13 处理流图收到的温度数据
图2.13 处理流图收到的温度数据

步骤一：打开 AWFlow Designer，将"节点列表"中"fscript"类型的节点拖到流图编辑区，然后将其与"ui_input"节点相连。

步骤二：编辑"fscript"，切换到"Function"页面，添加数据处理脚本，代码如下：

/* 打印uiinput节点收到的数据  */
print("uiinput节点收到参数为：" + msg.payload);

/* 调用 FScript 函数将字符串参数转化成 obj 类型 */
var obj = command_args_to_object(msg.payload)

/* 将温度赋值给 msg.payload，以便传给下个节点 */
msg.payload = float(obj.temp); 
print("设置温度为：" + msg.payload);  /* 打印设置的温度值 */

FScript 脚本中字符串处理的相关函数请参考：awtk/docs/fscript_str.md (opens new window)。

# 2.2.4 运行效果

在 AWTK Designer 中点击"模拟运行"启动程序，然后在 edit 控件中输入温度 33，点击"设置温度"按钮，可以看到控制台中的输出，如下图所示：

图2.14 将界面数据保存到流图中
图2.14 将界面数据保存到流图中
图2.15 控制台输出
图2.15 控制台输出

# 2.3 流图数据控制界面动画启停

此处简单地以一个按钮控制图片控件位移动画为例，实现的效果为：点击按钮时，将流图中控制动画的数据取反，界面根据流图中的数据开启或暂停动画，并在界面中显示数据的信息。

在 MVVM 中实现对动画的控制，主要是通过指定控件（widget_t）中的 "exec" 来执行特定的函数，关于 "exec" 具体的使用方法可以参考 《AWTK Designer MVVM使用指南》 (opens new window)中 MVVM 控制动画启停章节。

# 2.3.1 添加界面事件接收器

打开 AWFlow Designer，将"节点列表"中"ui_input"类型的节点拖到流图编辑区，然后将节点的"名称"属性和”显示名称“属性都设置为"button_click"，如下图所示：

图2.16 添加界面事件接收器
图2.16 添加界面事件接收器

# 2.3.2 改变控制动画启停的数据

本案例中，我们通过改变一个布尔类型的变量值来控制动画的启停。因此，需要使用 "fscript" 节点对数据进行更改，操作如下图所示：

图2.17 通过fscript节点修改数据
图2.17 通过fscript节点修改数据

步骤一：将"节点列表"中"fscript"类型的节点拖到流图编辑区，然后将其与"ui_input"节点相连。

步骤二：编辑"fscript"，切换到"Initialize"页面，进行数据初始化，代码如下：

/* 初始化 global.flag 为 false */
global.flag = false

步骤三：切换到"Function"页面，添加数据处理脚本，代码如下：

/* 对 global.flag 进行取反 */
global.flag = !global.flag
/* 将 global.flag 的值赋给 msg.flag */
msg.flag = global.flag

# 2.3.3 使用锁存器保存数据

上一节中，我们将 global.flag 的数据保存到了 msg.flag 中，接下来使用锁存器（"hold"节点）将该数据保存起来，操作步骤如下：

将"节点列表"中"hold"类型的节点拖到流图编辑区，设置如下：

  • 设置"名称"属性为"animate_flag"。
  • 设置"显示名称"属性为"animate_flag"。
  • 设置需要保存的数据"Key"为上一个节点（fscript节点）传输过来的"flag"。
图2.18 保存数据
图2.18 保存数据

# 2.3.4 界面设计

在本案例中，我们需要使用到的控件分别有:button、image 和 label，它们的作用分别是，控制动画启停，展示动画和显示控制动画的变量。将它们拖拽到界面编辑器上并进行布局，如下图所示：

图2.19 界面设计
图2.19 界面设计

# 2.3.5 为 image 控件创建动画与数据绑定

首先为 image 控件创建控件动画，操作步骤如下所示：

步骤一：选中 image 控件并在控件编辑器中的"动画"一栏点击"+"按钮；

步骤二：设置动画的参数，完成后点击确定创建动画。

图2.20 创建控件动画
图2.20 创建控件动画

创建完动画后，我们需要为 image 控件添加一个 "exec" 属性并对其进行属性绑定来控制动画的启停，操作步骤如下：

步骤一：为 image 控件添加 "exec" 属性；

图2.21 添加"exec"属性
图2.21 添加"exec"属性

步骤二：为 "exec" 属性设置属性绑定，绑定规则为：

objects_manager.hold_value ? 'start_animator' : 'pause_animator'
图2.22 设置属性绑定
图2.22 设置属性绑定

# 2.3.6 为 button 控件绑定命令

为 button 控件的 "click" 事件绑定流图中的 "button_click" 命令，操作步骤如下：

步骤一：选中 button 控件，在控件编辑器中添加 "click" 事件；

步骤二：为 "click" 事件绑定流图中的 "button_click" 命令，如下图所示

图2.23 事件设置
图2.23 事件设置

# 2.3.7 为 label 控件绑定数据

为 label 控件绑定流图上保存的数据，可以帮助我们观察数据与动画的关联性，操作如下图所示

图2.24 label绑定数据
图2.24 label绑定数据

# 2.3.8 运行效果

在 AWTK Designer 中点击"模拟运行"按钮启动程序，通过点击 button 可以实现控制 image 控件动画的启停，label 显示的数据也随着动画的启停在 0 与 1 之间变化。

图2.25 停止动画
图2.25 停止动画
图2.26 开启动画
图2.26 开启动画

本案例中，对数据的修改是在流图中进行的，如果在界面中使用 fscript 代码修改数据，在数据修改完成后需要调用 notify_view_props_changed() 触发数据修改事件，否则数据不会同步。

← 3. 高级功能案例 →