How To Concatenate Strings With Different Colors In textarea Or label

1

Using html5 Backend but any other would likely have a similar problem ?

from Components Examples Labels
label text=“32px red style” style=“font-size: 32px;color:red;”

something like textarea below
vbox style=“padding: 5px;”
button text=“Click Me!” onclick=“this.text=‘Thanks!’” style=“font-size: 24px;” /
textarea width=“100%” height=“200” text="this is a " style=“font-size: 12px;color:red;”
text="Verb " style=“font-size: 12px;color:green;”/
/vbox

(removed the < > so we can see the good stuff)

Key Idea is to be able to mix text of selected Colors together inside a Label or Textarea

To support more expressive Text representations like:
Highlighting keywords in a code Editor.

So there is a need to have a display where text can be changed. After the change the forGL Parser would figure out the new text and re Color any edited text keywords as needed by overwriting the old text.

There is also a need to display Colored text that is not editable for showing structural information.
VSCode has a Map feature (typically at Right side of IDE).

forGL would have a Dictionary window that shows the top level Verbs (code) that then calls lower level Verbs. Similar to what used to be referred to as a Call Tree.

Hopefully I am just missing some HaxeUI syntax combination here.
Thanks !

2

Hi!

For labels you should be able to use htmlText, im actually not sure if that is implemented on haxeui-html5 to be honest, which is … … … ironic. It will take seconds to implement as you can imagine since haxeui-html5 works natively with, well, html5…

As for using that in a textarea, thats a whole other kettle of fish - to be able to edit rich text is far more complex, and frankly way outside the scope of haxeui - however, there is a haxeui-code-editor (https://github.com/haxeui/haxeui-code-editor) that will work for haxeui-html5 and haxeui-hxwidgets by using monaco and scintilla respectively (a picture of it in action below on haxeui-html5).

image
image1918×858 56.3 KB

3

Ian,

WAY Cool !
Saw the Code Editor project but did not pursue as I thought it was experimental and not supported.

(scene from Wayne’s World) Me: I’m not worthy … :smiley:

Definitely want to add a Reference on the Web site about this Backend !
Thanks !

4

from Monaco editor page:
“The Monaco editor is not supported in mobile browsers or mobile web frameworks.
Find more information at the Monaco Editor repo.”

OK, getting new HaxeUI stuff working in any way is a very big step forward.
Seems like I will still be looking at the htmlText approach for the Mobile platforms.

Will reply later with results after I try some more.
Thanks !

5

OK, latest git version of haxeui-core and haxeui-html5 should enable you to colour labels, eg:

<vbox style="padding: 5px;">
    <button text="black <font color='#ff0000'>red <font color='#00ff00'>green</font> <font color='#0000ff'>blue</font> red</font> black" style="font-size: 24px;" />
    <label text="black <font color='#ff0000'>red <font color='#00ff00'>green</font> <font color='#0000ff'>blue</font> red</font> black" style="font-size: 24px;" />
</vbox>

image

Obviously code would also be be:

var button = new Button();
button.text = "black <font color='#ff0000'>red <font color='#00ff00'>green</font> <font color='#0000ff'>blue</font> red</font> black";
...
var label= new Label();
label.text = "black <font color='#ff0000'>red <font color='#00ff00'>green</font> <font color='#0000ff'>blue</font> red</font> black";
...

Cheers,
Ian