技術(shù)分享 | 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=‘Text File’)}。

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=‘Text File’)}。

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。