Ensemble Graphics Toolkit: Static Grid
Introduction
In this training, you will construct a StaticGrid class to set the size and position of child widgets on the window of the WVGA Display. You will learn how to add a new button widget to a cell of the StaticGrid.
Steps:
- Create a New Source File
- Construct a Static Grid
- Add a New Button
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 the Eclipse IDE for C/C++ Developers as explained in:
Create a New Source File
In this section, you will create a new grid.cpp source file that you will build in later sections demonstrating the StaticGrid class.
Start the Eclipse IDE
Eclipse will ask you to select a directory for your workspace. Accept the default directory and click on the Launch button.
Eclipse will launch the previous workspace you configured.
You will be adding a new source file with the name: grid.cpp. If you have a *.cpp source file from a previous Ensemble Graphics Toolkit training topic, perform the following steps:
The Exclude from build window will open:
The selected *.cpp will be excluded from the build.
Right-click on EgtProject and select New > Source File.
The New Source File window will open:
Enter grid.cpp into the Source file: text box. Click on the Finish button.
A new source file tab grid.cpp is created within the EgtProject.
Enter the following source code to the grid.cpp window pane:
using namespace egt;
int main(int argc, const char ** argv)
{
Application app;
TopWindow window;
StaticGrid grid(Rect(20, 20, 750, 440),
StaticGrid::GridSize(3, 3), 10);
window.add(grid);
for (auto i = 1; i <= 7; ++i)
{
auto button = std::make_shared < Button > ("Button " +
std::to_string(i));
grid.add(expand(button));
}
window.show();
return app.run();
}
Construct a Static Grid
To build the project, hover over EgtProject, right-click and select Build Project from the menu. Or you can click on the Build icon.
The Console window (bottom pane) will display the build progress.
In the left-hand pane, select EgtProject Debug (under C/C++ Remote Application).
In the Run Configurations window, enter the following in the Remote Absolute File Path for C/C++ Application: text box:
/root/grid
This is the location the grid.cpp executable will be loaded and run on the target.
Observe the WVGA Display on the target:
The grid.cpp executable is running remotely on the target.
Observe a static grid with 7 buttons arranged with 3 rows and 3 columns. The buttons will expand to the width and height of its cell.
Add a New Button
In this section, you will modify the grid.cpp source code to add a new button to a specific cell in the grid.
Modify the grid.cpp source code by adding the following lines of code as shown.
using namespace egt;
int main(int argc, const char ** argv)
{
Application app;
TopWindow window;
StaticGrid grid(Rect(20, 20, 750, 440),
StaticGrid::GridSize(3, 3), 10);
window.add(grid);
for (auto i = 1; i <= 7; ++i)
{
auto button = std::make_shared < Button > ("Button " +
std::to_string(i));
grid.add(expand(button));
}
//Add new button to grid at cell position (0,3)
Button newbutton("Button 8");
grid.add(expand(newbutton),0,3);
window.show();
return app.run();
}
To build the project, hover over EgtProject, right-click, and select Build Project from the menu. Or you can click on the Build icon.
The Console window (bottom pane) will display the build progress.
Observe the WVGA Display on the target:
The grid.cpp executable is running remotely on the target.
Observe a new button widget added to the cell (0, 3) in a static grid with eight buttons arranged with four rows and three columns. The buttons will expand to the width and height of its cell.
Summary
In this training, you explored the construction of the StaticGrid class to size and position of the child widgets on the window of the WVGA Display. You also learned how to add a new Button widget to a cell.
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:
