With formulas you are getting a lot more control about data compared to regular data-bindings. Basically, formulas are just anonymous functions defined for a control and executed under specific conditions. Let's take a look at Layout_CGGalleryEntry:

 

{

    "type": "ui.FreeLayout",

    "orientation": "vertical",

    "preload": {

        "graphics": [

            { "path": ($ -> [$tempFields.selectedImage]), "image": ($ -> o)},

            { "path": ["locked"], "image": ($ -> o)}

        ]

    },

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

    "controls": [

        {

            "type": "ui.Image",

            "frame": [0, 0],

            "formulas": [$ -> o.image = $tempFields.selectedImage],

            "action": { "name": "executeFormulas", "params": [$ -> $backButton.visible = !$backButton.visible] }

        },

        {

            "type": "ui.Button",

            "id": "backButton",

            "params": { "text": { "lcId": "B0FD4BF121D9E44E7589CDD35869F86F2227", "defaultText": "Back" }, "action": { "name": "previousLayout" } },

            "frame": [Graphics.width - 170, Graphics.height - 65, 150, 45],

            "order": 1

        }

    ]

}

 

As we can see, formulas are defined using the formulas-property, which is an array taking multiple formulas an executes then synchronously one after another. In this example, the formula set the object's image property to $tempFields.selectedImage which contains the name of the image selected in CGGallery to display it full-size. While this case could also be solved with a regular data bindings, more complex cases cannot. Also, formulas a faster then regular data bindings.

 

A formula is defined using the $ symbol which is actually nothing more than a shortcut for:

 

new ui.Formula( <function> )

 

However, its recommended using the $-function which is defines as:

 

window.$ = (f, data, event) -> new ui.Formula(f, data || null, event || null)

 

While f-parameter is the function executed, the other two parameters are optional. Check out the In Game UI API Reference for more information. You will also see that formulas can used in other places than the formulas-property.

 

However, one question now is why data-bindings still exist if formulas are more powerful and faster? Well, data bindings are easier to understand for a beginner and there are cases which cannot be solved in a comfortable way using formulas. One example is the basic-animation "changeTo" we have used in the animations example. It takes a binding-expression instead of a formula and the animation is able to read and write to that field(check out ui.Component_BindingHandler). If we specify a formula here, it would be necessary to define two formulas: One for reading the value, one for writing the value. With a data-binding, we can just specify a field-name and done, which makes it more easy to use especially for beginners.