After we learned some basics in the last examples we try something more advanced in this example: Data Bindings. A data-binding allows us to display or even change background-data like game-settings, characters from the database, etc. Because bindings are more complex topic, please check the In-Game UI API Reference and the already existing layouts and templates to learn more about bindings.

 

The good thing is that if you just want to change the design of the In-Game UI without changing the logic you don't need to understand bindings completely in most cases. A good understanding of bindings is only necessary if you want to develop something new.

 

But lets take a look at the following example:

 

ui.UIManager.layouts.titleLayout = {

  "type": "ui.FreeLayout",

  "frame": [0, 0, Graphics.width, Graphics.height],

  "controls": [

      {

          "type": "ui.Text",

          "sizeToFit": true,

          "bindings": [{ "sourceField": "$dataFields.database.characters[0].name", "targetField": "o.text" }]

          "alignmentX": "center",

          "alignmentY": "center"

      }

  ]

}

 

If we test-play our game with that title-layout, we will see a black-screen with the name of the first character centered on the screen. That is because we bound the name-property of the first character to the text-property of our text-control.

With the bindings property we can add multiple bindings to a control. Lets take a look of the properties of a binding:

 

Here we define the source-field we want to write into the target-field. In our case we defined the following source-field using binding-syntax:

 

"$dataFields.database.characters[0].name"

 

With $dataFields we are accessing the current defined data-source for the layout. In most cases that is the default-datasource defined in "DataSource_Default" script. But we will check that later. With "database" we are accessing the database and with "characters" we are accessing the characters-collection. With "[<index>]" we say which character we want to access. In our case it is "0" so we want to access the first character's name using "name" next.

 

Here we define the target-field. The value from source-field will be written into this field. We defined "o.text" as target-field. With "o" we say that we want to access the current object the binding-expression is executed on which is the text-control in our case and with "text" we say we want to write into the text property. That's why the characters's name appears on screen.

 

Internally, binding-expressions are just JavaScript formulas. But you shouldn't abuse binding-expression to execute more complex JavaScript code. If the current possibilities are not powerful enough for you, you should just use Formulas or write an own component for that like we will learn in the next example.