AWStudio內(nèi)的AWTK Designer組件是專門用來制作AWTK應(yīng)用程序UI界面的實用型工具，只要通過拖拽和點擊就可以完成復(fù)雜的設(shè)計，并且能夠隨時預(yù)覽效果圖。

AWStudio安裝

在AWStudio官網(wǎng)下載對應(yīng)的版本，本文下載AWStudio Ubuntu社區(qū)版。下載完畢后，在終端切換到*.deb文件所在的路徑，執(zhí)行sudo apt install ./*.deb。安裝完畢后，在開始菜單查看是否有AWStudio與AWTK Designer兩個軟件，有即安裝完畢。如圖1所示：

圖1安裝完成界面AWStudio

VS Code調(diào)試環(huán)境搭建

我們自己搭建的項目有時候需要調(diào)試，可以使用VS Code，如不需要可以跳過本節(jié)。
網(wǎng)上下載VS Code并且安裝。安裝完畢后下載安裝C/C++的插件，如圖2所示：

圖2 安裝C/C++插件

沒有網(wǎng)絡(luò)的用戶可以選擇VSIX安裝插件。

按ctrl+shift+p搜索，如圖3內(nèi)容所示。

圖3添加配置

在.json文件中的includePath添加AWTK源代碼的路徑。圖4可作為參考。

圖4json文件添加內(nèi)容

選擇一個.c文件，然后點擊VS Code左邊工具欄的“運行和調(diào)試”，點擊創(chuàng)建launch.json文件，點擊右下角的“添加配置”按鈕，選擇gdb啟動，修改.json文件中program與cwd的路徑，具體內(nèi)容參考圖5。

圖5launch.json文件內(nèi)容

保存文件后，即可添加斷點按F5調(diào)試了。

開發(fā)第一個工程

1. 新建工程

打開AWStudio，點擊新建工作區(qū)。用戶自己設(shè)置好自己的名稱與路徑。完成后新建項目，選擇AWTK Application，修改項目名稱。如圖6所示：

圖6新建項目

右擊項目，選擇打開，工程便會打開AWTK Designer。左邊有控件列表，下面的代碼部分是當(dāng)前窗口的應(yīng)用代碼，右邊是控件對象的屬性等（目前沒有加入控件所以為空）。如圖7所示：

圖7AWTK Designer界面

2. 加入控件

從AWTK Designer控件列表拖拽一個按鈕到窗口。點擊按鈕右邊便可以修改其屬性，例如名稱或者大小等。我們在拖拽進一個進度條，進度條可以設(shè)置初始值等屬性。

3. 配置事件

事件一般用來響應(yīng)各種行為。大多數(shù)事件是作為用戶行為的響應(yīng)而產(chǎn)生的。接下來配置我們的第一個事件。點擊按鈕，選擇事件，點擊右邊的+號，事件選擇click，就是按鈕按下事件。這時，下面的代碼區(qū)便自動生成了click的處理函數(shù)，函數(shù)功能需要我們補充，代碼可參考圖8：

圖8按鈕處理事件

處理函數(shù)的功能是每按下一次，進度條+5，到100重新開始計數(shù)。

4.設(shè)置定時函數(shù)

定時器可為用戶提供一些定時操作。我們再拖拽進一個進度條，然后在home_page_init(widget_t* win, void* ctx)函數(shù)添加定時器，如圖9所示：

圖9添加定時器

其中progress_bar_time為我們新添加的進度條，將最大值設(shè)置為1000。再添加一下定時器功能函數(shù)，如圖10所示：

圖10定時器功能

編譯模擬運行后，可以看到進度條會自己增加到1000，然后重新開始增加。

5.增加窗體

在左上角的“窗口編輯”界面中，點擊“新建窗體”圖標(biāo)，可選擇“新建窗體”窗口，如圖11所示：

圖11新建窗體

我們在原來的窗口再拖拽一個按鈕，并且設(shè)置好他的觸發(fā)事件為cilck。在事件函數(shù)中，添加函數(shù)navigator_to("new")，這樣按鈕按下就會打開我們新建的新窗體。

在新窗體中，拖拽進一個按鈕，設(shè)置它的事件為cilck。在事件函數(shù)中添加如下功能：

widget_t*win=WIDGET(ctx);
window_close(win);

即按下按鈕“是”，會關(guān)閉我們的窗體。

6.編譯，模擬運行

保存我們的工程，點擊編譯，編譯完成后點擊模擬運行，就可以看到我們自己搭建的AWTK界面了，如圖12所示：

圖12模擬運行