Singaporeansincerely Singaporean
If you have not done so, read this full tutorial on how to use SGEXTN to build an application.
SGWidget is SGEXTN's highly customisable imperative GUI system. You can customise the layout of UI using w-distance ⁽㈳㈴㈳㈮㈱㈨㈠㈫ ㈧㈤㈱㈤⁾ and colours using theme colour ⁽㈳㈴㈳㈮㈱㈨㈠㈫ ㈧㈤㈱㈤⁾.
To make user interactions such as typing in a SGWInput or clicking a SGWButton trigger events, you need to use callback function ⁽㈳㈴㈳㈮㈱㈨㈠㈫ ㈧㈤㈱㈤⁾. Additionally, the SingCorrect ⁽㈳㈴㈳㈮㈱㈨㈠㈫ ㈧㈤㈱㈤⁾ builtin functionality enhances user experience when interacting with input fields.
The base class for all UI elements is SGWWidget, you can look through its subclasses to see what UI elements are available.
SGWidget uses Qt Quick, so it is cross platform and GPU accelerated. However, you will not need to write a single line of QML or JS to use SGWidget. SGWidget is fully imperative.
When designing UI using SGWidget, you should think in terms of UI pages. A UI page is everything that the user sees at a specific moment when using the application. All UI pages should cover the whole screen.
In code, a UI page corresponds to a subclass of SGWBackground that is shown and hidden using SGWBackground::enable and SGWBackground::disable respectively. The internal logic ensures that at any time, only the most recently shown UI page is actually being displayed.
Always use SGWBackground::enable and SGWBackground::disable when showing and hiding UI pages. To show and hide UI elements on a UI page, even if it is a SGWBackground, you still can only use SGWWidget::setItemVisibility.
The background of UI pages should be direct children of SGWWidget::parentWidget. The UI elements on a UI page should be children of the page background.
The following UI layout recommendations will use w-distance ⁽㈳㈴㈳㈮㈱㈨㈠㈫ ㈧㈤㈱㈤⁾.
As much as possible, keep the height of the average text at (0.0, 1.0).
Try not to put anything within (0.0, 0.5) of the edge of the screen.
Leave a gap of at least (0.0, 0.2) between any 2 UI elements.
Warning text for when the user enters invalid input should have a height of (0.0, 0.75).
Use a vertical spacing of (0.0, 0.5) between elements. If you need to fit a warning for invalid input, use (0.0, 1.0).
The title of a UI page can have a height of (0.0, 1.5), or even (0.0, 2.0) if you want to.
application icon ⁽㈳㈴㈳㈮㈱㈨㈠㈫ ㈧㈤㈱㈤⁾ should be at least (0.0, 1.5) tall for users to see it clearly, unless they are really simple.
For custom rendering, you will need SG - RI ⁽㈳㈴㈳㈮㈱㈨㈠㈫ ㈧㈤㈱㈤⁾. You can write custom shaders and send stuff to the GPU in a very simple way. The SGRRendererWidget is not interactive, so you need a transparent UI element on top of it for interactivity.
For custom interactions, use SGWSingleTouchReceiver or SGWMultiTouchReceiver, these will pass the exact position of the touch event to the corresponding callback function ⁽㈳㈴㈳㈮㈱㈨㈠㈫ ㈧㈤㈱㈤⁾.
©2025 05524F.sg (Singapore)