通过TouchGFX创建事件逻辑函数
TouchGFX Designer中的交互由触发器和动作组成：
' f) Z( d+ X) S% _2 v触发器：是由用户点击或者进行其他操作后产生的信号。
- L; f% X2 k) m3 b+ j动作：由触发器触发的相应的事件逻辑。
2 m6 a9 f3 L- M" Z要添加interaction ，请转到任何屏幕或自定义容器的“interaction”选项卡，然后按下标有“Add Interaction”的蓝色按钮，如下图所示。
2 h& Q0 R8 Q( k8 T4 A# D& h1 @  Z* h
8 ~" K! h4 _% G, l( R
0 k7 m0 K" N3 e6 z- @0 _5 g$ I
添加后界面样子如下：


; n8 Q+ j% u  P) S
" s$ ?( O$ e2 a' h9 QTrigger中用于添加触发器类型,例如：按钮点击事件。Choose clicked source 中添加被点击的是哪一个按钮，这里显示的是“button1”。
Action：action的操作分为了两种，第一种是作为基础窗口的动作：
( {+ k' d% f/ q4 C/ r$ S7 S该种动作包括：

* W1 R1 p4 ~, `( v+ f8 E
0 W  O$ v7 Q; c- F
第二种是控件的属性提供的动作：



1 f% I1 N- h5 Q: N2 i' X在上图的底部存在Can trigger another interaction的复选框，它的作用是连续动作，当一次触发事件后多次响应其他的事件。
; {8 o- d8 s( ?& G5 ^
Base类中的秘密
在通过TouchGFX Designer创建完界面，并在界面中添加完相应的触发器后，生成的代码中将会存在相应的界面基类，这类代码是由TouchGFX Designer自动生成的，所以不建议更改，在第一章也和大家说过，下面我们探索下这个类中有些什么：
我们以我写的一个例子做讲解，该demo源码在第一张中可下载。看下图
. [6 M& g3 {; D. u. w: O- P


5 u5 k2 @; A- u* T6 m4 m
我们以MainWindow窗口作为例子讲解窗口基类中有哪些东西，首先窗口的名字叫做“MainWindow”，其中包含和三个按钮及一个text area还有一张背景图片Backimage。放置的顺序不同在界面上体现的层次感不同，如果将背景图片放在最上层的话其他按钮都将被盖在下面。其次看右侧的interaction，在其中我添加了三个逻辑，类型都是按钮的点击事件对应的是三个按钮，相应的功能是“Call new virtual function”，在下方写了函数的名字。注意函数名字和控件的名字，此时，点击Generate Code 按钮后在VS中打开工程。可以看到在头文件和源文件中generated/gui_generated文件夹下有mainwindow_screen文件夹存在，在该文件夹下将存在该界面的基类。如下图：
5 p0 @" I7 O! A, X: A4 g7 j


我们看下该类中的头文件：

1. /*********************************************************************************/
   4 ^, j) V; M# y+ X+ J
2. /********** THIS FILE IS GENERATED BY TOUCHGFX DESIGNER, DO NOT MODIFY ***********/
   ! X  O0 P$ z8 o; }  e0 }3 Q
3. /*********************************************************************************/
   # X0 t* C2 u5 w- }% R0 Y, j
4. #ifndef MAINWINDOWVIEWBASE_HPP
   
5. #define MAINWINDOWVIEWBASE_HPP
   
6. 
   
7. #include <gui/common/FrontendApplication.hpp>
   
8. #include <mvp/View.hpp>
   
9. #include <gui/mainwindow_screen/MainWindowPresenter.hpp>
   
10. #include <touchgfx/widgets/ScalableImage.hpp>
    
11. #include <touchgfx/widgets/ButtonWithLabel.hpp>
    / P( D2 v  O$ t* ?, A/ c
12. #include <touchgfx/widgets/TextAreaWithWildcard.hpp>
    
13. #include <touchgfx/widgets/Button.hpp>
    
14. 
    & B& R3 p/ s/ p0 S$ R3 d! j
15. class MainWindowViewBase : public touchgfx::View<MainWindowPresenter>
    : V+ h/ n' m6 E, D" c0 W
16. {
    
17. public:
    
18.     MainWindowViewBase();
    
19.     virtual ~MainWindowViewBase() {}
    
20.     virtual void setupScreen();  窗口创建时响应的函数
    
21. 
    ; Y; {5 R4 X5 X& l- k
22.     /*
    ( L/ U. A- u+ L6 }( Y; P# a
23.      * Virtual Action Handlers
    6 P, a  B" i( g4 l+ e8 o6 L" ]
24.      */
    
25.     virtual void setBackImageIMG() 这个就是在TouchGFX Designer中function name 中填的名字他就是Designer产生的关联性。
    
26.     {
    8 f/ m7 B6 q1 [
27.         // Override and implement this function in MainWindow
    1 z; v% z. [$ d& L% h( T
28.     }
    
29. 
    , ]9 P4 q5 `- e2 @
30. protected:
    $ S4 n6 P8 v% [; P9 K4 h
31.     FrontendApplication& application() {
    + ?2 N$ m; ^9 r  N
32.         return *static_cast<FrontendApplication*>(touchgfx::Application::getInstance());
    
33.     }
    
34. 
    
35.     /*
    
36.      * Member Declarations
    ) q+ w) Q5 n: e' c/ x
37.      */
    
38.      这部分放的就是界面上控件的名字，也就是说如果想要修改控件的动作或者状态，除了TouchGFX Designer中修改外，也可以通过代码调用定义修改。
    : J/ @9 Q3 X( Y5 o! c& {9 i7 R
39.     touchgfx::ScalableImage BackImage;  
    
40.     touchgfx::ButtonWithLabel ChangeImage;
    0 ]* u( o' R2 P8 z$ d* {
41.     touchgfx::TextAreaWithOneWildcard textimageid;
    * f" A- s# g" c) ?
42.     touchgfx::Button NextView;
    2 ~& d# C: r! q$ I/ Y
43.     touchgfx::Button ChartARTViewButton;
    
44. 
    
45.     /*
    
46.      * Wildcard Buffers
    7 q  Z9 U8 O/ s( c9 Y
47.      */
    4 j$ f; ?# m, X0 E$ s1 ~
48.     static const uint16_t TEXTIMAGEID_SIZE = 3;
    
49.     touchgfx::Unicode::UnicodeChar textimageidBuffer[TEXTIMAGEID_SIZE];
    
50. 
    : p- w: f8 x+ N5 ~& M
51. private:
    
52.         这个部分就是 通过TouchGFX Designer中interaction响应的逻辑，具体的一会在cpp文件中将会看见。
    , U0 G% ~- i3 r. ~0 A* A4 i5 M
53.     /*
    7 \2 b( t( x( t* E
54.      * Callback Declarations
    
55.      */
    # z1 z& T0 H5 o* v, _9 t
56.     touchgfx::Callback<MainWindowViewBase, const touchgfx::AbstractButton&> buttonCallback;
    
57. 
    
58.     /*
    ( a" x/ P2 s1 g, x
59.      * Callback Handler Declarations
    
60.      */
    
61.     void buttonCallbackHandler(const touchgfx::AbstractButton& src);
    # x& J- C" A% e7 P) L$ r0 F) x
62. 
    
63. };
    # P- a$ ~3 D; E9 k  f7 w9 B( }
64. 
    
65. #endif // MAINWINDOWVIEWBASE_HPP
    
66. 
    

复制代码

到这里MainWindowViewBase.hpp文件参观完了，可以接下来参观cpp文件了。
2 |# w5 |+ Z8 `8 O0 T+ f- g

1. /*********************************************************************************/
   & ?$ j6 l. O) F! u7 i
2. /********** THIS FILE IS GENERATED BY TOUCHGFX DESIGNER, DO NOT MODIFY ***********/
   
3. /*********************************************************************************/
   + U6 y, |( e, E
4. #include <gui_generated/mainwindow_screen/MainWindowViewBase.hpp>
   ! p4 ~& ?) n- V0 O1 {
5. #include "BitmapDatabase.hpp"
   ; t- o; U3 D5 {/ U6 c( E
6. #include <texts/TextKeysAndLanguages.hpp>
   
7. #include <touchgfx/Color.hpp>
   
8. 
   
9. MainWindowViewBase::MainWindowViewBase() :
   
10.     buttonCallback(this, &MainWindowViewBase::buttonCallbackHandler)
    ( m, d/ g9 n" S
11. {
    5 E: G% C( u1 `" e* Z) q
12.         在构造函数中可以看见我们添加的控件在cpp文件中体现的样子包括设置图片或者设置位置
    ; @+ j% v) F5 x3 Z6 \$ b$ A
13.     BackImage.setBitmap(touchgfx::Bitmap(BITMAP_IMG1_ID));
    1 X- s6 c; Q' `, |
14.     BackImage.setPosition(0, 0, 800, 480);
    
15.     BackImage.setScalingAlgorithm(touchgfx::ScalableImage::NEAREST_NEIGHBOR);
      L% _4 }8 {/ x& N/ w* P0 `
16. 
    
17.     ChangeImage.setXY(315, 0);
    1 Z: C( G2 s& u* G8 U! R8 z  R
18.     ChangeImage.setBitmaps(touchgfx::Bitmap(BITMAP_BLUE_BUTTONS_ROUND_EDGE_SMALL_ID), touchgfx::Bitmap(BITMAP_BLUE_BUTTONS_ROUND_EDGE_SMALL_PRESSED_ID));
    ; ~9 Z. Y! R4 `* Y8 Q6 ~
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));
    
22.     ChangeImage.setAction(buttonCallback);这里可以看见添加action方法
    
23. 
    
24.     textimageid.setPosition(394, 68, 26, 25);
    
25.     textimageid.setColor(touchgfx::Color::getColorFrom24BitRGB(255, 0, 0));
    3 y0 f; l, w' \. \- K- `
26.     textimageid.setLinespacing(0);
    
27.     Unicode::snprintf(textimageidBuffer, TEXTIMAGEID_SIZE, "%s", touchgfx::TypedText(T_SINGLEUSEID3).getText());
    
28.     textimageid.setWildcard(textimageidBuffer);
    
29.     textimageid.setTypedText(touchgfx::TypedText(T_SINGLEUSEID2));
    . {- E9 B3 Q! _$ u+ H: Z* \8 s
30. 
    ; s8 p" E, T1 `
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 p- o- g5 O' Z, |* S* A/ l' v
33.     NextView.setAction(buttonCallback);
    ( S  y( J( Q9 [' M; ^) P; P
34. 
    6 G9 Z" O  j2 y
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));
    9 F" t' u- q7 @' h. w4 M
37.     ChartARTViewButton.setAction(buttonCallback);页面切换的action函数
    ( F4 i+ Z1 ?2 T. S$ Q$ r$ ]9 b5 x$ J- L
38. 在窗口上添加控件方法
    
39.     add(BackImage);
    8 _- n: q2 X* e3 D2 G5 Q
40.     add(ChangeImage);
    
41.     add(textimageid);
    
42.     add(NextView);
    : j  `! A! E8 A( J$ P
43.     add(ChartARTViewButton);
    8 P, I! ]& a  b+ |0 W; G
44. }
    
45. 
    4 i  D9 R# @" _  T! h
46. void MainWindowViewBase::setupScreen()
    8 N( d# {5 V! a- f/ J+ S
47. {
    
48. 
    2 p4 a2 |9 x/ j2 i0 Y
49. }
    
50. 
    
51. void MainWindowViewBase::buttonCallbackHandler(const touchgfx::AbstractButton& src)
    - J+ T- D, p7 e$ x- a# q
52. {
    3 k# N  I& r' T. i
53.     if (&src == &ChangeImage)
    
54.     {
    
55.         //Interaction1
    
56.         //When ChangeImage clicked call virtual function
    
57.         //Call setBackImageIMG
    % I" g9 K$ @: O4 M
58.         setBackImageIMG();这里可以看见是通过callback函数响应的setBackImageIMG函数，由此可以知道以此方法我们可以自己在界面上添加控件，而控件响应的函数也可以这样添加。注意要是自定义添加不要在base文件中添加要在界面类的函数中添加。
    4 C5 a$ h( B( Q# \0 p' w/ {! E
59.     }
    # R' u( k3 r: e5 u* f+ _
60.     else if (&src == &NextView)
    
61.     {
    
62.         //Interaction2
    0 h. a* c6 ^2 p3 M) n) S
63.         //When NextView clicked change screen to TabView
    
64.         //Go to TabView with screen transition towards East
    
65.         application().gotoTabViewScreenSlideTransitionEast();
    / z7 I1 d! v7 Q0 a+ X2 J
66.     }
    3 R7 M1 {! q5 I5 x% `; X
67.     else if (&src == &ChartARTViewButton)
    
68.     {
    " U, v2 w  F4 F/ B0 K6 j
69.         //Interaction3
    ) F  b0 C# f6 T! x6 i$ _4 t
70.         //When ChartARTViewButton clicked change screen to ChartView
    
71.         //Go to ChartView with screen transition towards East
    
72.         application().gotoChartViewScreenSlideTransitionEast();
    9 X9 C( z% r8 `8 m
73.     }
    ) s2 o6 H, W5 [+ ?0 ~% |: X5 E) i9 O
74. }
    
75. 
    

复制代码

8 y) c; T0 Q' H9 P由此可以看到创建的界面后，base文件中的状态。下面会给大家展示一下view文件中的内容。
4 H( P0 U- q& I0 q' p- a
7 I9 @" Y5 `; h  I$ V
6 b0 d: z8 l* EView类的作用
* y) @7 z) s3 T& N9 Fview中的内容是可以进行修改的，可以根据需要添加自己的使用方法。
9 N, @/ L5 N) _* ^) h+ [8 b下面我们再看一下MainWindowView.hpp文件。
1 f( X: O: G0 I% s6 @" O

1. #ifndef MAINWINDOWVIEW_HPP
   3 c1 Q6 H! t/ U8 M! z6 s, T0 I
2. #define MAINWINDOWVIEW_HPP
   
3. 
   
4. #include <gui_generated/mainwindow_screen/MainWindowViewBase.hpp>
   
5. #include <gui/mainwindow_screen/MainWindowPresenter.hpp>
   5 |3 ~. q( I3 p8 X# Y0 t( Z
6. 
   # a/ l& k$ @8 l/ O9 l- p
7. 
   ! L4 q3 e: ?0 j; g% ?
8. class MainWindowView : public MainWindowViewBase这里看见这个类是继承上方的基类MainWindowViewBase
   " m$ Q: M& i2 V$ C* @! I  @# ?
9. {
   
10. public:
    
11.     MainWindowView();
    . c) e9 v& C! S5 ]: Q1 u' ]9 Y
12.     virtual ~MainWindowView() {}
    ; F7 h' G: H. W3 h
13.     virtual void setupScreen(); 正常创建时，到此处就没有了。
    
14.     下方的文件是手动添加的，如果在界面上创建了function函数，
    
15.     则在该文件中添加一样的虚函数，具体在上方的base中能看出来。
    
16.     virtual void tearDownScreen();
    
17.     virtual void setBackImageIMG();
    
18. protected:
    
19. 
    
20. };
    
21. 
    ; s9 p  X7 `+ N# ?
22. #endif // MAINWINDOWVIEW_HPP
    # r* z# H' p6 y$ N: V3 v: A5 g

复制代码

( |# ^; {: j7 F1 N9 Y此时就可以在cpp文件中添加相应的函数实现了。
  a  [6 `+ B, a( a$ n  I) K+ u
按键事件响应逻辑
8 Q6 L) `; W7 |1 G3 V好了说了这么多，我来给大家总结一下吧，通过TouchGFX Designer创建一个界面，在界面中可拖拽控件，在TouchGFX Designer下也可添加相应的action函数，在添加完函数后，要在view文件中加入相应的虚函数。
除此之外，还可以模仿base文件的方法在界面类中添加相应的button及button的action文件。此章给大家介绍了创建事件的注意示项。
————————————————
6 k& K' K& |: _& d. C  u版权声明：空闲的程序员
3 c5 @/ U4 b4 S. f/ G5 g4 Z
' }. U- V1 x& \. N9 }) v, l
6 [& n  k; ?1 S: Y8 v