LabelSetter

This example shows the most basic setup when using Data Bind. It visualizes a string property by a text field in Unity UI respectively a label field in NGUI.

Setting up the data context

One way to start when a new feature should be visualized is to think about which data has to be displayed to the user. This data has to be made available by the data context.

In our simple example it's just the (static) text that should be displayed:

#!c#

// --------------------------------------------------------------------------------------------------------------------
// <copyright file="LabelSetterContext.cs" company="Slash Games">
//   Copyright (c) Slash Games. All rights reserved.
// </copyright>
// --------------------------------------------------------------------------------------------------------------------
namespace Slash.Unity.DataBind.Examples.LabelSetter
{
    using Slash.Unity.DataBind.Core.Data;

    public class LabelSetterContext : Context
    {
        #region Fields

        /// <summary>
        ///   Data binding property, used to get informed when a data change happened.
        /// </summary>
        private readonly Property<string> textProperty = new Property<string>();

        #endregion

        #region Constructors and Destructors

        public LabelSetterContext()
        {
            this.Text = "Data Bind for Unity";
        }

        #endregion

        #region Properties

        public string Text
        {
            get
            {
                return this.textProperty.Value;
            }
            set
            {
                this.textProperty.Value = value;
            }
        }

        #endregion
    }
}

Setting up the visual side

Now that the data is in place we can set up the UI which should display the data. In the example we just created a scene with one single label under the UI Root/Canvas. You can make the UI as fancy as you like though.

Doing the connection

Data and UI are in place, time to connect the two. This is where Data Bind for Unity comes into play. 

Connecting UI and Context

First we have to connect the context and the UI. Therefore we add a ContextHolder component to the UI Root/Canvas:

On this component we can use the drop down field "Context" to set the context which should be instantiated and used.

Make sure the toggle Create context? is checked, so a context of the specified type is created on startup. Otherwise the type just serves as a hint e.g. for the path drop down controls.

Specifying which controls visualize which data

The general connection is made, now we have to specify which controls get which data. In our simple example it's the label/text which should visualize the Text property from our data context.

So we add the LabelTextSetter/TextTextSetter to the label:

On this component we have to set two properties: The path where the data can be found (in our example "Text") and the target which should visualize the data (the label/text we added the setter to). If the target won't be set, the component would check if its game object has a label/text (as it has in our case) and use that one. 

The Target will be initialized with the Text/UILabel mono behaviour on the game object if available. Furthermore, if you set the context type on the ContextHolder (see above), the Path drop down will contain all available paths. So you can just choose from them instead of typing in a custom path.

Done!

And that's it already! If you start the scene, the setter will do its work, searching for the data in the context and setting it on the label/text. 

Let's consider what we had to do to get our data visualized in a clean and separated way:

• Code: Setting up a custom data context which contains the data properties which should be available to the UI
• Scene: Connecting data and UI by putting and setting up some components which are delivered by Data Bind for Unity on the right game objects.