Need help on Dialog auto sizing

I don’t know how the components are rendered, but if the property hidden is true, the actual component isn’t render until the hidden property is set to true, right? I’m not sure, but I thing that in openfl we could set the visibility to false and play with the display object, collect information we need even if it not rendered on screen, then again I could be totally wrong on this, I need to do some testing to make sure, but as I’m writing this I realise that you have to mainting several backend and in some, like html, I believe that it’s not even possible. Either way I could probably make a custom component with dropdown list, and then read the with of the listview and then set the with of the dropdown list, it might make an initial visual glitch on the component but I believe it could work, I will give it a try.

I’m sorry, I probably shouldn’t be asking so different things in the same thread, but it doesn´t seem right to open, each time a new thread, for so small questions. So I have another fast one, does the numeric stepper component have a deactived state?

Does disabled not work? If not sounds like a bug.

yes it works fine, I’ve already tried that, but when I revisited the code that I’ve used to test that, I see I’ve misspelled disabled and probably didn’t read the error properly and assume that the field doesn’t exist for that component (I see now that in the error sentence, it even has suggested the correct field name, you know, too many things to do and so little time to do them, equals too much confusion and oversighting :sweat_smile:). Thanks.

One thing that I’ve noticed in the openfl number stepper is that in the canvas rendering the textfield for the number seems a little off comparing with the rendering in the html equivalent from the haxeUI website playground, the openfl rendering looks like this:
Dialog_test4
the equivalent html in playground look like this:
http://haxeui.org/builder/?lawdpm
(I thing I can correct that using styles on the number textfield, I see that in the class code it has an name id called “stepper-textfield”)

In the dialog part, I’ve said that the width: auto don’t do anything, but that is not true, it needs that property set to auto, or else when we call that dialog again it will loose the autosizing. One thing that it’s not working properly in the autosizing is that it seems to not take in account the dialog buttons, and they stick out of the dialog when it is small or when whe use several buttons, as you could see in the previous image of the number stepper dialog. I use the initial-width:none and the width:auto styling for the dialog component. I don’t know if the others backends share the same behavior.

So ive made two updates, they dont help out completely but may be of use:

firstly, ive fixed the dialog buttons thing, that should be working now.

second for the dropdown, maybe you could add a “min-width” in a style (you’ll need latest haxeui-core as i removed it in a previous commit and forgot to readd it)… Its not the most ideal, but the issue still remains that we have no idea how big the biggest string is until we show the list as its only created when the button is clicked. Creating all the lists as hidden objects is one solution but im not keen on it, as it 90% of the cases you are creating a load of lists for no reason (potentially)… what would be ideal would be some (backend friendly) way to say “how big is this string in this font”, but ill have to have a think about that.

Hope this helps somewhat

Ian

PS: for the number stepper: i think you should use styles for now, text fields change all the time in openfl and im constantly tweaking things, until it normalises, or you move to latest openfl, its probably better to “fix” it with styles

Hi, thanks for your reply and fixes.

The dialog now works in the autosizing of the window, but it introduces now another issue:
Dialog_test5
the dialog buttons and its bar don´t extend to the full length of the dialog window.

Yes, the min-width helps to control a little better the menu width, but in a app/game with localisation is dificult to predict the width of some language menu equivalent. But I agree, it’s not a easy one, and creating all the lists as hidden objects could, potentially be an hit in performance.

The number stepper is actually easy to fix with styles, and that is what I will do. Thanks.

I know that I’m pushing a little bit too much on questions, but I use a menu bar and I want to have an menu that has some menu items disabled until some actions enable them, I’ve easly done that with the disable property and it works good, from the behaviour perpective, but graphically the menu items don’t change their appearance when they are disabled. I’ve tried using the :disabled in styiling but with no avail. Can you help in this one, I want to make the menu items look like this edit menu disabled items from gimp:
menu1

Thanks once more for your invaluable help.

Ok, so yeah, actually, disabled images / labels would always show as “normal” (no styles setup for them) - ive added these styles now to haxeui-core and also added a new “grayscale” filter, so now images should also show as greyed if disabled:

.label:disabled {
    color: #909090;
}

.image:disabled {
    filter: grayscale;
}

The filter is only implemented on haxeui-html5 & haxeui-openfl currently (because it was easy) ill add it to the other backends as and when, but for now, disabled components (including menu items) should look more… … … … disabled.

haxeui-html5:
image

haxeui-openfl:
image

You’ll need latest haxeui-core and haxeui-openfl.

Cheers,
Ian

PS: can you paste me the xml of your dialog? I thought i tested that scenario… but maybe i got it wrong in my tests…

:+1: :metal: Works great! :smile:

Both menus and buttons are now looking awesome!

The xml in the dialog I’ve used for testing is this:

<dialog title="Testing number-stepper in a dialog window">
<style>
.dialog {
    initial-width:none;
}
</style>
<hbox>
	<label text="Testing number-stepper in a dialog window" verticalAlign="center" />
	<number-stepper pos="100" />
</hbox>
</dialog>

and in the custom component class constructor it has the buttons:

	buttons = DialogButton.APPLY | DialogButton.CANCEL;

I think it’s simple stuff, only for for testing out the dialog.

–edit
It seems that the menu items have a “refresh” problem after being enabled, like so:
menu2

Interesting, ok, ill take a look at that (looks to be something simple) and the dialog in a bit.

Cheers,
Ian

OK, so those issues should be fixed now (the menu item and the dialog footer)… Also, you shouldnt need your .dialog style anymore… ive thought about it, and actually, there is no reason to start off dialogs as 300px, the default behaviour of “fit to contents” makes more sense.

I think the reason i did it was for the message boxes (which are ofc also dialogs) but actually, i can style them independently, so those will have an initial width of 300px and not all dialogs.

Cheers,
Ian

Yes, I confirm, all the tests that I’ve done on this are working great! I believe that it is a good choice to leave the general dialog use with autosizing and styling only the message boxes. Thanks!

1 Like

Good to hear, btw, it seems you are doing work on internationalization support, this is something im thinking about incorporating into the core framework, i was going to use this PR as a base: https://github.com/haxeui/haxeui-core/pull/152 (with some modifications as this is no longer mergable and i want to change some things).

Out of interest, what type of internationalization do you use / require. Its always good to have a general test case to work against - that PR seems to cover alot of good points, but it’d be good to have another opinion.

Cheers,
Ian

The app that I’m currently working, uses 6 languages, and for this Openfl version with HaxeUI I was planning to use Firetongue, a localization framework from Lars Doucet that seems to be a mature lib, but I was wondering how could I use it in a way that didn’t resort to hard coding each text property, everywhere in the code part or in each custom component, or using the script tag in each xml to do the hard coding there, resulting in a masive spaghetti code (granted that I didn´t give it much tought in the matter and possibly could develop some sort utility functions that could help a little, but it would always be a liitle messy and is not the same as using the localization directly in the xml component part, wich makes more sense…).

What you showed me is exactly what I need, but it’s still as a PR, do you plan to merge it? I could test it, because I will need it soon.

Not merge exactly, but use it as a base to rewrite (a little) as alot has changed since then, so i want to make sure a) it will work nicely and b) i will understand it as ill have to maintain it

Ideally, the locale system would be abstracted out (like everything in haxeui) with a default implementation meaning that (ideally) you could plug other engines in

Can you expand on this a little, maybe with some code / xml samples? Id like to fully understand what you mean, and how maybe a core system could help

Cheers,
Ian

Yes, and that is also one of the reasons for “choosing” Firetongue and also HaxeUI, because the app makes use of a lot of graphical stuff, and now I’m using openfl, but If one day the performance cannot be optimize anymore with it, I can “easily” change to other engine/framework, like for example kha. If I can use HaxeUI to handle the localization stuff too, it would be the “cherry on top”…

Well I’m not allowed to give details about the app I’m working on at the moment (NDA contract), but I can use my small testing sample code like the one that I’ve put here before. Using the previous dialog window xml:

<dialog id="dialog1" title="Testing number-stepper in a dialog window">
<hbox>
	<label id="label1" text="Testing number-stepper in a dialog window" verticalAlign="center" />
	<number-stepper pos="100" />
</hbox>
</dialog>

I have two localization strings to handle here (and without having used or tested Firetongue), using a “outside” framework I thought I could do it in two ways:
a) Earlier I tought and said to use the script tag and write a function that changes the dialog1.title and the label1.text to the localization string and then put each component to callback on that function to some onshow event, but I see there isn’t any public fired event that I can use to replace on the fly using the script tag function as callback, at least not for the dialog component, so this “is not the way” :wink:
b1) “hard code” directly in the custom component class, and create a function called for example, localeRefresh, use it on the constructor to make the initial string replacement and then use it as a callback for a custom event like AppEvent.TRANSLATION_LOCALE_CHANGE event to reassign the localization string when the locale is changed:

package com.test.display.ui;

import haxe.ui.containers.dialogs.Dialog;

@:build(haxe.ui.macros.ComponentMacros.build("assets/ui/number-stepper-dialog.xml"))
class CustomDialogStepper extends Dialog {
	public function new() {
		super();
		buttons = DialogButton.APPLY | DialogButton.CANCEL;
		localeRefresh(null);
		addEventListener(AppEvent.TRANSLATION_LOCALE_CHANGE, localeRefresh);
	}
	public function localeRefresh(e) {
		dialog1.title = tongue.get("$DIALOG1_STEPPER_TITLE","data");
		label1.text = tongue.get("$LABEL1_STEPPER_TEXT","data");
	}
}

or

b2) centralize all that in a TranslationAsset class of sorts that handle all the string atribution to each component using the id and then have a refresh method that could be called to reassign all the localization string by the callback function when locale is changed;

This is using Firetongue with HaxeUI, probably there’s even better ways like using binding, but in my opinion, the best way to do it is to “embed” the localization in the xml component text or title or in wich property is needed, like the PR that you showned me, this way we keep track on the location of the localization strings, easier to make sure that we don’t make mistakes or forget to localize something somewhere in the code when the app has many xml component, etc. This is my opinion, what do you make of it?

1 Like

Ok, great, thanks for the detailed explanation, so if im understanding correctly, the way i envision the locale stuff to work should be fine for you, so you would have something like:

<dialog id="dialog1" title="_(DIALOG1_STEPPER_TITLE)">
<hbox>
	<label id="label1" text="_(LABEL1_STEPPER_TEXT)" verticalAlign="center" />
	<number-stepper pos="100" />
</hbox>
</dialog>

And those strings would be inside some .properties file or other format… when the locale changes, or is initially found then those strings would “magically” update themselves. This wouldnt be dissimilar to how the current binding works, outlined here: Better Binding in HaxeUI - although this would be a more specialized version of it

A minor thing is im not sure about the “_(…)” syntax - im not sure i like it - but i guess is not really important

I think thats enough info to start a first iteration, but let me know if you have any more thoughts / ideas… always useful to get as much input as possible when creating a new core sub system :slight_smile:

Cheers,
Ian

Yeah, I think that I read these topic back when you created this, but probably read it diagonally, because I know that we could bind inside the xml component property, but I thought that in custom components we wouldn’t be able to access something that is outside the scope of the custom component class, thus all the code for localization string replacement I wrote before…
I read it again and I see that we could expose outside classes, so we could bind directly in the xml, and so, you are right, we could use Firetongue embeded in the xml property, either way, I think that HaxeUI would benefict in having it’s own localization sub system, in the sense that, this way we don’t need one more added framework and expose other unnecessary classes for BindingManager, and it will be more seamlessly integrated with HaxeUI and xml component system.

Thanks, keep up the good work and soon as you have some news on the matter, I’m in line to test it out.

edit–
Forgot the other matters

Yes, exactly like that, I think it’s a cleaner way of doing the localization

Yeah, _(…) syntax is somewhat “strange”, but I do like the arguments idea from the PR, like _(LABEL1_STEPPER_TITLE, 20), because in this way we could control where to put the 20 in our translated string, as you probably know several languages have sentences that have things swaped around and it’s very important to have control on that. The complete “cherry on top” is having the possibility to bind these arguments like so:

<dialog id="dialog1" title="_(DIALOG1_STEPPER_TITLE)">
<hbox>
	<label id="label1" text="_(LABEL1_STEPPER_TEXT, ${ns1.pos})" verticalAlign="center" />
	<number-stepper id="ns1" pos="100" />
</hbox>
</dialog>

Just an idea…

1 Like

text=“_(LABEL1_STEPPER_TEXT, ${ns1.pos})”

I like it! Altough, in reality it would like be more like:

text=“_(LABEL1_STEPPER_TEXT, ns1.pos)”

Anyways, more than enough to get started.

Cheers!
Ian

Of course, you are right, but you understand what I’m trying to say! :wink:
Please let me know when you have someting. Regards.

:partying_face:

1 Like

Wow!! Looking good! Keep them coming!