With components you can add specific kind of logic to a control. You can add already existing components or write your own. If you are familiar with Entity-Component Systems you probably already know what components are.

Lets take a look at the following example:

{

    "type": "ui.StackLayout",

    "components": [{ "id": "numberInput", "type": "Component_NumberInput", "params": { "digits": ($ -> $tempFields.digits) } }],

    "sizeToFit": true,

    "id": "numberField",

    "zIndex": 10,

    "alignmentX": "center",

    "frame": [12, 50],

    "dataField": $ -> $tempFields.digits

    "template": {

        "type": "ui.FreeLayout",

        "margin": [5, 5, 5, 5],

        "sizeToFit": true,

        "controls": [

            {

                "type": "ui.Image",

                "image": "entrybox"

            },

            {

                "type": "ui.Text",

                "frame": [0, 0],

                "sizeToFit": true,

                "alignmentX": "center",

                "alignmentY": "center",

                "style": "numberInputEntryText",

                "text": "0"

            }

        ]

    }

}

That example defines a text-control with the text "New Game" and also assigned an action to it. But the problem is that a text-control doesn't support on-click actions by default. We need to add this kind of behavior first using the components-property. With that property we can add multiple components to our control. In our example we only add one component of type "Component_HotspotBehavior". With that component, our text-control supports on-click actions now and will start a new game if we click on it.

If we take a look at "Components" folder in Script-Editor we will see that there is a component-class called gs.Component_HotspotBehavior. That is no accident, the type property we used refers to the class-name of the component we like to add. The component needs to be part of gs-module by default or you can specify another module using module-property. To add your own custom component, just use its class name and define in as part of gs-module or specify your own module (which is recommended).

Writing your own component

In the last example we saw how to add an existing component to allow a text-control executing on-click actions. In this example, we will write our own custom component to add some new behavior to a control.

class Component_MyCustomBehavior extends gs.Component

    constructor: (params) ->

        # Create your component from optional params-object.

    setup: ->

# Setup your component, the object-reference has been set to the control-object.

    update: ->

# Implement your update code if necessary.

    action_method1: (sender, params) ->

        # Implement action logic here

gs.Component_MyCustomBehavior = Component_MyCustomBehavior

You can see the above example as a template for your own custom components. To use our own component now, we just write:

"components": [{ "id": "custom_component", "type": "Component_MyCustomBehavior", "params": { "param1": "Hello" } }]

The id-property is optional but allows you to specify your component as an action-target to call actions on your component like described in Example 6. The params-property is optional too and allows you to pass parameters to the component's constructor.

If you want to see a more advanced example, take a look at gs.Component_NumberInput component for example.