1. 引言TouchGFX 是专用于 STM32 的图形界面设计软件，可用来低成本开发优秀的图形界面，TouchGFX 现已变的越来越流行。为了帮助客户更加深入地理解和使用 TouchGFX ，本文介绍了 TouchGFX Designer 中的 Mixin 功能，从基础示例 Button Example 出发，为文本框控件添加 ClickListener (Mixin 功能中的一项)，并对源代码进行简单剖析。期望能帮助客户更深入地理解 STM32 TouchGFX 的相关功能。
5 a( s( ]$ P( H9 t& |# J) V

2. TouchGFX ClickListener 模板的使用
* J6 ]" g8 {8 B  R5 l6 P5 w: j2.1. C++模板编程基础
. o0 V1 d; e; {. u5 r9 k* r( I在示例介绍之前，让我们先熟悉一下 C++模板编程的一些基础知识。模板编程属于通用编程的范畴，是为“尚未确定类型”所写的函数或类。是可以产生更干净、更快速、更精明的软件的一个强力手段。
8 k9 l; u# h+ v模板的优点：首先模板与某种特定类型无关，代码可重用性好；其次模板与平台无关，代码移植性好；另外模板代码在编译时才进行解释，在编译时确定检查数据类型，相比运行时检查，类型的安全性高。
模板的缺点：一是代码易读性不是很好，调试不便；二是用户工程代码中需要包含模板代码（非二进制库），编译的时间较长，二进制扩展性差；另外有可能会造成二进制代码膨胀（编译后二进制代码臃肿），我们在设计模板时，需要尽可能将 C++模板中与参数⽆关的代码分离出来。
0 X4 d% W  ^' D# h& c+ K* O2 `

! w' K- \* ~# \! O$ ?/ t2.2. TouchGFX Mixin 功能简介
模板一般分为函数模板和类模板。函数模板我们这里不做赘述，重点关注 TouchGFX Mixins 类模板。TouchGFX 的 Mixins 类模板用于拓展控件的功能，目前 TouchGFX v4.20.0 中有四个 Mixin 功能，分别是 Draggable、ClickListener、FadeAnimator 和MoveAnimator，分别为控件增添相关功能。如图 1 （TouchGFX Designer Mixins 功能）所示，本文主要针对 ClickListener 做具体介绍。
/ t/ p/ R5 u% M9 G5 d6 h. J! K

3 s( v: L' _1 v9 E/ S7 W" s1 X, D




2.3. 基于 TouchGFX Button 例程使用 ClickListener 功能
  V6 E  ]# G& k% [1 Y2.3.1. TouchGFX 例程的代码生成
运行 TouchGFX Designer，选择 Examples；通过 Select Board Setup 选择STM32H735G DK 板；从众多例程中选择“Button Example”例程；将 Application name 改为 Button_Example，如下图图 2，然后点击 Create 创建工程。
- X# Y/ H* p% X1 U* C/ R; ~- Y


3 d8 q  u/ x" B* W 进入 TouchGFX Designer 主界面后，会看到画布上有两个按钮和一个文本框，我们对界面不做更改，直接选择 Designer 右下角 (Run Target)生成代码。该操作将会复制TouchGFX 框架文件，生成配置文件、makefile、代码及资源文件（images、fonts、texts），然后编译链接、烧录目标板并运行。程序运行起来后，您可以熟悉一下该按钮例程应用。下面我们就针对该例程，为界面上的计数文本框控件注入 ClickListener 功能，应用实现“当点击计数文本框时，计数数字增加 2”的功能。
( a: T7 G/ f- c9 [: U- f6 B
* I7 f& K" k, k% a
2.3.2. 为计数文本框控件添加 ClickListener 功能
# S5 ?$ `* {) y我们在 TouchGFX Designer 主屏界面，点击 countTxt 文本框，然后在右侧属性栏中找到 Mixins，勾选 ClickListener，如图 3 所示。然后重新生成代码。





# u3 a  `# e0 k$ z: y0 D4 \, q/ G我们可以使用 VS code 编辑代码，或使用其它如 STM32CubeIDE 等工具编辑代码。打开 MainView.hpp，为计数文本框，添加代码如下（黄底色部分）：

1. #ifndef MAIN_VIEW_HPP
   
2. #define MAIN_VIEW_HPP
   
3. #include <gui_generated/main_screen/MainViewBase.hpp>
   
4. #include <gui/main_screen/MainPresenter.hpp>
   
5. class MainView : public MainViewBase
   
6. {
   
7. public:
   
8. MainView();
   
9. ~MainView() {};
   
10. virtual void setupScreen();
    
11. virtual void increaseValue();
    # X  U" [9 R) V: Z' d* u
12. virtual void decreaseValue();
    6 `% d, J) z& _- q2 O* {) x
13. void updateGFXElements();
    
14. 
    
15. void cntTextClickHandler(const TextAreaWithOneWildcard& cntTxt,
    
16. const ClickEvent& e);
    
17. protected:
    7 j* ]! }8 ^) C
18. private:
    
19. uint8_t count;
    " d) X7 o8 M5 y* j2 o! V: x
20. Callback<MainView, const TextAreaWithOneWildcard&, const
    ) Z* _/ O& r7 I: Y! t' d- x
21. ClickEvent&> txtClickedCallback;
    " M' L, Y) A; ^$ S+ ]6 `& S7 x& g9 `
22. };
    1 k1 C! u$ K+ |' X, c
23. #endif // MAIN_VIEW_HPP

复制代码

- K4 x9 u6 \4 O$ }7 X
完整版请查看：附件 TouchGFX 控件附加Mixin功能的方法介绍_v1.0.pdf (458.08 KB, 下载次数: 12)

2023-2-14 18:57 上传

点击文件名下载附件


4 p/ M8 L6 K3 v, U  a
" K2 ~, G' M0 l