第 1 步 - 创建状态机控制应用程序状态

在本教程的这一步骤中，您创建状态机控制切换按钮，该按钮可打开/关闭显示身体、腿部和挡风玻璃的空调指示灯。您将创建设置指示灯何时可见的状态组和状态。您还将创建用于控制空调档位指示灯的属性类型。

(一）教程资产

/Tutorials/State managers/Completed 目录包含本教程已完成的 Kanzi Studio 工程。

本教程的起点资料是存储在 /Tutorials/State managers/Assets 目录中的 State managers.kzproj Kanzi Studio 工程。该工程包含完成本教程所需的节点：

名为Legs 的 2D 切换按钮 (Toggle button 2D) 节点包含显示腿部空调的指示灯图像。

名为Body 的 2D 切换按钮 (Toggle button 2D) 节点包含显示身体空调的指示灯图像。

名为Shield 的 2D 切换按钮 (Toggle button 2D) 节点包含显示挡风玻璃空调的指示灯图像。

名为AirCondition level 的 2D 堆栈布局 (Stack Layout 2D) 节点包含该应用程序用户界面的背景图像和图像节点，其中包含：
2D 按钮 (Button 2D) 节点，用于名为 Level 1、Level 2、Level 3 和 Level 4 的各空调档位指示灯。
每个2D 按钮 (Button 2D) 节点包含该按钮显示的档位指示灯图像。

为空调状态创建状态机
您可以使用状态机在应用程序中创建不同的状态。例如，您可以定义不同状态下按钮的外观和行为，例如当用户按下开按钮时，按钮如何反应。
在本节中，您将在应用程序中创建状态机和状态组，以控制空调指示灯的状态。使用状态机设置每个切换按钮中的图像何时可见。

要创建状态机：

在 Kanzi Studio 中打开存储在 /Tutorials/State managers/Assets 目录中的 State managers.kzproj 工程。
在素材库 (Library) 按下 Alt 并右键点击状态机 (State Managers) 中，选择状态机 (State Manager) 以创建状态机，并将其命名为 AC Controls。
在素材库 (Library) > 状态机 (State Managers) > AC Controls 中，选择状态组 (State Group)，按下 F2（重命名快捷键，在别的地方不一定有用）并将其重命名为 Indicators，将这两个状态重命名为 On 和 Off。

状态组包含各种状态，定义控制器属性和状态组中状态之间的迁移。使用Indicators 状态组设置身体、腿部和挡风玻璃指示灯图像何时可见。

在素材库 (Library) > 状态机 (State Managers) > AC Controls 中选择 Indicators 状态组并在属性 (Properties) 中设置：
（1）控制器属性 (Controller Property) 为ButtonConcept.ToggleState (Toggle State)

状态机使用控制器属性 (Controller Property) 设置该状态组中哪个状态活跃。您可以在这里使用切换状态 (Toggle State) 属性迁移到基于该属性值的状态。

AC Controls 状态机和Indicators 状态组显示为红色，直到为每个状态设置切换状态 (Toggle State)。
初始状态 (Initial State) 为AC Controls/Indicators/Off。
初始状态是应用程序首次启动时使用的状态。将空调设置为关闭，直到用户点击其中一个指示灯按钮。

在素材库 (Library) > 状态机 (State Managers) > AC Controls > Indicators 中选择On 状态并在属性 (Properties) 中将切换状态 (Toggle State) 属性设置为 1。
切换状态 (Toggle State) 属性在Off 状态默认设置为 0。
在On 状态按下 Alt 并右键点击，选择状态对象 (State Object) 以创建状态对象 (State Object)，将其命名为 IndicatorVisible，并在属性 (Properties) 中：
将目标对象路径 (Target Object Path) 设为 ./图像 (Image)
添加并启用可见性 (Visible) 属性。

状态对象定义特定状态的节点属性。在工程 (Project) 中，Body、Legs 和 Shield 节点各包含一张名为图像 (Image) 的图像。目标对象路径 (Target Object Path) 指向所有这些图像，并将其设置为可见。

为Off 状态重复上一步骤，但将状态对象命名为 IndicatorInvisible，确保可见性 (Visible) 属性被禁用。
在工程 (Project) 中选择 Legs、Body 和 Shield 节点，在属性 (Properties) 中添加状态机 (State Manager) 属性，并将其设置为 AC Controls。
通过设置状态机 (State Manager) 属性值，您可以设置状态机以控制所选节点及其子树。这种情况下，设置 AC Controls 状态机，以控制设置空调状态的指示灯按钮。

（二)定义档位按钮的状态

在本节中，您将学习创建属性类型，将其用于档位按钮的触发器中，来设置档位指示灯的状态。

List item

在AC Controls 状态机中创建另一个状态组。该状态组控制显示当前空调档位的指示灯。

要定义档位按钮的状态：

在素材库 (Library) > 属性类型 (Property Types) 中按下 Alt 并右键点击以创建属性类型，并在属性类型编辑器 (Property Type Editor) 中设置：
名称 (Name) 为Statemanagers.Level
数据类型 (Data Type) 为枚举 (Enumeration)
枚举 (Enumeration) 存储一组键值对，使每个唯一的键值解析为一个唯一的整数。
编辑器 (Editor) 为枚举下拉菜单 (Enumeration dropdown)
枚举选项 (Enumeration Options)
键 (Key) 为Level 1 和值 (Value) 为 0
键 (Key) 为Level 2 和值 (Value) 为 1
键 (Key) 为Level 3 和值 (Value) 为 2
键 (Key) 为Level 4 和值 (Value) 为 3
默认值 (Default Value) 为Level 1
点击保存 (Save)。

在素材库 (Library) > 状态机 (State Managers)中按下 Alt 并右键点击AC Controls状态机，选择状态组 (State Group) 并将其命名为 Level。
使用 Level 状态组控制当用户点击档位按钮时哪些档位指示灯可见。
在素材库 (Library) > 状态机 (State Managers) > AC Controls 中选择 Level 状态组，并在属性 (Properties) 中将控制器属性 (Controller Property) 设置为Statemanagers.Level。
在 Level 状态组创建状态，并将其命名为 1，设置当应用程序处于该状态时哪些指示灯可见：
选择Level > 1 状态并在属性 (Properties) 中将控制器属性 (Controller Property) 设置为Level 1。
在Level > 1 状态为三张用于指示空调档位的图像各创建一个状态对象 (State Object)： AC Active
Level 2 AC Active Level 3 AC Active Level 4

1 档 (Level 1) 无需状态机中的状态对象 (State Object)，因为当用户打开空调时使用图像将第一个指示条显示为绿色。

对于属性 (Properties) 中的每个状态对象 (State Object)，将目标对象路径 (Target Object
Path) 设置为指向工程 (Project) > AirCondition level > Level buttons 中的正确图像：

对于 AC Active Level 2，将目标对象路径 (Target Object Path) 设置为Level 2/AC Active Level 2 节点
对于 AC Active Level 3，将目标对象路径 (Target Object Path) 设置为Level 3/AC Active Level 3 节点
对于 AC Active Level 4，将目标对象路径 (Target Object Path) 设置为Level 4/AC Active Level 4 节点

对于每个状态对象 (State Object) 添加可见性 (Visible) 属性，并确保已禁用。当应用程序处于 1
状态，档位指示灯不可见。
在 Level 状态组中选择 1 状态，按下 Ctrl D 三次以复制该状态，并将这三个状态命名为 2、3 和 4。
选择在上一步骤中创建的每个新状态，在属性 (Properties) 中设置控制器属性 (Controller Property)：
对于 2 状态，设置为Level 2
对于 3 状态，设置为Level 3
对于 4 状态，设置为Level 4
设置在各状态下哪些档位按钮可见：

处于 2 状态时：
为 AC Active Level 2 启用可见性 (Visible) 属性
为 AC Active Level 3 禁用可见性 (Visible) 属性
为 AC Active Level 4 禁用可见性 (Visible) 属性
处于 3 状态时：
为 AC Active Level 2 启用可见性 (Visible) 属性
为 AC Active Level 3 启用可见性 (Visible) 属性
为 AC Active Level 4 禁用可见性 (Visible) 属性
处于 4 状态时：
为 AC Active Level 2 启用可见性 (Visible) 属性
为 AC Active Level 3 启用可见性 (Visible) 属性
为 AC Active Level 4 启用可见性 (Visible) 属性
当用户点击其中一个档位按钮时，应用程序显示在该状态下可见性 (Visible) 属性已启用的那些档位指示灯。

在工程 (Project) 中选择 AirCondition level > Level buttons，在属性
(Properties) 中添加状态机 (State Manager)，并将其设置为 AC Controls。

您可以设置状态机以控制所选节点及其子树。这种情况下，设置 AC Controls 状态机，以控制设置空调档位的指示灯按钮。

为档位按钮创建触发器，以打开/关闭指示灯：在工程 (Project) 中选择 Level 1 按钮，在节点组件 (Node
Components) 部分的按钮: 点击 (Button:Click) 触发器中点击添加 (Add)下拉菜单，选择设置属性 (Set
Property) 动作，然后设置：目标项 (Target Item) 为 … 目标属性 (Target
Property) 为Statemanagers.Level 目标属性特性 (Target Property Attribute)
为整体属性 (Whole property) 起始值 (Value From) 为固定值 (Fixed Value) 固定值
(Fixed Value) 为Level 1 使用设置属性 (Set Property) 动作设置当
Statemanagers.Level 属性值更改时应用程序的状态。
在节点组件 (Node Components) 中右键点击按钮: 点击 (Button:Click) 触发器并选择复制 (Copy)。
在工程 (Project) 中粘贴触发器到 Level 2、Level 3 和Level 4 节点，但在设置属性 (Set
Property) 动作中将固定值 (Fixed Value) 设置为 Level 2、Level 3 和 Level 4。

第 2 步 - 使用 JavaScript 脚本控制应用程序状态

在本步骤的第一节中，您将学习创建另一个状态机，以设置当用户打开/关闭应用程序时哪些指示灯可见。在本步骤的第二节中，您将学习添加 JavaScript 脚本来定义何时打开/关闭应用程序。

创建状态机以打开/关闭空调应用程序
在本节中，您将学习创建状态机，控制当打开/关闭应用程序时哪些指示灯可见。图像用于显示空调档位指示灯在空调关闭时变为灰色，当空调打开时，第一个档位指示条显示为绿色。

要创建状态机以打开/关闭应用程序：

在素材库 (Library) > 状态机 (State Managers) 中创建状态机，并将其命名为 OnOff Switch。

在 OnOff Switch 中将该状态组重命名为 AC OnOff，将两个状态重命名为 On 和 Off。

在素材库 (Library) > 状态机 (State Managers) > OnOff Switch 中选择 AC OnOff
状态组，并在属性 (Properties) 中将初始状态 (Initial State) 设置为 OnOff Switch/AC
OnOff/Off。

在 On 和 Off 状态中，为应用程序打开/关闭时显示的图像创建状态对象 (State Object)。例如，命名状态对象
Image。
选择 Image 状态对象并在属性 (Properties) 中添加和设置：
目标对象路径 (Target Object Path) 为 ./Level buttons
图像 (Image) 为： On
状态为 Levels on Off 状态为 Levels off
可测试命中 (Hit Testable) 为禁用

Levels on 图像包含档位指示条，其中第一条可见，并且Levels off
图像在应用程序关闭时将档位指示条显示为灰色。您设置状态机以显示当应用程序处于 On 和 Off 状态时的正确图像。
在 On 状态为每个档位创建状态对象 (State Object)，将其命名为 Level 1、Level 2、Level 3 和
Level 4，并在属性 (Properties) 中：

. [ ] 为 Level 1 状态对象 (State Object) 将目标对象路径 (Target Object Path) 设置为Level buttons/Level 1
. [ ] 为Level 2 状态对象 (State Object) 设置为Level buttons/Level 2，以此类推。
为每个状态对象 (State Object) 添加可测试命中 (Hit Testable) 属性，并确保已启用。启用档位指示灯的可测试命中 (Hit Testable) 属性，以在应用程序打开时启用档位按钮的用户输入，并在应用程序关闭时禁用命中可测试性。

在素材库 (Library) 中选择 Level 1、Level 2、Level 3 和 Level 4 状态对象，将其复制粘贴到
Off 状态，并在属性 (Properties) 中禁用可测试命中 (Hit Testable) 属性。
在工程 (Project) 中选择 AirCondition level 节点，在属性 (Properties) 中添加状态机
(State Manager) 属性，将其设为 OnOff Switch。为 AirCondition level 节点设置
OnOff Switch 状态机，以控制档位按钮。

在预览 (Preview) 中点击指示灯按钮可将其打开。
在下一节中，添加 JavaScript 脚本，并设置当所有指示灯按钮关闭时应用程序处于Off 状态。
在交互 (Interact) 模式中，您可以像在设备上一样在预览 (Preview) 窗口中与应用程序交互。您使用预览 (Preview) 工具时，在预览 (Preview) 窗口中点击，可切换到交互 (Interact) 模式。

使用 JavaScript 脚本控制状态机

在本节中，您将学习在应用程序中添加 JavaScript 脚本，以控制应用程序状态。设置应用程序，当 Legs、Body 和 Shield 切换按钮的值更改时执行该脚本。

在工程 (Project) 中选择RootPage 节点，在触发器 (Triggers) 部分的节点组件 (Node
Components) 中右键点击并选择添加触发器 (Add Trigger) > 常规 (General) > 属性变更时 (On
Property Change)。 Kanzi 会在设定的属性值发生更改时执行属性变更时 (On Property Change)
触发器。
在属性变更时 (On Property Change) 触发器中点击添加 (Add) 下拉菜单并选择执行脚本 (Execute
Script) 动作。

当属性变更时 (On Property Change) 触发器设置为关闭，Kanzi 执行在脚本编辑器 (Script Editor) 中选择的脚本。

在执行脚本 (Execute Script) 窗口中选择 + 创建脚本 (+ Create Script) 以创建脚本。
在脚本编辑器 (Script Editor) 中，写入要使用的脚本，以控制当打开/关闭应用程序时哪些指示灯可见。请参阅脚本参考。
例如，使用此脚本：
//*获取Body、Legs 和 Shield 切换按钮的切换状态。

var shield = node.lookupNode('./Shield');*
var shieldState = shield.getProperty('ButtonConcept.ToggleState');var legs = node.lookupNode('./Legs');
var legsState = legs.getProperty('ButtonConcept.ToggleState');var body = node.lookupNode('./Body');
var bodyState = body.getProperty('ButtonConcept.ToggleState');var stack = node.lookupNode('./AirCondition level');var levelButtons = node.lookupNode('./AirCondition level/Level buttons');

//当Body、Legs 或 Shield 切换按钮状态为 1 时，
//将 AC OnOff 状态设置为On。如果没有按钮状态为 1，将状态设置为Off，
//档位按钮状态设置为Level 1。

if (shieldState != 0 || legsState != 0 || bodyState != 0)
{stack.goToState('AC OnOff.On');
}
else
{stack.goToState('AC OnOff.Off');levelButtons.goToState('Level.1')
}

在工程 (Project) 中选择RootPage 节点，在属性变更时 (On Property Change) 触发器的节点组件
(Node Components) 中点击触发器设置 (Trigger Settings)，并在触发器设置编辑器 (Trigger
Settings Editor) 中设置：

*节点 (Node) 为屏幕 (Screens)/屏幕 (Screen)/RootPage/Body
属性类型 (Property Type) 为 ButtonConcept.ToggleState (Toggle State)

Kanzi 会在用户点击按钮时执行在上一步骤中创建的脚本，并更改切换状态 (Toggle State) 属性的值。*

为属性变更时 (On Property Change) 另外增加两个触发器，从第一个属性变更时 (On Property Change)
触发器中复制执行脚本 (Execute Script) 动作并将其粘贴到每个新的触发器，并在这些触发器的触发器设置编辑器
(Trigger Settings Editor) 中设置：

节点 (Node) 为屏幕 (Screens)/屏幕 (Screen)/RootPage/Legs 和屏幕 (Screens)/屏幕 (Screen)/RootPage/Shield
属性类型 (Property Type) 为ButtonConcept.ToggleState (Toggle State)

为每个 Body、Legs 和 Shield 按钮创建触发器。当用户点击其中一个按钮，Kanzi 执行脚本，应用程序检查每个指示灯按钮的状态。点击其中一个按钮可触发应用程序转到 On 状态。当所有按钮关闭，应用程序还将关闭档位指示灯。

在预览 (Preview) 中，当您点击任何要打开空调的区域，应用程序打开。一旦应用程序打开，就可以更改档位并打开和关闭其他区域。要关闭空调，关闭Body、Shield 和 Legs 指示灯按钮。

kanzi学习第二天-----创建一个状态机相关推荐

mysql用创建的用户登陆并修改表格_MySQL 基础学习二：创建一个用户表，并增删改查...
MySQL 基础学习二:创建一个用户表,并增删改查提示:MySQL 命令建议都用大写,因为小写运行时,还是翻译成大写的. 第一步,创建一个用户表 1,打开控制台,进入数据库 C:\Users\Ad ...
sandy引擎学习笔记：创建一个立方体
问题:如何利用sandy的类库去创建一个立方体呢? 首先,我们要先了解sandy类库的结构可以看到上面就官方网放出的类库表,有一些很容易理解,像sandy.events 这个和flash.event ...
Vue学习笔记：创建一个Vue实例
目录 1.访问Vue官网https://cn.vuejs.org,进入学习模块下的教程 2.创建页面index.html 3.通过script标签在head部分引入vue.js 4.在body部分创建 ...
DirectX11 学习笔记3 - 创建一个立方体和轴
该方案将在进一步的程序面向对象. 独立的模型类.更像是一个框架. 其中以超过遇到了一个非常有趣的问题,.获得一晚.我读了好几遍,以找到其他的列子.必须放在某些功能Render里面实时更新,而不是仅仅 ...
vue2.0学习——使用webstorm创建一个vue项目
背景:小白自学vue,翻阅了好多大神的博客,看了网上很多的视频,过程很吃力,好在功夫不负有心人,磕磕绊绊的也算入门了,现为自己vue的学习阶段做个小小的总结.vue2.0的基础知识的总结暂时不总结成文 ...
VB6编程：DirectX 2D图形学习日志1创建一个全屏窗口
2020/12/11:从今天开始学习DirectX 2D图形编程,从0基础开始,希望能坚持下去.有兴趣一起学习的小伙伴可以关注我,当我有一周以上的时间没有发文,请发帖给我鼓鼓劲,毕竟自学编程是一件很辛 ...
CAD二次开发学习笔记二(创建一个对话框)
打开资源视图->右击->添加资源->Dialog 双击对话框,弹出MFC类向导,输入类名FirstClass, 确定,创建对话框类.FirstClass.h与FirstClass.c ...
网安学习第一天——创建一个WNMP站点
文章目录创建WNMP站点步骤 1.下载小皮和DVWA环境以及sqli环境: 2.解压小皮安装包,并将小皮安装到自己的电脑: 3.解压DVWA环境,并将解压后的DVWA文件放到phpstudy_pro ...
我的Go语言学习之旅七：创建一个GUI窗体
在上次中,刚刚学过了弹窗效果,这里再接着学习一下如何创建一个窗体. 还是老路子,先上代码: package mainimport ( "github.com/lxn/go-winapi& ...

kanzi学习第二天-----创建一个状态机