Singaporeansincerely Singaporean
If you have not done so, read this full tutorial on how to use SGEXTN to build an application.
See here for the previous part of the tutorial.
In the previous part, we wrote main.cpp and made the app show a window
GUI? a what now?
GUI means graphical user interface, which literally means "something that the user can see (graphical) and use to interact (interface) with the application". In other words, the app shows a window instead of running inside cmd or in the background.
We first plan what our UI should look like. This page should explain to the user what the application is about and provide a button to go to the next page.
Having an almost full screen, scrollable, textbox explaining what the app is about seems like a good idea. Then we can have a full width button on the bottom which goes to the next page.
But wait... we are now using the SGWidget ⁽㈳㈴㈳㈮㈱㈨㈠㈫ ㈧㈤㈱㈤⁾ system, and also its subsystems w-distance ⁽㈳㈴㈳㈮㈱㈨㈠㈫ ㈧㈤㈱㈤⁾ and theme colour ⁽㈳㈴㈳㈮㈱㈨㈠㈫ ㈧㈤㈱㈤⁾. You must read through their tutorials first.
Now that you have read through the tutorial, we can write the UI.
Before we start writing anything, we should first write a static functions class where all the functions concerning the first page will go to. This helps us organise our code better and essentially act as a namespace.
Before that, we will create files for it. We can let the app have prefix SGCLP (CoLoursPlusplus) and name our class SGCLPIntroductionPage. We create the header file include/SGCLPIntroductionPage.h and the source file src/SGCLPIntroductionPage.cpp using the Qt Creator file creation UI.
Now src/SGCLPIntroductionPage.cpp should be empty and include/SGCLPIntroductionPage.h should have the include guards set up automatically.
#ifndef SGCLPINTRODUCTIONPAGE_H #define SGCLPINTRODUCTIONPAGE_H #endif // SGCLPINTRODUCTIONPAGE_H
We can write the implementation of our class. A callback function ⁽㈳㈴㈳㈮㈱㈨㈠㈫ ㈧㈤㈱㈤⁾ returning a SGWBackground to pass to SGWBackground::enable and a SGWBackground* storing a pointer to the actual background are definitely necessary, so we will have that.
class SGWBackground; class SGCLPIntroductionPage { public: static SGWBackground* instance; static SGWBackground* initialise(); };
Note that the SGWBackground class is forward declared because SGCLPIntroductionPage does not need its memory layout. Forward declaring classes in header files wherever possible is good as it speeds up clang-tidy checks and avoids circular dependencies.
We also can write the basic layout of src/SGCLPIntroductionPage.cpp
#include <SGCLPIntroductionPage.h> #include <SGWBackground.h> SGWBackground* SGCLPIntroductionPage::instance = nullptr; SGWBackground* SGCLPIntroductionPage::initialise(){ }
Note that the line
SGWBackground* SGCLPIntroductionPage::instance = nullptr;
is necessary as it allocates memory for and initialises the static variable SGCLPIntroductionPage::instance.
We then proceed to implement SGCLPIntroductionPage::initialise.
Inside the function, first we write a message for the user explaining what the application is about. We will use a SGXString which is a Unicode compatible string with language aware features designed to replace QString.
SGXString message = "This is ColoursPlusPlus, kind of demo app for SGEXTN that we will be building in this tutorial. The app will showcase various SGEXTN features including the SGWidget and SG - RI systems used to implement interactive and customisable user interfaces.";
Just like QString or std::string, the + and += operators work for string concatenation.
message += " "; message += SGXChar(0x0378);
Note that code point 0x0378 in SingScript.sg is the SG mark, the unofficial logo of Singapore. This does not work in any other font.
Since the page will also have a button at the bottom, we can have a SGWPageBackground as the background, which would have a SGWLongLabel and a SGWTextButton as children. The SGWLongLabel can be used to display the message and the SGWTextButton will send the user to the next page when used.
For more information about each UI element, see their documentation as linked above.
SGWPageBackground* bg = new SGWPageBackground(SGWWidget::parentWidget, 0.0f, 0.0f, 0.0f, 0.0f, 1.0f, 0.0f, 1.0f, 0.0f); new SGWLongLabel(bg, message, 0.0f, 0.0f, 0.0f, 0.0f, 1.0f, 0.0f, 1.0f, -1.0f, 0.0f, 1.0f, 0.0f, 0.5f, 0.0f, 0.5f); new SGWTextButton(bg, "continue", nullptr, 0.0f, 0.0f, 1.0f, -1.0f, 1.0f, 0.0f, 0.0f, 1.0f);
All the numbers you see in the code are just w-distance ⁽㈳㈴㈳㈮㈱㈨㈠㈫ ㈧㈤㈱㈤⁾ describing the layout of each UI element.
Since we have not written the function yet, we can leave the callback function ⁽㈳㈴㈳㈮㈱㈨㈠㈫ ㈧㈤㈱㈤⁾ of the SGWTextButton to nullptr. This will not crash, the button will just do nothing.
Do not forget to return the pointer to the page background since the function must return a SGWBackground*
return bg;
If you have not done so already, add the preprocessor include directives at the top.
#include <SGXString.h> #include <SGXChar.h> #include <SGWWidget.h> #include <SGWPageBackground.h> #include <SGWLongLabel.h> #include <SGWTextButton.h>
Right now your file should look like the code below. In the next part of the tutorial, we will be testing the UI page.
include/SGCLPIntroductionPage.h
#ifndef SGCLPINTRODUCTIONPAGE_H #define SGCLPINTRODUCTIONPAGE_H class SGWBackground; class SGCLPIntroductionPage { public: static SGWBackground* instance; static SGWBackground* initialise(); }; #endif // SGCLPINTRODUCTIONPAGE_H
src/SGCLPIntroductionPage.cpp
#include <SGCLPIntroductionPage.h> #include <SGWBackground.h> #include <SGXString.h> #include <SGXChar.h> #include <SGWWidget.h> #include <SGWPageBackground.h> #include <SGWLongLabel.h> #include <SGWTextButton.h> SGWBackground* SGCLPIntroductionPage::instance = nullptr; SGWBackground* SGCLPIntroductionPage::initialise(){ SGXString message = "This is ColoursPlusPlus, kind of demo app for SGEXTN that we will be building in this tutorial. The app will showcase various SGEXTN features including the SGWidget and SG - RI systems used to implement interactive and customisable user interfaces."; message += " "; message += SGXChar(0x0378); SGWPageBackground* bg = new SGWPageBackground(SGWWidget::parentWidget, 0.0f, 0.0f, 0.0f, 0.0f, 1.0f, 0.0f, 1.0f, 0.0f); new SGWLongLabel(bg, message, 0.0f, 0.0f, 0.0f, 0.0f, 1.0f, 0.0f, 1.0f, -1.0f, 0.0f, 1.0f, 0.0f, 0.5f, 0.0f, 0.5f); new SGWTextButton(bg, "continue", nullptr, 0.0f, 0.0f, 1.0f, -1.0f, 1.0f, 0.0f, 0.0f, 1.0f); return bg; }
See here for the next part of the tutorial.
©2025 05524F.sg (Singapore)