Introduction
In this training, you will learn how to set a default theme, set a global theme, change an existing theme, and create a custom theme.
Steps:
- Create a New Source File
- Set a Default Theme
- Set a Global Theme
- Change an Existing Theme
- Create a Custom Theme
Prerequisites
You have prepared the Host PC with all the development software tools and Ensemble Graphics Toolkit source code as explained in:
You have installed and prepared theEclipse IDE for C/C++ Developers as explained in:
Create a New Source File
In this section, you will be creating a newtheme.cpp source file that you will build in later sections demonstrating the BoxSizer class.
In this training, you will use EgtProject and its settings you entered in the training:Ensemble Graphics Toolkit -- First Application using Eclipse IDE
1
Start the Eclipse IDE.
Eclipse will ask you to select a directory for your workspace. Accept the default directory and click on theLaunch button.
Eclipse will launch the previous workspace you configured.
2
You will be adding a new source file with the name:themes.cpp. If you have a*.cpp source file from a previousEnsemble Graphics Toolkit training, perform the following steps:
a
Right click in the*.cpp window and selectResource Configurations > Exclude from Build…
TheExclude from build window will open:
b
SelectDebug andRelease and click on theOK button.
The selected*.cpp will be excluded from the build.
3
Right click onEgtProject and selectClean Project.
4
Right click onEgtProject and selectNew > Source File.
TheNew Source File window will open:
5
Enterthemes.cpp into theSource file: text box. Click on theFinish button.
A new source file tabthemes.cpp is created withinEgtProject.
6
Enter the following source code to thethemes.cpp window pane:
7
Save your program by selectingFile > Save. You may also save by typingCTRL+S.
You have completed adding a new source file to EgtProject.
Set a Default Theme
In this section, you will build the source code you entered in the previous section and observe the default theme that is set.
1
To build the project, hover overEgtProject, right-click and selectBuild Project from the menu. Or you can click on theBuild icon.
The Console window (bottom pane) will display the build progress.
2
To set run properties, hover overEgtProject, right-click and selectRun As > Run Configurations… from the menu.
3
In the left-hand pane, selectEgtProject Debug (under C/C++ Remote Application).
4
In theRun Configurations window, enter the following in theRemote Absolute File Path for C/C++ Application: text box:
/root/theme
You may see the previous program/root/???? here. Replace with/root/theme.
This is the location thesizer.cpp executable will be loaded and run on the target.
5
Click on theApply button.
6
Click on theRun button.
7
Observe the WVGA Display on the target:
Thetheme.cpp executable is running remotely on the target.
This is the default theme that is set when no other theme parameters are set.
8
To stop the program, press theStop button (upper left hand, just below the menu bar).
Before you start another session, be sure toStop the current session.
Set a Global Theme
In this section, you will modify thetheme.cpp source code to set a global theme.
1
Modify thetheme.cpp source code by adding the following lines of code as shown below:
2
Save your program by selectingFile > Save. You may also save by typingCTRL+S.
3
To build the project, hover overEgtProject, right-click and selectBuild Project from the menu. Or you can click on theBuild icon.
TheConsole window (bottom pane) will display the build progress.
4
Click on theRun button.
5
Observe the WVGA Display on the target:
Thetheme.cpp executable is running remotely on the target.
Observe that Button 1, Button 2, and their checkboxes have changed color. Also, the background color has changed. The new global theme is inherited by all the child widgets. You can check the Disable buttons to observe the change in color for their disabled state.
6
To stop the program, press theStop button (upper left hand, just below the menu bar).
Before you start another session, be sure toStop the current session.
Change an Existing Theme
In this section, you will modify thetheme.cpp source code from the previous section to change a global theme.
1
Modify thetheme.cpp source code by adding the following lines of code as shown below:
2
Save your program by selectingFile > Save. You may also save by typingCTRL+S.
3
To build the project, hover overEgtProject, right-click and selectBuild Project from the menu. Or you can click on theBuild icon.
TheConsole window (bottom pane) will display the build progress.
4
Click on theRun button.
5
Observe the WVGA Display on the target:
Thetheme.cpp executable is running remotely on the target.
Observe that the font in both the button widget and the checkboxes has changed. The font is larger and the weight id changed tobold. You have changed an existing property of the global midnight theme.
6
To stop the program, press theStop button (upper left hand, just below the menu bar).
Before you start another session, be sure toStop the current session.
Create a Custom Theme
In this section, you will modify thetheme.cpp source code from the previous section to create a custom theme and apply it to the Horizontal Box Sizer 2.
1
Modify thetheme.cpp source code by adding the following lines of code as shown below:
GroupId
AGroupId is used to define a category of patterns that usually relate to the state of a widget. States can be normal, active, disabled, or checked.
2
Save your program by selectingFile > Save. You may also save by typingCTRL+S.
3
To build the project, hover overEgtProject, right-click and selectBuild Project from the menu. Or you can click on theBuild icon.
TheConsole window (bottom pane) will display the build progress.
4
Click on theRun button.
5
Observe the WVGA Display on the target:
Thetheme.cpp executable is running remotely on the target.
Observe the horizontal box sizer 2 has a new look. The Button 2 foreground color for the normal state has changed.
6
CheckDisable Button 1 andDisable Button 2 to observe the new background color when the buttons are disabled.
7
To stop the program, press theStop button (upper left hand, just below the menu bar).
Before you start another session, be sure toStop the current session.
Theme class
From~/egt/docs/html/annotated.html, click on theTheme class. All the functions, attributes and the constructor(s) associated with the class are documented here.
global_theme()
If the top-level window does not have a custom theme, it will use the defaultglobal_theme(). This function sets the global theme properties and the ability to modify them.
global_theme(std::shared_ptr<Theme> theme)
This function sets the global theme. This will disable any pre-existing theme instance. Remember to add the respective include file for the theme if using EGT’s custom themes.
Widget::theme()
Themes are inherited by default from the widget’s parent. This function helps to break the inheritance and set its own theme.
Summary
In this training, you learned how to set a default theme, set a global theme, change an existing theme, and create a custom theme.
What’s Next?
There’s plenty more to learn. Here are some additional Ensemble Graphics Toolkit training resources to help you gain more knowledge and skills:
