通过TouchGFX创建事件逻辑函数
TouchGFX Designer中的交互由触发器和动作组成：
触发器：是由用户点击或者进行其他操作后产生的信号。
% ?7 Y. b: }: p) @4 `& i/ d4 D动作：由触发器触发的相应的事件逻辑。
要添加interaction ，请转到任何屏幕或自定义容器的“interaction”选项卡，然后按下标有“Add Interaction”的蓝色按钮，如下图所示。


# ]$ {) |, M, f2 A9 @
添加后界面样子如下：
, S7 u3 f& e& ~9 x' e2 f. a6 X


  T; n6 L+ N. x& t. F- ?: b7 ^2 ^; LTrigger中用于添加触发器类型,例如：按钮点击事件。Choose clicked source 中添加被点击的是哪一个按钮，这里显示的是“button1”。
Action：action的操作分为了两种，第一种是作为基础窗口的动作：
该种动作包括：
3 t( R# ^* D  W- h2 e& }) y


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



. H. p2 Z" P  {# }; A: r在上图的底部存在Can trigger another interaction的复选框，它的作用是连续动作，当一次触发事件后多次响应其他的事件。

Base类中的秘密
0 G9 F! g7 @3 c, h1 ~* Z$ P在通过TouchGFX Designer创建完界面，并在界面中添加完相应的触发器后，生成的代码中将会存在相应的界面基类，这类代码是由TouchGFX Designer自动生成的，所以不建议更改，在第一章也和大家说过，下面我们探索下这个类中有些什么：
我们以我写的一个例子做讲解，该demo源码在第一张中可下载。看下图
: j# t, C6 ~/ B6 X7 l. K6 i

5 e4 c1 X  m- S! u7 C, Z9 W) h
) ?& H+ J' `. C
我们以MainWindow窗口作为例子讲解窗口基类中有哪些东西，首先窗口的名字叫做“MainWindow”，其中包含和三个按钮及一个text area还有一张背景图片Backimage。放置的顺序不同在界面上体现的层次感不同，如果将背景图片放在最上层的话其他按钮都将被盖在下面。其次看右侧的interaction，在其中我添加了三个逻辑，类型都是按钮的点击事件对应的是三个按钮，相应的功能是“Call new virtual function”，在下方写了函数的名字。注意函数名字和控件的名字，此时，点击Generate Code 按钮后在VS中打开工程。可以看到在头文件和源文件中generated/gui_generated文件夹下有mainwindow_screen文件夹存在，在该文件夹下将存在该界面的基类。如下图：

) R& E& R* B5 Y" S7 `! F

0 [* K5 V  ]+ X6 M$ E7 d8 I我们看下该类中的头文件：
1 J* |0 @: `8 z4 l- k  y

1. /*********************************************************************************/
   , x/ [2 F" g/ H% E/ j
2. /********** THIS FILE IS GENERATED BY TOUCHGFX DESIGNER, DO NOT MODIFY ***********/
   
3. /*********************************************************************************/
   
4. #ifndef MAINWINDOWVIEWBASE_HPP
   * M' N# Y% M" C( a% Z
5. #define MAINWINDOWVIEWBASE_HPP
   
6. 
   
7. #include <gui/common/FrontendApplication.hpp>
   7 Z$ S+ k+ `) }& Y& l; ^8 [: W
8. #include <mvp/View.hpp>
   3 i) A+ L) @# D+ W
9. #include <gui/mainwindow_screen/MainWindowPresenter.hpp>
   , E9 G: L+ @7 B) p$ s
10. #include <touchgfx/widgets/ScalableImage.hpp>
    
11. #include <touchgfx/widgets/ButtonWithLabel.hpp>
    ' x) z# _1 E3 g: u, g2 j3 w, D
12. #include <touchgfx/widgets/TextAreaWithWildcard.hpp>
    8 }) o! |4 G% D1 B  o
13. #include <touchgfx/widgets/Button.hpp>
      ?9 e) G0 J2 `0 a9 B" U
14. 
    
15. class MainWindowViewBase : public touchgfx::View<MainWindowPresenter>
    , [* x0 S7 k( K7 V7 f& `- z
16. {
    
17. public:
    ( W  \8 ?  E* ?9 n. L. J0 H5 I9 c! u
18.     MainWindowViewBase();
    " A; U( M2 T' N: O6 }
19.     virtual ~MainWindowViewBase() {}
    
20.     virtual void setupScreen();  窗口创建时响应的函数
    
21. 
      e9 |- P# d9 t0 Z" M- Q- T; _: l
22.     /*
    + G" i# B+ z2 N7 A
23.      * Virtual Action Handlers
    ( N( K1 J+ r! A. q/ X5 ~8 _
24.      */
    
25.     virtual void setBackImageIMG() 这个就是在TouchGFX Designer中function name 中填的名字他就是Designer产生的关联性。
    
26.     {
    
27.         // Override and implement this function in MainWindow
    
28.     }
    3 ^4 a/ d" V4 Z7 h  Q6 D
29. 
    
30. protected:
    7 H, v. O2 I0 w8 z. ~; Y
31.     FrontendApplication& application() {
    2 o3 P; J. t" m0 d4 R, _6 P
32.         return *static_cast<FrontendApplication*>(touchgfx::Application::getInstance());
    
33.     }
    7 y0 v% z% o. `
34. 
    2 Q, M8 C% k) J, b9 X
35.     /*
    # f* ]  I6 H" z  [" S# {1 [) Q2 w
36.      * Member Declarations
    3 y: W# L' g' ~7 ?( k( r
37.      */
    3 @8 |; |6 E% V( ]
38.      这部分放的就是界面上控件的名字，也就是说如果想要修改控件的动作或者状态，除了TouchGFX Designer中修改外，也可以通过代码调用定义修改。
    
39.     touchgfx::ScalableImage BackImage;  
    2 ?# @; W2 i+ G% g4 _7 ]3 C
40.     touchgfx::ButtonWithLabel ChangeImage;
    
41.     touchgfx::TextAreaWithOneWildcard textimageid;
    
42.     touchgfx::Button NextView;
    * E6 ?. d% ^$ l5 X* Z
43.     touchgfx::Button ChartARTViewButton;
    
44. 
    
45.     /*
    
46.      * Wildcard Buffers
    
47.      */
    
48.     static const uint16_t TEXTIMAGEID_SIZE = 3;
    
49.     touchgfx::Unicode::UnicodeChar textimageidBuffer[TEXTIMAGEID_SIZE];
    
50. 
    : [0 y" S* k9 n5 W2 r" \! X
51. private:
    1 b" q2 @* ?* d7 A, F0 F
52.         这个部分就是 通过TouchGFX Designer中interaction响应的逻辑，具体的一会在cpp文件中将会看见。
    ! b. g6 k: C  |% W5 G
53.     /*
    & c& e+ a* d5 I. ]: D6 r3 ^
54.      * Callback Declarations
    
55.      */
    # E" j. Y+ K( e+ y
56.     touchgfx::Callback<MainWindowViewBase, const touchgfx::AbstractButton&> buttonCallback;
    
57. 
    
58.     /*
    , L/ z8 C, U9 I1 L& w
59.      * Callback Handler Declarations
    $ f. r! y' \8 \0 p* S
60.      */
    
61.     void buttonCallbackHandler(const touchgfx::AbstractButton& src);
    : x# G% r1 h- ^
62. 
    ; p) u6 y' D2 y; H. X; E
63. };
    5 h; P" t# M) ~  _
64. 
    
65. #endif // MAINWINDOWVIEWBASE_HPP
    
66. 
    

复制代码

到这里MainWindowViewBase.hpp文件参观完了，可以接下来参观cpp文件了。
6 k/ [9 D, T- \- Z( C8 U4 g6 w

1. /*********************************************************************************/
   9 c) y! V, M2 k( n# z
2. /********** THIS FILE IS GENERATED BY TOUCHGFX DESIGNER, DO NOT MODIFY ***********/
   : g) {: `# Q1 s- Y2 M" x0 k, b) `
3. /*********************************************************************************/
   ; {% B0 O9 L- b. N4 T$ {
4. #include <gui_generated/mainwindow_screen/MainWindowViewBase.hpp>
   
5. #include "BitmapDatabase.hpp"
   3 ^, ~$ H2 `. Q
6. #include <texts/TextKeysAndLanguages.hpp>
   ; w4 A3 {9 }4 l( B5 q; ]0 k7 ^! r3 A
7. #include <touchgfx/Color.hpp>
   ! t/ i* i7 ?+ L7 F0 ?$ L5 C
8. 
   / C4 \  ^' d, @0 _- t
9. MainWindowViewBase::MainWindowViewBase() :
   1 G$ t- W% P: I% B: |: {7 p" Y
10.     buttonCallback(this, &MainWindowViewBase::buttonCallbackHandler)
    9 a9 C/ q; j8 I! M" G
11. {
    ' r7 H3 K3 R1 z, O- S* T: y
12.         在构造函数中可以看见我们添加的控件在cpp文件中体现的样子包括设置图片或者设置位置
    
13.     BackImage.setBitmap(touchgfx::Bitmap(BITMAP_IMG1_ID));
    
14.     BackImage.setPosition(0, 0, 800, 480);
    , E  \, ]6 \# X: n& y
15.     BackImage.setScalingAlgorithm(touchgfx::ScalableImage::NEAREST_NEIGHBOR);
    , N  q* f# \' V: l
16. 
    
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));
    
20.     ChangeImage.setLabelColor(touchgfx::Color::getColorFrom24BitRGB(255, 255, 255));
    ; Y' |: W5 n3 B8 g
21.     ChangeImage.setLabelColorPressed(touchgfx::Color::getColorFrom24BitRGB(255, 255, 255));
    * z& @+ \$ }3 x* ?% v
22.     ChangeImage.setAction(buttonCallback);这里可以看见添加action方法
    ' a" X+ N2 o7 _) k9 y( Z
23. 
    
24.     textimageid.setPosition(394, 68, 26, 25);
    
25.     textimageid.setColor(touchgfx::Color::getColorFrom24BitRGB(255, 0, 0));
    ; k& \$ i& z) R* x9 K& f& R. H: ?
26.     textimageid.setLinespacing(0);
    * V: l% U( m4 o1 D+ U' ^+ t
27.     Unicode::snprintf(textimageidBuffer, TEXTIMAGEID_SIZE, "%s", touchgfx::TypedText(T_SINGLEUSEID3).getText());
    
28.     textimageid.setWildcard(textimageidBuffer);
    
29.     textimageid.setTypedText(touchgfx::TypedText(T_SINGLEUSEID2));
    / O) b* k# o/ M
30. 
    
31.     NextView.setXY(377, 135);
    ' p( M) W7 I) S# Y2 C3 W( R* R: y
32.     NextView.setBitmaps(touchgfx::Bitmap(BITMAP_BLUE_BUTTONS_ROUND_ICON_BUTTON_ID), touchgfx::Bitmap(BITMAP_BLUE_BUTTONS_ROUND_ICON_BUTTON_PRESSED_ID));
    
33.     NextView.setAction(buttonCallback);
    
34. 
    
35.     ChartARTViewButton.setXY(377, 230);
    ) c8 I, p: u' `, D: l" p
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函数
    
38. 在窗口上添加控件方法
    
39.     add(BackImage);
    1 Q. m4 j. Z& l9 ~! R7 l, Q
40.     add(ChangeImage);
    ; ?' N: C1 V  o) |
41.     add(textimageid);
    ( c5 t9 R* J( d0 d) }
42.     add(NextView);
    
43.     add(ChartARTViewButton);
    ' j: h5 N- j8 x  \) A
44. }
    ! @+ n7 l$ m" W$ o
45. 
    
46. void MainWindowViewBase::setupScreen()
    $ q/ U3 ^" o3 e2 c* Q$ c0 f
47. {
    
48. 
    + p. P! [* P5 [! T
49. }
    
50. 
    ) m+ W7 r% r* r, B% Q
51. void MainWindowViewBase::buttonCallbackHandler(const touchgfx::AbstractButton& src)
    
52. {
    
53.     if (&src == &ChangeImage)
    
54.     {
    " J0 S4 X3 m% s% d: z
55.         //Interaction1
    - r9 O5 Y/ n- F
56.         //When ChangeImage clicked call virtual function
    
57.         //Call setBackImageIMG
    / D; V4 B; r1 m+ _  f+ G7 l( I
58.         setBackImageIMG();这里可以看见是通过callback函数响应的setBackImageIMG函数，由此可以知道以此方法我们可以自己在界面上添加控件，而控件响应的函数也可以这样添加。注意要是自定义添加不要在base文件中添加要在界面类的函数中添加。
    5 C$ r% T# H( }3 x) q% X
59.     }
    . g) H# r3 e7 P' u% J$ n$ r
60.     else if (&src == &NextView)
    
61.     {
    - W, a5 E3 U( {
62.         //Interaction2
    
63.         //When NextView clicked change screen to TabView
    
64.         //Go to TabView with screen transition towards East
    6 J$ s/ Z3 q$ `; ~2 S0 R
65.         application().gotoTabViewScreenSlideTransitionEast();
    
66.     }
    
67.     else if (&src == &ChartARTViewButton)
    
68.     {
    1 ]3 \) ~. M( X( y: r, B/ m
69.         //Interaction3
    # Q  O6 W" j2 @( J& Q9 p4 \
70.         //When ChartARTViewButton clicked change screen to ChartView
    
71.         //Go to ChartView with screen transition towards East
    
72.         application().gotoChartViewScreenSlideTransitionEast();
    
73.     }
    
74. }
    
75. 
    

复制代码

由此可以看到创建的界面后，base文件中的状态。下面会给大家展示一下view文件中的内容。
5 Z5 v' p- U- H
- Y$ F0 N* ~* ?
View类的作用
view中的内容是可以进行修改的，可以根据需要添加自己的使用方法。
9 @  q% O) [5 I  u  O下面我们再看一下MainWindowView.hpp文件。

1. #ifndef MAINWINDOWVIEW_HPP
   5 G7 i, v/ H9 l# X/ ?
2. #define MAINWINDOWVIEW_HPP
   
3. 
   ' }" b7 i- y, D% }4 ^6 @
4. #include <gui_generated/mainwindow_screen/MainWindowViewBase.hpp>
   $ o( W" }# T( U, k# D
5. #include <gui/mainwindow_screen/MainWindowPresenter.hpp>
   
6. 
   
7. 
   1 L2 h: w7 ]+ A" d! B) u: P: h
8. class MainWindowView : public MainWindowViewBase这里看见这个类是继承上方的基类MainWindowViewBase
   
9. {
   
10. public:
    8 |: A( D" ~& m5 r6 K! G9 O
11.     MainWindowView();
    
12.     virtual ~MainWindowView() {}
    
13.     virtual void setupScreen(); 正常创建时，到此处就没有了。
    
14.     下方的文件是手动添加的，如果在界面上创建了function函数，
    , K- F. d2 a) }5 O3 f
15.     则在该文件中添加一样的虚函数，具体在上方的base中能看出来。
    
16.     virtual void tearDownScreen();
    , u" p4 N' `9 ]8 f( x& m) u. ^
17.     virtual void setBackImageIMG();
    + J3 U6 E, s  P& y% a7 w2 \8 ~/ K
18. protected:
    
19. 
    
20. };
    
21. 
    
22. #endif // MAINWINDOWVIEW_HPP
    / k2 A, a, |/ P8 V9 ^0 O2 ~1 r

复制代码

' Y6 ?4 B5 w/ q3 P此时就可以在cpp文件中添加相应的函数实现了。
; L! A% f2 S1 k4 Z1 \. J
按键事件响应逻辑
好了说了这么多，我来给大家总结一下吧，通过TouchGFX Designer创建一个界面，在界面中可拖拽控件，在TouchGFX Designer下也可添加相应的action函数，在添加完函数后，要在view文件中加入相应的虚函数。
7 ~+ N& K# I1 E" S5 p除此之外，还可以模仿base文件的方法在界面类中添加相应的button及button的action文件。此章给大家介绍了创建事件的注意示项。
————————————————
版权声明：空闲的程序员
7 ~4 z# U! R4 g  q