[UI Builder] How to make buttons interactable?

Hello, I am using UI Builder.

I would like the functionality where the buttons Tab1, Tab2, Tab3 can be selected (only 1 of them at a time) and depending on which one is selected, the content belows it changes. The tabs are button elements.



Thank you in advance.

Alex

 

I would store a variable for the tab index (0 for Tab 1, 1 for Tab 2, 2 for Tab 3), then for the clickable.clicked for each element, I would set the tab index variable to the index of the tab. So you could, if you wanted to, set the userData for each button to the index you want it to be.

Then you would want to update your style for the button. So before you change the tab index, you could revert the style of the old tab index element, then change the tab index, set the style for the new tab element, and then hide the old tab's container element, and show the new tab's container element.

 

Maybe changing the picking mode to ignore and dim the color of button by yourself?

 

how to create editor window with
[UI Builder]

 

Hey! I only just got back to working on this. Thank you very much for the help.

I got up to the point where I registered to the clickedWithEventInfo callback and the EventBase is properly passed but how would I differentiate between the tabs?

Using EventBase.target.ToString() I could maybe get the button's text and differentiate based on that but is there a better way to get the button's text in order to differentiate? Or should I not be looking at the button's text at all but rather some ID? Button position? Something else?

Thank you in advance,

Alex

Edit: EventBase.target.ToString().Contains() is working perfectly but I imagine there must be a better way to differentiate between my tabs.

Edit2: I figured I could do the following: "Button b = tab.target as button" and like that I can get the text which is a cleaner solution. Thank you!

 

Hello! New developer here. Getting better at navigating UIElements, but by chance is there anyway you can write this out in code so I can better see how this is structured (or should I create a new thread)?

I have been hammering away at google and in code trying to figure out how to get a UI Elements Button/Toggle on a Component Inspector to open up an Editor Window and haven't been able to piece it together. This thread seems very close to what I am hoping for.

 

I can show what I have. So in my initialize method I have this.

Code (CSharp):

1. root.Query<Button>().ForEach((button) =>
2. {
3.     button.clickable.clickedWithEventInfo += SwitchTab;
4. });

Then in the 'SwitchTab' method I do this.



Does that help?

 

You could even just add a unique class or name to each button and query for them one by one.

Code (csharp):

1. rootVisualElement.Q<Button>(className: "tab-button-one").clicked += () =>
2. {
3.     SwitchTab(1);
4. };

Or when looping through multiple buttons you could also use

button.ClassListContains("tab-button-one")

instead of

button.name

.

 

I am gonna feel stupid for admitting this, but it doesn't help, but maybe I should be a bit more specific too.

Ideally I'd like to have 10 toggles or set of buttons on a custom component inspector that each open up a new, but similar unique instance of an editor window.

I am looking for any documentation on how to call an Editor Window from a Monobehavior script.

 

Here is our tool: https://www.reddit.com/r/Unity3D/comments/euyci7/learning_how_to_utilize_unitys_uielementsbuilder/

Would love to figure out how to open and close all 10 editor windows via a single individual component/editor (instead of having to access each level window through the Unity toolbar at the top of the screen).

 

Hello,

So i have tried implementing every way possible to get a click event from my button... so far nothing is working.

Any help would be great thanks.

unity version 2020.1.0a

 

Thank you for the response,

I have updated to use your exact code, but i am still not able to get a click event from within the Game Window.

But i do get the click event when clicking the button within the SimpleBuggyWindow EditorWindow


And i do have a UIElementsEventSystem attached

 

Thanks again for the response,

I am using the RuntimeDemo Assets and within the Demo Scene the buttons work correctly.... So i update my original code to to follow the Demos implementation and it works for me.

Basically adding a reference to the in game PanelRenderer and called the postUxmlReload.

However if i am not referencing the in game PanelRenderer and try and grab the VisualTreeAsset from the AssetDatabase like so

_assetTree = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>("Assets/Button.uxml");

it does not work.

Working Code

Code (CSharp):

1. using UnityEngine;
2. using UnityEngine.UIElements;
3. using UnityEditor;
4. using System.Collections.Generic;
5. using Unity.UIElements.Runtime;
6.  
7. public class ShopManagerUIBuilder : MonoBehaviour
8. {
9.     //private VisualElement _visualTree;
10.     //private VisualTreeAsset _assetTree;
11.  
12.     public PanelRenderer GameScreen;
13.  
14.     public void OnEnable()
15.     {
16.         GameScreen.postUxmlReload = BindGameScreen;
17.     }
18.  
19.     private IEnumerable<Object> BindGameScreen()
20.     {
21.         var root = GameScreen.visualTree;
22.         Button b = root.Q<Button>("Button");
23.         b.clickable.clicked += ButtonClicked;
24.  
25.  
26.        //_assetTree = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>("Assets/Button.uxml");
27.  
28.         //_visualTree = _assetTree.CloneTree();
29.  
30.         //Button b = _visualTree.Q<Button>("Button");
31.  
32.         //b.clickable.clicked += ButtonClicked;
33.  
34.         return null;
35.     }
36.  
37.     private void ButtonClicked()
38.     {
39.         TraceManager.WriteTrace(TraceChannel.Main, TraceType.info, "Button Clicked");
40.     }
41. }
42.  

UXML

Code (CSharp):

1. <ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements">
2.     <ui:Button text="Button" name="Button" style="height: 98px;&#10;width: 110px;&#10;">
3.         <Style src="Button.uss" />
4.     </ui:Button>
5. </ui:UXML>
6.  

 

When It will work?

 

Hi,

I stumbled across this problem while trying out the new UI Builder Package (Version 1.0.0-preview.9 - October 15, 2020).

As far as i can tell a few things have changed since previous versions so here is my working version of registering a button callback.

Code (CSharp):

1. using System.Collections;
2. using System.Collections.Generic;
3. using UnityEngine;
4.  
5. public class StartMenuManager : MonoBehaviour
6. {
7.     public UnityEngine.UIElements.UIDocument uIDocument;
8.  
9.     public UnityEngine.UIElements.TextField textField_serverAddress;
10.     public UnityEngine.UIElements.Button button_connectToServer;
11.     public UnityEngine.UIElements.Button button_options;
12.     public UnityEngine.UIElements.Button button_quit;
13.  
14.     // Start is called before the first frame update
15.     void Start()
16.     {
17.  
18.         var allElementsInHirarchy = new List<UnityEngine.UIElements.VisualElement>();
19.         this.getAllContainedElements(uIDocument.rootVisualElement, ref allElementsInHirarchy);
20.  
21.         for (int i=0; i< allElementsInHirarchy.Count; i++) {
22.             Debug.Log("startMenuTreeClone["+i+"].name == "+ allElementsInHirarchy[i].name);
23.             if (allElementsInHirarchy[i].name == "ServerAddressTextfield") {
24.                 textField_serverAddress = (UnityEngine.UIElements.TextField)allElementsInHirarchy[i];
25.             }
26.             else if (allElementsInHirarchy[i].name == "ConnectToServerButton") {
27.                 button_connectToServer = (UnityEngine.UIElements.Button)allElementsInHirarchy[i];
28.             }
29.             else if (allElementsInHirarchy[i].name == "OpenOptions")
30.             {
31.                 button_options = (UnityEngine.UIElements.Button)allElementsInHirarchy[i];
32.             }
33.             else if (allElementsInHirarchy[i].name == "QuitButton")
34.             {
35.                 button_quit = (UnityEngine.UIElements.Button)allElementsInHirarchy[i];
36.             }
37.         }
38.      
39.         button_connectToServer.clicked += clickEvent_connectToServerButton;
40.         button_options.clicked += clickEvent_openOptions;
41.         button_quit.clicked += clickEvent_quitGame;
42.  
43.     }
44.  
45.     // Update is called once per frame
46.     void Update()
47.     {
48.  
49.     }
50.  
51.     public void getAllContainedElements(UnityEngine.UIElements.VisualElement parentElement, ref List<UnityEngine.UIElements.VisualElement> allElements) {
52.         allElements.Add(parentElement);
53.  
54.         for (int i = 0; i < parentElement.childCount; i++) {
55.             getAllContainedElements(parentElement[i], ref allElements);
56.         }
57.     }
58.  
59.     public void clickEvent_connectToServerButton() {
60.         Debug.Log("Connect to IP: "+ textField_serverAddress.text);
61.     }
62.  
63.     public void clickEvent_openOptions()
64.     {
65.         Debug.Log("Open Options");
66.     }
67.  
68.     public void clickEvent_quitGame()
69.     {
70.         Debug.Log("Quit");
71.     }
72. }

 

This saved my night and my sanity. Thank you. I was able to create an infinite number of buttons and reference them uniquely after they were clicked by naming them in a loop with

String btnName = "baseName" + i.ToString

then comparing them using the EventBase data to get the name and running another loop through the number of possible names.

 

thank you