UI Builder merging multiple tools into a single tool

MaskedMouse · Mar 12, 2020

I'm kind of wondering if you've made a few small tools already put the code behind it and then go for a bigger tool which combines multiple tools in one single window.
How do you clone the tree but still let it use the code behind it that you've already written?

Example:

Tool A uxml has a button which outputs a debug log "Hello I am tool A"
Tool B uxml has a button which outputs a debug log "I'm tool B"

Tool C uxml I add Tool A uxml and Tool B uxml. But how to bind the functionality again which reside in their own tool? Will I have to write duplicate code or maybe bind via a static method?

uDamian · Mar 12, 2020

If you use UIElements' query system (ie. myRoot.Q<Button>("my-button")), even if your Button is now part of an instance of a UXML inside another parent UXML, that query will still work, so the code/bindings should still work. You just have to be more specific with your element names.

You also have the option to bundle a UXML layout (with USS styling) _and_ functionality into a stand-alone custom control - a C# element that inherits and extends the VisualElement class. You can then clone the UXML in your constructor and make sure all the bindings are done there. You can then expose this custom element, by C# type name, to UXML so you can use it on other UXML documents like any other tag.

If you find yourself duplicating things there's likely a way to avoid it. Feel free to post specific examples here.

MaskedMouse · Mar 12, 2020

My example would be an ADB tool

I have a few buttons which run an ADB command.
Uninstall APK, Install APK and Run APK
I have this in its own ADBTools uxml, its cs is an editor window.

Now I want to make a build tool which shows all relevant project information that is set and add the ADBTools.uxml to it so you don't have to open the ADB tool window separately. But drag dropping in other uxml's doesn't make the UI functional as all the initialization / bindings happens in its own ADBTools.cs. Not in the BuildTools.cs

So yes I could query for all ADB tool elements again in the BuildTools but I cannot bind the functionality that has already been defined in ADBTools.cs.

From what I can interpret of what you said, ADBTools should extend the
VisualElement
class rather than a
EditorWindow
class. Then the uxml should refer to the C# type name?
Then I should be able to instantiate the ADB toolset (fully functional) in any UI Elements window?

uDamian · Mar 12, 2020

MaskedMouse said: ↑

From what I can interpret of what you said, ADBTools should extend the
VisualElement
class rather than a
EditorWindow
class. Then the uxml should refer to the C# type name?
Click to expand...

Yes, exactly. This sounds like a scenario where a custom C# element would make more sense.

MaskedMouse said: ↑

Then I should be able to instantiate the ADB toolset (fully functional) in any UI Elements window?
Click to expand...

Yep!

MaskedMouse · Mar 18, 2020

Hmm, I've tried setting it up and still can't get it to work.

So what I have is:

Code (CSharp):

public class ADBTool : VisualElement

{

public new class UxmlFactory : UxmlFactory<ADBTool>{}

public ADBTool()

{

Debug.Log("ADB Tool initialize");

var doButton = this.Q<Button>("DoButton");

if (doButton != null)

doButton.clickable.clicked += () => Debug.Log("Clicked a button");

}

}

An ADBTool.uxml

Code (CSharp):

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements">

<ui:VisualElement class="ADBTool">

<Style path="Assets/EyeQ/Editor/UIElements/ADB/ADBTool.uss" />

<ui:Label text="Label" />

<ui:Button text="Button" name="DoButton" />

</ui:VisualElement>

</ui:UXML>

And a BuildTools.uxml where I want to use the ADBTool

Code (CSharp):

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements">

<ui:Template name="ADBTool" path="Assets/EyeQ/Editor/UIElements/ADB/ADBTool.uxml" />

<ui:Instance template="ADBTool" />

</ui:UXML>

The template is instantiated but the constructor isn't executed so it doesn't bind the button.
What am I doing wrong?

uDamian · Mar 26, 2020

The "class" attribute of VisualElement is not used for this purpose. It's used to assign it USS classes that are then used for styling (in USS selectors).

Here's an example of a custom C# element:

Code (CSharp):

using System.Collections.Generic;

using UnityEditor;

using UnityEditor.UIElements;

using UnityEngine;

using UnityEngine.UIElements;

namespace MyCustomNamespace

{

internal class ABDTool : VisualElement

{

public enum Existance

{

None,

Good,

Bad

}

public new class UxmlFactory : UxmlFactory<BuilderAttributesTestElement, UxmlTraits> { }

public new class UxmlTraits : VisualElement.UxmlTraits

{

UxmlStringAttributeDescription m_String = new UxmlStringAttributeDescription { name = "string-attr", defaultValue = "default_value" };

UxmlFloatAttributeDescription m_Float = new UxmlFloatAttributeDescription { name = "float-attr", defaultValue = 0.1f };

UxmlDoubleAttributeDescription m_Double = new UxmlDoubleAttributeDescription { name = "double-attr", defaultValue = 0.1 };

UxmlIntAttributeDescription m_Int = new UxmlIntAttributeDescription { name = "int-attr", defaultValue = 2 };

UxmlLongAttributeDescription m_Long = new UxmlLongAttributeDescription { name = "long-attr", defaultValue = 3 };

UxmlBoolAttributeDescription m_Bool = new UxmlBoolAttributeDescription { name = "bool-attr", defaultValue = false };

UxmlColorAttributeDescription m_Color = new UxmlColorAttributeDescription { name = "color-attr", defaultValue = Color.red };

UxmlEnumAttributeDescription<Existance> m_Enum = new UxmlEnumAttributeDescription<Existance> { name = "enum-attr", defaultValue = Existance.Bad };

public override IEnumerable<UxmlChildElementDescription> uxmlChildElementsDescription

{

get { yield break; }

}

public override void Init(VisualElement ve, IUxmlAttributes bag, CreationContext cc)

{

base.Init(ve, bag, cc);

var ate = ve as BuilderAttributesTestElement;

ate.Clear();

ate.stringAttr = m_String.GetValueFromBag(bag, cc);

ate.Add(new TextField("String") { value = ate.stringAttr });

ate.floatAttr = m_Float.GetValueFromBag(bag, cc);

ate.Add(new FloatField("Float") { value = ate.floatAttr });

ate.doubleAttr = m_Double.GetValueFromBag(bag, cc);

ate.Add(new DoubleField("Double") { value = ate.doubleAttr });

ate.intAttr = m_Int.GetValueFromBag(bag, cc);

ate.Add(new IntegerField("Integer") { value = ate.intAttr });

ate.longAttr = m_Long.GetValueFromBag(bag, cc);

ate.Add(new LongField("Long") { value = ate.longAttr });

ate.boolAttr = m_Bool.GetValueFromBag(bag, cc);

ate.Add(new Toggle("Toggle") { value = ate.boolAttr });

ate.colorAttr = m_Color.GetValueFromBag(bag, cc);

ate.Add(new ColorField("Color") { value = ate.colorAttr });

ate.enumAttr = m_Enum.GetValueFromBag(bag, cc);

var en = new EnumField("Enum");

en.Init(m_Enum.defaultValue);

en.value = ate.enumAttr;

ate.Add(en);

}

}

public string stringAttr { get; set; }

public float floatAttr { get; set; }

public double doubleAttr { get; set; }

public int intAttr { get; set; }

public long longAttr { get; set; }

public bool boolAttr { get; set; }

public Color colorAttr { get; set; }

public Existance enumAttr { get; set; }

}

}

If you have no need for custom attributes, the main thing you need in your class is:

Code (CSharp):

public new class UxmlFactory : UxmlFactory<ABDTool, UxmlTraits> { }

Then, in UXML, you would just do:

Code (CSharp):

<UXML>

<MyCustomNamespace.ABDTool />

</UXML>

or..

<UXML xmlns:mcn="MyCustomNamespace">

<mcn:ABDTool />

</UXML>

MaskedMouse · Mar 27, 2020

Right. So after reading the documentation & your input very carefully multiple times .

I now have a
ADBTool : VisualElement
which has a
new class UxmlFactory : UxmlFactory<ADBTool>
As it doesn't have attributes... and functionality needs to be bound to the buttons / input fields etc.
I used the constructor of the
ADBTool
class to initialize it's functional bindings.

Now I was wondering, why does my UI not appear. Well this is because code & UI are separated. In the UI Builder there was an empty name with my ADBTool, I dragged that in.

The uxml became:

Code (CSharp):

<ADBTool>

<Style path="Assets/Editor/UIElements/BuilderTool.uss" />

</ADBTool>

The class is constructed (instantiated), but not the UI itself. So what I did was in the constructor of the ADBTool, load the uxml of the ADBTool, clone it and add it onto itself.

So if for any reason someone else is struggling here's an example:

Code (CSharp):

public class CustomVisualElementClassName : VisualElement

{

// If you have no uxml attributes

public new class UxmlFactory : UxmlFactory<CustomVisualElementClassName> {}

/// Constructor to initialize this visual element instance

public CustomVisualElementClassName()

{

// Root UXML of your custom visual element, which can be at any given path inside an Editor folder

var rootUxml = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>("Assets/Editor/UIElements/CustomUI.uxml");

var root = rootUxml.CloneTree();

// Add the Style Sheet

var styleSheet = AssetDatabase.LoadAssetAtPath<StyleSheet>("Assets/Editor/UIElements/CustomUI.uss");

root.styleSheets.Add(styleSheet);

// Add the root instance to itself because this is a visual element container.

Add(root);

// Initialize your visual element bindings

// This requires a button with the Name property set to: CustomButton

var button = root.Q<Button>("CustomButton");

// Bind the button clicked functionality by subscribing

if(button != null) button.clickable.clicked += () => Debug.Log("Button binding works!");

// Sadly we cannot use button?.clickable.clicked because it is an assignment and not an accessor

// You could create a class which extends Button, which binds the clickable.clicked the same way as above.

// and then be able to do something like this: button?.BindOnClick(() => Debug.Log("Bind!"));

}

}

uDamian · Mar 27, 2020

Yep, this is exactly the pattern for custom C# elements with their own internal UI tree.

Small tip, you can simply use:

Code (CSharp):

rootUxml.CloneTree(this);

to clone the contents of the UXML inside your custom element without creating another level (for the TemplateContainer)

MaskedMouse · Apr 1, 2020

Ok, so with 2019.3 the UI Builder has a
Binding Path
. Reading the documentation carefully it requires a
SerializedObject
. However now that my
ADBTool
inherits from
VisualElement
I cannot pass the
ADBTool
as
SerializedObject
. With the
EditorWindow
it could've been passed as
SerializedObject
.
So how should I bind the ADBTool properties?

I got an idea but it requires a separate inner data class which could serve as
SerializedObject
.
I know I can use the Value Changed events and hook in to those but just wondering, can I somehow still pass the ADBTool to the binding?

Because
new SerializedObject(this)
does not seem to work for VisualElement based classes.

Search Unity

UI Builder merging multiple tools into a single tool

MaskedMouse

uDamian

Unity Technologies

MaskedMouse

uDamian

Unity Technologies

MaskedMouse

uDamian

Unity Technologies

MaskedMouse

uDamian

Unity Technologies

MaskedMouse

Search Unity

Unity ID

Useful Searches

UI Builder merging multiple tools into a single tool

Unity Technologies

Unity Technologies

Unity Technologies

Unity Technologies