First Use¶
This chapter will demonstrate initializing the library, embedding it into the render loop, and displaying a full-screen white rectangle.
This UI library does not have its own render loop; it is usually embedded directly into the host program.
When you have created a window and hold its window handle, you can do this to initialize the library:
Window window = Window.from(windowHandle, RenderProviderType.OPENGL); // Currently we only have an OpenGL backend
Warning
This library does not currently support multiple windows.
Internally, it will:
Register GLFW callbacks Initialize the rendering backend
Warning
You should call Window.from() on the rendering thread.
And do not register any GLFW callbacks after Window.from().
After initializing the Window, you can get the GUI node root:
Then, in your render loop, you can:
// Code before rendering the UI...
root.render();
// Code after rendering the UI, e.g. glfwSwapBuffers()...
This way, the UI library can perform rendering normally.
Now, we will render a rectangle covering the entire screen:
ScaleOffset position = ScaleOffset.ZERO; // Position at the top-left corner
ScaleOffset size = ScaleOffset.fromScale(1, 1); // Fill the parent node; here the parent node is NodeRoot, so filling the parent node means filling the entire screen
Frame frame = new Frame(position, size); // Create a new Frame object
root.addChild(frame); // Attach the Frame to the node root
The detailed usage of ScaleOffset can be found in the Core Concepts chapter.
Warning
Do not recreate the above code every time in the render loop, because we are a retained-mode UI library. This will cause a new Frame to be attached to the node tree every frame, severely degrading performance.
If there are no problems, you should see a white rectangle covering the entire screen.