Skip to main content

UI Builder

UI Builder is a library to facilitate the creation of UI and Editor elements through Attributes, it uses UI Toolkit as framework.

Features

  • Classes to facilitate the process of creating editor UI
  • Attributes for drawing elements in the inspector / editor

Next Steps

  • Create a huge attribute package
  • Create components and automations for use at runtime
  • Reactive Programming integrated with UniRX/R3
  • Automations to simplify creation of Gizmos and Handlers

alt text

TODO: UIElement, Dictionary and Ideas

Note: Is possible to create drawers for non-serialized pure classes

Visual Tree auto-binding​

The UIElement attribute is one of the most powerful features of UIBuilder, it allows auto-binding of elements through naming conventions and reflection. Here an example:

  1. Create an UI Document / uxml file and populate your object using kebab-case as name convention for the VisualElements.

alt text

  1. Create a class to represent your VisualElement. Make sure namespace Z3.UIBuilder.ExtensionMethods and Z3.UIBuilder.Core are included.

  2. Clone the VisualTreeAsset and then call the BindUIElements() extension method.

using UnityEngine;
using UnityEngine.UIElements;
using Z3.UIBuilder.Core;
using Z3.UIBuilder.ExtensionMethods;

public class MyClass : VisualElement
{
    [UIElement] private Label titleLabel;
    [UIElement] private Button button;
    [UIElement] private VisualElement container;

    public MyClass(VisualTreeAsset visualTreeAsset)
    {
        // Clone UI and Bind elements
        visualTreeAsset.CloneTree(this);
        this.BindUIElements();

        // Now is available to use
        label.text = "New Label Name";
        button.clicked += OnClick;
    }

    private void OnClick()
    {
        Debug.Log("Hello");
    }
}

Object Menu Window​

You can use the class ObjectMenuWindow to create a navigation panel with content visual panel. Example:

alt text