一、TouchGFX安装
6 L2 O4 y: D* a# U' o; i" z7 Z1.从stm32Cubemx下载TouchGFX
/ g4 w8 D7 F- [6 D& }

; b* [; d5 y% o" x$ [) D$ O
# @4 @8 V) N( A% @- r2.找到下载路径
5 Y& d* F% H' b0 Y这个路径是可以更改的，默认在C盘。
在stm32Cubemx的上方工具栏里依次选择Help->Updater settings(快捷键Alt+S)找到touchGFX的下载目录。
; B- J+ U! h" Z6 K7 V* i
  U" D: u# A7 ~% a/ s0 b" o$ Q

2 |% v0 n9 G* |3 J8 I9 v) ?3.为MDK5安装touchGFX插件
找到MDK5的TouchGFX安装包位置,具体位置在第2步的Packs文件夹下。...\Packs\STMicroelectronics\X-CUBE-TOUCHGFX\4.15.0\STMicroelectronics.X-CUBE-TOUCHGFX.4.15.0.exe
: m4 |3 q1 Z  c' C
9 D1 I  T% ~, }3 ~3 c% n, R2 U7 ^% X
& X% h7 a7 ?3 ?% I6 J7 m: J# a
5 E, V' B5 E+ X: |. w安装完成后可以在 keil5的Pack Installer里看到已经安装好了。
. @; h, e7 T0 d
1 j5 ?0 O  d; H4 `8 {7 w9 V
( m& ^" F7 ?5 _% J, G) D9 q7 k9 ]
& B3 F) }; w, N" f" Z% y4.安装touchGFX
+ R; v: f; z' F" d: ]安装包目录：...\Packs\STMicroelectronics\X-CUBE-TOUCHGFX\4.15.0\Utilities\PC_Software\TouchGFXDesigner\TouchGFX-4.15.0.exe。
也是在第2步的下载目录下。
0 W( }' B; ]* O, ]: }
9 d. i- z; k# @  m- Y

至此，安装工作已经完成。

二、创建第一个示例工程
* u  h4 O( A/ z# ?6 v1.创建工程
0 u5 h% k1 \0 J+ U创建工程，选择Blank UI，并设置你需要的屏幕大小。这里屏幕设置为480*272



2.添加背景
1、TouchGFX 应用程序由多个屏幕组成。屏幕包含许多组成用户界面的小部件。屏幕覆盖整个显示器，因此一次只向用户显示一个屏幕。要做的第一件事是将初始屏幕的名称更改为Main，如下图所示。这样做的目的是以后有多屏幕应用的时候可以很好区分，对于程序维护和开发来说非常适合。
2、通常，用Box或Image给屏幕添加一个背景。此例子中，我们将使用Image给屏幕添加一个背景。TouchGFX支持BMP和PNG，尽量使用PNG，因为PNG更小而且支持透明度
+ f' }5 S# j2 C. G0 o. q


: T; ~! b6 S# T2 ?# T工具栏左侧点击Add Widget 选择添加一个Image插件，同时别忘记更改控件名称

  b1 ?# l: F- Y) L8 R4 I6 e- H
& R8 f4 k/ ?, I7 f
1、选择"Image"选项卡并单击蓝色加号图标。
2 B9 [: @8 p2 b; }0 m2、找到下载的图片素材并选择"background.png"，为了防止重复工作把其他需要的图片一起添加进去。可以多选一起添加。
. G- ?% _2 `9 H4 Z5 e. }* x5 O3、导入后左侧会显示添加的图片

; b' x5 ^. v/ l
- C' y. @$ B4 Y- u) F
1、回到画布视图
1 @7 E, g8 F& ?- c8 X0 n8 [2、右侧选择image给控件添加背景图片



3.添加按钮
4 B- u' \8 b. B' W7 l1、单击"小部件"选项卡中的"按钮"小部件，向屏幕添加两个按钮，并更改名字为        ButtonUp和ButtonDown
7 N4 f) q2 `' |, |# l6 `, T( E2、ButtonUp定位在 x=40，y=60。
4 N* x  k* y4 o: ~/ R3、ButtonDown定位在 x=40，y=150。



# X/ [  P3 H- L1 t更改按钮的外观。在右侧更改按钮松开和按下时的背景图片。


+ f% k6 q1 y" r
3 Q5 @6 O0 i3 _添加完成后，运行simulator，在PC模拟一下界面是否有问题。


6 m4 h% L# G. d& q4 N/ e/ \
+ s* s+ p9 C4 H) m1 d8 Q4.添加文本
3 @5 V1 N% C$ w- s/ _( l. Q1 n, x1、添加一个Image 控件
2、给它添加背景图片"counter_box.png"
. a# S) B% v: [; S3 ]( ?2 P4 Z3、坐标：x=250，y=59。
4、名字改为：counter_box
+ j, K( t) x5 q1 z" l

! o7 K/ C1 U6 F: {) E
1、添加文本控件
2、坐标：x=250，y=90
3、右侧AutoSize取消勾选，设置W=152  H=90（必须先取消Autosize否则没法改宽度和高度）
4、名字设置countTxt
5、对其方式设置：center
4 |& K$ C9 O: d/ Q( G


  V5 C% m! a8 `8 ?4 y按照下图设置TextArea的字体
' |- H8 g$ c5 W* t
6 o5 F0 F! g5 V+ Q* C3 H

, W& O, B% S) Y8 C* L  ?/ |$ i我们希望 TextArea 显示一个数字，我们可以用按钮更改该数字。
为此，更改文本以包括"通配符"。通配符是文本中的标记<d>，在运行时用其他内容替换。我们只想显示一个数字，因此我们
5 o7 s: |- X8 J* `7 ?# {将文本更改为"<d>"。在其他项目中，可以将动态部件与固定文本相结合，例如"温度：<temp> °C"。另外，<...> 通配符是可选的。
; L9 ]6 Y- \5 E8 h) ?( c; z1、添加通配符
2、设置通配符符号
3、设置初始化值
7 Q3 |5 Z$ r/ e4、设置buffer
! e  U8 q( u. A  I2 O  u
3 I5 [) b  b# s

% E/ E3 p" T6 ]6 [运行模拟器

5 A3 x( _6 h! c; ?$ M$ f! Q

# O$ D: \. ]5 U7 G9 b! q& g3 p; a5.添加代码
+ |4 t2 ~' Q, H4 R7 `7 k我们将创建两个InterActions，每个按钮一个。
2 \; X, e: H$ f1、添加交互
2、设置触发方式
0 R$ a' M. F# ?5 F7 G( P8 ]1 O& v3、设置触发源
9 [' q( C' p0 [# {& O* w4、设置触发时调用虚函数
5、增加虚函数名称，方便区分维护
5 g; B) j% u2 f) T8 M6、为"交互"提供信息性名称，以便以后可以识别它，也可以默认不修改它
7 e; \$ }7 J& q" O: }- m


0 M0 |3 Z$ E! S: ]; T: J. M检查无误后点击右上角Generate Code生成代码
; v$ x1 s% [9 m3 l& v: U2 c


然后依次找到simulator\msvs\Application.sln并打开代码



直接编译工程或者按快捷键F5，中间有任何提示均选择是。
( m; [0 L" R, I! w6 A3 U( e4 m
+ P. |% o* X7 T: J
0 C& s& [( D; f) I8 S# J
/ Y  g& p; Z4 V4 H8 W, ^最终结果和TouchGfx仿真结果一样
1 W* T( u* k, r+ @6 I

7 ~  n4 Q0 y7 k1 U
" a8 s# T* j" G, [8 Y- [8 g/ D. p6.生成的代码
% `' c1 O/ L0 Z* x) C% U- }; n虚方法位于类MainViewBase.hpp的公共部分。生成的方法具有空实现，需要重写。此文件不要更改，有touchGFX自动生成

; M- K; L' G1 L5 @6 ]0 N

1. /*********************************************************************************/
   
2. /********** THIS FILE IS GENERATED BY TOUCHGFX DESIGNER, DO NOT MODIFY ***********/
   
3. /*********************************************************************************/
   
4. #ifndef MAINVIEWBASE_HPP
   
5. #define MAINVIEWBASE_HPP
   
6. 
   
7. #include <gui/common/FrontendApplication.hpp>
   
8. #include <mvp/View.hpp>
   
9. #include <gui/main_screen/MainPresenter.hpp>
   
10. #include <touchgfx/widgets/Box.hpp>
    
11. #include <touchgfx/widgets/Image.hpp>
    * }3 o! p/ K/ v# Q1 o% b
12. #include <touchgfx/widgets/Button.hpp>
    0 V" \, p6 k1 O: B% u$ C' y) H
13. #include <touchgfx/widgets/TextAreaWithWildcard.hpp>
    , `" F% J! z4 A$ @8 l
14. 
    
15. class MainViewBase : public touchgfx::View<MainPresenter>
    
16. {
    0 u2 _: A9 f( a( }
17. public:
    
18.     MainViewBase();
    5 Y# K/ x6 k* K  g5 y6 q
19.     virtual ~MainViewBase() {}
    
20.     virtual void setupScreen();
    ; n6 U+ Z# J6 u) W$ E% h' m
21. 
    " M' o; F) i, m, a! ~  K
22.     /*
    " x! |0 h+ g; L6 R* K! F
23.      * Virtual Action Handlers
    
24.      */
    
25.     virtual void ButtonUpClick()
    & A" \9 M. B/ X" `1 m" l: c
26.     {
    * U& c& b: B* z7 h1 Y
27.         // Override and implement this function in Main
    
28.         //需要重写
    $ A/ S/ y+ z0 m1 S* Y9 x+ _
29.     }
    
30. 
    
31.     virtual void ButtonDownClick()
    ( {9 B/ F& M. C
32.     {
    
33.         // Override and implement this function in Main
    
34.         //需要重写
    
35.     }
    / ^6 L2 [: i$ G) X
36. 
    
37. protected:
    7 v4 K1 p2 r" ^( ]1 n# O; H) X( N/ U
38.     FrontendApplication& application() {
    
39.         return *static_cast<FrontendApplication*>(touchgfx::Application::getInstance());
    
40.     }
    1 T( q# q4 r% U: W- N, j; u
41. 
    
42.     /*
    4 l2 X" T5 |: r" b" [1 n
43.      * Member Declarations
      d6 @$ ]: S4 s5 D8 {9 t+ e4 n1 u
44.      */
    7 V" Z, n& I/ m4 ~* ]* j0 c+ i$ L
45.     touchgfx::Box __background;
    
46.     touchgfx::Image Background;
    4 {* }0 B7 y  E; k' i* E  @+ W
47.     touchgfx::Button ButtonUp;
    
48.     touchgfx::Button ButtonDown;
    
49.     touchgfx::Image counter_box;
    
50.     touchgfx::TextAreaWithOneWildcard countTxt;
    
51. 
    1 N$ m0 i& J* ?! F5 n3 h+ P9 {) z
52.     /*
    " r& x6 H( p3 A. ^
53.      * Wildcard Buffers
    
54.      */
    
55.     static const uint16_t COUNTTXT_SIZE = 10;
    + @  ~: q1 ]! M# I4 @& ?$ {
56.     touchgfx::Unicode::UnicodeChar countTxtBuffer[COUNTTXT_SIZE];
    5 Y+ R$ c6 @- y" T4 I0 H2 A
57. 
    
58. private:
    - N2 r4 A; J7 A! h
59. 
    2 P# _) a# X* R% w: b( j) C1 G
60.     /*
    ( Z# @5 `6 X- N" ~; r
61.      * Callback Declarations
    
62.      */
    
63.     touchgfx::Callback<MainViewBase, const touchgfx::AbstractButton&> buttonCallback;
    
64. 
    
65.     /*
    2 o; `9 G5 G- \5 ?8 p
66.      * Callback Handler Declarations
    
67.      */
    + K3 ?; \; J0 P6 K7 P1 `4 H9 H
68.     void buttonCallbackHandler(const touchgfx::AbstractButton& src);
    ) `( h/ o, r9 }0 Y; c/ E
69. 
    
70. };
    % @# A# M( c8 l( ]6 s4 e* m
71. 
    
72. #endif // MAINVIEWBASE_HPP
    

复制代码

7.实现虚方法

1. 在MainView.hpp中手动增加虚方法声明
   
2. virtual void ButtonUpClick();//添加
   ; r# Y! ~6 \0 A
3. virtual void ButtonDownClick();//添加

复制代码

1. #ifndef MAIN_VIEW_HPP
   
2. #define MAIN_VIEW_HPP
     b4 ?2 l: T9 f, }/ s" K  G
3. 
   7 n7 x5 s8 z$ o* r% M
4. #include <gui_generated/main_screen/MainViewBase.hpp>
   
5. #include <gui/main_screen/MainPresenter.hpp>
   : q' S) \% J) w. F
6. 
   
7. class MainView : public MainViewBase
   
8. {
   
9. public:
   9 H9 S/ d* n: U
10.   MainView();
    
11.   virtual ~MainView() {}
    + g: c; K$ b; q: \, d
12.   virtual void setupScreen();
    
13.   virtual void tearDownScreen();
    
14.   virtual void ButtonUpClick();//添加
    / m$ P/ {* N( t
15.   virtual void ButtonDownClick();//添加
    $ V! T2 Y  t+ B+ A6 X/ f
16. }

复制代码

' }* ]" t8 V5 H$ H然后在MainView.cpp中增加ButtonUp和ButtonDown按下时打印提示
/ N2 p- ~* o  G% l' }9 x0 c7 N1 d

1. #include <gui/main_screen/MainView.hpp>
   
2. 
   
3. MainView::MainView()
   
4. {
   
5. 
   * j1 ]- J0 d1 x# D, m
6. }
   % F/ I$ i6 O# p6 B# Y. Z2 S
7. 
   
8. void MainView::setupScreen()
   ; ~& u2 ?: X/ ^5 b$ G- Q
9. {
   0 Y" l3 V8 N( S2 l
10.   MainViewBase::setupScreen();
    
11. }
    
12. 
    : C3 n; ^8 {) N) m1 ?" K8 I8 v
13. void MainView::tearDownScreen()
    3 {- y/ r2 o0 z; l+ b: J$ J
14. {
    : V' E* U. y( T. n) U+ r) h- d
15.   MainViewBase::tearDownScreen();
    
16. }
    ( R* M$ i8 r& z8 _! O' k- C9 y
17. 
      E& G, J' A( {! Y  h* m/ B  T
18. void MainView::ButtonUpClick()
    
19. {
    . S0 F9 x- S  F/ N) Z
20.         touchgfx_printf("buttonUpClicked\n");
    ' r: P& s' c' \" q0 r( z7 f
21. }
    
22. 
    
23. void MainView::ButtonDownClick()
    
24. {
    ; A; P3 P! s' j6 ]3 t
25.         touchgfx_printf("buttonDownClicked\n");
    
26. }

复制代码

在MainView.cpp的按键按下方法中，我们增加计数器值。然后，新值将转换为字符串，并复制到我们为上一步中的文本配置的 10 个字符缓冲区。

9 w; ~8 C) f$ O# L7 q5 i

1. #include <gui/main_screen/MainView.hpp>
   $ E* l/ s! p3 y, i7 n9 h( n/ I
2. 
   
3. MainView::MainView()
   
4. {
   
5. 
   
6. }
   ' G7 k8 v$ ]$ ]( z& y8 U* ^
7. 
   
8. void MainView::setupScreen()
   . a0 h$ k! i% N% F
9. {
   8 v7 `9 J8 M1 Y6 R
10.     MainViewBase::setupScreen();
    8 m& W% ~$ \, [7 a
11. }
    
12. 
    
13. void MainView::tearDownScreen()
    0 N! y: w& n  k( Y
14. {
    
15.     MainViewBase::tearDownScreen();
    9 C8 J- W) ]+ K2 X' Z2 Z' Z, E
16. }
    0 \- \* W. K+ T, @- T/ h
17. void MainView::ButtonUpClick()
    
18. {
    
19.         touchgfx_printf("buttonUpClicked\n");
    
20.         counter++;
    
21.         Unicode::snprintf(countTxtBuffer, COUNTTXT_SIZE, "%d", counter);
    5 q- u: Z, e1 Y
22.         countTxt.invalidate();
    . u: \8 j* Y% V( Q- J
23. }
    
24. 
    2 M' K% L9 R' ^, g* o- j
25. void MainView::ButtonDownClick()
    , C( k- N* ?4 |  c
26. {
    
27.         touchgfx_printf("buttonDownClicked\n");
    
28.         counter--;
    
29.         Unicode::snprintf(countTxtBuffer, COUNTTXT_SIZE, "%d", counter);
    
30.         countTxt.invalidate();
    ' a( T2 [' n/ D% w" f2 x: d
31. }

复制代码

运行发现并没有按预期显示数字
  K4 n; M: H$ A3 c' u1 }  T
7 {2 c- s9 H" w. q
3 S: j! w8 K6 C. H; X( |
我们需要告诉 TouchGFX 设计器在"默认"排版中包含字符 0-9。
9 `% ^# R9 O. i2 P9 `8 ]0 H4 o为此，请返回 TouchGFX 设计器，然后单击"Text"选项卡，然后单击"Typographies"选项卡。在默认排版"WildCard Ranges"列中，添加范围"0-9"。为了能表示负数还需要在WildCard characters 添加负号“-”。
) P3 j0 H; R: {4 I) u/ d3 h


6 U3 q6 ?5 U3 C, }$ w重新运行发现实现了我们预期的功能

8 H/ [: q1 a) R7 g2 \0 w
5 ^) o/ v0 C6 I1 z4 h1 C
至此，我们已经完成了第一个实例。
: F7 I! C6 C( ~
, C5 U% K) K, g* N
0 B& {% F, V/ R& i( L
; E+ h5 z+ N: U! P' z