通过TouchGFX创建事件逻辑函数
5 B# I, `( ~: ?6 @TouchGFX Designer中的交互由触发器和动作组成：
触发器：是由用户点击或者进行其他操作后产生的信号。
动作：由触发器触发的相应的事件逻辑。
) i: K; g( H1 D1 V1 S要添加interaction ，请转到任何屏幕或自定义容器的“interaction”选项卡，然后按下标有“Add Interaction”的蓝色按钮，如下图所示。

9 D) m- \; m2 Y: y% w

添加后界面样子如下：


" U2 k7 W  G9 m) ^' N' D0 o% h' u
Trigger中用于添加触发器类型,例如：按钮点击事件。Choose clicked source 中添加被点击的是哪一个按钮，这里显示的是“button1”。
Action：action的操作分为了两种，第一种是作为基础窗口的动作：
' _3 R) v8 H8 w/ H( \7 H" ^4 j, ^3 f该种动作包括：
$ |# M1 p0 z1 Y8 L/ G; Q


第二种是控件的属性提供的动作：

  j# f: y/ m: s4 h4 h
: Z8 q9 {3 {3 D' ^. `4 ^! F
在上图的底部存在Can trigger another interaction的复选框，它的作用是连续动作，当一次触发事件后多次响应其他的事件。

  s; U7 J) R& |+ bBase类中的秘密
在通过TouchGFX Designer创建完界面，并在界面中添加完相应的触发器后，生成的代码中将会存在相应的界面基类，这类代码是由TouchGFX Designer自动生成的，所以不建议更改，在第一章也和大家说过，下面我们探索下这个类中有些什么：
我们以我写的一个例子做讲解，该demo源码在第一张中可下载。看下图

7 s! B: j3 _# @  n

8 b! Y9 T& h) T1 F  N0 V
: o3 ^9 _% e5 P/ @2 f7 {/ V3 @; |我们以MainWindow窗口作为例子讲解窗口基类中有哪些东西，首先窗口的名字叫做“MainWindow”，其中包含和三个按钮及一个text area还有一张背景图片Backimage。放置的顺序不同在界面上体现的层次感不同，如果将背景图片放在最上层的话其他按钮都将被盖在下面。其次看右侧的interaction，在其中我添加了三个逻辑，类型都是按钮的点击事件对应的是三个按钮，相应的功能是“Call new virtual function”，在下方写了函数的名字。注意函数名字和控件的名字，此时，点击Generate Code 按钮后在VS中打开工程。可以看到在头文件和源文件中generated/gui_generated文件夹下有mainwindow_screen文件夹存在，在该文件夹下将存在该界面的基类。如下图：
3 }) i/ S- p3 ]6 C
, F& i& @5 x9 o, q: V; o% S% A1 N

( h) ^/ ~- v: @2 ~0 z( N/ K  T5 i9 u我们看下该类中的头文件：

1. /*********************************************************************************/
   % Q! q6 U' q; f; g
2. /********** THIS FILE IS GENERATED BY TOUCHGFX DESIGNER, DO NOT MODIFY ***********/
   
3. /*********************************************************************************/
   
4. #ifndef MAINWINDOWVIEWBASE_HPP
   2 R3 ?  a- M/ B- p3 g( Z; Q
5. #define MAINWINDOWVIEWBASE_HPP
     m/ L% P# {1 W: z
6. 
   
7. #include <gui/common/FrontendApplication.hpp>
   1 w& k+ n8 g! V( f9 K
8. #include <mvp/View.hpp>
   
9. #include <gui/mainwindow_screen/MainWindowPresenter.hpp>
   
10. #include <touchgfx/widgets/ScalableImage.hpp>
    9 T8 C* E7 M- [  t
11. #include <touchgfx/widgets/ButtonWithLabel.hpp>
    
12. #include <touchgfx/widgets/TextAreaWithWildcard.hpp>
    
13. #include <touchgfx/widgets/Button.hpp>
    
14. 
    ' _$ |% Z- |: v! Y. Z# n+ ~9 ?
15. class MainWindowViewBase : public touchgfx::View<MainWindowPresenter>
      M+ [! J- M  R2 z; _  \
16. {
    
17. public:
    
18.     MainWindowViewBase();
    
19.     virtual ~MainWindowViewBase() {}
    
20.     virtual void setupScreen();  窗口创建时响应的函数
    6 ]5 v- b! p1 K
21. 
    
22.     /*
    ; F% n) Y5 E4 m9 i9 C& p" v) M, ?
23.      * Virtual Action Handlers
    
24.      */
      R4 {/ f  B7 \/ D
25.     virtual void setBackImageIMG() 这个就是在TouchGFX Designer中function name 中填的名字他就是Designer产生的关联性。
    8 }- m5 s( C6 g2 Z9 g5 {
26.     {
    
27.         // Override and implement this function in MainWindow
    3 r; n1 ?8 h0 E! y" f
28.     }
    
29. 
    
30. protected:
    
31.     FrontendApplication& application() {
    / P$ l& |: K% C8 j$ v
32.         return *static_cast<FrontendApplication*>(touchgfx::Application::getInstance());
    
33.     }
    
34. 
    ) H$ i. I% M/ j  J# F. I
35.     /*
    
36.      * Member Declarations
    : s; h+ H  a$ }1 K$ d
37.      */
    & V- F7 v; w3 e+ k7 N
38.      这部分放的就是界面上控件的名字，也就是说如果想要修改控件的动作或者状态，除了TouchGFX Designer中修改外，也可以通过代码调用定义修改。
    ) H; T& u  W" B% u. u5 C8 d& G) c7 c
39.     touchgfx::ScalableImage BackImage;  
    3 n2 I# H: }& C$ w* g2 S$ a
40.     touchgfx::ButtonWithLabel ChangeImage;
    
41.     touchgfx::TextAreaWithOneWildcard textimageid;
    
42.     touchgfx::Button NextView;
    
43.     touchgfx::Button ChartARTViewButton;
    * @' X$ m+ Z4 s
44. 
    
45.     /*
    
46.      * Wildcard Buffers
    
47.      */
    
48.     static const uint16_t TEXTIMAGEID_SIZE = 3;
    
49.     touchgfx::Unicode::UnicodeChar textimageidBuffer[TEXTIMAGEID_SIZE];
    
50. 
    
51. private:
    8 m& ~- v7 j( ]) a. k+ k
52.         这个部分就是 通过TouchGFX Designer中interaction响应的逻辑，具体的一会在cpp文件中将会看见。
    
53.     /*
    
54.      * Callback Declarations
    
55.      */
    + s: x7 j' Q3 V7 b$ A5 u
56.     touchgfx::Callback<MainWindowViewBase, const touchgfx::AbstractButton&> buttonCallback;
    
57. 
    
58.     /*
    7 ^$ I& B$ A. e& g8 `1 R
59.      * Callback Handler Declarations
      `9 o1 f  _- m& I
60.      */
    
61.     void buttonCallbackHandler(const touchgfx::AbstractButton& src);
    
62. 
    ) g" o5 a0 K, a( z, I8 V! Q
63. };
    - O9 Q4 j/ u. |# u2 N. s/ a
64. 
    1 t" @% ], \2 u2 ?6 |
65. #endif // MAINWINDOWVIEWBASE_HPP
    , [2 w" V: g$ N: @# F+ q
66. 
    $ Z- P" o! c4 Z7 t

复制代码

到这里MainWindowViewBase.hpp文件参观完了，可以接下来参观cpp文件了。
3 O* \* F" @3 P  x5 ~- W9 i

1. /*********************************************************************************/
   2 A( W; f9 Q8 p( a7 j
2. /********** THIS FILE IS GENERATED BY TOUCHGFX DESIGNER, DO NOT MODIFY ***********/
   1 K2 B( N) k& l6 D8 u
3. /*********************************************************************************/
   0 c3 S0 S8 `; p
4. #include <gui_generated/mainwindow_screen/MainWindowViewBase.hpp>
   - y: O! F" G4 X, O
5. #include "BitmapDatabase.hpp"
   + F' S$ l5 D) u; }  _( N  `
6. #include <texts/TextKeysAndLanguages.hpp>
   9 K5 F- F  `+ t" N! G
7. #include <touchgfx/Color.hpp>
   . ^5 a9 P. e: R/ @
8. 
   
9. MainWindowViewBase::MainWindowViewBase() :
   
10.     buttonCallback(this, &MainWindowViewBase::buttonCallbackHandler)
    1 I5 b6 V. A3 ]
11. {
    : s9 X. l; P; {% f7 a0 I
12.         在构造函数中可以看见我们添加的控件在cpp文件中体现的样子包括设置图片或者设置位置
    
13.     BackImage.setBitmap(touchgfx::Bitmap(BITMAP_IMG1_ID));
    
14.     BackImage.setPosition(0, 0, 800, 480);
    . E5 V$ I4 [" c  x) b
15.     BackImage.setScalingAlgorithm(touchgfx::ScalableImage::NEAREST_NEIGHBOR);
    
16. 
    
17.     ChangeImage.setXY(315, 0);
    ! E  a8 V8 r. {2 n: C7 l
18.     ChangeImage.setBitmaps(touchgfx::Bitmap(BITMAP_BLUE_BUTTONS_ROUND_EDGE_SMALL_ID), touchgfx::Bitmap(BITMAP_BLUE_BUTTONS_ROUND_EDGE_SMALL_PRESSED_ID));
    # a/ c' E2 v8 e. R7 X
19.     ChangeImage.setLabelText(touchgfx::TypedText(T_SINGLEUSEID1));
    
20.     ChangeImage.setLabelColor(touchgfx::Color::getColorFrom24BitRGB(255, 255, 255));
    
21.     ChangeImage.setLabelColorPressed(touchgfx::Color::getColorFrom24BitRGB(255, 255, 255));
    ) A) M. N7 f! f! t+ b7 V
22.     ChangeImage.setAction(buttonCallback);这里可以看见添加action方法
    + D7 j8 c. r1 W" ?& P# m
23. 
    ( Q7 Z: t9 R! Y- u5 }# W4 N! j; H3 X
24.     textimageid.setPosition(394, 68, 26, 25);
    / v) c, }" T) k/ [5 n0 e, e8 u
25.     textimageid.setColor(touchgfx::Color::getColorFrom24BitRGB(255, 0, 0));
    7 ^) S; q7 q+ M" _1 C8 a2 V
26.     textimageid.setLinespacing(0);
    
27.     Unicode::snprintf(textimageidBuffer, TEXTIMAGEID_SIZE, "%s", touchgfx::TypedText(T_SINGLEUSEID3).getText());
    
28.     textimageid.setWildcard(textimageidBuffer);
    - i/ d: Q/ p' W8 U- L! d2 C1 p
29.     textimageid.setTypedText(touchgfx::TypedText(T_SINGLEUSEID2));
    
30. 
    " \6 Q* }+ J2 k
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));
    1 z! }4 M/ d3 T) I. {0 r3 m
33.     NextView.setAction(buttonCallback);
    7 w+ f2 c( @! V- _
34. 
    ; H/ z4 Z& v- P0 B
35.     ChartARTViewButton.setXY(377, 230);
    
36.     ChartARTViewButton.setBitmaps(touchgfx::Bitmap(BITMAP_BLUE_BUTTONS_ROUND_ICON_BUTTON_ID), touchgfx::Bitmap(BITMAP_BLUE_BUTTONS_ROUND_ICON_BUTTON_PRESSED_ID));
    0 g% c! P5 [& x% D; q
37.     ChartARTViewButton.setAction(buttonCallback);页面切换的action函数
    
38. 在窗口上添加控件方法
    . b9 Q& z& J) X  z
39.     add(BackImage);
    - e7 `" l* D/ ], F5 `& N- c
40.     add(ChangeImage);
    
41.     add(textimageid);
    
42.     add(NextView);
    $ Z+ ~7 _5 l, S/ p
43.     add(ChartARTViewButton);
    
44. }
    
45. 
    3 Z$ `! ^' u8 C4 _- K% U/ z
46. void MainWindowViewBase::setupScreen()
    % C: M* e+ Z# o
47. {
    % ?# ^) ?* m; B% G
48. 
    
49. }
    4 I# t3 P1 c7 b" {9 L
50. 
    8 r( Z4 Y& U" E7 S" k- Z
51. void MainWindowViewBase::buttonCallbackHandler(const touchgfx::AbstractButton& src)
    
52. {
    - a( ~4 W+ p& A: b  ?7 Y' a
53.     if (&src == &ChangeImage)
    ( w, j/ c# d- J4 y) n. h
54.     {
    
55.         //Interaction1
    
56.         //When ChangeImage clicked call virtual function
    6 L; M( ^$ T& g
57.         //Call setBackImageIMG
    
58.         setBackImageIMG();这里可以看见是通过callback函数响应的setBackImageIMG函数，由此可以知道以此方法我们可以自己在界面上添加控件，而控件响应的函数也可以这样添加。注意要是自定义添加不要在base文件中添加要在界面类的函数中添加。
    # ^! d4 ]: H3 b5 g
59.     }
    ' M" Y1 K  {5 o, g! i/ L" K
60.     else if (&src == &NextView)
    9 t$ r; s. n8 ]6 @
61.     {
    
62.         //Interaction2
    
63.         //When NextView clicked change screen to TabView
    7 F! X. x8 D0 j
64.         //Go to TabView with screen transition towards East
    
65.         application().gotoTabViewScreenSlideTransitionEast();
    
66.     }
    & q" ^9 A5 c% k. o( x7 w
67.     else if (&src == &ChartARTViewButton)
    6 l; U1 i1 n# W" |; i& j
68.     {
    # R+ s# E8 n$ R  Z* s
69.         //Interaction3
    
70.         //When ChartARTViewButton clicked change screen to ChartView
    / b. P0 Z- J& @7 X
71.         //Go to ChartView with screen transition towards East
    
72.         application().gotoChartViewScreenSlideTransitionEast();
    
73.     }
    / {4 A  n9 E% d3 ~
74. }
    8 R2 l+ g7 ^, e5 D3 V
75. 
    

复制代码

由此可以看到创建的界面后，base文件中的状态。下面会给大家展示一下view文件中的内容。
& n+ M- e' C7 J; [$ l
" ^  `& q, a) b5 B. Y* k' H
5 L# {4 T4 u1 F* @" {9 f" L+ wView类的作用
+ N# J7 l" ?$ V; Sview中的内容是可以进行修改的，可以根据需要添加自己的使用方法。
下面我们再看一下MainWindowView.hpp文件。

1. #ifndef MAINWINDOWVIEW_HPP
   
2. #define MAINWINDOWVIEW_HPP
   
3. 
   & }1 P# R. b* B
4. #include <gui_generated/mainwindow_screen/MainWindowViewBase.hpp>
   . B! l% C2 x- s+ z5 b6 D3 c! {$ b) Z% d
5. #include <gui/mainwindow_screen/MainWindowPresenter.hpp>
   
6. 
   
7. 
   7 F, c* o: r7 T
8. class MainWindowView : public MainWindowViewBase这里看见这个类是继承上方的基类MainWindowViewBase
   
9. {
   , o0 |2 W; X  O  F: M
10. public:
    ; ?5 y; Z- c7 ]) p$ Q$ i( a
11.     MainWindowView();
    8 x, x- Y( M2 V( J( d1 ?' v" @$ ^9 i$ w
12.     virtual ~MainWindowView() {}
    
13.     virtual void setupScreen(); 正常创建时，到此处就没有了。
    / d  B2 x1 s: _. v1 g* V
14.     下方的文件是手动添加的，如果在界面上创建了function函数，
    
15.     则在该文件中添加一样的虚函数，具体在上方的base中能看出来。
    
16.     virtual void tearDownScreen();
    
17.     virtual void setBackImageIMG();
    
18. protected:
    
19. 
    
20. };
    
21. 
    , i: c$ ^7 g+ R7 h9 p
22. #endif // MAINWINDOWVIEW_HPP
    

复制代码

; |* L+ c: L2 V8 D6 P此时就可以在cpp文件中添加相应的函数实现了。

/ R, b& k3 r- Q. D按键事件响应逻辑
好了说了这么多，我来给大家总结一下吧，通过TouchGFX Designer创建一个界面，在界面中可拖拽控件，在TouchGFX Designer下也可添加相应的action函数，在添加完函数后，要在view文件中加入相应的虚函数。
除此之外，还可以模仿base文件的方法在界面类中添加相应的button及button的action文件。此章给大家介绍了创建事件的注意示项。
$ a+ v! o/ K2 h) Q* `————————————————
0 h) L" H- ~' t! g版权声明：空闲的程序员

, a$ \8 t: J* |( O) M9 c7 h3 T- g
. K2 ~; }9 F& Y- [3 Y0 L