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

AWStudio安裝

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

圖1安裝完成界面AWStudio

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

我們自己搭建的項(xiàng)目有時(shí)候需要調(diào)試，可以使用VS Code，如不需要可以跳過(guò)本節(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)容

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

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

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

開發(fā)第一個(gè)工程

1. 新建工程

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

圖6新建項(xiàng)目

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

圖7AWTK Designer界面

2. 加入控件

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

3. 配置事件

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

圖8按鈕處理事件

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

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

定時(shí)器可為用戶提供一些定時(shí)操作。我們?cè)偻献нM(jìn)一個(gè)進(jìn)度條，然后在home_page_init(widget_t* win, void* ctx)函數(shù)添加定時(shí)器，如圖9所示：

圖9添加定時(shí)器

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

圖10定時(shí)器功能

編譯模擬運(yùn)行后，可以看到進(jìn)度條會(huì)自己增加到1000，然后重新開始增加。

5.增加窗體

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

圖11新建窗體

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

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

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

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

6.編譯，模擬運(yùn)行

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

圖12模擬運(yùn)行