使用TouchGFX开发STM32界面应用之入门篇(三)-- 多屏呈现与MVP框架(1)

在上一讲中,我们简单讲解了touchgfx按钮控件的使用以及消息响应的编程方法。本文将介绍如何使用touchgfx开发多个屏幕界面的应用,并引出touchgfx编程使用的一个重要的基本概念:MVP框架模式。关于MVP的说明可参考这个链接。可以把MVP简单理解为一种“规范的”保存用户数据和访问数据的方法。

下面用一个模拟时钟的具体例子来说明。我们创建2个屏幕--screen,一个是时间设置界面,一个是数字时钟界面:


图一 设置界面


图二(1) 主界面,圆弧实际是伸缩的动画


使用TouchGFX开发STM32界面应用之入门篇(三)-- 多屏呈现与MVP框架(1)_第1张图片
图二(2)

具体实现如下:

一、启动 TouchGFX 4.10.0 Designer,创建一个新的Application(项目名称可自定):


使用TouchGFX开发STM32界面应用之入门篇(三)-- 多屏呈现与MVP框架(1)_第2张图片
图三

然后将屏幕上要放置的图形控件文件copy到对应的image子目录中(图形文件资源包下载地址):


使用TouchGFX开发STM32界面应用之入门篇(三)-- 多屏呈现与MVP框架(1)_第3张图片
图四

还需要做一个准备工作:新增一个25px的字体、供按钮显示提示文字之用,并设置40px字体的 Wildcard Ranges 为 0-9 (为了在Text Area控件中显示数字):


使用TouchGFX开发STM32界面应用之入门篇(三)-- 多屏呈现与MVP框架(1)_第4张图片
图五

第一个Screen为时钟参数的配置界面,外观如下:


使用TouchGFX开发STM32界面应用之入门篇(三)-- 多屏呈现与MVP框架(1)_第5张图片
图六

左半部分的跟“小时”有关的几个控件的配置参数如下:

使用TouchGFX开发STM32界面应用之入门篇(三)-- 多屏呈现与MVP框架(1)_第6张图片
图七

显示小时数值的 textAreaHour 的配置如下2个图片:


使用TouchGFX开发STM32界面应用之入门篇(三)-- 多屏呈现与MVP框架(1)_第7张图片
图八


使用TouchGFX开发STM32界面应用之入门篇(三)-- 多屏呈现与MVP框架(1)_第8张图片
图九

“增大”箭头:


使用TouchGFX开发STM32界面应用之入门篇(三)-- 多屏呈现与MVP框架(1)_第9张图片
图十

这里,向上箭头对应的图片,是从下图的 Released Image 下拉框、然后选择 Project、出现8个方格图标、再选择向上箭头得到的:


使用TouchGFX开发STM32界面应用之入门篇(三)-- 多屏呈现与MVP框架(1)_第10张图片
图十一

Pressed Image下拉框做同样处理、选择那个灰色的向上箭头即可。

“小时”下方的 Save 按钮是保存设置的小时数值,命名为 buttonSaveHour,配置如下:


使用TouchGFX开发STM32界面应用之入门篇(三)-- 多屏呈现与MVP框架(1)_第11张图片
图十二

右半边跟“分钟”设置有关的几个控件需做类似配置,篇幅所限、此处略过。

最下边的 Clock 按钮是切换到另一个Screen的,命名为 buttonClock,配置如下:


使用TouchGFX开发STM32界面应用之入门篇(三)-- 多屏呈现与MVP框架(1)_第12张图片
图十三

第一个Screen的界面配置完毕,下面添加各个按钮的消息响应代码。先在 Touchgfx Designer 中配置“动作触发”对应的C++语言处理函数:


使用TouchGFX开发STM32界面应用之入门篇(三)-- 多屏呈现与MVP框架(1)_第13张图片
图十四

其他3个调整数值的箭头做类似配置,函数名称(即上图中的 Function Name 输入框)分别设置为:buttonHourDownClicked、 buttonMinuteUpClicked 和 buttonMinuteDownClicked。以及:


使用TouchGFX开发STM32界面应用之入门篇(三)-- 多屏呈现与MVP框架(1)_第14张图片
图十五

类似地配置“分钟”下方的 Save 按钮,唯一不同的是把 Function Name 改为 buttonSaveMinuteClicked。好了,下面跳转到程序代码部分,点击 TouchGFX Designer 界面右下角的 “Browse Code”,弹出生成的项目文件代码所在的目录,找到 Application.sln:


使用TouchGFX开发STM32界面应用之入门篇(三)-- 多屏呈现与MVP框架(1)_第15张图片
图十六

双击  Application.sln 启动VS,进入代码编辑界面。如果VS启动后弹出如下提示窗:


使用TouchGFX开发STM32界面应用之入门篇(三)-- 多屏呈现与MVP框架(1)_第16张图片
图十七

一定要点击 OK 按钮、免去之后VS因编译版本不同而提示错误。(Touchgfx Designer 4.00自动生成的VS项目使用的是较旧版本的编译工具链、造成与VS2003默认的编译工具链不匹配,会产生错误。这个错误是可以通过重新配置正确的编译器版本来修正的,此处就不详述了)

在VS中打开 Screen1View.hpp 文件,添加2个记录小时、分钟数值的变量 hour、minute,以及消息响应函数的声明:


使用TouchGFX开发STM32界面应用之入门篇(三)-- 多屏呈现与MVP框架(1)_第17张图片
图十八

在类实现文件 Screen1View.cpp 中,添加函数消息体:


使用TouchGFX开发STM32界面应用之入门篇(三)-- 多屏呈现与MVP框架(1)_第18张图片
图十九

编译运行一下,看看第一个 Screen 是否能正确显示:


使用TouchGFX开发STM32界面应用之入门篇(三)-- 多屏呈现与MVP框架(1)_第19张图片
图二十

用鼠标分别点击小时和分钟的增减箭头按钮,看看数值增减是否正确、24小时以及60分钟越界后显示是否正确。还好,小时和分钟显示都是正常的 ^_^ !

这个例子内容稍多,只好拆成两部分来讲解,上半场先到这里,下半场请戳这里。

你可能感兴趣的:(使用TouchGFX开发STM32界面应用之入门篇(三)-- 多屏呈现与MVP框架(1))