This section explains the structure of a TouchGFX project - from the code generated by TouchGFX Designer to the extending code written by the user.
The code generated by TouchGFX Designer will be completely separate from the code written by the user. In fact, the generated code is placed in the folder
generated/gui_generated, whereas the handwritten code is placed in the
gui_generated code serves as base classes for user code classes. The base classes contain all the setup code configured in TouchGFX Designer. The following class diagram shows the relationship of the classes:
As shown above, TouchGFX Designer applications consist of 3 different layers of code:
- Engine: these classes are the standard classes provided by TouchGFX. These act as base classes for the generated classes.
- Generated: these classes and corresponding files will be regenerated whenever TouchGFX Designer generates code. Therefore, these classes and files should not be edited manually, as any manual changes will be overwritten on the next run of the code generator. These classes are base classes for the user classes.
- User: these classes are intended for handwritten code. The user is free to put any code in this layer. The user classes will be generated if not present, but will never be altered by TouchGFX Designer. They belong to the user.
As a rule, TouchGFX Designer will only regenerate files within the
generated folder in a TouchGFX project and it is therefore important that you do not manually edit these, as they will be overwritten. However, TouchGFX Designer can also generate missing files needed for compilation, e.g.
simulator/main.cpp and skin images located in
assets/images/__designer. In actuality, TouchGFX Designer only needs the following to be able to generate, compile and run a project:
.touchgfxfile describing the project
- User code (if any) located in the
- User images (if any) located in the
- Texts (if any) located in the
- Fonts (if any) located in the
A simple example of an application having both generated and user code will be given below. This should illustrate the aspects above in more detail.
The following example has just one screen. The screen
MyScreen consists of a Box
box1 and a Button
button1. We have set up an interaction to call the virtual function
button1 is clicked.
Whenever we press the button we would like to change the color of the background box to a new random color. To demonstrate how to write your own custom code, we will implement this behavior in user code.
The different classes involved in this example can be seen below:
We see that:
FrontendHeapBaseare in the generated space, implying that:
- They will be regenerated whenever a change is made in TouchGFX Designer
- The user should not manually edit these classes
FrontendHeapare created in the user code space, meaning that:
- These will not be regenerated when changes are made in TouchGFX Designer
- The user is free to add custom code here
- All the setup of
button1is done in the generated view base class
- All the functions for transitioning between screens are in the generated application base class
- All the book keeping, making sure that the right amount of memory is allocated, is located in the generated heap base class
The user is free to edit the user code classes. For instance you could add more widgets. For now we will just implement the
setRandomColor function to actually change the color of
Looking at the view base code, we see the setup of the box and button generated by TouchGFX Designer. We also see the setup of and the call to the virtual function
setRandomColor in the
buttonCallbackHandler, but at the moment this function does not do anything:
Looking at the header file for the view base class, we see the declaration of
setRandomColor and an instruction to override and implement the function in user code:
So let's do just that. Navigate to the user code header file
MyScreenView.hpp and override the function:
Then we need to implement the actual behavior of
setRandomColor in the cpp file for
Running the simulator now shows that we have succeeded in creating a simple application utilizing both generated and user code - the background box now changes to a random color everytime you click the button.
It is also possible to mix and match. For example, you can have screens that are not defined within the TouchGFX Designer project. You can add the
gotoXYZfunctions to the
FrontendApplicationclass and add the views, presenters and transitions you need for your screen to the