Custom Graphable View Components

Introduction

Objects in a view controller's view can be made to be graphable. When a view object is graphable it is exposed in the graph editor, allowing connections to be made from it.

By default UI Graph supports making UnityEngine.UI.Button and UnityEngine.UI.Toggle components graphable by adding a GraphableButtonComponent or a GraphableToggleComponent to them respectively. Custom components can be written to expose additional view object types to graphing. This is done by creating a GraphableTransitionViewComponent<T>.

For example, the Chirp demo has a ListView component that dynamically instantiates a list of items. Each item in the list can be selected. A GraphableTransitionViewComponent<T> subclass was created for the list view to expose an On Item Selected port in the graph editor. This allows the list view to be configured to perform a transition upon item selection.

The list view exposes an On Item Selected port in the graph editor.

Creation

To make a custom view component graphable, a graphable transition component is created for it. Graphable transition components define triggers, such as "On Click" or "Switch Off". These triggers are exposed to the graph editor. It is the graphable transition component's responsibility to activate its triggers as appropriate. Activating a trigger will cause the associated graph transition to be performed. For example, the GraphableButtonComponent exposes a single trigger, "On Click". When the button is clicked it activates its "On Click" trigger.

To create a graphable transition component, follow the steps below.

Create A GraphableTransitionViewComponent Subclass

Begin by creating a GraphableTransitionViewComponent<T> subclass. Use the class's generic argument to supply the type of your target – the type of the component you wish to make graphable.

public class GraphableButtonComponent : GraphableTransitionViewComponent<UnityEngine.UI.Button>
{
}

Create Triggers

Next, we need to specify the component's triggers. These are the ports that will be exposed in the graph editor. It is recommended to define these in the Reset method, which will be called on creation in the editor only.

public class GraphableButtonComponent : GraphableTransitionViewComponent<UnityEngine.UI.Button>
{
    protected override void Reset()
    {
        base.Reset();

        // Provide a single trigger for when the button is clicked.
        triggers = new GraphableTransitionViewObjectTrigger[]
        {
            new GraphableTransitionViewObjectTrigger("On Click")
        };
    }
}

Bind To Target

Next, we need to implement the BindToTarget method. This method will be called by UI Graph when the view is instantiated from a Graph. In it, you are responsible for binding to the target object and subsequently activating the relevant trigger at the appropriate time.

public class GraphableButtonComponent : GraphableTransitionViewComponent<UnityEngine.UI.Button>
{
    protected override void BindToTarget()
    {
        // Bind port activation to the button's onClick callback.
        target.onClick.AddListener(() =>
        {
            Activate(triggers[0]);
        });
    }

    protected override void Reset()
    {
        base.Reset();

        // Provide a single trigger for when the button is clicked.
        triggers = new GraphableTransitionViewObjectTrigger[]
        {
            new GraphableTransitionViewObjectTrigger("On Click")
        };
    }
}

Add To View

Finally, add the newly created graphable transition component to the relevant game object in your view. It will automatically configure its target and display name.

A Graphable Button Component has been added to the view object.

The component will now be exposed in the graph editor.

The button is exposed to the graph editor.

Example

To illustrate, shown below is the code from the Chirp demo, which exposes an On Item Selected port in the graph editor for the ListView component.

public class GraphableListViewComponent : GraphableTransitionViewComponent<ListView>
{
    protected override void BindToTarget()
    {
        // Bind port activation to the list view's selection callback.
        target.OnListViewSelectedItemAtIndex.AddListener(OnListViewSelectedItemAtIndex);
    }

    protected override void Reset()
    {
        base.Reset();

        // Provide a single trigger for when a list item is selected.
        triggers = new GraphableTransitionViewObjectTrigger[]
        {
            new GraphableTransitionViewObjectTrigger("On Item Selected")
        };
    }

    private void OnListViewSelectedItemAtIndex(ListView listView, ListViewItem listViewItem, int index)
    {
        // Activate the trigger when the list view is selected.
        Activate(triggers[0]);
    }
}