专栏首页AIoT开源项目分享【DIY数字仪表】使用TouchGFX的MVP架构来实现GUI和硬件的双向交互(2)

【DIY数字仪表】使用TouchGFX的MVP架构来实现GUI和硬件的双向交互(2)

作者:KK

上期回顾:(点此连接跳转),上期介绍了如何将TouchGFX移植到rtthread操作系统。 本期将简单介绍一下TouchGFX的MVP架构使用方法。


演示视频:

1.如何理解TouchGFX中Screen的MVP架构

MVP的全称为Model-View-Presenter,Model提供数据,View负责显示,Controller/Presenter负责逻辑的处理。MVP与MVC有着一个重大的区别:在MVP中View并不直接使用Model,它们之间的通信是通过Presenter (MVC中的Controller)来进行的,所有的交互都发生在Presenter内部。 用一句话来概括MVP:所有数据仅能保存在称为 Model 的类对象(简单说就是一种文件)中,Presenter是视图(View)与Model之间的纽带,View只能通过Presenter来读取数据。 MVP优点:

  • 模型与视图完全分离,我们可以修改视图而不影响模型;
  • 可以更高效地使用模型,因为所有的交互都发生在一个地方——Presenter内部;
  • 我们可以将一个Presenter用于多个视图,而不需要改变Presenter的逻辑。这个特性非常的有用,因为视图的变化事件总是比模型的变化频繁;
  • 如果我们把逻辑放在Presenter中,那么我们就可以脱离用户接口来测试这些逻辑(单元测试)

Screen概念 在TouchGFX应用程序中,开发者可以根据项目需要创建任意数量的Screen。这里的Screen是指UI元素及其相关的业务逻辑。一个Screen通常包括两个内容:一个View,涵盖该Screen上显示的所有空间;一个Presenter,涵盖该Screen上所有的业务逻辑。 TouchGFX有自己的内存分配方案,它仅分配给最大的View和最大的Presenter,分配的RAM可以在应用程序的所有Screen上重用。 Model Model类是一个单例,始终处于活动状态,并具有两个目的:

  1. 存储UI的状态信息。切换Screen时,View和Presenter被释放,因此它们不能用于存储应在Screen切换期间保留的信息。所有,需要Model来存储UI的状态信息。
  2. 充当与后端系统的接口,在当前活动Screen之间来回传递事件。 Model类有一个自动设置指向当前活动Presenter的指针。当Model中发生更改时,会将更改通知给当前活动的Presenter。这是通过应用程序的Model Listener接口中的方法实现的。

View View类(或者更具体地说,是从TouchGFX View类派生的用户定义类)包含在当前Screen显示的所有控件。他还包含一个setScreen和一个tearDownScreen函数,当进入、退出当前Screen时,该函数会自动调用。通常,可以在setupScreen函数中设置控件。 View还包含了一个可以指向关联的Presenter的指针。该指针由框架自动设置。使用此指针,你可以将UI事件传递给Presenter。 Presenter Presenter类(也是从TouchGFX Presenter类派生的用户定义类)负责当前活动Screen的业务逻辑。它将接收来自Model的“后端”事件,以及来自View的UI事件,并决定采取哪种操作。 小结 在MVP架构中,所有数据只能保持在Model的类对象中,Presenter是View与Model之间的纽带,View只能通过Presenter来读取数据,而不能直接读取Model中的数据。

2.使用TouchGFX MVP来实现UI和硬件的双向交互

Model-View-Presenter 软件架构:

2.1 用户通过UI按键控制硬件LED

使用TouchGFXDesigner设计界面,添加toggleButton按钮

利用MVP架构填写代码:

2.2 把CPU使用率参数传递给UI显示

使用TouchGFXDesigner制作cpu实用率的自定义控件,然后将这个控件添加到需要的界面

cpu的使用率算法可以直接在rtthread的github中rt-thread\examples\kernel文件下找到,具体实现原理网上有很多分析的文章,这里就不再分析了。 下边直接把CPU的使用率参数通过Model层发送给Screen。

代码开源地址:https://gitee.com/Aladdin-Wang/hellotouchGFX

本文分享自微信公众号 - AIoT开源项目分享(Aladdin-Wang),作者:AIoTkk

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-07-27

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【DIY数字仪表】RT-Thread结合TouchGFX实战教程(完)

    2.命令行功能演示: 命令行添加了更多功能,不仅可以通过命令行调试系统,还可以通过命令行获取时间、天气信息、升级固件,也能把sd卡中的图片文件复制到spi fl...

    AIoT-KK
  • STM32通用FLASH管理软件包——SFUD/FAL

    本次介绍的两个软件包SFUD/FAL都与FLASH有关,并且都可以独立使用或者结合在一起使用,两个软件包都对操作系统无依赖,可以使用裸机移植,也很方便移植到各种...

    AIoT-KK
  • OOPC精要——撩开“对象”的神秘面纱

    由于前文《C/C++面向对象编程之封装》存在一些小错误或者难以理解的地方,Gorgon Meducer(傻孩子,PLOOC开源项目的作者)对此进行了修改和必要的...

    AIoT-KK
  • 架构设计基础知识整理

    From http://msdn.microsoft.com/en-us/library/ff647859.aspx

    哲洛不闹
  • Spring Boot Debug调试

    在使用maven插件执行spring-boot:run进行启动的时候,如果设置的断点进不去,要进行以下的设置。 1、添加jvm参数配置 在spring-boot...

    Java技术栈
  • Apache RocketMQ组建了解

    Name Server是RocketMQ的寻址服务。用于把Broker的路由信息做聚合。客户端依靠Name Server决定去获取对应topic的路由信息,从而...

    heidsoft
  • bootstrap模态框之加载页面至modal-boby

    思路:使用$("#reserveForm").html(result); result为Ajax请求controller所返回的页面

    week
  • java常见运算符

    java中常见的运算符。 其中 a|=b:意思就是把a和b按位或然后赋值给a, 按位或的意思就是先把a和b都换成2进制,然后用或操作。

    IT云清
  • ztree实现左边动态生成树,右边为具体信息功能

    王小婷
  • 【小程序】384- 如何一人五天开发完复杂小程序(前端必看)

    自定义导航栏布局下,我们可以完全控制导航栏样式,赋予导航栏更多交互及 UI 设计上的可能。如上图所示,Readhub 在导航栏中加入了设置按钮,喜茶在个人页中标...

    pingan8787

扫码关注云+社区

领取腾讯云代金券