Wiki

Clone wiki

Data Bind / Tutorial

Tutorial

1. Setup the data context

The first step to work with the data binding module would be to introduce a new context which holds the data that should be shown/manipulated in the view:

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

    public class DataBindTestContext : 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 DataBindTestContext()
        {
            this.Text = "Data Bind for Unity";
        }

        #endregion

        #region Properties

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

        #endregion
    }
}

As you can see there's nothing special about this class, just a storage, using the generic properties of the Data Bind module to encapsulate the data.

In a real game the data would be filled from your logic system and updated when it changes there. For example in our own logic framework (http://framework.slashgames.org) we use events to tell other systems when some important data changed.

2. Setup your UI

From now on you only work in your scene and can setup how the data your context provides is used. First we have to connect the data context to the UI via a ContextHolder:

11763766.png

For fun I added a little popup which finds all context classes, so the data context is instantiated when the ContextHolder awakes. 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.

You could also set the data context manually e.g. from another mono behaviour.

3. Use your data

This is all the setup work there is to do. We can now start and use the data properties that we defined in the context. Let's add a Text (Unity UI) respectively a UILabel (NGUI) and use the TextTextSetter (Unity UI)/LabelTextSetter (NGUI) behaviour to bind its text to the Text property from the data context:

12058625.png

11763767.png

Two steps are necessary for this:

  • First we choose where the TextTextSetter/LabelTextSetter gets the data from (a Context in this case) and tell it the path where it finds the data (at the path "Text").
    • If you specified the context type at your ContextHolder (see above), the available properties/fields will be shown in the path drop down. So you don't have to enter the path manually.
  • Second we tell which Text/UILabel should visualize the data. We just drag the Text/UILabel mono behaviour onto the reference field Target.
    • When you create the setter, the script automatically initializes the Target with the Text/UILabel behaviour of the game object if available.

This automatically updates the text of the control every time the data changes.

Updated