Haxe #haxe-ui

Join Discord

icy-zebra-52882

09/12/2022, 12:38 PM

I'm enjoying filtering dataSources more than I should be https://plzlookat.mystupid.pictures/firefox_YHFFaZom4F.mp4

bright-gpu-74537

09/12/2022, 12:39 PM

heh heh 🙂

icy-zebra-52882

09/12/2022, 12:39 PM

works very well when it's set up though, good power of haxeUI 😎

icy-zebra-52882

09/12/2022, 12:48 PM

is it expected behaviour

@:bind

functions don't trigger when bound in a child component? This is my non-working code:

Copy code

hx
@:build(haxe.ui.macros.ComponentMacros.build("assets/data/ui/characterlist.xml"))
class CharacterList extends TableView
{
    public function new()
    {
        super();
    }

    @:bind(charFilter, UIEvent.CHANGE)
    private function onCharFilterChange(_)
    {
        if (charFilter.text == null || charFilter.text == "")
        {
            dataSource.clearFilter();
        }
        else
        {
            dataSource.filter((k, v) ->
            {
                if (fuzzyFilter.value)
                    return (StringTools.contains(v.charName.toUpperCase(), charFilter.text.toUpperCase()));
                else
                    return (StringTools.startsWith(v.charName.toUpperCase(), charFilter.text.toUpperCase()));
            });
        }
    }
}

@:build(haxe.ui.macros.ComponentMacros.build("assets/data/ui/MainView.xml"))
class MainView extends VBox
{
    public function new()
    {
        super();
    }
}

icy-zebra-52882

09/12/2022, 12:48 PM

but if I move that filter function into

MainView

and add

grid1.

to specify a grid that specifically exists within `mainView`'s XML, it works fine. Essentially I want to be able to use that filter function on any instance of that component

refined-laptop-39041

09/12/2022, 12:48 PM

@bright-gpu-74537 https://github.com/logo4poop/kha-sdf-painter/blob/haxeui-specific/Sources/SDFPainter.hx

refined-laptop-39041

09/12/2022, 12:49 PM

Copy code

haxe
        g2.begin(true, Colors.FOAM);
            g2.color = kha.Color.Blue;
            g2.sdfRect(10, 400, 300, 100, kha.Color.Blue, kha.Color.Blue, kha.Color.Yellow, kha.Color.Yellow, {tr: 20, br: 20, tl: 20, bl: 20}, 10, kha.Color.Green, 2.2);
        g2.end();

refined-laptop-39041

09/12/2022, 12:49 PM

Outputs this

bright-gpu-74537

09/12/2022, 12:50 PM

very cool - will see how nicely that links up...

bright-gpu-74537

09/12/2022, 12:50 PM

i would have expected that to work

bright-gpu-74537

09/12/2022, 12:50 PM

Copy code

haxe
    @:bind(tv6Filter, UIEvent.CHANGE)
    private function ontv6FilterChange(_) {
        if (tv6Filter.text == null || tv6Filter.text == "") {
            tv6.dataSource.clearFilter();
        } else {
            tv6.dataSource.filter(function(index, data) {
                return data.name.toLowerCase().indexOf(tv6Filter.text.toLowerCase()) != -1;
            });
        }
    }

bright-gpu-74537

09/12/2022, 12:50 PM

thats from the component explorer

icy-zebra-52882

09/12/2022, 12:51 PM

yeah that works if I assign it specifically to

grid1.dataSource.[...]

in MainView

icy-zebra-52882

09/12/2022, 12:51 PM

but if I move it to the child component itself (the class for

grid1

), it doesn't trigger

bright-gpu-74537

09/12/2022, 12:53 PM

im not sure what that means

bright-gpu-74537

09/12/2022, 12:53 PM

can you paste a working version

icy-zebra-52882

09/12/2022, 12:54 PM

Copy code

hx
@:build(haxe.ui.macros.ComponentMacros.build("assets/data/ui/characterlist.xml"))
class CharacterList extends TableView
{
    public function new()
    {
        super();
    }
}

@:build(haxe.ui.macros.ComponentMacros.build("assets/data/ui/MainView.xml"))
class MainView extends VBox
{
    public function new()
    {
        super();
    }

    @:bind(grid1.charFilter, UIEvent.CHANGE)
    private function onCharFilterChange(_)
    {
        if (grid1.charFilter.text == null || grid1.charFilter.text == "")
        {
            grid1.dataSource.clearFilter();
        }
        else
        {
            grid1.dataSource.filter((k, v) ->
            {
                if (grid1.fuzzyFilter.value)
                    return (StringTools.contains(v.charName.toUpperCase(), grid1.charFilter.text.toUpperCase()));
                else
                    return (StringTools.startsWith(v.charName.toUpperCase(), grid1.charFilter.text.toUpperCase()));
            });
        }
    }
}

icy-zebra-52882

09/12/2022, 12:54 PM

only difference is it moved into MainView with specifying

grid1

as the instance

bright-gpu-74537

09/12/2022, 12:55 PM

oh right, i see... im in meetings pretty much all of the rest of the day, but ill have a play at some point

bright-gpu-74537

09/12/2022, 12:55 PM

@:bind(grid1.charFilter, UIEvent.CHANGE)

didnt know you could do that! 😄

bright-gpu-74537

09/12/2022, 12:55 PM

(the

grid1.charFilter

bit)

icy-zebra-52882

09/12/2022, 12:56 PM

didn't know you didn't put that in that specifically 😛

bright-gpu-74537

09/12/2022, 12:56 PM

well, i just take whatever is there as an expr, so make sense it would be fine, just never explicitly tried it

bright-gpu-74537

09/12/2022, 1:36 PM

this seems to work for me:

bright-gpu-74537

09/12/2022, 1:36 PM

Copy code

haxe
@:build(haxe.ui.ComponentBuilder.build("assets/my-table-view.xml"))
class MyTableView extends TableView {
    @:bind(tv6Filter, UIEvent.CHANGE)
    private function ontv6FilterChange(_) {
        if (tv6Filter.text == null || tv6Filter.text == "") {
            this.dataSource.clearFilter();
        } else {
            this.dataSource.filter(function(index, data) {
                return data.name.toLowerCase().indexOf(tv6Filter.text.toLowerCase()) != -1;
            });
        }
    }
}

bright-gpu-74537

09/12/2022, 1:36 PM

Copy code

xml
<tableview width="230" height="200">
    <header width="100%">
        <column width="32" id="image" />
        <column width="100%" id="name">
            <vbox width="100%">
                <label text="Language" />
                <textfield id="tv6Filter" placeholder="Filter" width="100%" />
            </vbox>    
        </column>    
        <column id="rating" width="80" height="100%">
            <vbox width="100%">
                <label text="Rating" />
            </vbox>    
        </column>    
    </header>
    <item-renderer>
        <image id="image" verticalAlign="center" horizontalAlign="center" />
    </item-renderer>
    <item-renderer verticalAlign="center">
        <label id="name" width="100%" verticalAlign="center" />
    </item-renderer>
    <item-renderer verticalAlign="center">
        <progress id="rating" width="100%" />
    </item-renderer>
    <data>
        <item name="Haxe" image="icons/logo-haxe.png" rating="100" />
        <item name="Java" image="icons/logo-java.png" rating="33" />
        <item name="Javascript" image="icons/logo-javascript.png" rating="75" />
        <item name="C++" image="icons/logo-cpp.png" rating="63" />
        <item name="PHP" image="icons/logo-php.png" rating="40" />
        <item name="C#" image="icons/logo-cs.png" rating="80" />
        <item name="F#" image="icons/logo-fs.png" rating="11" />
        <item name="OCaml" image="icons/logo-ocaml.png" rating="39" />
        <item name="Assembler" image="icons/logo-asm.png" rating="81" />
    </data>
</tableview>

bright-gpu-74537

09/12/2022, 1:37 PM

Copy code

xml
<vbox style="padding: 5px;">
    <my-table-view />
</vbox>

refined-laptop-39041

09/12/2022, 1:38 PM

@bright-gpu-74537 https://github.com/tizilogic/kha-sdf-painter/commit/9515a81ea3b0c8a59cc028d98518c1a5a1683bcc It has been merged into kha-sdf-painter

bright-gpu-74537

09/12/2022, 1:38 PM

noice

icy-zebra-52882

09/12/2022, 8:50 PM

is there a way to change the built-in sort behaviour for tableview columns? It seems to sort values as though they were strings, and I have an ID column that I'd like to sort as numbers