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。安裝完畢后,在開(kāi)始菜單查看是否有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++插件
沒(méi)有網(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)試了。
開(kāi)發(fā)第一個(gè)工程
1. 新建工程
打開(kāi)AWStudio,點(diǎn)擊新建工作區(qū)。用戶自己設(shè)置好自己的名稱與路徑。完成后新建項(xiàng)目,選擇AWTK Application,修改項(xiàng)目名稱。如圖6所示:
圖6新建項(xiàng)目
右擊項(xiàng)目,選擇打開(kāi),工程便會(huì)打開(kāi)AWTK Designer。左邊有控件列表,下面的代碼部分是當(dāng)前窗口的應(yīng)用代碼,右邊是控件對(duì)象的屬性等(目前沒(méi)有加入控件所以為空)。如圖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重新開(kāi)始計(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,然后重新開(kāi)始增加。
5.增加窗體
在左上角的“窗口編輯”界面中,點(diǎn)擊“新建窗體”圖標(biāo),可選擇“新建窗體”窗口,如圖11所示:
圖11新建窗體
我們?cè)谠瓉?lái)的窗口再拖拽一個(gè)按鈕,并且設(shè)置好他的觸發(fā)事件為cilck。在事件函數(shù)中,添加函數(shù)navigator_to("new"),這樣按鈕按下就會(huì)打開(kāi)我們新建的新窗體。
在新窗體中,拖拽進(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)行
-
Ubuntu
+關(guān)注
關(guān)注
5文章
563瀏覽量
29741 -
ui
+關(guān)注
關(guān)注
0文章
204瀏覽量
21371 -
AWS
+關(guān)注
關(guān)注
0文章
432瀏覽量
24360
發(fā)布評(píng)論請(qǐng)先 登錄
相關(guān)推薦
評(píng)論