記事本是一個常用的應用程序，在 AWTK 串口屏中，內置文件模型和文件選擇對話框，無需編寫一行傳統的代碼，即可實現一個簡單的記事本應用程序。記事本是一個很常用的應用，用來編輯和查看文本文件非常方便。在傳統的的串口屏中，開發一個記事本應用，即使可能，也是非常麻煩的事情。在 AWTK 串口屏中，內置文件模型和文件選擇對話框，實現一個簡單的記事本，不需要編寫代碼，設計好界面，添加綁定規則就好了，非常簡單。

1. 功能

不用編寫代碼，實現記事本應用。

2. 創建項目

從模板創建項目，將 hmi/template_app 拷貝 hmi/notepad 即可。

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

3. 制作界面

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

4. 添加綁定規則

4.1 文件名

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

4.2 文件內容

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

4.3 打開文件

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

4.4 保存文件

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

4.5 另存為文件

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

4.6 重新加載

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

4.7 退出

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

4.8 窗口模型

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

5. 初始化數據

無

6. 描述需要持久化的數據

無

7. 編譯運行

運行 bin 目錄下的 demo 程序：

8. 注意

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

完整示例請參考：demo_notepad。