Mapping typedef's to visuals

I am wondering about auto mapping typedef’s to components, setting up rules per type so I can navigate through a typedef structure and automatically display and edit, but also allow up down arrows on Integer, mark optionals, allow going into child structures etc…
So taking an example if you get all the products by pages you have

Products
_____ Array
______________ Array, Array, Array

Similar for stuff like Orders, Customers etc…

Now I may want to copy it from one List ( Shop ) to another, edit values etc… by dragging, but for lots of these typedef’s, I don’t want to specify them I want to pass it to a component that creates suitable structures based on the typedef or class. Probably end up doing it just for product more manually.
I know from previous experiance when I was on touchscreens that these complex typedef-ish structures are pretty common with cms so the problem is not specific to my use case.
I just wondered if you had thought about these approaches and if you had any progress.
My primary focus is Kha Electron NodeJS, how is Kha target going? KhaTextBox I tried out is really slow and heavy? My SimpleText might be faster but does not have scroll bar, have started looking at zui but not yet scroll textfield, but it’s rather restrictive despite being smart.

If im understanding correctly, i think something like this should be possible with itemrenderers - whether the system already in place is good enough is a different question (ie, nested typedefs) but i think that the app (ie, your app) could fairly easily implement something like it. Ill have to have a think… a solid example (with code) might be helpful. Ie, some fake static data (nested) and exactly what you would, ideally, want the UI to do / look like - that would be helpful.

haxeui-kha is going fine… :slight_smile:

When you say KhaTextBox do you mean this: https://github.com/tienery/KhaTextBox ?

I moved away from that as Lukes direction was very different from mine - which is fine, its his project - instead i wrote my own version (https://github.com/haxeui/haxeui-kha/blob/master/haxe/ui/backend/kha/TextField.hx). It inside haxeui[-kha] but it should actually have any dependencies, copy and paste in your project should work (though i havent tried that in a while, so a dependency may have sneaked in!)

Cheers,
Ian

Hi Ian, so I have a similar situation and just wanted to see how one would use the Itemrenderers with predefined class/typedefs and if it would be possible. Just having the general workflow of it could be of great use.

Here is an example ui and here you have the zip of the class I would use to populate the data of the ui( I have the XML data that will be parsed by the application for reference)

Ill take a look a little later - im a little snowed under at the moment :confused:

Do you have any code that loads that xml file into that class / typedef? Might save some time if i dont have to write the load code.

Yeah, I don’t expect you to do it and it’s what I started doing now. I created a new version of the class which has defined typedef with all it’s fields populated for your use. Here is the link to the populated class. When I have finished the loader I could share it if you want but just for now the prepopulated typedef should probably serve the purpose, unless you find otherwise.

Nice one, ill check it out. Im not 100% sure about how things will respond to nested objects, but i also feel like i hit this issue years ago and came up with something… … ill have a play.

Cheers,
Ian

Ok, so nested objects werent working, but they should now, this is the test i was using:

typedef SomeItem = {
    var name:String;
    var completed:Bool;
    var age:Int;
    var sub:SubObject;
}

typedef SubObject = {
    var something:String;
    var somethingElse:Int;
}

Then:

            var ds = new ListDataSource<SomeItem>();
            var lv1 = main.findComponent("lv1", ListView);
            for (i in 0...10) {
                var item1:SomeItem = {
                    name: "Name " + i,
                    completed: i % 2 == 0,
                    age: 100 + i,
                    sub: {
                        something: "Something " + i,
                        somethingElse: 200 + i
                    }
                }
                ds.add(item1);
            }
            lv1.dataSource = ds;

And finally, this is my item renderer:

    <listview id="lv1" width="400" height="200">
        <item-renderer layoutName="horizontal" width="100%">
            <checkbox id="completed" />
            <label id="name" width="100%" />
            <label id="something" />
        </item-renderer>
    </listview>

image

Any thoughts on this? Also, im not sure what the best way would be to handle arrays in the data… Say you had “someArray” somewhere in the typedefs… how would that map to the UI? Im not sure myself so open to suggestions :slight_smile:

Cheers,
Ian

PS: you’ll need to pull latest master for the current changes

1 Like

Or actually, have i misunderstood completely? Are you looking to display details for one epetition from that xml dump?

Maybe this will help a little?

var data:EPetition.EPetitionData = {
    name: "Petition 1",
    image: "haxeui-core/styles/default/haxeui.png",
    action: "Some Action",
    additionalData: {
        description: "This is the description of petition 1"
    }
}
var item = new EPetition(data);
main.addComponent(item);

main.addComponent(new EPetition({
    name: "Petition 2",
    image: "haxeui-core/styles/default/haxeui.png",
    action: "Some Other Action",
    additionalData: {
        description: "This is the description of petition 2"
    }
}));
import haxe.ui.core.ItemRenderer;
import haxe.ui.events.MouseEvent;

typedef EPetitionData = {
    var name:String;
    var image:String;
    var action:String;
    var additionalData:EPetitionAdditionalData;
}

typedef EPetitionAdditionalData = {
    var description:String;
}

@:build(haxe.ui.macros.ComponentMacros.build("assets/epetition.xml"))
class EPetition extends ItemRenderer {
    public function new(data:EPetitionData = null) {
        super();
        this.data = data;
    }
    
    @:bind(action, MouseEvent.CLICK)
    function onAction(e) {
        trace("action clicked");
    }
}
<?xml version="1.0" encoding="utf-8" ?>
<vbox width="300">
    <hbox>
        <image id="image" />
        
        <vbox>
            <label id="name" style="font-size:20px;" />
            <label id="description" />
            <button id="action" horizontalAlign="right" />
        </vbox>
    </hbox>
</vbox>

image

1 Like

Yes this is a great example of what can be done; Thanks a lot for this and thanks for making nested typedefs possible :slight_smile:.

1 Like