Sidebar component support missing

[anissen]

Trying to use the Kenney theme with a UI schema file that includes a <sidebar>-component results in the following error on the Kha backend:

Error: Uncaught TypeError: Cannot read property 'get_keyFrames' of null
Kha/Backends/HTML5/kha/SystemImpl.hx:61
Stack:
TypeError: Cannot read property 'get_keyFrames' of null
    at haxe_ui_containers_SideBar.show (file:///(...)/build/debug-html5/kha.js:22056:25)
    at file:///(...)/build/debug-html5/kha.js:22045:12
    at kha_TimeTask.task (file:///(...)/build/debug-html5/kha.js:34573:3)
    at Function.kha_Scheduler.executeTimeTasks (file:///(...)/build/debug-html5/kha.js:34459:75)
    at Function.kha_Scheduler.executeFrame (file:///(...)/build/debug-html5/kha.js:34409:17)
    at animate (file:///(...)/build/debug-html5/kha.js:35528:17)

If I remove the <sidebar>-component it works just fine...

[anissen]

The <splitter>-component isn't rendered but doesn't cause any errors.

[ianharrigan]

Nice catch - ill check it out - thanks!

[ianharrigan]

OK, this should be fixed now in latest kenney theme (git version).

Can you close this if that works.

Cheers,
Ian

[anissen]

Fantastic, thanks a lot for the quick fix! 👍🏻

However, there seems to be a difference in how the different themes handles the sidebar.

Dark theme:

Screen.Recording.2021-10-25.at.21.06.38.mov

Kenney theme:

Screen.Recording.2021-10-25.at.21.07.18.mov

[ianharrigan]

hmmm, that seems a little strange, it looks like its running it in reverse or something? There shouldnt be any difference what-so-ever between the two... are you sure thats the only difference in those recordings?

[anissen]

Yeah, the only difference is changing haxe.ui.Toolkit.theme from dark to kenney. I'll do some more digging when time allows.

By the way, here's the ui.xml-file I'm using:

<sidebar width="100%" height="500" position="top" method="float" modal="true" hidden="false">
    <vbox width="100%">
        <splitter width="100%" height="500">
            <frame text="Code" width="100%" height="100%">
                <vbox width="100%" height="100%">
                    <textarea id="script" width="100%" height="100%" text="I am a text area 1" style="font-size: 16px; font-name: 'BrassMono';" />
                    <button width="100%" text="Reload" />
                </vbox>
            </frame>
            <frame text="Issues" width="100%" height="100%">
                <listview width="100%" height="100%">
                    <item-renderer width="100%" layoutName="horizontal">
                        <image resource="haxeui-core/styles/default/haxeui_small.png" verticalAlign="center" />
                        <vbox width="100%">
                            <label id="text" width="100%" style="font-bold: true;font-underline:true;" />
                            <label id="subText" width="100%" style="color: #888888;font-size:12px;" />
                        </vbox>
                        <button id="action" verticalAlign="center" />
                    </item-renderer>
                    <data>
                        <item text="Item 1" subText="Sub text for item 1" action="Action 1" />
                        <item text="Item 2" subText="Sub text for item 2" action="Action 2" />
                        <item text="Item 3" subText="Sub text for item 3" action="Action 3" />
                        <item text="Item 4" subText="Sub text for item 4" action="Action 4" />
                        <item text="Item 5" subText="Sub text for item 5" action="Action 5" />
                        <item text="Item 6" subText="Sub text for item 6" action="Action 6" />
                        <item text="Item 7" subText="Sub text for item 7" action="Action 7" />
                        <item text="Item 8" subText="Sub text for item 8" action="Action 8" />
                        <item text="Item 9" subText="Sub text for item 9" action="Action 9" />
                    </data>
                </listview>
            </frame>
        </splitter>
    </vbox>
</sidebar>

[anissen]

I found the issue! 🎉

I was doing the following:

final ui = haxe.ui.macros.ComponentMacros.buildComponent("ui.xml");
ui.show();

ui.show() was a leftover from before I added hidden="false" to the sidebar in ui.xml. When I removed that line, it worked as expected (and the same) with both the "dark" and "kenney" theme.

So it appears there's something in the SideBar.show-function that works differently on different themes -- maybe there's a difference in the style class names or in the default values?