此篇文章属于中等难度，需要具有TouchGFX开发的基础知识，请参见：

1）使用TouchGFX开发STM32界面应用之入门篇

2）使用TouchGFX开发STM32界面应用之入门篇（二）-- 按钮与消息响应例程

3）TouchGFX工程中hex目标文件的烧写方法（三）使用IAR

之前介绍了TouchGFX的一些基础知识，也动手练习了TouchGFX Designer 自带的一些demo程序，但是demo毕竟不等同于实际项目，对于一个GUI实际开发项目，我们应该如何入手呢？ST MCU开发，首先想到的一定是强大的CubeMX配置工具吧？！没错，使用STM32CubeMX来辅助配置一个GUI应用项目，可以起到事半功倍的效果。只是，配置一个带显示设备（一般同时还配有触屏）的嵌入式系统，同时还要跟TouchGFX交互，其过程是十分复杂的 ---- 且听我一一道来。

仍然以F769I-DISCO开发板为例。在TouchGFX Designer 4.10版本中，有2种769I板子的demo，我们选择“2.0”版本的，因为这个版本的会自动生成CubeMX的配置工程。新建一个TouchGFX 工程：

图一

界面上，放置一个800*480的背景图和一个按钮（按钮的作用是测试触屏驱动是否ok）：

图二

保存之后，运行模拟器，应该能看到背景图、按钮；按下按钮、应该能看到按钮变化。烧写到目标板上验证（这个步骤是必须的，之后的测试结果都将以目标板实际运行情况为准）：

图三

在目标板上按下按钮，应该能看到按钮的反应（按钮颜色有变化，仅此而已）。

查看 Designer 自动生成的代码，在工程主目录下，有一个 ioc 文件：

图四

先说明一下，这里使用的STM32CubeMX是5.1.0版本：

图五

 双击图四中的 ioc 文件，进入STM32CubeMX，如果弹出一个对话框：

图六

要求升级到CubeMX的新版本，在上图中选择 Migrate 。进入STM32CubeMX后，留意一下 TouchGFX 可执行文件的磁盘位置：

图七

如果安装 TouchGFX 时用的不是默认C盘位置，需要在上图中按实际安装位置调整一下。 检查 Project Manager ，默认参数即可：

图八

生成代码，可能会弹出一个询问对话框：

图九

这是因为CubeMX中有关 TouchGFX 模拟器的一些参数设置不正确，我们后续的工作似乎跟这个模拟器的关系不大，所以此处先忽略它，选择 Yes，生成IAR的工程代码。

然后进入到IAR，编译、烧写，目标板运行效果如下：

图十

这不是我们期望看到的界面呀？！ CubeMx配错了什么吗？ 别急，仔细看看，有部分图像是正确的；而且，按钮也在，只是方向上转了90°，对吧？嗯，是显示屏方向设置问题 ---- 希望横屏显示，结果却变成竖屏显示了！这个问题容易解决，找到相关代码修改即可：

图十二

在TouchGFX框架中，程序启动时需要先初始化各个硬件设备，其中包含对显示设备的初始化，会调用 MX_DSI_Init() 函数，其中对LCD的显示方向做了设置，CubeMX默认的设置是“纵向显示”，我们把它改成横屏显示，如上图所示，再次编译，烧写，目标板运行正常了：

图十三

按下按钮，能看到按钮有反应，说明触屏驱动也是ok的。

最后一步：添加按钮控制LED亮灭的功能。F769I-DISCO开发板上有2个用户LED，控制管脚为PJ13、PJ5：

图十四

图十五

回到CubeMX，将 PJ13、PJ5配置为输出口，起始电平为高电平：

图十六

再次生成IAR的代码，图十二中的代码会被CubeMX重写，所以需要重复图十二的步骤、设置横屏显示。然后在IAR中编译，烧写到目标板：

图十七

可以看到，板子运行后，有2个LED灯点亮了。

下面添加蓝色 Button 按钮按下后控制LED的代码。首先要回到 TouchGFX Designer 中，添加按钮的消息响应函数（自动生成消息处理框架）。在 CubeTest 工程主目录下，进入 TouchGFX 子目录，其中有后缀为 .touchgfx 的 TouchGFX Designer 的工程文件：

图十八

双击 CubeTest.touchgfx 文件，进入 TouchGFX Designer 界面，配置按钮的消息响应函数：

图十九

保存，运行 Run Simulator，或 Generate Code，重新生成TouchGFX框架代码。回到IAR（可能会提示“代码被改变了” ，此时选择“更新代码”），可以看到 Screen1ViewBase.hpp 文件被更新了：

图二十

然后，分别在 Screen1View.hpp 和 Screen1View.cpp 中添加消息处理函数的声明和实现：

图二十一

图二十二

编译、烧写，目标板运行如下：

图二十三

小结：

1）利用 TouchGFX Designer 生成一个具有基本界面的工程应用，同时自动生成了 CubeMX 配置文件（.ioc）。

2）如果需要响应按钮消息，则在 Designer 中生成消息处理函数（空函数，具体执行代码在IAR中写）。

3）双击 .ioc 文件进入CubeMX，配置GPIO等MCU需要实现的功能，生成 IAR 代码。

4）在IAR中，添加对应的消息体实现代码。编译、烧写。

5）如果中途需要修改GUI界面、增加控件消息处理，则找到 .touchgfx 文件，双击进入 TouchGHX Designer 进行相关修改。完成后，保存、生成TouchGFX代码。再返回IAR中重新编译。

遗留了几个问题还需处理：

1）用这种模式如何生成 KEIL 代码？

2）不使用Designer 自动生成的 ioc 配置文件，直接从CubeMX中应如何配置 TouchGFX？

     请移步至：

《使用STM32CubeMX创建TouchGFX应用程序（二）》，

《使用STM32CubeMX创建TouchGFX应用程序（三）-- 从零配置》。

3）如何用CubeMX直接生成横屏应用？

后文详解，敬请期待。（链接）