Mobile touch application?

So HaxeUI is great for desktop UI but whats the state of things for mobile?
Would love to use HaxeUI to build an android app… what is supported when it comes to touch, scrolling, DPI scaling etc at the moment?

Thanks :slight_smile:

It should work fine, openfl is your best bet (there is a haxeui-android too for purely native UIs) to target mobile, the UI should autoscale based on DPI, touch to scroll and intertia should all work, and some other little mobile “tweaks”…

If you have any issues / suggestions id love to hear them!

Cheers,
Ian

Thanks! :slight_smile:
I’ve been testing a bit, and many of the things work nice. DPI scaling seems to work pretty good!

But so far i’ve had some issues:

-App size seem to be wrong : Setting something to be 100% at the top level seems wrong - there is only a small area being used. Works fine on desktop. I can force a locked size using width set to pixels but % doesnt work correctly…

-Scrollviews seem problematic - most times im not able to scroll using touch - on desktop it seems to work properly (with a scrollbar). In some cases i was able to scroll the content in a scrollview.
Also i cant see any inertia when im letting go, the scroll just stops. Does it require some special settings to enable?
[EDIT: Ok, i found out you need scrollMode=“inertial”. Is it possible to set this globally? :slight_smile: ]

[EDIT: So it seems scrolling doesnt work unless there is content behind the finger when i touch - a list with labels that has a large padding wont scroll unless i press exactly on the font/text. It seems this issue is the same on desktop too, using the scroll wheel!]

Perhaps there are some more mobile friendly examples somewhere i could test with to see if i still get the same results? :slight_smile:

App size and scrolling ones seem a little wrong, for sure - is there any chance you could zip and paste your test app so i can take a look?

EDIT: yeah, scrollmode would make more sense as global in some way, you are right, ill look into it.

Sure! You mean the apk or the markup?

The (full) haxeui application source, so i can build and run it myself

It is really just a test with just a simple markup, nothing special

<box style="width:100%;height:100%;background-color:#aa5588" />

This is what i get:

I’ve put up a sample to show the scroll issue:

OK, perfect… thanks… and yeah, that screen is defo wrong. Leave it with me, ill check it out…

Thanks!

1 Like

OK, so yeah, the 100% issue was a bug i created :slight_smile: Its fixed now, but not commited yet.

The second issue is an openfl (and i think flash as3) issue… in order for sprites to get events they have to be drawn in, the work around is to create a background on it (and give it an background-opacity: 0), that should fix it, but i dont really like it, what i dont want to do is put a transparent background on everything as that could lead to perf issues.

@intoxopox has mentioned previously about using another invisible sprite for its hitarea, which should apprently work, but i havent actually tested this. It would also result in 2x amount of sprites :confused:

Also, btw, you dont have to put a background on each item, you can put a background onto the scrollview itself, thats enough for openfl to start using it as an event target:

    <scrollview width="100%" height="100%" style="background-color: white;">
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
    </scrollview>
</box>    

also, the scale fix (for the % issue) is in haxeui-openfl 1.0.5 while we think about the how best to handle the “must have background to get events issue”

Great! Just tested it and the scale issue is fixed! Thank you!

As for the the events not triggering when there is no background;
thats understandable ofcourse - although you would probably need the fix for most cases.
But all in all : HaxeUI is awesome :smiley:

1 Like

Yeah, the problem with this work around in haxeui-openfl is, i dont want to put a white background on the, say, scrollview, as then, what if someone creates a black UI and has to then change the background of the scrollview.

Equally. i dont want to put a background-opacity: 0 for the scrollview as maybe someone will want a colour and will not understand why they cant see it (as it will back alpha: 0).

What would be nice is to somehow conditionally use this “hitArea” solution.

EDIT: actually, i just had a thought… i could put the scrollview contents as a background-opacity:0… as that way, if the scrollview had a background colour, it would be fine, but it should also be enough for the view to get events - im going to check it out and see if tht works.