通过TouchGFX创建事件逻辑函数
2 a, p$ n/ M9 w4 RTouchGFX Designer中的交互由触发器和动作组成：
触发器：是由用户点击或者进行其他操作后产生的信号。
动作：由触发器触发的相应的事件逻辑。
要添加interaction ，请转到任何屏幕或自定义容器的“interaction”选项卡，然后按下标有“Add Interaction”的蓝色按钮，如下图所示。


5 z7 b: P% E7 Q- H% f
; z0 M4 O; l7 d  }添加后界面样子如下：
0 U. }( r& T, V/ m5 E& r) q
0 y# I. b2 D. G2 X* Y0 ~

Trigger中用于添加触发器类型,例如：按钮点击事件。Choose clicked source 中添加被点击的是哪一个按钮，这里显示的是“button1”。
Action：action的操作分为了两种，第一种是作为基础窗口的动作：
该种动作包括：



+ i5 e2 D7 o' V* P第二种是控件的属性提供的动作：
) c$ Z* p' a; F; P' ^3 j, L
& o3 D; a0 I3 v! I0 g* ]/ `
% h! f& k& b! z7 J' G$ w: B" _
在上图的底部存在Can trigger another interaction的复选框，它的作用是连续动作，当一次触发事件后多次响应其他的事件。
( n/ D$ J# C1 u  a8 ?3 x. D: n( I* f
- B/ ]% e+ |' C- IBase类中的秘密
  [/ S9 h) i) b* S3 C& C! l在通过TouchGFX Designer创建完界面，并在界面中添加完相应的触发器后，生成的代码中将会存在相应的界面基类，这类代码是由TouchGFX Designer自动生成的，所以不建议更改，在第一章也和大家说过，下面我们探索下这个类中有些什么：
: }( r7 u7 I% i+ f$ o我们以我写的一个例子做讲解，该demo源码在第一张中可下载。看下图
6 x( j  I, y& t; k
/ ?/ X: u/ T4 _& ]# f5 I2 n! Z
3 H7 ]8 |9 d# n2 P; V, ]
& V0 a" }, A( E. i/ b
5 ?/ X9 @7 @+ ^( B; U- @" f我们以MainWindow窗口作为例子讲解窗口基类中有哪些东西，首先窗口的名字叫做“MainWindow”，其中包含和三个按钮及一个text area还有一张背景图片Backimage。放置的顺序不同在界面上体现的层次感不同，如果将背景图片放在最上层的话其他按钮都将被盖在下面。其次看右侧的interaction，在其中我添加了三个逻辑，类型都是按钮的点击事件对应的是三个按钮，相应的功能是“Call new virtual function”，在下方写了函数的名字。注意函数名字和控件的名字，此时，点击Generate Code 按钮后在VS中打开工程。可以看到在头文件和源文件中generated/gui_generated文件夹下有mainwindow_screen文件夹存在，在该文件夹下将存在该界面的基类。如下图：
3 t% i4 H) i* C7 |2 x

0 U0 E% Q7 L* G8 k
' C" }8 ?( O/ n我们看下该类中的头文件：

1. /*********************************************************************************/
   
2. /********** THIS FILE IS GENERATED BY TOUCHGFX DESIGNER, DO NOT MODIFY ***********/
   
3. /*********************************************************************************/
   
4. #ifndef MAINWINDOWVIEWBASE_HPP
   . E8 e5 R* f: q- L7 ^
5. #define MAINWINDOWVIEWBASE_HPP
   
6. 
   
7. #include <gui/common/FrontendApplication.hpp>
   6 O, ^6 x4 b$ G: u0 k. R
8. #include <mvp/View.hpp>
   - L3 k9 C$ N0 i9 R1 M
9. #include <gui/mainwindow_screen/MainWindowPresenter.hpp>
   
10. #include <touchgfx/widgets/ScalableImage.hpp>
    
11. #include <touchgfx/widgets/ButtonWithLabel.hpp>
    
12. #include <touchgfx/widgets/TextAreaWithWildcard.hpp>
    
13. #include <touchgfx/widgets/Button.hpp>
    
14. 
    7 t8 S* F& i& m
15. class MainWindowViewBase : public touchgfx::View<MainWindowPresenter>
    . g8 R) ~/ a) w
16. {
    
17. public:
    6 T& Z! i' s" S! F- g/ X$ X/ v
18.     MainWindowViewBase();
    
19.     virtual ~MainWindowViewBase() {}
    - D: g. }" Z2 H# S. o
20.     virtual void setupScreen();  窗口创建时响应的函数
    
21. 
    * f0 D6 @' O' K/ e; d4 L
22.     /*
    % }+ r$ v; b1 G' o* y+ S( t
23.      * Virtual Action Handlers
    * O: s5 s! u" F. K
24.      */
    
25.     virtual void setBackImageIMG() 这个就是在TouchGFX Designer中function name 中填的名字他就是Designer产生的关联性。
    ; u( V# z3 W1 b4 e
26.     {
    
27.         // Override and implement this function in MainWindow
    
28.     }
    3 ?0 Y* E: j. S9 q0 H0 J
29. 
    
30. protected:
    % `  {2 J9 H, ~5 u
31.     FrontendApplication& application() {
    $ r. g3 r# {7 i- [( @
32.         return *static_cast<FrontendApplication*>(touchgfx::Application::getInstance());
    
33.     }
    & i- i# `) }0 |1 m, s. T/ |
34. 
    5 I  n1 j: ^8 b9 H! ^/ d$ B- }) r, k  @
35.     /*
    
36.      * Member Declarations
    
37.      */
    
38.      这部分放的就是界面上控件的名字，也就是说如果想要修改控件的动作或者状态，除了TouchGFX Designer中修改外，也可以通过代码调用定义修改。
    
39.     touchgfx::ScalableImage BackImage;  
    1 b/ g( m( ?& i7 o' N& F
40.     touchgfx::ButtonWithLabel ChangeImage;
    ( D8 w/ Q( G$ F( [9 \3 ~
41.     touchgfx::TextAreaWithOneWildcard textimageid;
    
42.     touchgfx::Button NextView;
    ; @- ^4 s: B- Y  h% z& _3 P/ n; q
43.     touchgfx::Button ChartARTViewButton;
    , N! O; N3 [: h6 Y9 \: a: y
44. 
    
45.     /*
    
46.      * Wildcard Buffers
    
47.      */
    
48.     static const uint16_t TEXTIMAGEID_SIZE = 3;
    % ~, e( ]) u) c9 d) u
49.     touchgfx::Unicode::UnicodeChar textimageidBuffer[TEXTIMAGEID_SIZE];
    ' Q; [8 ^9 s9 V/ e. r
50. 
    . R# ]  J% M% x  ?4 i7 W. S
51. private:
    ( F% Y' p7 T5 I; X
52.         这个部分就是 通过TouchGFX Designer中interaction响应的逻辑，具体的一会在cpp文件中将会看见。
    . p9 @4 K! p, W! J& H, i0 \
53.     /*
    
54.      * Callback Declarations
      {( s' B2 u7 i- G% |
55.      */
    ! ^: q! Z- E' u% [) S+ f  \, [
56.     touchgfx::Callback<MainWindowViewBase, const touchgfx::AbstractButton&> buttonCallback;
    
57. 
    " r) b6 M/ E" T* z. G
58.     /*
    
59.      * Callback Handler Declarations
    - |; a  Z5 L" [/ D* p) Z
60.      */
    
61.     void buttonCallbackHandler(const touchgfx::AbstractButton& src);
    
62. 
    3 `. q* P1 O: T& M  W6 l
63. };
    
64. 
    
65. #endif // MAINWINDOWVIEWBASE_HPP
    
66. 
    

复制代码

到这里MainWindowViewBase.hpp文件参观完了，可以接下来参观cpp文件了。
# O5 T& D3 Q5 t! z2 M

1. /*********************************************************************************/
   ; D% b: R) ?$ I! c
2. /********** THIS FILE IS GENERATED BY TOUCHGFX DESIGNER, DO NOT MODIFY ***********/
   
3. /*********************************************************************************/
   
4. #include <gui_generated/mainwindow_screen/MainWindowViewBase.hpp>
   
5. #include "BitmapDatabase.hpp"
   # x8 i: S% M! A. m# l( ^, }$ C# [1 h
6. #include <texts/TextKeysAndLanguages.hpp>
   
7. #include <touchgfx/Color.hpp>
   3 v& S- Q( z, g9 d
8. 
   - |3 V. x2 n# e( N& n. q
9. MainWindowViewBase::MainWindowViewBase() :
   
10.     buttonCallback(this, &MainWindowViewBase::buttonCallbackHandler)
    
11. {
    ; L* }! _" m9 s
12.         在构造函数中可以看见我们添加的控件在cpp文件中体现的样子包括设置图片或者设置位置
    , E" q' z0 {: y# x) c0 x5 q0 ]
13.     BackImage.setBitmap(touchgfx::Bitmap(BITMAP_IMG1_ID));
    
14.     BackImage.setPosition(0, 0, 800, 480);
    : b  k5 h3 I6 _% Z
15.     BackImage.setScalingAlgorithm(touchgfx::ScalableImage::NEAREST_NEIGHBOR);
    
16. 
    3 G2 e3 R% v9 x4 v% A
17.     ChangeImage.setXY(315, 0);
    
18.     ChangeImage.setBitmaps(touchgfx::Bitmap(BITMAP_BLUE_BUTTONS_ROUND_EDGE_SMALL_ID), touchgfx::Bitmap(BITMAP_BLUE_BUTTONS_ROUND_EDGE_SMALL_PRESSED_ID));
    
19.     ChangeImage.setLabelText(touchgfx::TypedText(T_SINGLEUSEID1));
    * O' Q* P. ^* L% b' R( V- Z$ w# p
20.     ChangeImage.setLabelColor(touchgfx::Color::getColorFrom24BitRGB(255, 255, 255));
    7 H7 R6 w* T: N4 v
21.     ChangeImage.setLabelColorPressed(touchgfx::Color::getColorFrom24BitRGB(255, 255, 255));
    2 ~. c2 k5 E* K1 u0 r0 ^- ]
22.     ChangeImage.setAction(buttonCallback);这里可以看见添加action方法
    / A& E/ b, X0 M9 ^
23. 
    0 \& Q9 Z8 s7 f
24.     textimageid.setPosition(394, 68, 26, 25);
    
25.     textimageid.setColor(touchgfx::Color::getColorFrom24BitRGB(255, 0, 0));
    4 n1 Z; G. m, m" A: L5 l. Q1 M2 r
26.     textimageid.setLinespacing(0);
    , m( ~/ k+ q6 A* X/ C0 P
27.     Unicode::snprintf(textimageidBuffer, TEXTIMAGEID_SIZE, "%s", touchgfx::TypedText(T_SINGLEUSEID3).getText());
    / k6 h7 ?: W9 C2 m5 ?/ m
28.     textimageid.setWildcard(textimageidBuffer);
    
29.     textimageid.setTypedText(touchgfx::TypedText(T_SINGLEUSEID2));
    3 R* O3 d. v4 e  s
30. 
    : A4 ^4 b' w+ d; c0 |. V
31.     NextView.setXY(377, 135);
    
32.     NextView.setBitmaps(touchgfx::Bitmap(BITMAP_BLUE_BUTTONS_ROUND_ICON_BUTTON_ID), touchgfx::Bitmap(BITMAP_BLUE_BUTTONS_ROUND_ICON_BUTTON_PRESSED_ID));
    ( d0 Y* g! ~1 @2 i* R
33.     NextView.setAction(buttonCallback);
    
34. 
    
35.     ChartARTViewButton.setXY(377, 230);
    # l3 k, V3 B6 d/ Z% D
36.     ChartARTViewButton.setBitmaps(touchgfx::Bitmap(BITMAP_BLUE_BUTTONS_ROUND_ICON_BUTTON_ID), touchgfx::Bitmap(BITMAP_BLUE_BUTTONS_ROUND_ICON_BUTTON_PRESSED_ID));
    
37.     ChartARTViewButton.setAction(buttonCallback);页面切换的action函数
    - n3 t- z8 m0 V$ T
38. 在窗口上添加控件方法
    & Y' v) c8 K0 M$ U* T3 ]
39.     add(BackImage);
    # T7 |8 @. {. L; F$ L3 P
40.     add(ChangeImage);
    
41.     add(textimageid);
    
42.     add(NextView);
    
43.     add(ChartARTViewButton);
    
44. }
    4 s* G1 h, x1 `4 Z  c* V% `4 S. M
45. 
    
46. void MainWindowViewBase::setupScreen()
    
47. {
    & e, \3 u+ \2 l+ |% b
48. 
    4 X# e* b5 z* z
49. }
    . Z+ _* x$ |0 T2 [: e4 t
50. 
    
51. void MainWindowViewBase::buttonCallbackHandler(const touchgfx::AbstractButton& src)
    
52. {
    
53.     if (&src == &ChangeImage)
    * z2 g$ R) W$ a; {. I
54.     {
    ( d3 t! t! m$ n
55.         //Interaction1
    
56.         //When ChangeImage clicked call virtual function
    ) ~, x! w0 q' A: T. G' o; G1 N
57.         //Call setBackImageIMG
    
58.         setBackImageIMG();这里可以看见是通过callback函数响应的setBackImageIMG函数，由此可以知道以此方法我们可以自己在界面上添加控件，而控件响应的函数也可以这样添加。注意要是自定义添加不要在base文件中添加要在界面类的函数中添加。
    
59.     }
    
60.     else if (&src == &NextView)
    
61.     {
    
62.         //Interaction2
    
63.         //When NextView clicked change screen to TabView
    6 y& @: O5 o! v* X
64.         //Go to TabView with screen transition towards East
    
65.         application().gotoTabViewScreenSlideTransitionEast();
    5 w6 H3 J7 _7 Z4 |# C8 A8 r0 F
66.     }
    5 b+ e9 P& i) }# v
67.     else if (&src == &ChartARTViewButton)
    2 ]4 ~  [5 b4 O7 D- x; z
68.     {
    : M( N+ [. B4 J1 o# C$ S* g  Z
69.         //Interaction3
    , u+ |8 J# |& K7 R' ^7 {; R+ z
70.         //When ChartARTViewButton clicked change screen to ChartView
    # ~: n" V; ^; i  k: F0 x
71.         //Go to ChartView with screen transition towards East
    $ o5 v2 o& l) L. O! I! {/ _) U
72.         application().gotoChartViewScreenSlideTransitionEast();
    
73.     }
    
74. }
    2 ~5 J3 F1 v5 u! ^, p! \
75. 
    

复制代码

由此可以看到创建的界面后，base文件中的状态。下面会给大家展示一下view文件中的内容。
$ Y4 }1 K' t3 y
: Q' _) M3 _7 ^, n
View类的作用
1 Y" ~- S' ]8 l( ]view中的内容是可以进行修改的，可以根据需要添加自己的使用方法。
下面我们再看一下MainWindowView.hpp文件。
' T: j& k% u1 K

1. #ifndef MAINWINDOWVIEW_HPP
   0 r9 m' Q% J$ \
2. #define MAINWINDOWVIEW_HPP
     A" x# B9 ?+ G% N) D
3. 
   " K5 H5 B4 E! i! l- I
4. #include <gui_generated/mainwindow_screen/MainWindowViewBase.hpp>
   - k8 Y  S8 G) z# y7 N
5. #include <gui/mainwindow_screen/MainWindowPresenter.hpp>
   ( x5 Y# ~. B5 m3 }: S
6. 
   
7. 
   - Q! q# y! |) B( Y
8. class MainWindowView : public MainWindowViewBase这里看见这个类是继承上方的基类MainWindowViewBase
   $ l( O$ Q% F6 ], |
9. {
   
10. public:
    / y7 O$ f( J" f1 m
11.     MainWindowView();
    
12.     virtual ~MainWindowView() {}
    $ r/ o/ \. ?0 b/ P2 U
13.     virtual void setupScreen(); 正常创建时，到此处就没有了。
    
14.     下方的文件是手动添加的，如果在界面上创建了function函数，
    ; U: }- M7 d! J0 {* o7 `* ?
15.     则在该文件中添加一样的虚函数，具体在上方的base中能看出来。
    4 o* w& q6 w0 D/ a% ^9 N
16.     virtual void tearDownScreen();
      L9 h9 e5 u9 T/ I! Y6 k# p
17.     virtual void setBackImageIMG();
    
18. protected:
    " [: O6 z: T0 E5 P) r" L
19. 
    , _# d# |, Q0 v# i
20. };
    2 S- b/ \' d  }! B& U  K0 k
21. 
    / P9 P% D- F2 A8 Z: N% f2 ?1 G
22. #endif // MAINWINDOWVIEW_HPP
    

复制代码

5 h- h0 a/ U' y4 q此时就可以在cpp文件中添加相应的函数实现了。
. D( M8 O+ I- r; _6 ^6 l
按键事件响应逻辑
) s4 B$ W9 r+ V4 Z% @  V好了说了这么多，我来给大家总结一下吧，通过TouchGFX Designer创建一个界面，在界面中可拖拽控件，在TouchGFX Designer下也可添加相应的action函数，在添加完函数后，要在view文件中加入相应的虚函数。
+ \4 E5 `! D! M7 z除此之外，还可以模仿base文件的方法在界面类中添加相应的button及button的action文件。此章给大家介绍了创建事件的注意示项。
! c1 R& M8 z5 o0 R2 p9 W5 n2 R————————————————
$ e( \/ l5 m) u' t) I版权声明：空闲的程序员
! ]9 F+ `0 }3 M0 q0 z( H; @6 h
3 S5 S+ U! b' C3 I5 `3 G2 i+ N
' I7 @" \' L6 A( C7 g+ T