Changing font size HaxeUI

1

Hello,

Can anybody tell me how to change the font size of haxeUI elements? I want to resize UI elements but when I use resizeComponents() it doesn’t resize the fonts. For textfields, I tried textfields.style.fontSize = 20; but when running the program it says UncaughtTypeError: Cannot set property 'fontSize' of undefined. Do I need to instantiate a style before I can use style.fontSize?

2

Credit goes to Ian Harrigan for clarifying,

This is how I did it in haxe without css:

Toolkit.styleSheet.addRules(“.myTextfieldFont { font-size: 100; }”);
textfield.styleNames = “myTextfieldFont”;

This can also change font color, background color, and other attributes. Something like:

Toolkit.styleSheet.addRules(“.myTextfieldFont { font-size: 100; color: #FF0000; }”);

1 Like
3

Im going to include the full (email) reply for completeness:

So there are a few ways to style:

1. Module.xml
Create a module.xml on the class path and reference the themes there:

<?xml version="1.0" encoding="utf-8" ?>
<module>
    <resources>
        <resource path="assets" prefix="assets" />
    </resources>
    <themes>
        <global>
            <style resource="assets/external1.css" />
        </global>
        <default>
            <style resource="assets/external2.css" />
        </default>
    </themes>
</module>

• The node name is the name of the theme, global is a special one, it will always be applied regardless of the theme used.
• Also note that, for now, you might have to use “!important” in the css to make sure it works – im writing a new css engine (which is basically done) which doesn’t need this as it uses a “weighted include order”, but for you now you might need “!important”

2. Reference from XML
If you are using XML, you can import a style sheet from there:

<style source="/external3.css" />

• The path of the style sheet is relative to the XML that imports it

3. Style block
Its not external but you can also use styles between a style block in XML:

<style>
.button {
    padding: 20px;
}
</style>

4. Inline style
Also not external but you can inline style:

<button text="Click Me!" onclick="this.text='Thanks!'" style="border-radius: 10px;" />

5. Via code:
Finally, not external, but you can do it in code too:

Toolkit.styleSheet.addRules(".button { background-color: yellow !important; }");

or

myButton.fontSize = 100;

1 Like