# 3. 界面操作与说明

下面详细介绍如何使用Studio。

Studio需要登录并激活许可后才能正常使用。关于许可的更多信息,请参阅下文第四章。这里假定Studio已激活许可。

# 3.1 主界面

图3.1 主界面
图3.1 主界面

新建或打开一个空的工作区后,Studio会进入主界面。主界面可分为如上图所示的若干个区域,下面分别对各个区域进行详细介绍。

# 3.2 新建/打开工作区

Studio以工作区的形式来管理各类项目,因此,第一步我们先新建或打开一个工作区。

一个工作区中可以新建或导入多个项目。

# 3.2.1 新建工作区

选择【菜单栏】→【文件】→【新建工作区】,弹出下图,设置好工作区名称和路径后,点击"确定"按钮,就可以创建一个空的工作区。

图3.2 新建工作区
图3.2 新建工作区

# 3.2.2 打开工作区

选择【菜单栏】→【文件】→【打开工作区】,弹出下图,选择工作区文件,然后打开工作区。也可以点击上一小节图中的"打开工作区"按钮或双击最近的工作区,打开相应的工作区。

图3.3 打开工作区
图3.3 打开工作区

打开工作区时选择文件名为"workspace.json"的工作区文件。

# 3.3 新建/导入项目

新建工作区后,项目列表为空,可以通过新建或者导入项目,将项目添加到工作区。

# 3.3.1 新建项目

有下面几种方式新建项目:

方式一:选择【菜单栏】→【项目】→【新建项目】,弹出"新建项目对话框",如下图所示。

方式二:主界面中"项目列表"中的"+"新建项目按钮,弹出"新建项目对话框",如下图所示。

只有在打开工作区后,才能新建项目。

图3.4 新建项目
图3.4 新建项目

选择好新建项目的方式后,在弹出的"新建项目对话框"中,可以选择对应的项目类型,然后点击"确定"按钮,该项目将会被添加到"项目列表"中,各个项目类型的具体介绍如下:

  • AWTK Application:基于AWTK的GUI应用程序,可以使用XML描述UI、C语言实现逻辑,可以通过AWTK API直接访问Widget。
  • AWTK MVVM C Application:基于AWTK和MVVM的GUI应用程序,可以使用XML描述UI、使用C语言实现View Model,无须关心AWTK API,通过绑定规则和View Model的实现即可开发一个应用。
  • AWTK MVVM JS Application:基于AWTK和MVVM的GUI应用程序,与AWTK MVVM-C Application的区别是使用JS语言实现View Model。
  • AWTK Custom Widget Library:基于AWTK的自定义控件库,导入AWTK Designer后可以像内置控件一样编辑和实时预览显示效果。
  • AWFlow Application:基于AWFlow的应用程序,可以通过节点+流图的形式快速开发应用,可以作为MVVM项目的Model。

# 3.3.2 导入项目

有下面几种方式导入项目:

方式一:选择【菜单栏】→【项目】→【导入项目】,弹出下图。

方式二:点击主界面"项目列表"中的导入项目按钮,弹出下图。

只有在打开工作区后,才能导入项目,导入项目时选择文件名为"project.json"的项目文件。

图3.5 导入项目对话框
图3.5 导入项目对话框

# 3.4 保存所有

可以双击主界面"项目列表"中的项目(假设项目列表不为空),打开对应的Designer。如果该项目中的文件在Designer中被修改了,则可以选择【菜单栏】→【项目】→【保存所有】,保存被修改的文件。

# 3.5 中英文切换

Studio启动时,默认使用的语言是"简体中文"。Studio目前提供了两种语言供用户选择:"简体中文"和"English"。用户可以选择【菜单栏】→【简体中文/English】进行语言的切换,如下图所示。

图3.6 中英文切换
图3.6 中英文切换

# 3.6 项目列表

# 3.6.1 右键菜单

在项目列表区域,不同节点显示的右键菜单也不相同。常用的右键菜单操作如下图左侧所示,具体操作说明如下:

图3.7 项目列表右键菜单和删除对话框
图3.7 项目列表右键菜单和删除对话框

(1) 打开:

  • 根据项目类型打开对应的Designer。
  • 仅在项目节点显示该选项,也可以通过双击打Designer。

(2) 删除:

  • 将项目从“项目列表”中删除,并弹出上图中右侧所示的对话框。
  • 如果该项目已通过Studio双击或右键打开,则删除时会同时关闭对应的Designer。
  • 如果该项目被添加到设备列表中,删除时,也会同步删除。
  • 仅在项目节点显示该选项。

(3) 重命名:

  • 修改项目名称,不会修改项目文件夹的名称。
  • 如果该项目被添加到设备列表中,重命名时,也会同步更新。
  • 仅在项目节点显示该选项。

(4) 在应用管理器显示:

  • 打开项目所在的路径。
  • 仅在项目节点显示该选项。

# 3.7 设备列表

# 3.7.1 设备上线和离线

设备列表在主界面的右侧区域,Studio可以自动搜索Enternet上安装了AWFlowRuntime的设备,显示在设备列表页面,同时支持动态显示设备的数量和状态。具体说明如下:

(1)设备上线:Studio发现设备后,设备将显示在网口分组;如果该设备之前处于离线状态,则将从离线分组移动到网口分组。

(2)设备离线:如果设备从Enternet上断开连接(比如拔掉网口或者关机),该设备将移动到离线分组。

# 3.7.2 应用下载

1. 下载应用基本流程如下:

(1)选择要下载的"AWTK MVVM JS Application"项目节点或"流图"节点,通过右键菜单"添加到设备"或拖拽的方式,将节点添加到"设备列表"中,如下图所示。

(2)点击设备节点中的"↓"下载按钮,将应用下载到对应的设备上。

同一设备下可添加0或一个"AWTK MVVM JS Application"项目节点,可以添加任意个"流图"节点。

图3.8 下载应用
图3.8 下载应用

2. 下载应用时,主要涉及的操作或状态说明如下:

(1)下载:如果设备处于在线状态且该设备下有应用(即"AWTK MVVM JS Application"项目节点或"流图"节点),则可以将应用下载到对应的设备下,并且状态栏中也会提示正在下载的设备,下载完成后,设备将会自动重启。处于离线状态下的设备,无法下载应用。

(2)停止下载:设备处于下载状态下,才能停止下载,并且将下载的提示信息从状态栏中删除。

(3)有更新:如果要下载到设备的应用内容发生变化(比如:添加、删除、修改资源文件,包括UI相关的文件、流图文件、代码文件),则该设备会显示"有更新",即表示设备上的应用与本地的不一致,如图2.9所示。此时,如果点击"下载"按钮,只会下载有更新的部分应用,而不会将全部应用重新下载到设备。

# 3.7.3 右键菜单

在设备列表区域,不同节点显示的右键菜单也不相同。常用的右键菜单操作如下图所示,具体说明可见下表。

图3.9 设备列表右键菜单
图3.9 设备列表右键菜单
右键菜单 网口 设备 设备(离线) 应用 说明
删除 可以删除选中的节点。
清空下载任务 可以删除该节点下的全部应用。
启动下载 可以下载该节点下的应用到对应的设备。
停止下载 可以停止将应用下载到对应的设备。
全部展开 可以展开该节点下的全部节点。
全部折叠 可以折叠该节点下的全部节点。

# 3.7.4 搜索设备

在设备列表中的搜索框(如上图所示),可以根据设备类型,搜索设备。

# 3.8 状态栏

图3.10 状态栏
图3.10 状态栏

状态栏用来显示一些信息以及提供一些快捷操作,说明如下:

  • 工作区路径:显示当前工作区的绝对路径。
  • 下载提示信息:显示当前正在下载的应用。
  • 消息中心:显示账户内未读消息的数量,单击可打开"消息中心",可以查看消息详情。