AWTK 開源串口屏開發(fā)(12) - 記事本應(yīng)用

記事本是一個(gè)常用的應(yīng)用程序，在 AWTK 串口屏中，內(nèi)置文件模型和文件選擇對(duì)話框，無需編寫一行傳統(tǒng)的代碼，即可實(shí)現(xiàn)一個(gè)簡(jiǎn)單的記事本應(yīng)用程序。記事本是一個(gè)很常用的應(yīng)用，用來編輯和查看文本文件非常方便。在傳統(tǒng)的的串口屏中，開發(fā)一個(gè)記事本應(yīng)用，即使可能，也是非常麻煩的事情。在 AWTK 串口屏中，內(nèi)置文件模型和文件選擇對(duì)話框，實(shí)現(xiàn)一個(gè)簡(jiǎn)單的記事本，不需要編寫代碼，設(shè)計(jì)好界面，添加綁定規(guī)則就好了，非常簡(jiǎn)單。

1. 功能

不用編寫代碼，實(shí)現(xiàn)記事本應(yīng)用。

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

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

第一個(gè)項(xiàng)目最好不要放到其它目錄，因?yàn)榉诺狡渌夸浶枰薷呐渲梦募械穆窂剑仁煜ぶ笤倏紤]放到其它目錄。路徑中也不要中文和空格，避免不必要的麻煩。

3. 制作界面

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

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

4.1 文件名

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

4.2 文件內(nèi)容

用 mledit 控件顯示文件內(nèi)容，將文件內(nèi)容的文本屬性綁定到content變量。添加自定義的屬性v-data:value，將值設(shè)置為{content}。

4.3 打開文件

• 將打開按鈕的點(diǎn)擊事件綁定到browse命令。添加自定義的屬性v-on:click，將值設(shè)置為{browse,Args=open(filter=’.txt.c.cpp.md’,title=‘TextFile’)}。

4.4 保存文件

• 將保存按鈕的點(diǎn)擊事件綁定到save命令。添加自定義的屬性v-on:click，將值設(shè)置為{save}。

4.5 另存為文件

• 將另存為按鈕的點(diǎn)擊事件綁定到browse命令。添加自定義的屬性 v-on:click，將值設(shè)置為{browse,Args=saveas(filter=’.txt.c.cpp.md’,title=‘TextFile’)}。

4.6 重新加載

將重新加載按鈕的點(diǎn)擊事件綁定到reload命令。添加自定義的屬性v-on:click，將值設(shè)置為{reload}。

4.7 退出

將退出按鈕的點(diǎn)擊事件綁定到nothing命令。添加自定義的屬性v-on:click，將值設(shè)置為{nothing,QuitApp=true}。

4.8 窗口模型

• 指定窗口的模型為 file，路徑為${app_dir}/test.txt，自動(dòng)加載文件。

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

無

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

無

7. 編譯運(yùn)行

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

8. 注意

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

完整示例請(qǐng)參考：demo_notepad。