2642
AWTK是基于C語言開發(fā)的跨平臺(tái)GUI框架。本系列文章介紹如何從0開始創(chuàng)建AWTK應(yīng)用程序，包括搭建開發(fā)調(diào)試環(huán)境、使用AWTK創(chuàng)建Hello工程并在模擬器上運(yùn)行、將AWTK應(yīng)用程序移植到其它平臺(tái)。
創(chuàng)建工程
本篇文章我們來創(chuàng)建第一個(gè)AWTK程序，也就是HelloWorld程序，它總共包含兩個(gè)頁面，先來看下最終效果圖：
圖1 Hello工程兩個(gè)頁面的效果預(yù)覽首頁包含兩個(gè)控件，一個(gè)是顯示“Hello World”的label控件，另一個(gè)是顯示“跳轉(zhuǎn)頁面”文本的button控件，點(diǎn)擊按鈕時(shí)會(huì)跳轉(zhuǎn)到第二個(gè)頁面。第二個(gè)頁面包含顯示圖片的image控件、edit控件、進(jìn)度條progress_bar控件、label控件以及按鈕button控件。其中image控件具有位移動(dòng)畫，會(huì)循環(huán)地左右移動(dòng)。edit控件在修改值時(shí)會(huì)同步地改變進(jìn)度條的值和label控件的值。
1. 使用AWStudio創(chuàng)建項(xiàng)目
在開始設(shè)計(jì)UI前，我們?cè)谥鞍惭b好的AWStudio中新建一個(gè)項(xiàng)目，注意新建項(xiàng)目時(shí)類型要選擇“AWTK Application”。
圖2 使用AWStudio創(chuàng)建項(xiàng)目
AWTK Designer?是 AWStudio 中內(nèi)置的工具，專門用來制作 AWTK 應(yīng)用程序 UI 界面的實(shí)用工具，下圖是創(chuàng)建好項(xiàng)目后的界面：
圖3 創(chuàng)建項(xiàng)目后進(jìn)入AWTK Designer的UI設(shè)計(jì)界面
使用AWTK Designer設(shè)計(jì)UI界面
首先參照預(yù)覽圖，我們需要一個(gè)label（靜態(tài)文本）控件和button（按鈕）控件，我們?cè)谧髠?cè)的控件列表中找到這兩個(gè)控件并拖到中間的控件編輯欄中：
圖4 放置首頁的label控件與button控件
1. 設(shè)置首頁label控件與button控件文本及樣式
首先我們修改控件的文本以及字體樣式，修改控件文本有兩種方式，一種是雙擊控件直接修改，另一種是修改控件的text屬性。除了text屬性之外，還可以通過設(shè)置font_size屬性修改字體的字號(hào)，修改完畢后效果圖如下：
圖5 首頁label控件和button控件的字號(hào)設(shè)計(jì)與顯示效果
2. 新建第二個(gè)頁面并進(jìn)行布局
接下來我們?cè)O(shè)計(jì)第二個(gè)頁面，我們通過AWTK Designer上方的編輯-新建窗體選項(xiàng)新建一個(gè)窗口（Window），設(shè)置好窗體設(shè)置欄中的名稱，操作如下圖：
圖6 使用AWTK Designer新建窗口
按照?qǐng)D1的效果圖將第二個(gè)頁面所需控件拖拽出來，并進(jìn)行屬性調(diào)整。
另外，由于我們的edit只用來改變進(jìn)度條的值，這個(gè)值是非負(fù)整數(shù)，所以將edit的input_type屬性修改成“uint”。image控件顯示圖片前需要將圖片添加到資源瀏覽器，再到控件中設(shè)置image屬性為該圖片，如下圖：
圖7 添加圖片資源并應(yīng)用到image控件中
3. 設(shè)置控件的位移動(dòng)畫
接下來給圖片添加位移動(dòng)畫，我們選中image控件，在右側(cè)“控件編輯器”-“動(dòng)畫”選項(xiàng)中添加一個(gè)動(dòng)畫，動(dòng)畫類型選擇“位移”，然后對(duì)照下圖設(shè)置動(dòng)畫參數(shù)即可。
圖8 使用AWTK Designer設(shè)置控件動(dòng)畫在完成界面設(shè)計(jì)之后，我們點(diǎn)擊AWTK Designer上方的“打包”按鈕即可將頁面布局文件、資源文件進(jìn)行打包。
添加控件事件并編寫事件處理代碼
項(xiàng)目中我們需要用到按鈕的跳轉(zhuǎn)以及修改edit控件值同步改變進(jìn)度條值和label控件顯示文本的效果，我們可以用事件的方式來實(shí)現(xiàn)它們。
1. 使用AWTK Designer為控件添加事件
首先選擇主頁中的button控件，并在右側(cè)的“控件編輯器”中選擇“事件”選項(xiàng)，接著點(diǎn)擊選項(xiàng)卡右上角的加號(hào)并選擇“click”事件，添加后效果如圖所示。
圖9 添加控件click事件第二個(gè)界面中的button控件也是像上面一樣添加click事件、edit控件添加value_changed（值改變）事件，最后不要忘了保存與打包操作。
2. 在VSCode編寫控件事件處理代碼
我們?cè)赩SCode打開Hello工程的目錄，然后找到首頁“home_page.c”代碼文件，打開之后我們只需在AWTK Designer自動(dòng)生成的事件代碼中寫處理邏輯即可。因?yàn)辄c(diǎn)擊按鈕要跳轉(zhuǎn)界面，所以on_button_click要用到navigator_to接口，參數(shù)填的是要打開窗口的name屬性值。
圖10 事件處理函數(shù)和注冊(cè)事件代碼
在新窗口的按鈕也是類似，要用到navigator_back_to_home接口，代表回到主頁。
接下來編寫edit控件的value_changed值改變事件處理函數(shù)代碼，本質(zhì)是獲取用戶輸入的值，并將這個(gè)值設(shè)置到進(jìn)度條和label控件中，代碼如下：
圖11 edit控件value_changed事件處理代碼
運(yùn)行與調(diào)試
1. 運(yùn)行AWTK程序
在完成項(xiàng)目的界面布局設(shè)計(jì)以及業(yè)務(wù)邏輯代碼編寫之后，我們依次點(diǎn)擊AWTK Designer上方的“打包”、“編譯”和“模擬運(yùn)行”按鈕即可運(yùn)行程序。
圖12 打包、編譯以及模擬運(yùn)行項(xiàng)目
2. 調(diào)試AWTK程序
可以使用Visual Studio Code調(diào)試應(yīng)用程序，具體操作步驟可以瀏覽官方開發(fā)實(shí)踐文檔的《2.7?應(yīng)用調(diào)試》。
需要注意在launch.json配置demo程序的啟動(dòng)路徑，如下圖：
圖13 配置VSCode的調(diào)試程序路徑
到這里，我們就完成了Hello工程界面設(shè)計(jì)、業(yè)務(wù)邏輯代碼編寫以及調(diào)試運(yùn)行，如果你在開發(fā)過程中遇到了問題，歡迎在評(píng)論區(qū)進(jìn)行討論。
下載ECAD模型
