# 1. 操作流程
本文介绍了如何使用 AWStudio 开发低代码应用的流程，借助 AWFlow + AWTK MVVM 的开发模式，通过使用拖拽、点击和连线的方式完成界面设计与业务逻辑配置，只需编写少量脚本代码，即可完成一个带业务逻辑的 GUI 应用。
整体的流程是使用 AWFlow Designer 编辑流图配置业务逻辑，使用 AWTK Designer 设计应用界面，再通过配置 MVVM 绑定这两者。
# 1.1 基本流程
如下图所示，AWStudio 开发 AWFlow+AWTK 应用程序主要包括以下步骤：
- 使用 AWStudio 新建工作区；
- 使用 AWStudio 新建"AWFlow Application"项目（下文简称为 AWFlow 项目）到工作区，双击打开该项目会进入 AWFlow Designer，编辑流图，调试流图；
- 使用 AWStudio 新建"AWTK MVVM JS Application"项目（下文简称为MVVM JS项目）到工作区，双击打开该项目会进入 AWTK Designer，导入流图，设计好界面并设置流图与界面控件的MVVM绑定，可以在PC上模拟运行；
- 使用 AWStudio 将 MVVM JS 项目和 AWFlow 流图拖拽到到目标设备上，点击下载即可将项目资源下载到设备中。
# 1.2 新建工作区
AWStudio 以工作区的形式来管理各种项目，因此，使用 AWStudio 的第一步先新建或打开一个工作区。
AWStudio 在启动之后，会自动弹出"新建工作区"页面，如下图所示。
设置好项目名称和项目路径后，点击"确定"按钮即可新建一个工作区。打开新建的工作区后，需创建或导入项目。
# 1.3 新建项目
点击如下图所示的"+"按钮或"新建项目"按钮可以打开"新建项目"页面。
# 1.4 打开项目
在 AWStudio 打开项目的方式有以下两种：
- 双击"项目列表"里的项目；
- 用右键点击"项目列表"里的项目，会弹出菜单，选择"打开"；
打开项目后，对应的项目编辑器会被运行，下图的标志会变为绿色的圆点，表示项目已被打开。
# 1.5 编辑AWFlow项目
AWFlow 项目可以配置业务逻辑。通过编辑 AWFlow 流图，也就是加入需要的功能节点，并连线配置即可。
如下图所示，打开"新建项目"界面，选择"AWFlow Application"，新建一个 AWFlow 项目，双击工作区中的 AWFlow 项目，进入 AWFlow Designer 后可以按下列步骤进行编辑。
本节只简单介绍编辑 AWFlow 项目的基本方法，更多操作请看《AWFlow Designer用户手册》。
# 1.5.1 新建AWFlow流图
点击 AWFlow 主界面左侧流图列表上的"+"按钮，会弹出"添加流图"页面，如下图所示。
"添加流图"界面包括以下设置：
流图类型。流图类型包括以下两种：
- 流图。流图是 AWFlow 项目运行的基本单位，可以使用 runFlow 直接运行，也可以导入到 MVVM JS 项目，与界面绑定运行；
- 子流图。子流图是一种可以被嵌入其他流图里的可复用流图，它的编辑方法与流图一样，在嵌入其它流图时，可以像普通节点一样拖入使用。当编辑的流图的业务流程比较复杂的时候，子流图的灵活使用将大大优化开发效率。
流图名称。流图名称分为以下两种：
- 流图的名称用作 AWFlow 项目里的流图标识，当项目有多个流图时，可以通过设置不同的名字加以区分；
- 子流图的名字用作区分不同子流图的标识，也可以看作子流图节点的类型名称；
目标板型号。目标板型号指流图运行时的硬件平台。
在"添加流图"页面里设置"流图名称"，"流图类型"和"目标板型号"，点击"确定"按钮，可以添加并自动打开流图，如下图所示。
# 1.5.2 编辑AWFlow流图
打开流图后，可以按如下步骤进行编辑：
- 从节点列表中选中节点，拖动到编辑区；
- 双击节点，设置节点的属性；
- 点击节点输出端上的白色圆点，可以拖出一条白线，将它连接到另一节点的输入端，如下图所示。
AWFlow Designer 连接节点只能由输出端连接到输入端，而输出端连接输出端或者输入端连接输入端都是不合法的。
# 1.6 编辑AWTK MVVM项目
AWTK MVVM 项目可以实现应用程序的界面。设计好界面后，导入上文中提到的流图，并通过 MVVM 绑定设置将界面控件的属性、事件与流图节点的属性、命令绑定即可。
如下图所示，打开"新建项目"界面，选择"AWTK MVVM JS Application"，新建一个 MVVM 项目，双击工作区中的 MVVM 项目，进入 AWTK Designer 后可以按下列步骤进行编辑。
本节只简单介绍编辑 AWTK MVVM JS 项目的基本方法，更多操作请看《AWTK Designer MVVM 使用指南》。
# 1.6.1 编辑界面
新建或打开一个窗体，开始编辑界面，编辑界面的步骤如下：
- 从控件列表中选中控件，拖动到编辑区；
- 选中控件节点，设置控件的属性，如下图所示；
按照以上步骤完成界面的编辑，如下图所示。
# 1.6.2 新建视图模型
点击AWTK Designer底部的“新建模型”按钮，进入"新建视图模型"页面，可以按需更改名字或者路径，一般按照默认即可，点击"确定"按钮完成视图模型的创建，如下图所示。
# 1.6.3 导入流图
点击全局对象管理器窗口上的"导入流图"按钮，进入"选择导入的流图"页面；再点击下方"打开 Flow 项目"，选择要导入的流图所在的 AWFlow项目，在流图列表中选择要导入的流图，点击"导入"按钮可以导入流图，如下图所示。
导入流图后，会有一个以流图名称命名的对象，比如此处的"flow"的对象，点击左侧的下拉按钮展开可以看到流图中可用于 MVVM 绑定的属性和命令，如下图所示。
# 1.6.4 编辑MVVM绑定
1. 数据绑定
选中控件，在控件编辑器的属性页面上找到要绑定的属性，点击属性左侧的按钮，可以选择设置属性绑定。例如，选中一个"button"控件，将控件的"text"属性与流图里的"hold"节点的"value"属性绑定，设置如下图所示，程序运行时，"button"控件的"text"属性会被设置为"hold"节点的"value"属性的值，并随之变化而变化。
2. 命令绑定
选中控件，点击控件编辑器的事件页面上添加按钮，可以选择要添加的事件，之后设置事件动作为指定的ViewModel命令。例如，选中一个"button"控件，将控件的"click"（点击）事件与某个命令绑定，如下图所示，程序运行时，当"button"控件触发"click"事件时，程序执行设置的fscript脚本，在控制台打印"hello world"。
# 1.6.5 模拟运行
点击 AWTK Designer 工具栏上的打包按钮进行打包，之后点击模拟运行按钮，可以在 PC 上模拟运行应用，如下图所示。
# 1.7 下载应用
1. 连接设备
将运行有 runFlow 的开发板连接到电脑的网口，连接后可以在 Studio 的设备列表中找到该设备，如下图所示。
2. 下载
将要 MVVM JS 项目和流图拖到设备上，点击设备右侧的"↓"按钮，可以将应用运行时的资源下载到设备，并重启设备，如下图所示。
