# UI Events To understand more about the UI system, here is a simple demonstration of how to create a working button. Step 1 : Create an empty scene with any name of your liking and open the scene. Step 2 : Adding necessary scene game objects for this exercise. Go to the Prefabs folder inside path UIs/Essential and drag ChessGameObjectBase prefab into the scene hierachy.

Then, create a canvas on the scene and go to another folder inside Prefabs folder UIs/Buttons/Base, drag the ResponsiveButton prefab to the screen canvas.

Scene result as below image

Step 3 : Copy code below to ChessEventManager.cs located in Scripts/Main/Communicators folder, the string parameter is optional, it's just there to showcase the possibilities of passing parameters values. ``` public delegate void OnButtonDelegate(string text); public static event OnButtonDelegate OnButtonEvent; public static void InvokeButtonEvent(string text) { OnButtonEvent?.Invoke(text); } ``` Step 4 : Create a C# script in the path Scripts/Main/UIs/Buttons name DummyButton.cs and copy the code below into it. As soon as the button is clicked, it will invoke the OnButtonEvent event, nothing will happen for now since nothing is listening to this event.

namespace TheChess
{
    public class DummyButton : ResponsiveButton
    {
        protected override void StartListening()
        {
            btn.onClick.AddListener(delegate
            {
                ChessEventManager.InvokeButtonEvent("Dummy button clicked");
            });
        }
    }
}

Step 5 : Remove the ResponsiveButton(Script) component from the scene gameobject and add the newly created DummyButton script to it. Drag the text gameobject to the objectfield.

Step 6 : This is where when button clicked, ChessBaseGUI class will respond. Open ChessBaseGUI script file in Scripts/Main/GUIs folder and copy below function into it ``` void DummyButtonCall(string text) { Debug.Log(text); } ``` Then add below line of code into `SubscribeChessEvents()` function, it means ChessBaseGUI will start listening to when button invoke OnButtonEvent, DummyButtonCall function will get called. ``` ChessEventManager.OnButtonEvent += DummyButtonCall; ```

It is also important to add a same line of code as previous line but with -= operator to `UnsubscribeChessEvents()` function, to ensure ChessBaseGUI stop listening when exiting scene. ``` ChessEventManager.OnButtonEvent -= DummyButtonCall; ``` Step 7 : Play and click the button

:thumbsup:Well done, you can now make the button a variant prefab and drag it to any scene that has gameobject with attached script component ChessBaseGUI or GUIs inherited from ChessBaseGUI and it will work straight away. Step 8 : Optional To make the button provide feedback if the click did indeed trigger action. Do the following changes. Replace the InvokeButtonEvent function in Step 3 to code below ``` public static void InvokeButtonEvent(string text) { bool? success = OnButtonEvent?.Invoke(text); if (success != null) CreateButtonRespond((bool)success); else SendWarningMessage(typeof(OnButtonDelegate).Name); //This will send warning message if no script is listening to this invoker when it invoked } ``` change the code in Step 4 to return bool value ``` bool DummyButtonCall(string text) { Debug.Log(text); return true; //this will determine if it's a tick or cross the button respond with. } ```

Tips : Here is how to find the class that are relevant to the event, quickly and easily.