https://linen.dev logo
Powered by
# haxe-ui
  • b
    anyways, not going to implement it now, but its on a list
  • c
    I 'll gather some use cases if needed. To bed now!
  • b
    night 🙂
  • i
    In the haxeui-core template HelloWorld code, the app creates a layout from 
    main-view.xml
    but doesn't actually have any interaction with components in the source - all the interaction is in the form of 
    onclick='some code here'
    on the buttons in the XML
  • i
    I didn't know that to have code that interacts with it, I have to have the class calling it extend the root node of the XML layout (i.e. 
    class MyClass extends Box|VBox|HBox
    )
  • i
    that's shown in the example in the pins here, but not in the actual haxeui.org Getting Started sections (unless I'm being blind)
  • b
    right, gotcha... yeah, i get what you mean, i keep thinking to change the template of 
    haxeui create {backend}
    to create a custom view (MainView.hx) and use the xml there
  • b
    its a better way to use it, and, for me personally, it means when im writing tests etc i dont have to delete whats already there
  • b
    the original intention was to keep things simple, but i wonder if there is any real use to the initial template, as i mentioned, personally, when i create a new project my first step is to remove everything that the template created and replace it with a "new MainView()" so i get all the binding niceness ready to go
  • i
    in my case the original template .hx code stayed the same aside from moving the build declaration to 
    @:build
    in the new class I made, and changing (if i remember) 
    var mainView:Component = new MainView()
    to 
    var myClass:Component =  new MyClass()
  • i
    and then my class worked fine
  • i
    the original code made sense only when I looked at the example from the pins to see what was going on
  • b
    yeah, thats basically the same steps i go though
  • b
    im changing the default template now while i think about it
  • i
    wasn't sure whether I had to replace the 
    new HaxeUIApp
    or the 
    MainView
    or how to do it
  • b
    yeah, understood... the idea was to be like "see you dont need code!", but in reality you defo want code in some form or another so really the default template is just asking for trouble
  • b
    ie, you could write a full app in a single xml file... cool? Yeah. Useful? Probably not.
  • i
    possibly you could have an example of both in the example XML, one that has 
    onclick
    code and another that's reference by the .hx source
  • b
    very good point
  • i
    most of my learning has pretty much been look at stuff already made and work out basics from there lol, so it fits that at least
  • b
    yeah, it makes total sense... ill load up the main xml in a custom view, with a bound button, but also have another button in there that is scripted
  • i
    Copy code
    // Build your layout
@:build(haxe.ui.macros.ComponentMacros.build("assets/generator.xml"))
// Class extends the root node of your layout
class Generator extends VBox {
    public function new() {
        super();
        testLabel.show();

        // Set testButton's onClick code
        testButton.onClick = function(e) {
            testLabel.hidden ? testLabel.show() : testLabel.hide();
        }
    }
    my current example .hx class, if it helps, with the following XML:
    Copy code
    <vbox width="100%" height="100%">
    <vbox id="appBox" width="auto" horizontalAlign="center">
        <button id="testButton" style="font-weight: bold" text="Click me!" />
        <label id="testLabel" style="color: red;" text="Hello world!" />
    </vbox>
</vbox>
  • b
    ok, so this is the new template:
  • b
    Main.hx:
  • b
    Copy code
    haxe
package ;

import haxe.ui.HaxeUIApp;

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

            app.start();
        });
    }
}
  • b
    MainView.hx:
  • b
    Copy code
    haxe
package ;

import haxe.ui.containers.VBox;
import haxe.ui.events.MouseEvent;

@:build(haxe.ui.macros.ComponentMacros.build("assets/main-view.xml"))
class MainView extends VBox {
    public function new() {
        super();
    }
    
    @:bind(myButton, MouseEvent.CLICK)
    private function onMyButton(e:MouseEvent) {
        myButton.text = "Thanks!";
    }
}
  • b
    main-view.xml:
  • b
    Copy code
    xml
<vbox style="padding: 5px;">
    <style>
        .button {
            font-size: 24px;
        }
    </style>
    <hbox>
        <button text="Click Me!" id="myButton" />
        <button text="Click Me Too!" onclick="this.text='Thanks!'" />
    </hbox>    
</vbox>
  • b
    thoughts?
1...586587588...1687Latest