本文以一個(gè)家居控制應(yīng)用程序?yàn)槔?，介紹 AWTK 串口屏的開(kāi)發(fā)流程和 MVVM 數(shù)據(jù)綁定的高級(jí)用法。

1. 功能

這個(gè)例子稍微復(fù)雜一點(diǎn)，重點(diǎn)關(guān)注數(shù)據(jù)綁定。在這個(gè)例子中，模型（也就是數(shù)據(jù)）里包括一臺(tái)空調(diào)和一臺(tái)咖啡機(jī)：

2. 創(chuàng)建項(xiàng)目

從模板創(chuàng)建項(xiàng)目，將 hmi/template_app 拷貝 hmi/home_automation 即可。

項(xiàng)目最好不要放到其它目錄，因?yàn)榉诺狡渌夸浶枰薷呐渲梦募械穆窂?，等熟悉之后再考慮放到其它目錄。路徑中也不要中文和空格，避免不必要的麻煩。

3. 制作界面

界面和資源就直接用了 ZDP1440 顯示驅(qū)動(dòng)芯片例子：

• 主界面

• 空調(diào)界面

• 咖啡機(jī)界面

4. 添加綁定規(guī)則

里面的控件太多，為了不至于太累贅，不同類(lèi)型的綁定只舉一個(gè)例子：

完整示例可以參考 hmi/demo_app3

4.1 溫度設(shè)置

這種兩個(gè)按鈕帶一個(gè)靜態(tài)文本的組合很常見(jiàn)。

中間的靜態(tài)文本

右邊的按鈕（增加）

• 左邊的按鈕（減少）

v-on:click 是一個(gè)常見(jiàn)的事件，最好記住，可以提高效率。

4.2 模式選擇

這個(gè)用一組單選按鈕實(shí)現(xiàn)，將多個(gè)單選按鈕放到 group_box 里（將多個(gè)單選按鈕放到 view 里也可以，只是需要為每個(gè)單選按鈕編寫(xiě)綁定規(guī)則）。

• 如果綁定規(guī)則寫(xiě)到 group_box 上。這樣寫(xiě)即可：

如果使用 view 作為容器，則麻煩一點(diǎn)。需要為每個(gè)單選按鈕編寫(xiě)兩條綁定規(guī)則：

這種方式雖然麻煩，但是可以處理變量的值不是從 0 開(kāi)始或者不連續(xù)的情況。

4.3 模式顯示

模式用一個(gè)靜態(tài)文本顯示。問(wèn)題在于，模式在內(nèi)部用一個(gè)正整數(shù)表示，而顯示的是一個(gè)用戶(hù)可以理解的字符串。所以需要一個(gè)轉(zhuǎn)換函數(shù)one_of：

4.4 剩余時(shí)間

剩余時(shí)間用一個(gè)靜態(tài)文本顯示。問(wèn)題在于，剩余時(shí)間在內(nèi)部用一個(gè)正整數(shù)表示(秒數(shù))，而顯示的是“分鐘:秒”。所以需要一個(gè)轉(zhuǎn)換表達(dá)式：

4.5 隱藏視圖

在點(diǎn)擊開(kāi)關(guān)按鈕時(shí)，會(huì)自動(dòng)顯示或隱藏右邊的設(shè)置視圖。這是通過(guò)將視圖的可見(jiàn)性(visible)綁定到開(kāi)關(guān)的狀態(tài)實(shí)現(xiàn)的:

4.6 指定窗口的模型為 default

這是最簡(jiǎn)單也是最關(guān)鍵的一步:

嚴(yán)格的意義上說(shuō)，綁定規(guī)則也是一種代碼，不過(guò)相比于 C 語(yǔ)言，它有下面的優(yōu)勢(shì)：

無(wú)需編譯，直接運(yùn)行。

簡(jiǎn)單，通常只有一行。

易懂，聲明式的語(yǔ)法。

5. 初始化數(shù)據(jù)

修改資源文件 design/default/data/default_model.json, 將其內(nèi)容改為：

{ "空調(diào)_開(kāi)關(guān)" : false, "空調(diào)_模式" : 3, "空調(diào)_風(fēng)速" : 3, "空調(diào)_垂直風(fēng)向" : 1, "空調(diào)_水平風(fēng)向" : 1, "空調(diào)_溫度": 25, "咖啡_開(kāi)關(guān)" : false, "咖啡_類(lèi)型" : 1, "咖啡_溫度" : 60, "咖啡_口味" : 1, "咖啡_熱奶" : 1, "咖啡_奶泡" : 1, "咖啡_水量" : 150, "咖啡_剩余時(shí)間" : 200, "咖啡_開(kāi)始制作" : false}

注意：

• 如果文件內(nèi)容有中文(非ASCII字符)，一定要保存為 UTF-8 格式。
• 重新打包資源才能生效。

6. 編譯運(yùn)行

運(yùn)行 bin 目錄下的 demo 程序。

7. 使用 MCU 模擬器與之進(jìn)行交互

運(yùn)行 mcu/simulator 目錄下的 mcu_sim 程序，連接到 Localhost:2233。

• 在界面上修改參數(shù)，會(huì)看到模擬器上收到了對(duì)應(yīng)的事件：

• 在模擬器中設(shè)置變量咖啡_類(lèi)型的數(shù)據(jù)，HMI 端的界面也會(huì)自動(dòng)更新。

8. 注意

• 完整示例可以參考 hmi/demo_home2。
• 本項(xiàng)目并沒(méi)有編寫(xiě)界面相關(guān)的代碼，AWStudio 在 src/pages 目錄下生成了一些代碼框架，這些代碼并沒(méi)有用到，可以刪除也可以不用管它，但是不能加入編譯。