1550
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下載地址為：https://awtk.zlg.cn/awstudio/download.html
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可作為參考。
圖4?json文件添加內(nèi)容
選擇一個.c文件，然后點擊VS Code左邊工具欄的“運行和調(diào)試”，點擊創(chuàng)建launch.json文件，點擊右下角的“添加配置”按鈕，選擇gdb啟動，修改.json文件中program與cwd的路徑，具體內(nèi)容參考圖5。
圖5?launch.json文件內(nèi)容
保存文件后，即可添加斷點按F5調(diào)試了。
開發(fā)第一個工程
1. 新建工程
打開AWStudio，點擊新建工作區(qū)。用戶自己設(shè)置好自己的名稱與路徑。完成后新建項目，選擇AWTK Application，修改項目名稱。如圖6所示：
圖6?新建項目
右擊項目，選擇打開，工程便會打開AWTK Designer。左邊有控件列表，下面的代碼部分是當(dāng)前窗口的應(yīng)用代碼，右邊是控件對象的屬性等（目前沒有加入控件所以為空）。如圖7所示：
圖7?AWTK Designer界面
2. 加入控件
從AWTK Designer控件列表拖拽一個按鈕到窗口。點擊按鈕右邊便可以修改其屬性，例如名稱或者大小等。我們在拖拽進(jìn)一個進(jìn)度條，進(jìn)度條可以設(shè)置初始值等屬性。
3. 配置事件
事件一般用來響應(yīng)各種行為。大多數(shù)事件是作為用戶行為的響應(yīng)而產(chǎn)生的。接下來配置我們的第一個事件。點擊按鈕，選擇事件，點擊右邊的+號，事件選擇click，就是按鈕按下事件。這時，下面的代碼區(qū)便自動生成了click的處理函數(shù)，函數(shù)功能需要我們補(bǔ)充，代碼可參考圖8：
圖8?按鈕處理事件
處理函數(shù)的功能是每按下一次，進(jìn)度條+5，到100重新開始計數(shù)。
4.?設(shè)置定時函數(shù)
定時器可為用戶提供一些定時操作。我們再拖拽進(jìn)一個進(jìn)度條，然后在home_page_init(widget_t* win, void* ctx)函數(shù)添加定時器，如圖9所示：
圖9?添加定時器
其中progress_bar_time為我們新添加的進(jìn)度條，將最大值設(shè)置為1000。再添加一下定時器功能函數(shù)，如圖10所示：
圖10?定時器功能
編譯模擬運行后，可以看到進(jìn)度條會自己增加到1000，然后重新開始增加。
5.?增加窗體
在左上角的“窗口編輯”界面中，點擊“新建窗體”圖標(biāo)，可選擇“新建窗體”窗口，如圖11所示：
圖11?新建窗體
我們在原來的窗口再拖拽一個按鈕，并且設(shè)置好他的觸發(fā)事件為cilck。在事件函數(shù)中，添加函數(shù)navigator_to("new")，這樣按鈕按下就會打開我們新建的新窗體。
在新窗體中，拖拽進(jìn)一個按鈕，設(shè)置它的事件為cilck。在事件函數(shù)中添加如下功能：
widget_t*?win?=?WIDGET(ctx);
window_close(win);
即按下按鈕“是”，會關(guān)閉我們的窗體。
6.?編譯，模擬運行
保存我們的工程，點擊編譯，編譯完成后點擊模擬運行，就可以看到我們自己搭建的AWTK界面了，如圖12所示：
圖12?模擬運行
