[U] Creating and learning about UI components

Before we begin with setting up the UI components, we first need to talk about where your source files as a framework programmer go.

There are 3 types of files

1. UI Components
2. The Instance
3. Wrapper functions

Each type is located in a specific directory as follows:

1. Instance and UI Components: Source/
2. Wrapper Functions: WrapperSource/

In this guide we're primarily focusing on the UI Components, with our goal being to write a "Hello, World" example.

Generating the files

All the above-mentioned files follow strict file templates that can be automatically generated by using the UVKBuildTool. To generate the files navigate to UVKBuildTool/build and run the UVKBuildTool executable like this

./UVKBuildTool --help

or for Windows

./UVKBuildTool.exe --help

The result of the command should be like this:

UVKBuildTool - The universal UntitledVulkanGameEngine and UntitledImGuiFramework file generator
Arguments:
    --generate <project path> - Regenerates all required generated files for the given project
    --install <project path> - Generates the project files when installing for the first time
    --build <project path> - Bundles the application and compiles it for production
    --help - This help message
The following arguments generate source files for UI components:
    --inline <name> <project path> - Creates an inline component
    --window <name> <project path> - Creates a window widget
    --title-bar <name> <project path> - Creates a titlebar widget
UVKBuild tool, made by MadLad Squad, developed and maintained by Stanislav Vasilev(Madman10K)

As you can see from the output there are 3 possible types of UI Components:

1. Inline
2. Window
3. TitleBar

Additionally, another scriptable class is the Instance, which defines which components are active as well as other information about the application that the framework can use

How do components work?

Components work in the following way:

Every component is a subclass of their respective interface, this class overrides the default pure virtual functions a.k.a. its events. Any code called in the events of a component gets called at some point in the application's render loop. All components have the following events

• Constructor
• begin
• tick
• end
• Destructor

The constructor and destructor are self-explanatory, the begin function gets called after the UI is initialised, just before the start of the application's render loop. It is important to mention here, that the event part of the Instance called onEventConfigureStyle gets called before the "begin" event.

---

The tick function is called in the render loop at this specific order

1. tick of the title bar components
2. tick of the inline components
3. tick of the window components

Why is it like this? Well the title bar components are actually inline components that get rendered at the top, the only reason they are not actual inline components is that they have some special functionality such as providing window movement, decorations and more.

---

The end is called after the render loop is closed before destroying any resources including the UI and Window. After that the layout inside the config directory gets saved and the application shuts down

Further learning and documentation

Documentation and reference on all types of UI components and the Instance can be found here, if you ARE a new developer to the framework READ the following pages before continuing with the roadmap:

1. Instance
2. Inline Component
3. Titlebar Component
4. Window Component