AWTK 開源串口屏開發(fā)(13) - 計算器應(yīng)用

計算器是一個常見的應(yīng)用程序，在 AWTK 串口屏中，利用 fscript 表達(dá)式計算函數(shù)，無需編寫一行傳統(tǒng)的代碼，即可實(shí)現(xiàn)一個簡單的計算器應(yīng)用程序。

1. 功能

計算器是一個很常見的應(yīng)用，比如在電子秤中，可能就需要這樣一個應(yīng)用。在計算器中會用到一些有意思的知識點(diǎn)，比如嵌入鍵盤，在數(shù)字輸入或密碼輸入也會用到。這里我們實(shí)現(xiàn)一個簡單的計算器，不需要編寫代碼，設(shè)計好界面，添加綁定規(guī)則即可。

在這里例子中，模型（也就是數(shù)據(jù)）里只有一個expr：

2. 創(chuàng)建項目

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

第一個項目最好不要放到其它目錄，因為放到其它目錄需要修改配置文件中的路徑，等熟悉之后再考慮放到其它目錄。路徑中也不要中文和空格，避免不必要的麻煩。

3. 制作界面

用 AWStudio 打開上面 calculator 目錄下的 project.json 文件。里面有一個空的窗口，做出類似下面的界面。

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

4.1 表達(dá)式（結(jié)果）

用 edit 控件顯示表達(dá)式，將表達(dá)式的文本屬性綁定到expr變量。添加自定義的屬性v-data:value，將值設(shè)置為{expr}。

4.2 輸入數(shù)字 0

將0按鈕的點(diǎn)擊事件綁定到fscript命令。添加自定義的屬性v-on:click，將值設(shè)置為{fscript, Args=set(expr, expr+‘0’)}。

4.3 輸入數(shù)字 1

將1按鈕的點(diǎn)擊事件綁定到fscript命令。添加自定義的屬性v-on:click，將值設(shè)置為{fscript, Args=set(expr, expr+‘1’)}。

4.4 輸入數(shù)字 2

將2按鈕的點(diǎn)擊事件綁定到fscript命令。添加自定義的屬性v-on:click，將值設(shè)置為{fscript, Args=set(expr, expr+‘2’)}。

4.5 輸入數(shù)字 3

將3按鈕的點(diǎn)擊事件綁定到fscript命令。添加自定義的屬性v-on:click，將值設(shè)置為{fscript, Args=set(expr, expr+‘3’)}。

4.6輸入數(shù)字 4

將4按鈕的點(diǎn)擊事件綁定到fscript命令。添加自定義的屬性v-on:click，將值設(shè)置為{fscript, Args=set(expr, expr+‘4’)}。

4.7輸入數(shù)字 5

將5按鈕的點(diǎn)擊事件綁定到fscript命令。添加自定義的屬性v-on:click，將值設(shè)置為{fscript, Args=set(expr, expr+‘5’)}。

4.8輸入數(shù)字6

將6按鈕的點(diǎn)擊事件綁定到fscript命令。添加自定義的屬性v-on:click，將值設(shè)置為{fscript, Args=set(expr, expr+‘6’)}。

4.9輸入數(shù)字7

將7按鈕的點(diǎn)擊事件綁定到fscript命令。添加自定義的屬性v-on:click，將值設(shè)置為{fscript, Args=set(expr, expr+‘7’)}。

4.10輸入數(shù)字8

將8按鈕的點(diǎn)擊事件綁定到fscript命令。添加自定義的屬性v-on:click，將值設(shè)置為{fscript, Args=set(expr, expr+‘8’)}。

4.11輸入數(shù)字9

將9按鈕的點(diǎn)擊事件綁定到fscript命令。添加自定義的屬性v-on:click，將值設(shè)置為{fscript, Args=set(expr, expr+‘9’)}。

4.12輸入運(yùn)算符+

將+按鈕的點(diǎn)擊事件綁定到fscript命令。添加自定義的屬性v-on:click，將值設(shè)置為{fscript, Args=set(expr, expr+‘+’)}。

4.13輸入運(yùn)算符-

將-按鈕的點(diǎn)擊事件綁定到fscript命令。添加自定義的屬性v-on:click，將值設(shè)置為{fscript, Args=set(expr, expr+‘-’)}。

4.14輸入運(yùn)算符*

將*按鈕的點(diǎn)擊事件綁定到fscript命令。添加自定義的屬性v-on:click，將值設(shè)置為{fscript, Args=set(expr, expr+‘*’)}。

4.15輸入運(yùn)算符/

將/按鈕的點(diǎn)擊事件綁定到fscript命令。添加自定義的屬性v-on:click，將值設(shè)置為{fscript, Args=set(expr, expr+‘/’)}。

4.16 輸入=計算結(jié)果

將=按鈕的點(diǎn)擊事件綁定到fscript命令。添加自定義的屬性v-on:click，將值設(shè)置為{fscript, Args=set(expr,str(eval(expr)))}。

4.17 刪除鍵<=

將<=按鈕的點(diǎn)擊事件綁定到fscript命令。添加自定義的屬性v-on:click，將值設(shè)置為{fscript, Args=set(expr,usubstr(expr,0,-1))}。

4.18 窗口模型

指定窗口的模型為 dummy(expr=’’)，dummy 是一個簡單的模型，只能存放數(shù)據(jù)，而且是控件或窗口私有的。expr=’'表示將 expr 初始化為空字符串。

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

無

6. 描述需要持久化的數(shù)據(jù)

無

7. 編譯運(yùn)行

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

8. 注意

本項目并沒有編寫界面相關(guān)的代碼，AWStudio 在 src/pages 目錄下生成了一些代碼框架，這些代碼并沒有用到，可以刪除也可以不用管它，但是不能加入編譯。

完整示例請參考：demo_calculator。