ReJUI/docs/widgets.md

JUI Widget Directory

Updated on 2025-06-25 / Release-6.4 [^1]

See also:

Animation
Layout
Overview
Styling
Full API Reference
Repository

Widget

• The Widget is the basis of all GUI elements in JUI.
  • It is an abstract class, and you should not directly instantiate Widget for use in your UI.
    • Instead, create its concrete derived types (Button, Text, Slider) or your own custom derivation.
      • class Widget serves as the starting point for creating custom widgets.
• Widgets are organized in a tree-like hierarchy, where each widget can have multiple children and a single parent.
  • This structure dictates rendering order, event propagation, and coordinate systems.
    • Operations like updating, drawing, and event dispatching typically traverse this hierarchy recursively.
  • A Widget's on-screen position is always relative to its parent. This simplifies layout management, as moving a parent automatically moves all its children. Sizing is also handled in relation to the parent.
• Widgets can be given a custom string identifier which can be used to search for it in the hierarchy later.
  • Widget::Name("unique_element_4");

// Dispatch a "MouseMovement" event until a widget indicates that it has "observed" the event.
for (auto* widget : my_element->GetChildren()) {
    if (widget->ObserveMouseMovement({420, 420}) return;
}

// Listens for an event of a child widget being added.
// These event-hooks are provided to make customization easier without requiring you to derive the class.
my_element->ChildAdded += [] (Widget* child) {
    child->Name("New Child Element!");
};

Scene

• The Scene widget acts as the root container for all your JUI elements within a window or application.
  • It's the top-level Widget that manages the entire hierarchy of your UI.
    • You'll typically have one Scene per window, serving as the canvas upon which all other widgets are placed and rendered.
• Every JUI application or window requires a Scene to host its user interface.
  • All other widgets become descendants of the Scene.
  • A scene is a mandatory component for a JUI application. You cannot display widgets without placing them in a Scene.
• Unlike other Widget types, a Scene does not have a parent itself. It's the root of the hierarchy.
• Event Sink - Events from the OS / Framework (mouse clicks, key presses) are first received by the Scene, which then initiates the recursive dispatch process down its tree.
• Z-Ordering: While individual widgets use Z-Index for sibling ordering, the Scene ensures that its entire content is rendered correctly, typically on top of the OpenGL scene if applicable.
• A scene's viewport (aka canvas size) can be set to the window viewport, or an arbitrary value.
  • The scene provides a GlobalUIScale property, that can be used to scale an entire GUI uniformly.

auto* scene = new JUI::Scene();

auto* text = new JUI::Text(scene);
text->Content("Hello, World!");

void app_key_press(Key key) {
    // Returns whether any widget should have "consumed" the event.
    bool sunk = scene->ObserveKeyInput(key, true); 
}

void app_key_release(Key key) {
    // Returns whether any widget should have "consumed" the event.
    bool sunk = scene->ObserveKeyInput(key, false); 
}

BindMenu

The BindMenu Widget is a work-in-progress. Check back in Prerelease 7.

Button

This is some information about the Widget class.

Checkbox

• The Checkbox widget provides a simple binary toggle input, allowing users to select or deselect an option.
  • Typically Consists of a small square box
• Also see LabeledCheckbox for a Checkbox with integrated text.

Collapsible

• The Collapsible widget provides a way to show or hide a section of UI content with a single click, typically on a header or title bar.
  • It's a space-saving component that allows users to expand details when needed and collapse them to reduce visual clutter.
    • It's ideal for settings panels, property inspectors, or long lists of categorized information.
• Usages:
  • Settings Panel - Group related settings that can be expanded individually.
  • Accordions - Create a series of Collapsibles where only one can be open at a time, by combining them with custom logic on the open/close events.
  • Property Inspectors - Display object properties that can be shown or hidden.
  • Information Hiding - Presenting advanced options or less frequently used details that don't need to be visible by default.
  • Debug Overlays - Containing logs or diagnostic tools that can be toggled open.
• Notes
  • Content Container
  • Toggle Mechanism
  • Layout Impact
  • Initial State

ColorPicker

This is some information about the Widget class.

ComboBox

This is some information about the Widget class.

CommandLine

This is some information about the Widget class.

ContextMenu

This is some information about the Widget class.

DialogWindow

This is some information about the Widget class.

FileDialog

This is some information about the Widget class.

FpsGraph

This is some information about the Widget class.

Graph

This is some information about the Widget class.

GridLayout

This is some information about the Widget class.

Image

This is some information about the Widget class.

ImageButton

This is some information about the Widget class.

ImageRect

This is some information about the Widget class.

LabeledCheckbox

This is some information about the Widget class.

LabeledSlider

This is some information about the Widget class.

Link

This is some information about the Widget class.

ListBox

This is some information about the Widget class.

VerticalListLayout

This is some information about the Widget class.

HorizontalListLayout

This is some information about the Widget class.

NineSlice

This is some information about the Widget class.

ProgressBar

This is some information about the Widget class.

RadioButton

This is some information about the Widget class.

Rect

This is some information about the Widget class.

RichText

This is some information about the Widget class.

ScrollingRect

This is some information about the Widget class.

Separator

This is some information about the Widget class.

Slider

• The Slider Widget allows users to select a value from a continuous or discrete range by moving a scrubber (or thumb, dragger, etc.) along a track.
• Slider is a specialization of the Rect widget.
• Usages:
  • Volume Control
  • Brightess/Contrast
  • Color Picker (JUI actually has one built-in that uses Sliders!)
  • Progress Indicator (Just kidding, use a ProgressBar for this!);
  • Game Settings
    • Field-of-view.
    • Sensitivity
    • Spell power, physics parameters.
  • Numerical Input (Range-Bound): An alternative to a text input field when the allowed values are within a known, limited range.
• Notes:
  • Orientation: ===Currently, JUI does not yet have vertical sliders.===
  • Range and Step: You can define a minimum and maximum value for the slider;
    • As well as a "step" quantity, forcing the slider to snap to discrete increments (ie. multiples of 5, or increments of 0.25)
  • Event-Driven - The "value changed" event fires when the user moves the scrubber or the value is set programmatically.

auto* sfx_volume_slider = new JUI::Slider(my_scene);

sfx_volume_slider->Minimum(0);
sfx_volume_slider->Maximum(100);
sfx_volume_slider->Interval(1);
sfx_volume_slider->CurrentValue(50);
sfx_volume_slider->ValueChanged += [](float value) {
    // set audio engine SFX volume.
};

• Also see LabeledSlider for a slider with text.

Table

This is some information about the Widget class.

TabView

This is some information about the Widget class.

Text

This is some information about the Widget class.

TextButton

This is some information about the Widget class.

TextInputForm

This is some information about the Widget class.

TextRect

This is some information about the Widget class.

ToggleButton

This is some information about the Widget class.

Tooltip

This is some information about the Widget class.

UtilityBar

This is some information about the Widget class.

Viewport

This is some information about the Widget class.

Window

This is some information about the Widget class.