通过TouchGFX创建事件逻辑函数
TouchGFX Designer中的交互由触发器和动作组成：
触发器：是由用户点击或者进行其他操作后产生的信号。
  q4 a$ a2 t3 }6 I动作：由触发器触发的相应的事件逻辑。
" ^0 u7 R8 l9 t要添加interaction ，请转到任何屏幕或自定义容器的“interaction”选项卡，然后按下标有“Add Interaction”的蓝色按钮，如下图所示。

, @" z4 _. ]" O( ?$ q* g3 i

) S, j  T4 y& I7 \5 U添加后界面样子如下：
: g7 N& u: [5 E, s& D* a1 a


1 K+ N0 M# C0 VTrigger中用于添加触发器类型,例如：按钮点击事件。Choose clicked source 中添加被点击的是哪一个按钮，这里显示的是“button1”。
Action：action的操作分为了两种，第一种是作为基础窗口的动作：
该种动作包括：
& X( g. [$ E, K; V7 y
) ^) ~( a) v# |

1 S" F, p  m0 t第二种是控件的属性提供的动作：



8 Y! G! U3 r- g8 x' ^在上图的底部存在Can trigger another interaction的复选框，它的作用是连续动作，当一次触发事件后多次响应其他的事件。
; a. V. t8 A) V9 ?
Base类中的秘密
在通过TouchGFX Designer创建完界面，并在界面中添加完相应的触发器后，生成的代码中将会存在相应的界面基类，这类代码是由TouchGFX Designer自动生成的，所以不建议更改，在第一章也和大家说过，下面我们探索下这个类中有些什么：
7 o/ {4 H/ E6 v& p. E% ]$ e我们以我写的一个例子做讲解，该demo源码在第一张中可下载。看下图

& h6 ~: I  E! \" T
+ m; U1 c) z# H, R* j" |
: \7 y  B; q& q$ h' Q+ _( A% L3 |& B
我们以MainWindow窗口作为例子讲解窗口基类中有哪些东西，首先窗口的名字叫做“MainWindow”，其中包含和三个按钮及一个text area还有一张背景图片Backimage。放置的顺序不同在界面上体现的层次感不同，如果将背景图片放在最上层的话其他按钮都将被盖在下面。其次看右侧的interaction，在其中我添加了三个逻辑，类型都是按钮的点击事件对应的是三个按钮，相应的功能是“Call new virtual function”，在下方写了函数的名字。注意函数名字和控件的名字，此时，点击Generate Code 按钮后在VS中打开工程。可以看到在头文件和源文件中generated/gui_generated文件夹下有mainwindow_screen文件夹存在，在该文件夹下将存在该界面的基类。如下图：

1 j) e4 `# W4 U& g
6 Q( J2 y% e$ W8 ?- Q" Q: z- ?) _
我们看下该类中的头文件：

1. /*********************************************************************************/
   . x% |! O$ J+ \! f4 d4 y5 q% o
2. /********** THIS FILE IS GENERATED BY TOUCHGFX DESIGNER, DO NOT MODIFY ***********/
   * b  V) W: A7 y5 Y7 A' e" g
3. /*********************************************************************************/
   " Q+ D' M$ h+ y" v# }
4. #ifndef MAINWINDOWVIEWBASE_HPP
   
5. #define MAINWINDOWVIEWBASE_HPP
   
6. 
   
7. #include <gui/common/FrontendApplication.hpp>
   ( L5 v0 U/ [; N
8. #include <mvp/View.hpp>
   
9. #include <gui/mainwindow_screen/MainWindowPresenter.hpp>
   " W. ]* T: ]7 G) ^" w4 p# r- M
10. #include <touchgfx/widgets/ScalableImage.hpp>
    
11. #include <touchgfx/widgets/ButtonWithLabel.hpp>
    & h. P8 E5 Y& t9 N
12. #include <touchgfx/widgets/TextAreaWithWildcard.hpp>
    
13. #include <touchgfx/widgets/Button.hpp>
    
14. 
    
15. class MainWindowViewBase : public touchgfx::View<MainWindowPresenter>
    
16. {
    
17. public:
    . @% t5 e& \7 v3 Q6 F; {
18.     MainWindowViewBase();
    
19.     virtual ~MainWindowViewBase() {}
    
20.     virtual void setupScreen();  窗口创建时响应的函数
    
21. 
    5 l4 j' ]) x  |' q, X& {! ?
22.     /*
    
23.      * Virtual Action Handlers
    4 k: P4 k. Z5 w$ f& Q2 w: c; R% J
24.      */
    ! N, h6 e; A' \0 J
25.     virtual void setBackImageIMG() 这个就是在TouchGFX Designer中function name 中填的名字他就是Designer产生的关联性。
    ( C& J8 x. x  T6 U/ Q' h& F
26.     {
    7 X/ l2 U, Q" g6 e
27.         // Override and implement this function in MainWindow
    
28.     }
    
29. 
    " Y: B! \( q1 h$ G
30. protected:
    * x5 a3 C4 S& A, j6 ^) i
31.     FrontendApplication& application() {
    
32.         return *static_cast<FrontendApplication*>(touchgfx::Application::getInstance());
    + ^) B$ W  A1 p; D) @" h; i1 o* K
33.     }
    . i$ W% D, r: Q# w0 F: j
34. 
    
35.     /*
    ; A6 W+ a9 S7 R2 f; ^# P
36.      * Member Declarations
    : S. s' Q9 E7 `- d# [+ d# J
37.      */
    & l1 X4 a# L! P# s) N& D
38.      这部分放的就是界面上控件的名字，也就是说如果想要修改控件的动作或者状态，除了TouchGFX Designer中修改外，也可以通过代码调用定义修改。
    - y" `6 ^; i* ?( o
39.     touchgfx::ScalableImage BackImage;  
    , y0 [% D+ e- E0 U0 X  ]7 S* L
40.     touchgfx::ButtonWithLabel ChangeImage;
    . p2 L, t) d: Q. D1 ~4 m
41.     touchgfx::TextAreaWithOneWildcard textimageid;
    
42.     touchgfx::Button NextView;
    
43.     touchgfx::Button ChartARTViewButton;
    7 W6 H9 h( q7 p0 g% ^$ o" S
44. 
    
45.     /*
    , s6 I* q6 M) Z3 p6 v2 {0 d
46.      * Wildcard Buffers
    
47.      */
    
48.     static const uint16_t TEXTIMAGEID_SIZE = 3;
    * [- W# X# |5 P. L1 r: U9 y9 I
49.     touchgfx::Unicode::UnicodeChar textimageidBuffer[TEXTIMAGEID_SIZE];
    
50. 
    
51. private:
    
52.         这个部分就是 通过TouchGFX Designer中interaction响应的逻辑，具体的一会在cpp文件中将会看见。
    
53.     /*
    - S  X, G  \8 a! m  B
54.      * Callback Declarations
    
55.      */
    
56.     touchgfx::Callback<MainWindowViewBase, const touchgfx::AbstractButton&> buttonCallback;
    
57. 
    ; g, r/ o8 {6 ^, F3 H( e5 x) O
58.     /*
    ' p" d) u6 o, W
59.      * Callback Handler Declarations
    
60.      */
    ) U+ W9 A( M6 h+ @! [  t) c7 K
61.     void buttonCallbackHandler(const touchgfx::AbstractButton& src);
    
62. 
    
63. };
    
64. 
    1 u3 T, r# d0 W5 @" x
65. #endif // MAINWINDOWVIEWBASE_HPP
    ) I# \+ D! C6 A" t
66. 
    

复制代码

到这里MainWindowViewBase.hpp文件参观完了，可以接下来参观cpp文件了。

1. /*********************************************************************************/
   ; a5 ?  T9 ]5 e0 B- [$ z- x
2. /********** THIS FILE IS GENERATED BY TOUCHGFX DESIGNER, DO NOT MODIFY ***********/
   + T- c" Q8 H# p5 w+ [' }! k7 @
3. /*********************************************************************************/
   % N) [( D. ^6 O; V: q4 {6 ^
4. #include <gui_generated/mainwindow_screen/MainWindowViewBase.hpp>
   
5. #include "BitmapDatabase.hpp"
   5 T+ |* g8 g8 S7 S' U
6. #include <texts/TextKeysAndLanguages.hpp>
   ' V3 F8 E" n7 M* i. G* R1 @
7. #include <touchgfx/Color.hpp>
   . ~* a) S& w4 M% g2 y8 H* W
8. 
   
9. MainWindowViewBase::MainWindowViewBase() :
   
10.     buttonCallback(this, &MainWindowViewBase::buttonCallbackHandler)
    $ E6 Y2 }4 l- _1 L
11. {
    # B0 ?* u1 ~  I. o1 q* z: [2 a. i: h+ I
12.         在构造函数中可以看见我们添加的控件在cpp文件中体现的样子包括设置图片或者设置位置
    
13.     BackImage.setBitmap(touchgfx::Bitmap(BITMAP_IMG1_ID));
    ( y* _' T' H- @9 b" R
14.     BackImage.setPosition(0, 0, 800, 480);
    0 ^3 U- `5 B. x/ Q. @  q
15.     BackImage.setScalingAlgorithm(touchgfx::ScalableImage::NEAREST_NEIGHBOR);
    # D8 W+ Z4 C" Y, V2 o
16. 
    $ y2 c/ a" {" G8 P6 q9 h
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));
    1 {( `$ O: l8 U& I4 L
19.     ChangeImage.setLabelText(touchgfx::TypedText(T_SINGLEUSEID1));
    ) S" v9 ]; b1 z
20.     ChangeImage.setLabelColor(touchgfx::Color::getColorFrom24BitRGB(255, 255, 255));
    & }3 R- ^$ {8 Q$ q9 k4 a# U+ d
21.     ChangeImage.setLabelColorPressed(touchgfx::Color::getColorFrom24BitRGB(255, 255, 255));
    ' J' X! e5 k' r7 d5 @7 f
22.     ChangeImage.setAction(buttonCallback);这里可以看见添加action方法
    
23. 
    + Q3 ]% [  F- Y3 q. j
24.     textimageid.setPosition(394, 68, 26, 25);
    
25.     textimageid.setColor(touchgfx::Color::getColorFrom24BitRGB(255, 0, 0));
    1 u+ [4 x$ I. S# P0 w, {
26.     textimageid.setLinespacing(0);
    : E* }5 ]( ~; C! q
27.     Unicode::snprintf(textimageidBuffer, TEXTIMAGEID_SIZE, "%s", touchgfx::TypedText(T_SINGLEUSEID3).getText());
    
28.     textimageid.setWildcard(textimageidBuffer);
    - x3 `1 ]/ \4 I" T- X: ^: m
29.     textimageid.setTypedText(touchgfx::TypedText(T_SINGLEUSEID2));
    
30. 
    + l( _( F) u% W" u) r0 Q
31.     NextView.setXY(377, 135);
    , T( s& x. @" Q
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);
    + }% Q  {7 m% S0 F9 T7 p1 R$ F
36.     ChartARTViewButton.setBitmaps(touchgfx::Bitmap(BITMAP_BLUE_BUTTONS_ROUND_ICON_BUTTON_ID), touchgfx::Bitmap(BITMAP_BLUE_BUTTONS_ROUND_ICON_BUTTON_PRESSED_ID));
    4 H, ]1 s& h  j% a
37.     ChartARTViewButton.setAction(buttonCallback);页面切换的action函数
    $ e/ X6 L# k' @* D4 R: v
38. 在窗口上添加控件方法
      L( b2 \  s3 w
39.     add(BackImage);
      v4 |! Y" r8 T, h/ s
40.     add(ChangeImage);
    ' b" Z1 Y# A- |$ W
41.     add(textimageid);
    
42.     add(NextView);
    
43.     add(ChartARTViewButton);
    
44. }
    9 G( S* {8 \3 d, }5 ]
45. 
    2 |' T9 v2 p; J3 M( }% h. m
46. void MainWindowViewBase::setupScreen()
    
47. {
    " ?: _6 H' g2 u0 ?- d3 j
48. 
    
49. }
    
50. 
    
51. void MainWindowViewBase::buttonCallbackHandler(const touchgfx::AbstractButton& src)
    
52. {
    
53.     if (&src == &ChangeImage)
    
54.     {
    
55.         //Interaction1
    
56.         //When ChangeImage clicked call virtual function
    
57.         //Call setBackImageIMG
    
58.         setBackImageIMG();这里可以看见是通过callback函数响应的setBackImageIMG函数，由此可以知道以此方法我们可以自己在界面上添加控件，而控件响应的函数也可以这样添加。注意要是自定义添加不要在base文件中添加要在界面类的函数中添加。
    2 h" a+ P$ l; n3 K
59.     }
    8 P3 e7 |% ~* c. h
60.     else if (&src == &NextView)
    
61.     {
    
62.         //Interaction2
    - `- [1 w/ O9 E! w  K' I
63.         //When NextView clicked change screen to TabView
    $ Y" b( v% t1 X+ X2 ~9 W4 A5 D
64.         //Go to TabView with screen transition towards East
      o$ R* D. g( y" j/ S
65.         application().gotoTabViewScreenSlideTransitionEast();
    
66.     }
    $ @/ C/ W' z5 B" W: ~9 \7 [9 s$ m
67.     else if (&src == &ChartARTViewButton)
    7 L+ f" m9 |( g. p1 ]5 S
68.     {
    
69.         //Interaction3
    
70.         //When ChartARTViewButton clicked change screen to ChartView
    
71.         //Go to ChartView with screen transition towards East
    
72.         application().gotoChartViewScreenSlideTransitionEast();
    6 Y- c- {9 M6 ], R1 a
73.     }
    4 B" m3 s+ _2 D: i% `
74. }
    % ]$ x/ n& M' G! {8 X" C- c* O
75. 
    

复制代码

6 K1 D9 X8 d0 U, ~- Q由此可以看到创建的界面后，base文件中的状态。下面会给大家展示一下view文件中的内容。
% [, z4 s' q% ]1 _5 q$ u: X! h
& R# x2 v9 t5 D1 ^1 D9 Q( n
View类的作用
" z) Z7 @( F! u. R8 `# Oview中的内容是可以进行修改的，可以根据需要添加自己的使用方法。
( m( @2 w  }/ l! E8 y下面我们再看一下MainWindowView.hpp文件。
. H6 `% N! H( g! {8 g

1. #ifndef MAINWINDOWVIEW_HPP
   
2. #define MAINWINDOWVIEW_HPP
   
3. 
   + _5 D1 L3 U& g+ @" Q
4. #include <gui_generated/mainwindow_screen/MainWindowViewBase.hpp>
   " N- x2 o1 \1 B/ [& k0 s/ ^
5. #include <gui/mainwindow_screen/MainWindowPresenter.hpp>
   " O6 N/ y* D  l: ?, l: c0 V
6. 
   
7. 
   6 j2 m6 f2 G* m$ _" I# p
8. class MainWindowView : public MainWindowViewBase这里看见这个类是继承上方的基类MainWindowViewBase
   
9. {
   ; ~2 a: z6 V' Y2 M. e; e
10. public:
    
11.     MainWindowView();
    & ]+ `' R+ i: o! ^( Y, a, X
12.     virtual ~MainWindowView() {}
    8 A/ f% @  F) F$ t
13.     virtual void setupScreen(); 正常创建时，到此处就没有了。
    + H$ K! G) ^# m  T4 L
14.     下方的文件是手动添加的，如果在界面上创建了function函数，
    
15.     则在该文件中添加一样的虚函数，具体在上方的base中能看出来。
    ! p( s9 S: D7 e1 [8 s
16.     virtual void tearDownScreen();
    
17.     virtual void setBackImageIMG();
    8 n: p& a$ h. e( ~0 K: b
18. protected:
    : j- t& a+ I  y* Y; A) n
19. 
    6 J5 U1 D2 P* Q, n6 m0 o
20. };
    . f" }8 G0 a- e0 p% X
21. 
    ! F$ s( q& {7 m/ }4 a
22. #endif // MAINWINDOWVIEW_HPP
    , o+ Y9 `( q8 A9 u

复制代码

1 @: S5 q/ x4 i' C此时就可以在cpp文件中添加相应的函数实现了。

# h7 g& P- n. a1 E; b" H- B/ e; c2 `按键事件响应逻辑
好了说了这么多，我来给大家总结一下吧，通过TouchGFX Designer创建一个界面，在界面中可拖拽控件，在TouchGFX Designer下也可添加相应的action函数，在添加完函数后，要在view文件中加入相应的虚函数。
9 w/ b3 c/ r1 h9 ?. ^; {8 N除此之外，还可以模仿base文件的方法在界面类中添加相应的button及button的action文件。此章给大家介绍了创建事件的注意示项。
8 u- R7 N, U. j) T/ p————————————————
版权声明：空闲的程序员