【技术分享】AWTK开源串口屏开发(12)-记事本应用

原创 ZLG致远电子 2024-03-08 11:35

芯片现货市场行情分析 【有奖直播】工程师必看！3大行业10+应用场景的电流传感实战解析

记事本是一个常用的应用程序，在 AWTK 串口屏中，内置文件模型和文件选择对话框，无需编写一行传统的代码，即可实现一个简单的记事本应用程序。

记事本是一个很常用的应用，用来编辑和查看文本文件非常方便。在传统的的串口屏中，开发一个记事本应用，即使可能，也是非常麻烦的事情。在 AWTK 串口屏中，内置文件模型和文件选择对话框，实现一个简单的记事本，不需要编写代码，设计好界面，添加绑定规则就好了，非常简单。

1. 功能

不用编写代码，实现记事本应用。

从模板创建项目，将 hmi/template_app 拷贝 hmi/notepad 即可。

第一个项目最好不要放到其它目录，因为放到其它目录需要修改配置文件中的路径，等熟悉之后再考虑放到其它目录。路径中也不要中文和空格，避免不必要的麻烦。

用 AWStudio 打开上面 notepad 目录下的 project.json 文件。里面有一个空的窗口，做出类似下面的界面。

用 edit 控件显示文件名，将文件名的文本属性绑定到 filename 变量。添加自定义的属性 v-data:value，将值设置为 {filename}。

绑定属性	绑定规则	说明
v-data:value	{filename}	filename 是内置的变量，用于保存文件名。

用 mledit 控件显示文件内容，将文件内容的文本属性绑定到 content 变量。添加自定义的属性 v-data:value，将值设置为 {content}。

绑定属性	绑定规则	说明
v-data:value	{content}	content 是内置的变量，用于保存文件内容。

将打开按钮的点击事件绑定到 browse 命令。添加自定义的属性 v-on:click，将值设置为 {browse, Args=open(filter=’.txt.c.cpp.md’, title=‘Text File’)}。

绑定属性	绑定规则	说明
v-on:click	{browse, Args=open(filter=’.txt.c.cpp.md’, title=‘Text File’)}	browse 命令是内置的命令，参数 open 用于打开文件选择对话框。

绑定属性	绑定规则	说明
v-on:click	{save}	save 命令是内置的命令，用于保存文件。

将 另存为 按钮的点击事件绑定到 browse 命令。添加自定义的属性 v-on:click，将值设置为 {browse, Args=saveas(filter=’.txt.c.cpp.md’, title=‘Text File’)}。

绑定属性	绑定规则	说明
v-on:click	{browse, Args=saveas(filter=’.txt.c.cpp.md’, title=‘Text File’)}	browse 命令是内置的命令，参数 saveas 用于打开文件选择对话框。

绑定属性	绑定规则	说明
v-on:click	{reload}	reload 命令是内置的命令，用于重新加载持久化的配置，命令要用英文大括号括起来。

将退出按钮的点击事件绑定到 nothing 命令。添加自定义的属性 v-on:click，将值设置为 {nothing, QuitApp=true}。

绑定属性	绑定规则	说明
v-on:click	{nothing, QuitApp=true}	nothing 命令是内置的命令，用于什么都不做，QuitApp=true 表示退出应用。

绑定属性	绑定规则	说明
v-model	file(path=${app_dir}/test.txt, auto_load=true)	file 是内置的模型，用于保存文件内容，path 是文件路径，auto_load=true 表示自动加载文件。