Haxe Code for Style

Questions
, ,
1

Sorry for asking this, as I’m very new to Haxe and xml, but how would you write the following xml in a .hx as haxe code?

<style>
    .tabbar .tabbar-button {
        background-opacity: 0;
    }

    .tabbar .tabbar-button-selected {
        background-color: white;
        border-bottom-color: white;
        background-opacity: 100;
    }
</style>

I’m primarily trying to set style for a single tabbar component. Additionally, is there a way to do this in a single xml line like:

<tabview width="100%" height="300" style="style stuff would be set here I guess">
    <grid text="tab 1" width="100%">
        <label text="item 1" />
        <label text="item 2" />
    </grid>
</tabview>

As an aside, I think it would be really helpful if Component Explorer - HaxeUI had examples in hx in addition to xml so people could find that information more easily.

2

So you could do something like this:

Toolkit.styleSheet.parse("...");

You could just add it to the xml:

<tabview width="100%" height="300" style="style stuff would be set here I guess">
    <style>
    .tabbar .tabbar-button {
        background-opacity: 0;
    }

    .tabbar .tabbar-button-selected {
        background-color: white;
        border-bottom-color: white;
        background-opacity: 100;
    }
    </style>

    <grid text="tab 1" width="100%">
        <label text="item 1" />
        <label text="item 2" />
    </grid>
</tabview>

The problem with that is that would allow code to run on my server, including macros, this is a huge security hole. It can be overcome (with docker for example) but its not a quick thing

Hopefully some of that helps?

Ian

3

Thanks for letting me know about styleSheet.parse(); I’m going to have to play with that.

For my second question, I knew you could add it to the xml directly, but when I tried changing the style for a progress bar, for example, it changed every progress bar to that style, not just the bar that the style was nested under.

For example:

    <progress id="bar1" pos="50" width="100%" height="10" />
            <style>   
                .horizontal-progress .progress-value {
                    background: #FFFFFF #000000 horizontal;
                }
            </style>
    <progress id="bar2" pos="50" width="100%" height="10">

This changes bar2 to this style, even though it’s nested under bar1. Could you please let me know what I’m doing wrong? I also tried putting it inside the progress bar thing like this:

    <progress id="bar1" pos="50" width="100%" height="10">
            <style>   
                .horizontal-progress .progress-value {
                    background: #FFFFFF #000000 horizontal;
                }
            </style>
    </progress>

but that didn’t seem to do anything

4

Right, there is a thing called “scoped css” but its not exactly what you are after: Scoped CSS Addition

For what you want, you just need to use “normal” css:

some examples:

#myButton {
    color: red;
}

.foo {
    color: white;
}

#anotherButton.bar {
    background-color: blue;
}

<button id="myButton" />
<button styleNames="foo" />
<button id="anotherButton" styleNames="foo bar" />
1 Like
5

Maybe a more concrete example might help: Builder - HaxeUI

<vbox style="padding: 5px;">
    <style>
        .horizontal-progress.yellow .progress-value {
            background: #FFDD00 #FBB034;
        }
        .horizontal-progress.red .progress-value {
            background: #EB4511 #B02E0C;
        }
    </style>    
	<progress pos="25" />
	<progress styleNames="yellow" pos="75" />
	<progress styleNames="red" pos="50" />
</vbox>

image

2 Likes