1567
AWStudio内的AWTK Designer组件是专门用来制作AWTK应用程序UI界面的实用型工具，只要通过拖拽和点击就可以完成复杂的设计，并且能够随时预览效果图。
AWStudio安装
在AWStudio官网下载对应的版本，本文下载AWStudio Ubuntu社区版。下载完毕后，在终端切换到*.deb文件所在的路径，执行sudo apt install ./*.deb。安装完毕后，在开始菜单查看是否有AWStudio与AWTK Designer两个软件，有即安装完毕。如图1所示：
图1 安装完成界面AWStudio下载地址为：https://awtk.zlg.cn/awstudio/download.html
VS Code调试环境搭建
我们自己搭建的项目有时候需要调试，可以使用VS Code，如不需要可以跳过本节。
网上下载VS Code并且安装。安装完毕后下载安装C/C++的插件，如图2所示：
图2 安装C/C++插件
没有网络的用户可以选择VSIX安装插件。
按ctrl+shift+p搜索，如图3内容所示。
图3 添加配置
在.json文件中的includePath添加AWTK源代码的路径。图4可作为参考。
图4 json文件添加内容
选择一个.c文件，然后点击VS Code左边工具栏的“运行和调试”，点击创建launch.json文件，点击右下角的“添加配置”按钮，选择gdb启动，修改.json文件中program与cwd的路径，具体内容参考图5。
图5 launch.json文件内容
保存文件后，即可添加断点按F5调试了。
开发第一个工程
1. 新建工程
打开AWStudio，点击新建工作区。用户自己设置好自己的名称与路径。完成后新建项目，选择AWTK Application，修改项目名称。如图6所示：
图6 新建项目
右击项目，选择打开，工程便会打开AWTK Designer。左边有控件列表，下面的代码部分是当前窗口的应用代码，右边是控件对象的属性等（目前没有加入控件所以为空）。如图7所示：
图7 AWTK Designer界面
2. 加入控件
从AWTK Designer控件列表拖拽一个按钮到窗口。点击按钮右边便可以修改其属性，例如名称或者大小等。我们在拖拽进一个进度条，进度条可以设置初始值等属性。
3. 配置事件
事件一般用来响应各种行为。大多数事件是作为用户行为的响应而产生的。接下来配置我们的第一个事件。点击按钮，选择事件，点击右边的+号，事件选择click，就是按钮按下事件。这时，下面的代码区便自动生成了click的处理函数，函数功能需要我们补充，代码可参考图8：
图8 按钮处理事件
处理函数的功能是每按下一次，进度条+5，到100重新开始计数。
4. 设置定时函数
定时器可为用户提供一些定时操作。我们再拖拽进一个进度条，然后在home_page_init(widget_t* win, void* ctx)函数添加定时器，如图9所示：
图9 添加定时器
其中progress_bar_time为我们新添加的进度条，将最大值设置为1000。再添加一下定时器功能函数，如图10所示：
图10 定时器功能
编译模拟运行后，可以看到进度条会自己增加到1000，然后重新开始增加。
5. 增加窗体
在左上角的“窗口编辑”界面中，点击“新建窗体”图标，可选择“新建窗体”窗口，如图11所示：
图11 新建窗体
我们在原来的窗口再拖拽一个按钮，并且设置好他的触发事件为cilck。在事件函数中，添加函数navigator_to("new")，这样按钮按下就会打开我们新建的新窗体。
在新窗体中，拖拽进一个按钮，设置它的事件为cilck。在事件函数中添加如下功能：
widget_t* win = WIDGET(ctx);
window_close(win);
即按下按钮“是”，会关闭我们的窗体。
6. 编译，模拟运行
保存我们的工程，点击编译，编译完成后点击模拟运行，就可以看到我们自己搭建的AWTK界面了，如图12所示：
图12 模拟运行
