AWTK 开源串口屏开发(12) - 记事本应用

描述

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


 

1. 功能

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

awtk

2. 创建项目

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

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


 

3. 制作界面

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

awtk

4. 添加绑定规则

4.1 文件名

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

绑定属性

绑定规则

说明

v-data:value

{filename}

filename 是内置的变量,用于保存文件名。

4.2 文件内容

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

绑定属性

绑定规则

说明

v-data:value

{content}

content 是内置的变量,用于保存文件内容。

4.3 打开文件

  •  打开 按钮的 点击 事件绑定到 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 用于打开文件选择对话框。

4.4 保存文件

  • 将 保存 按钮的 点击 事件绑定到 save 命令。添加自定义的属性 v-on:click,将值设置为 {save}。

绑定属性

绑定规则

说明

v-on:click

{save}

save 命令是内置的命令,用于保存文件。

4.5 另存为文件

  • 将 另存为 按钮的 点击 事件绑定到 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 用于打开文件选择对话框。

4.6 重新加载

将 重新加载 按钮的 点击 事件绑定到 reload 命令。添加自定义的属性 v-on:click,将值设置为 {reload}

绑定属性

绑定规则

说明

v-on:click

{reload}

reload 命令是内置的命令,用于重新加载持久化的配置,命令要用英文大括号括起来。

4.7 退出

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

绑定属性

绑定规则

说明

v-on:click

{nothing, QuitApp=true}

nothing 命令是内置的命令,用于什么都不做,QuitApp=true 表示退出应用。

4.8 窗口模型

  • 指定窗口的模型为 file,路径为 ${app_dir}/test.txt,自动加载文件。

绑定属性

绑定规则

说明

v-model

file(path=${app_dir}/test.txt, auto_load=true)

file 是内置的模型,用于保存文件内容,path 是文件路径,auto_load=true 表示自动加载文件。


 

5. 初始化数据


 

6. 描述需要持久化的数据


 

7. 编译运行

运行 bin 目录下的 demo 程序:

awtk

8. 注意

本项目并没有编写界面相关的代码,AWStudio 在 src/pages 目录下生成了一些代码框架,这些代码并没有用到,可以删除也可以不用管它,但是不能加入编译。

完整示例请参考:demo_notepad。

 

打开APP阅读更多精彩内容
声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉

全部0条评论

快来发表一下你的评论吧 !

×
20
完善资料,
赚取积分