How do I connect a button click to my code?

1

So, one step past hello-world here: how do I connect a button click to actual code?

I’ve got the usual:

package ;

import haxe.ui.HaxeUIApp;
import haxe.ui.core.Component;
import haxe.ui.macros.ComponentMacros;

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

and my assets/main.xml is:

<vbox style="padding: 5px;" width="100%" height="100%">
    <button id="button1" text="Hello" />
    <button id="button2" text="Hey" />
</vbox>
2

Sorry, in case that was unclear: I’d like to have a function in my Main.hx (or another file?) run when button1 is clicked. Maybe something like a method in Main (?) that does:

public static function on_button1_click() {
    trace("you clicked button 1!");
}

What’s the customary way to do this in HaxeUI?

Thanks!

3

Theres a few different ways, depending on how you are using haxeui. The way you are using it above your only real option is:

var button = main.findComponent("button1", Button);
button.onClick = function(e) { ... };
button.registerEvent(MouseEvent.CLICK, function(e) { ... });

However, if you were using custom components and build macros things get much better:

@:build(haxe.ui.macros.ComponentMacros.build("assets/main.xml"))
class MainView extends Component {
    @:bind(button1, MouseEvent.CLICK)
    function onButton1(e) {
        button2.text = "clicked"; // note: all named components are now correctly typed member vars
    }
}

using this class in Main.hx you just remove the var main:Component = ComponentMacros.buildComponent("assets/main.xml"); and replace with var main = new MainView();

Hope that helps

Cheers,
Ian

1 Like
4

Cool. Ok, I see that MouseEvent is now haxe.ui.events.MouseEvent, even though the API docs show it in haxe.ui.core: http://haxeui.github.io/haxeui-api/haxe/ui/core/MouseEvent.html.

Looks like I can use either button.onClick =... or button.registerEvent(...). They both work for me.

I’d like to keep my GUI bog standard. I don’t plan on making any new widgets, or even changing from the default native styling. Would I still need to use custom components to write my app?

At what point would one find the need to start using custom components? That is, what is the situation that arises that causes one to decide they now need to use a custom component?

5

Sorry yeah, i should have specified, onClick and registerEvent basically do the same thing, onClick is a shortcut for registerEvent - the one difference is you can add many events with registerEvent but onClick will just overwrite an existing handler.

As for custom components, you dont ever need to use them, and maybe custom components isnt the right name. They can basically help in many ways as you have seen above, you can remove ALOT of the boiler plate just by wrapping up your main app in a “custom component” called “MainView”, even with this, single use, custom component you can get all the “niceties” of a standard custom component, namely the fact that components with an id in the xml will now become correctly type member vars and the binding metadata (which makes binding simpler).

Again, in the case of MainView, its more of a “custom view”, but its also a custom component so the name is what it is :slight_smile:

Cheers,
Ian

PS: but to answer you question, you absolutely dont need to use any of this stuff at all - you dont even need to use xml if you dont want to. They are there to help you not to force itself on you :slight_smile:

1 Like
6

Oh, using the xml file is much nicer than typing in every widget and adding it to its parent!

I’m going to steer clear of custom components for the moment. I don’t mind the boilerplate, as it helps me understand how things connect together. While I learn I’ve started writing a little HaxeUI tutorial — not yet fit for linking to from anywhere. It’s at http://www.unexpected-vortices.com/haxe/haxeui-tut/index.html. Please let me know what you think.

1 Like
7

I think its great… and a sorely missing piece of haxeui docs! Let me know when you are ready to link it somewhere and ill happily share also… its a very useful “getting started” guide.

Cheers,
Ian

1 Like