Error when follow example: rexUI: Checkboxes/radio

[chaunguyen125]

I have done example follow your code at https://codepen.io/rexrainbow/pen/PowMEjX but it gave me an error at :
var buttons = this.rexUI.add.buttons({
x: 400, y: 300,

        orientation: 'y',

        background: this.rexUI.add.roundRectangle(0, 0, 0, 0, 0, this.COLOR_PRIMARY),
        buttons: [
            this.createButton(this, 'A'),
            this.createButton(this, 'B'),
            this.createButton(this, 'C'),
            this.createButton(this, 'D')
        ],

        type: ((CheckboxesMode) ? 'checkboxes' : 'radio'),
        setValueCallback: function (button, value) {
            const COLOR_LIGHT = 0x7b5e57;
            button.getElement('icon')
                .setFillStyle((value)? COLOR_LIGHT : undefined);
        }

    })

"Property 'getElement' does not exist on type 'GameObject'.ts(2339)".

and:

var dumpButtonStates = function () {
if (CheckboxesMode) { // checkboxes
var s = '';
buttons.data.each(function (buttons, key, value) {
s += ${key}:${value}\n
})
print.setText(s);
} else { // radio
print.setText(buttons.value);
}

    }

"Argument of type 'unknown' is not assignable to parameter of type 'string | string[]'.ts(2345)
(property) Buttons.value: unknown".

Please help me!

[Rex]

The return type of getElement method is Phaser.GameObject.GameObject , i.e. the base class of all game object provided by phaser engine. You can change type to the correct class like

let icon = button.getElement('icon') as ShapeClass;
icon.setFillStyle(...);

Replace ShapeClass to the actually class of return game object.

[chaunguyen125]

I think it is not a sulotion 'cause the error was given at button.getElement('icon'). That's mean type of 'button' does not have property 'getElement'.

[Rex]

As you see, there has no error in that demo when invoking button.getElement('icon').setFillStyle(...).
getElement is a method of all sizer classes, include Label (created by line72 in that demo). Make sure that the return value is a kind of sizer.
You can return normal game object to build button element, it will pass as button parameter for setValueCallback callback.

[chaunguyen125]

setValueCallback: function (button, value) {
                const COLOR_LIGHT = 0x7b5e57;
                button.getElement('icon')
                    .setFillStyle((value)? COLOR_LIGHT : undefined);
 }

setValueCallback callback's type is a function that require first parametre's type is GameObjects.GameObject, so button's type is auto defined. And the error says Property 'getElement' does not exist on type 'GameObject'.ts(2339). Please help me !!!

[Rex]

setValueCallback: function (button, value) {
                const COLOR_LIGHT = 0x7b5e57;
                button.getElement('icon')
                    .setFillStyle((value)? COLOR_LIGHT : undefined);
 }

setValueCallback callback's type is a function that require first parametre's type is GameObjects.GameObject, so button's type is auto defined. And the error says Property 'getElement' does not exist on type 'GameObject'.ts(2339). Please help me !!!

Issue of game object (button) 's type define was answered at previous post

[chaunguyen125]

I try but (button)'s type is defined automatically as GameObject so I can not call button.getElement('icon') so it gave me an error at let icon = button.getElement('icon') as ShapeClass;. Sorry I forgot to tell you that I use TS.

[Rex]

That post is for TS. If you don't know the type of icon, try let icon = button.getElement('icon') as any

[chaunguyen125]

The error was given at button.getElement, so that I can not declare icon :(((

[Rex]

{
    setValueCallback: function (button:any, value:any) { ... }
}

Might assign type of button to any.

[chaunguyen125]

Yeah it work. Can you help me fix the second problem, please?

[Rex]

The code in that demo is changed, see line 51 : var states = buttons.getAllButtonsState()

[chaunguyen125]

Oh thank you but error at print.setText(buttons.value);. I see that type of value in Button class is defined unknown. Can I change to string???

[Rex]

Yes, you can. print.setText(buttons.value as string)

[chaunguyen125]

Oh thank you!!!