一、TouchGFX安装
1.从stm32Cubemx下载TouchGFX
& M. y6 P0 j: C3 W1 N! o. n1 ]

" b9 `# d7 @' k9 @+ B2 Q+ f9 c
. S  ~# q* ~* z* t' g2.找到下载路径
+ j6 B2 Y8 L1 ?5 ~; `( l这个路径是可以更改的，默认在C盘。
在stm32Cubemx的上方工具栏里依次选择Help->Updater settings(快捷键Alt+S)找到touchGFX的下载目录。
' C' P  z: T# y* o& c, T7 }1 G


3.为MDK5安装touchGFX插件
5 f4 W& q* f) z: n- o7 U找到MDK5的TouchGFX安装包位置,具体位置在第2步的Packs文件夹下。...\Packs\STMicroelectronics\X-CUBE-TOUCHGFX\4.15.0\STMicroelectronics.X-CUBE-TOUCHGFX.4.15.0.exe
& _8 l9 K8 \, L6 J7 h7 ~/ P
( ]/ L8 t8 p+ I+ R. r5 c6 P; ]' W
) F5 r2 E9 L7 k9 u) C
安装完成后可以在 keil5的Pack Installer里看到已经安装好了。



4.安装touchGFX
安装包目录：...\Packs\STMicroelectronics\X-CUBE-TOUCHGFX\4.15.0\Utilities\PC_Software\TouchGFXDesigner\TouchGFX-4.15.0.exe。
7 H5 G$ ~4 L5 V- y7 B9 b也是在第2步的下载目录下。

8 U/ m! R$ e  w
4 U* R1 y; y3 W) w& X$ v5 n
至此，安装工作已经完成。

二、创建第一个示例工程
( O8 |8 _# c7 l, X1.创建工程
' }0 t  |+ G2 ?* k( e7 m  p创建工程，选择Blank UI，并设置你需要的屏幕大小。这里屏幕设置为480*272
9 s- I) B( _8 q  ]; R* y

; A9 A0 d! n. _. n0 I; h  T
6 S4 @) k8 T/ X8 ?' J) W- ]2.添加背景
1、TouchGFX 应用程序由多个屏幕组成。屏幕包含许多组成用户界面的小部件。屏幕覆盖整个显示器，因此一次只向用户显示一个屏幕。要做的第一件事是将初始屏幕的名称更改为Main，如下图所示。这样做的目的是以后有多屏幕应用的时候可以很好区分，对于程序维护和开发来说非常适合。
0 C& Z" a) `2 Y( J# O, I2、通常，用Box或Image给屏幕添加一个背景。此例子中，我们将使用Image给屏幕添加一个背景。TouchGFX支持BMP和PNG，尽量使用PNG，因为PNG更小而且支持透明度

7 z4 B* V" u& P6 |  S

工具栏左侧点击Add Widget 选择添加一个Image插件，同时别忘记更改控件名称
% a  k' W5 c. q; g! Z) Q% {9 `


1、选择"Image"选项卡并单击蓝色加号图标。
2、找到下载的图片素材并选择"background.png"，为了防止重复工作把其他需要的图片一起添加进去。可以多选一起添加。
6 _% S' n0 \0 b6 I  l9 ]3、导入后左侧会显示添加的图片

1 F2 F4 `( F# [; @% C- \

3 a; y! ^; v% ^! {$ y1、回到画布视图
0 y/ j- p! F% |1 n: ^, R2、右侧选择image给控件添加背景图片


+ Q  U# x5 ^2 j
3 ^7 F4 H7 q3 n3.添加按钮
7 _* R# g  N4 m0 d7 U  N8 F. O1、单击"小部件"选项卡中的"按钮"小部件，向屏幕添加两个按钮，并更改名字为        ButtonUp和ButtonDown
8 S1 H/ _; `) ]1 Y' h2、ButtonUp定位在 x=40，y=60。
6 o) n/ R4 U/ J, H. k1 h3、ButtonDown定位在 x=40，y=150。

1 o$ |5 s/ v$ l6 K6 m0 R" H

更改按钮的外观。在右侧更改按钮松开和按下时的背景图片。
9 t% n  {" ?( K7 _

2 e; u) }3 F. ?. C
添加完成后，运行simulator，在PC模拟一下界面是否有问题。

5 m& M, r! t2 n' o4 f4 ?
' D# k3 l$ t& ~
# ?, |; X; I, R4 a& k2 g$ x4.添加文本
% a" `  t, X# v# _1、添加一个Image 控件
/ c/ J) o" d+ ^! H1 L' B2、给它添加背景图片"counter_box.png"
3、坐标：x=250，y=59。
4、名字改为：counter_box

7 }8 G, ~, C; d1 F* @+ b; n
0 `; G* B; |% ^" p6 m
3 h& N- Z+ j+ u  V1、添加文本控件
. e& S3 ^: o& v+ T  ^9 m2、坐标：x=250，y=90
, g. p1 ]" f: B) x/ P2 C3、右侧AutoSize取消勾选，设置W=152  H=90（必须先取消Autosize否则没法改宽度和高度）
4、名字设置countTxt
8 d. b" Z. ?1 L" f& Z5、对其方式设置：center



按照下图设置TextArea的字体
  l  a/ \7 S, o' q3 A5 x
' Z/ w+ P* }& Y' y6 P9 m9 ~

我们希望 TextArea 显示一个数字，我们可以用按钮更改该数字。
9 }5 h) [" H  t9 O) x( N9 ?5 a; s为此，更改文本以包括"通配符"。通配符是文本中的标记<d>，在运行时用其他内容替换。我们只想显示一个数字，因此我们
将文本更改为"<d>"。在其他项目中，可以将动态部件与固定文本相结合，例如"温度：<temp> °C"。另外，<...> 通配符是可选的。
9 o1 @( J/ G  a0 D6 ?1、添加通配符
6 F* O% ]  B0 E' K8 k2、设置通配符符号
" C. ^( w9 \) K% g9 r2 a3、设置初始化值
; E0 ]! U8 N/ R5 H  q) R* M* g; ^4、设置buffer

& r0 |3 o+ H# X* ]1 |
( C. V  \0 b1 T5 p
1 f2 n& z: z7 e运行模拟器

2 F3 ?0 V6 |5 l. M

5.添加代码
- P  u( m5 }! C1 K我们将创建两个InterActions，每个按钮一个。
1、添加交互
2、设置触发方式
3、设置触发源
. G# l  q% a6 S1 ^- N2 [7 E0 {4、设置触发时调用虚函数
5、增加虚函数名称，方便区分维护
6、为"交互"提供信息性名称，以便以后可以识别它，也可以默认不修改它
- w( j( }0 I) k& j' B


检查无误后点击右上角Generate Code生成代码



' l- Z5 _% K1 P! O' C$ V然后依次找到simulator\msvs\Application.sln并打开代码
2 ^: _1 ~! G" `  G
3 Z  p3 I% Z2 G% b& Y8 P) l

: s1 |0 t* i* `$ N: ~2 g直接编译工程或者按快捷键F5，中间有任何提示均选择是。

  ?1 J5 S9 @. W! d( G2 k
( V& E" F% }) V7 f
最终结果和TouchGfx仿真结果一样

+ ?* `; r0 [! o5 t3 {' t

. O' ~( ]! ^, X0 Z8 ], p6.生成的代码
' J6 P# e9 u/ u& z& X虚方法位于类MainViewBase.hpp的公共部分。生成的方法具有空实现，需要重写。此文件不要更改，有touchGFX自动生成
% U4 p, j2 ]) H1 G# Z
$ `; {8 p* I: G+ x' I& m

1. /*********************************************************************************/
   - g* z2 s6 W9 j1 F$ p
2. /********** THIS FILE IS GENERATED BY TOUCHGFX DESIGNER, DO NOT MODIFY ***********/
   / z: m; S0 b  f5 D1 U4 G
3. /*********************************************************************************/
   * u/ x  v7 K2 d/ R
4. #ifndef MAINVIEWBASE_HPP
   
5. #define MAINVIEWBASE_HPP
   
6. 
   
7. #include <gui/common/FrontendApplication.hpp>
   2 E# k+ Z4 C' ]" [, g; T+ _
8. #include <mvp/View.hpp>
   0 `1 g& N/ _$ _8 P  i, e* C
9. #include <gui/main_screen/MainPresenter.hpp>
   
10. #include <touchgfx/widgets/Box.hpp>
    1 J5 K# G* Y9 b
11. #include <touchgfx/widgets/Image.hpp>
    " F) V" K/ I. D3 Z6 S* g% x. S0 r
12. #include <touchgfx/widgets/Button.hpp>
    # x, `/ `: b" R; D: B
13. #include <touchgfx/widgets/TextAreaWithWildcard.hpp>
    
14. 
    
15. class MainViewBase : public touchgfx::View<MainPresenter>
    . g8 h. F! m, F# E! b! G( x
16. {
    
17. public:
    
18.     MainViewBase();
    # s2 e2 ~3 W& q4 k
19.     virtual ~MainViewBase() {}
    : y3 @" K9 n* _" M' C* l& D2 q% v
20.     virtual void setupScreen();
    
21. 
    
22.     /*
    
23.      * Virtual Action Handlers
    . g5 j/ W- ?. }
24.      */
    ' m( R/ S  }, ^, {, F) Z
25.     virtual void ButtonUpClick()
    * R! D4 ^) b! C  v! }, K
26.     {
    
27.         // Override and implement this function in Main
    
28.         //需要重写
    
29.     }
    " P- ~4 T* k/ U* V7 I
30. 
    
31.     virtual void ButtonDownClick()
    ( n0 F+ ~& L9 T2 Y: e: S
32.     {
    
33.         // Override and implement this function in Main
    
34.         //需要重写
    ! r1 i% b9 [. h7 f) u, D; t
35.     }
      V+ G: P5 L$ ]& Q- ~0 B  y4 `3 [9 x
36. 
    9 C7 a6 Q/ w3 r4 i
37. protected:
    ; `2 Z7 v- y6 i9 U  q( J
38.     FrontendApplication& application() {
    
39.         return *static_cast<FrontendApplication*>(touchgfx::Application::getInstance());
    4 a$ {5 o  O- x0 i
40.     }
    4 ]2 R( T' c) L# V# ?' U' H. g1 h
41. 
    
42.     /*
    , B; Y2 F7 q& c) a& O
43.      * Member Declarations
      R6 Z$ U, M' O2 ?7 @
44.      */
    
45.     touchgfx::Box __background;
    
46.     touchgfx::Image Background;
    
47.     touchgfx::Button ButtonUp;
    
48.     touchgfx::Button ButtonDown;
    ) @& b* V4 S/ y% g' ?
49.     touchgfx::Image counter_box;
    
50.     touchgfx::TextAreaWithOneWildcard countTxt;
    
51. 
    
52.     /*
    " @' F. d3 q3 w
53.      * Wildcard Buffers
    . c: a/ a% i7 J( z
54.      */
    * W1 P: {1 h! B
55.     static const uint16_t COUNTTXT_SIZE = 10;
    
56.     touchgfx::Unicode::UnicodeChar countTxtBuffer[COUNTTXT_SIZE];
    
57. 
    ' @  p5 t) v& o
58. private:
    & z/ M1 C% a# O6 H4 Y
59. 
    , S; v  U* o0 m! `$ z4 q3 N
60.     /*
    
61.      * Callback Declarations
    3 `( K7 s& o' s/ \1 f. O7 K7 K
62.      */
    
63.     touchgfx::Callback<MainViewBase, const touchgfx::AbstractButton&> buttonCallback;
    # x5 U  u1 U; V+ g; W
64. 
    
65.     /*
    
66.      * Callback Handler Declarations
    
67.      */
    2 z, j& f" G, i6 {% a( s- L, L6 j* h
68.     void buttonCallbackHandler(const touchgfx::AbstractButton& src);
    7 U5 L4 S. {; w, u  c! R$ B
69. 
    + ~2 W: E9 b! q
70. };
    
71. 
    
72. #endif // MAINVIEWBASE_HPP
      K  F: `: M' g

复制代码

' u3 u6 T# L7 {1 @2 y7.实现虚方法

1. 在MainView.hpp中手动增加虚方法声明
   $ ]* D4 G' w( ^% C' r+ s: J
2. virtual void ButtonUpClick();//添加
   
3. virtual void ButtonDownClick();//添加

复制代码

1. #ifndef MAIN_VIEW_HPP
   
2. #define MAIN_VIEW_HPP
   
3. 
   
4. #include <gui_generated/main_screen/MainViewBase.hpp>
   
5. #include <gui/main_screen/MainPresenter.hpp>
   
6. 
   
7. class MainView : public MainViewBase
   
8. {
   
9. public:
   0 @( \, G- E3 L& l
10.   MainView();
      n6 p+ P' `  C
11.   virtual ~MainView() {}
    
12.   virtual void setupScreen();
    
13.   virtual void tearDownScreen();
    + O6 v5 S. \! c3 L) r5 }/ t
14.   virtual void ButtonUpClick();//添加
    : A! v% `  \1 m4 i! v$ V. r9 ]4 T' m
15.   virtual void ButtonDownClick();//添加
    
16. }

复制代码

然后在MainView.cpp中增加ButtonUp和ButtonDown按下时打印提示

2 ^) w' `4 E. |, t# i' M

1. #include <gui/main_screen/MainView.hpp>
   
2. 
   8 X. O1 g6 K; i2 F' I$ o7 }
3. MainView::MainView()
   
4. {
   1 _+ ^! e& q5 @% Z( m' M
5. 
   $ v& g" ?1 |8 p/ V. M7 ]' N
6. }
   
7. 
   
8. void MainView::setupScreen()
   
9. {
   & ]0 M5 b( |6 ]
10.   MainViewBase::setupScreen();
    
11. }
    - P) [$ t1 H- Q7 O# q3 {
12. 
    % v  O" K; U' s+ J% A# q
13. void MainView::tearDownScreen()
    ! l. [# x& D2 c+ T; h: q6 |
14. {
    3 ~9 f2 ~% c# e! x
15.   MainViewBase::tearDownScreen();
    
16. }
      K- A, Q% t3 T5 ^
17. 
    - R; m4 y; S* F3 L, e
18. void MainView::ButtonUpClick()
    : s9 x; T4 |% d; P
19. {
    
20.         touchgfx_printf("buttonUpClicked\n");
    , ?3 T/ v9 u& f' Q6 v* F" U
21. }
      o" |  B# m, `- A6 W  X0 k
22. 
    ( x0 l$ S7 x! ^, t9 M9 @2 _( @1 T4 C
23. void MainView::ButtonDownClick()
    # f1 j/ U. S" A) U( G+ L
24. {
    , y+ y3 }& O5 U/ I6 k0 i  J
25.         touchgfx_printf("buttonDownClicked\n");
    
26. }

复制代码

0 ]5 @* c9 U0 P# b( G

在MainView.cpp的按键按下方法中，我们增加计数器值。然后，新值将转换为字符串，并复制到我们为上一步中的文本配置的 10 个字符缓冲区。
/ d( I8 D! K9 I# ^# s1 V+ H$ W% i1 Q

1. #include <gui/main_screen/MainView.hpp>
   . l4 P9 k, ]  P
2. 
   
3. MainView::MainView()
   0 F1 D/ E7 I& w
4. {
   
5. 
   
6. }
   8 q) Z* ^- M( N* T5 _. L
7. 
   $ T, e2 B8 i( K* z3 p8 L
8. void MainView::setupScreen()
   
9. {
   
10.     MainViewBase::setupScreen();
    
11. }
    
12. 
    % ^/ e1 o* [) T( U7 `
13. void MainView::tearDownScreen()
    
14. {
    ' Q+ [. M, |5 F8 w
15.     MainViewBase::tearDownScreen();
    
16. }
    
17. void MainView::ButtonUpClick()
    
18. {
    
19.         touchgfx_printf("buttonUpClicked\n");
    
20.         counter++;
    
21.         Unicode::snprintf(countTxtBuffer, COUNTTXT_SIZE, "%d", counter);
    
22.         countTxt.invalidate();
      ?& E' M' E# ^
23. }
    
24. 
    
25. void MainView::ButtonDownClick()
    # j0 y4 A9 F# Y( b* C" L1 s
26. {
    
27.         touchgfx_printf("buttonDownClicked\n");
    
28.         counter--;
    
29.         Unicode::snprintf(countTxtBuffer, COUNTTXT_SIZE, "%d", counter);
    2 _. o  U% o& t9 e* _: u- G
30.         countTxt.invalidate();
    
31. }

复制代码

- N4 L) E6 f& P7 e' e运行发现并没有按预期显示数字
. [: g% R! p* T' e% e8 C% x3 m9 S
/ w2 [' Z+ z3 u6 h& P% m9 Z& u$ Z
6 x4 T" G! S0 G% Y8 s! O) t
3 [+ k8 D5 e& @9 F% o" s9 q; C我们需要告诉 TouchGFX 设计器在"默认"排版中包含字符 0-9。
( u$ S1 ^0 n  y3 b为此，请返回 TouchGFX 设计器，然后单击"Text"选项卡，然后单击"Typographies"选项卡。在默认排版"WildCard Ranges"列中，添加范围"0-9"。为了能表示负数还需要在WildCard characters 添加负号“-”。
$ U9 R; r  u8 c# R: j0 Y; s9 o

7 f$ s) }  r' u! E5 f3 N4 k5 M& }
+ ?8 Y) a; T. A* D+ [重新运行发现实现了我们预期的功能
+ J1 }8 L! w; K2 Y


* U- A$ A: L8 r2 ^至此，我们已经完成了第一个实例。