HaxeUI with Hashlink and Heaps

#1

So I’m very interested in using HaxeUI and tested it out with Heaps and with OpenFL (lime) yesterday. My initial attempt was with VSCode+HL+Heaps.

The Heaps build does not seem to work properly, and styles are never applied if set in XML. Setting programmatically seems to work. I tested with both Hashlink 1.10 and 1.11 with the same result. At first I thought it was just font embedding, but it does not work for any styles whatsoever:

    <style>
     @font-face {
         font-family: 'Bauhaus93';
         src: url('assets/fonts/BAUHS93.TTF');
     }
     .baus {
         font-name: "assets/fonts/BAUHS93.TTF";
         font-size: 30px;
         backgroundColor:0x333333;
         font-family: "Bauhaus 93";
     }
</style>
<button text="Click Me!" onclick="this.text='Thanks!'" styleNames="baus" style="font-size: 34px;" />
<button id="b2" text="Don't Click Me!" onclick="doStuff()" style="font-size: 20px;" />

I then ran the same XML and code in HaxeUI+OpenFL and everything works as expected. I’d prefer to use Heaps because the build/test time is so much shorter.

I assume this is a build issue with HL and Heaps. I also noticed a bad layout during debug that was removed only after I restarted VSCode. It seemed like it corrupted the haxe build server instance, and restarting it solved the issue. It may be related. Any ideas?

#2

Hi!

Ive defo used it without any issues on hl + openfl… any chance you could zip your entire (test?) project? Also what versions of haxe, openfl, lime and haxeui are you using?

Regarding the bad layout, i wonder if its something to do with vscode plugin (it has issues ive heard), does it work correctly when you just use command line / terminal outside of vscode?

Cheers,
Ian

EDIT: i almost certainly wont be able to look at your test project tonight though as… … well, nye :slight_smile:

#3

So I created a new stock project using:

haxelib run haxeui-core create heaps

Here is the contents of main-view.xml:

<vbox style="padding: 50px;">
<style>
    button {
        backgroundColor:0x333333;
    }
</style>
<button id="button1" text="Click Me!" onclick="doThing()" style="font-size: 12px" />
<button text="Don't Click Me!" onclick="this.text = 'uh oh'" style="font-size: 72px; font-famimly: 'Bauhaus 93'" />
<script>
    function doThing() {
        button1.backgroundColor = 0xAAAAAA;
        button1.fontSize = 32;
        button1.text = "HHAHAHAHAHA";
    }
</script>
</vbox>

Haxe Version: 4.0.5
HL Version: both 1.10.0 and 1.11.0 produce the problem
haxeui-core: 1.1.3

VSCode launch:

{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
    {
        "name": "HashLink (launch)",
        "request": "launch",
        "type": "hl",
        "cwd": "${workspaceFolder}",
        "preLaunchTask": {
            "type": "haxe",
            "args": "active configuration"
        }
    },
    {
        "name": "HashLink (attach)",
        "request": "attach",
        "port": 6112,
        "type": "hl",
        "cwd": "${workspaceFolder}",
        "preLaunchTask": {
            "type": "haxe",
            "args": "active configuration"
        }
    }
]}

heaps-hl.hxml

-cp src
-main Main
-lib heaps
-lib hlsdl
-lib haxeui-core
-lib haxeui-heaps
-lib hscript
-D resourcesPath=assets
-hl build/heaps/hl/Main.h

Not sure what else I can pass along. It was about the simplest test that can be done.

EDIT: Yes I just tested a clean build from cmd using

haxe heaps-hl.hxml

and then

hl Main.hl

No errors or warnings, and it starts and displays fine except for zero styling (either in the style tag or as a style attrib on a button element).

#4

Ah, ok, so you are using heaps, not openfl… im not sure changing fonts is supported in haxeui-heaps yet… im not expert on heaps (at all)… do you know how you would “normally” change the font in heaps?

Also i think the background color style is wrong, you are using “backgroundColor” and it should be “background-color”, also im not sure the “0x” is parseable by the css parser, finally i think you can use the class name as “button”, but its generally advise to use it with a “.” in front (as im thinking about removing the node name stuff), so basically, this:

button {
    backgroundColor:0x333333;
}

should be:

.button {
    background-color: #333333;
}

Cheers,
Ian

#5

So HaxeUI->Heaps doesn’t have font support? That would explain the issue I’m seeing. Other styles (background color) do seem to work ok, but any font-related styles do not seem to work. For example, setting the font or changing the font size does not work.

Also I added a TextField and it is frozen in HaxeUI->Heaps. I installed the latest from gitHub and I’m still experiencing the same issues.

EDIT: Should I add tag any of these as bugs in GitHub? Are you planning on supporting Heaps?

#6

Im certainly going to support heaps, in fact, in the next few days im going to have a bit of a rummage through and change some things to make the user exp. better… so absolutely open away :slight_smile:

Cheers,
Ian

1 Like
#7

Sounds good. I’ll be monitoring this thread if there are any questions about the gitHub bug submission.

1 Like