Hello-world: make a Button update a Label

1

I’d like to be able to click a button and have it update the number displayed in a label.

I have assets/main.xml:

<vbox style="padding: 5px;" width="100%" height="100%">
    <button id="button1" text="Click Me!" />
    <label id="label1" text="0" style="font-size: 30px; color: green;" />
</vbox>

My src/Main.hx is the stock

class Main {
    public static function main() {
        var app = new HaxeUIApp();
        app.ready(function() {
            var main:Component = ComponentMacros.buildComponent("assets/main.xml");
            app.addComponent(main);

            var button1 = main.findComponent("button1", Button);
            button1.onClick = handleButton1;
            
            var label1 = main.findComponent("label1", Label);
            label1.text = ... XXX

            app.start();
        });
    }

    public static function handleButton1(e) {
        trace("button1 clicked!");
        var label1 = main.findComponent("label1", Label);
        // wait, that won't work; I don't have `main` available here... XXX
    }
}

So my questions are:

  1. Where can I save the int value that will be displayed in my label1? A static variable in class Main?
  2. Should all of my widgets be static variables in class Main?
  3. I’m sounding like a broken record. :slight_smile: Where should I store main (the Component) so I can access it from handleButton1?

Note, I’m not looking to use any fancy custom components at this time. :slight_smile:

Thanks!

2

Well, this is kinda exactly what custom components are for. But in your example, yeah, you would have to make the int a static class member, as well as either main, or the result of findComponent("label1")

Im not sure this is a haxeui limitation rather than just OOP type code in general. That said, im open to idea about improvements, but as i mentioned this is exactly the type of thing that custom components aims to improve.

In a perfect world, how would you like to see it work, i cant really think of anything (realistic) that stops those issues (ie, having access to vars, etc) without macros / custom components - but maybe im too “into” custom components! :smiley:

Cheers,
Ian

3

The reason I’m avoiding custom components is that I’d like to be able to use HaxeUI as easily as something like PyGObject. Create some objects, connect some signals/events to handlers/callbacks, and boom, you’ve got your app.

In a perfect world, how would you like to see it work,

Sorry, I’m not experienced enough with GUIs to make a suggestion here. I don’t mind the static vars right now though. :slight_smile:

I just tried:

package ;

import haxe.ui.HaxeUIApp;
import haxe.ui.core.Component;
import haxe.ui.macros.ComponentMacros;
import haxe.ui.components.Button;
import haxe.ui.components.Label;

class Main {
    static var mainGUI:Component = ComponentMacros.buildComponent("assets/main.xml");
    static var button1 = mainGUI.findComponent("button1", Button);
    static var label1  = mainGUI.findComponent("label1", Label);

    public static function main() {
        var app = new HaxeUIApp();
        app.ready(function() {
            app.addComponent(mainGUI);

            button1.onClick = handleButton1;

            app.start();
        });
    }

    public static function handleButton1(e) {
        trace("button1 clicked!");
        label1.text = "todo";
    }
}

and it builds, but segfaults with:

$ ./build/hxwidgets/Main 
../src/common/platinfo.cpp(183): assert ""Assert failure"" failed in InitForCurrentPlatform(): failed to initialize wxPlatformInfo
Segmentation fault
4

wxWidgets needs to be initialised and running, and that is only after .ready returns

1 Like
5

Thank you! This works:

package ;

import haxe.ui.HaxeUIApp;
import haxe.ui.core.Component;
import haxe.ui.macros.ComponentMacros;
import haxe.ui.components.Button;
import haxe.ui.components.Label;

class Main {
    static var mainGUI:Component;
    static var button1:Button;
    static var label1:Label;

    public static function main() {
        var app = new HaxeUIApp();
        app.ready(function() {
            mainGUI = ComponentMacros.buildComponent("assets/main.xml");
            app.addComponent(mainGUI);

            button1 = mainGUI.findComponent("button1", Button);
            label1  = mainGUI.findComponent("label1",  Label);

            button1.onClick = handleButton1;

            app.start();
        });
    }

    public static function handleButton1(e) {
        trace("button1 clicked!");
        label1.text = "todo";
    }
}
1 Like
6

I put the notes on this here:

http://www.unexpected-vortices.com/haxe/haxeui-tut/comm-betw-widgets.html

Only problem is, when the app starts, it initially doesn’t show the entire green 0. But it refreshes and displays the whole 1 after one click.

7

That sounds like a bug of some description, certainly should start with a 0… Ill check it out tomorrow. Ill also have a think about how it would be possible to simplify all that for “small application”, but it will likely just be sugar as generally, it’ll get pretty messy and out of hand (in any application) to have a load of static vars, etc.

8

Seems to be caused by the “font-size: 30px;” in the assets/main.xml. If I remove that, the text shows up correctly right when the app is started.

9

OK, nice one ill have a look.