Extremely simple issue with styles

[Gabriel Zanetti]

Hi everyone,

I've been struggling with styles these days and I am sorry to say I just can't
solve this issue. I've taken a look at nifty's handbook and also taken a look
at the source examples, but I can't get how styles work.

This is my XML:

<?xml version="1.0" encoding="UTF-8"?>
<nifty xmlns="[url]http://nifty-gui.sourceforge.net/nifty-1.3.xsd[/url]" xmlns:xsi="[url]http://www.w3.org/2001/XMLSchema-instance[/url]"
    xsi:schemaLocation="[url]http://nifty-gui.sourceforge.net/nifty-1.3.xsd[/url] [url]http://nifty-gui.sourceforge.net/nifty-1.3.xsd[/url]">

    <useStyles filename="nifty-default-styles.xml" />
    <useControls filename="nifty-default-controls.xml" />

    <screen id="start" controller="game.states.controllers.MyScreenController">
        <layer id="layer1" childLayout="center">
            <panel align="right" valign="bottom" backgroundColor="#f60f" childLayout="horizontal">
                <panel childLayout="vertical">
                    <control id="newSinglePlayerGame" name="button" label="New Single Player Game" paddingLeft="7px" paddingRight="70px" childLayout="center" />
                    <control id="joinMultiPlayerGame" name="button" label="Join Multi Player Game 123" paddingLeft="7px" paddingRight="70px" childLayout="center" />
                    <control id="preferences" name="button" label="Preferences" paddingLeft="7px" paddingRight="70px" childLayout="center" />
                </panel>
            </panel>
        </layer>
    </screen>
</nifty>

Clearly, I am repeating all the paddings from the buttons. So I would like to
create a style for all of them. This is how I understand this should be done:

<?xml version="1.0" encoding="UTF-8"?>
<nifty xmlns="[url]http://nifty-gui.sourceforge.net/nifty-1.3.xsd[/url]" xmlns:xsi="[url]http://www.w3.org/2001/XMLSchema-instance[/url]"
    xsi:schemaLocation="[url]http://nifty-gui.sourceforge.net/nifty-1.3.xsd[/url] [url]http://nifty-gui.sourceforge.net/nifty-1.3.xsd[/url]">

    <useStyles filename="nifty-default-styles.xml" />
    <useControls filename="nifty-default-controls.xml" />

    <style id="menuButton">
        <attributes paddingLeft="7px" paddingRight="70px" childLayout="center" />
    </style>

    <screen id="start" controller="game.states.controllers.MyScreenController">
        <layer id="layer1" childLayout="center">
            <panel align="right" valign="bottom" backgroundColor="#f60f" childLayout="horizontal">
                <panel childLayout="vertical">
                    <control id="newSinglePlayerGame" name="button" label="New Single Player Game" style="menuButton" />
                    <control id="joinMultiPlayerGame" name="button" label="Join Multi Player Game 123" style="menuButton" />
                    <control id="preferences" name="button" label="Preferences" style="menuButton" />
                </panel>
            </panel>
        </layer>
    </screen>
</nifty>

However, I am getting the following error:

13/01/2012 11:51:37 de.lessvoid.nifty.render.NiftyRenderEngineImpl renderText
WARNING: missing font in renderText! could it be that you're using <text> elements without a font or style attribute? in case you've replaced <label> with <text> you're probably missing style='nifty-label' :)

To be honest I don't quite get this error. What am I missing?

PS: I don't think this changes anything, but I have a Java code that is
actually setting the width of all 3 buttons to the with of the button with the
most width (that way they have all the same with and the text fits for all of
them).

Thanks in advance.

[void256]

Well, styles can be tricky especially when you're trying to change the default
styles which you're doing in here. Unfortunatly it's probably not quite
obvious. Page 104 of the manual has a chapter about "CONTROL STYLES" which you
can read for more details but here is the short version:

In most cases Nifty controls consist of individual Nifty elements internally.
To address these individual elements Nifty introduced "substyles" using the
"#substylename" prefix. So for the standard button control there are actually
two styles: "nifty-button#panel" and "nifty-button#text". The first to specify
the style for the button panel and the second for the button label text
element. When you don't apply the style attribute to the control the default
style is used which is specified in the control definition. In the case of the
button the default style name is "nifty-button".

When you set the style attribute on a standard control (as you did with
style="menuButton") both sub style names will be changed to "menuButton#panel"
and "menuButton#text". So you need to specify both styles! I'd suggest you
find the "nifty-button.xml" file in the "nifty-style-black" project. I think
looking at this XML will explain this best :)

Unfortunately you can't provide only some attributes like you're trying to do
(which is a reasonable thing to do!), This will work only for simple Nifty
elements but not for controls.

[Gabriel Zanetti]

Ok, so this is what I understand. (I'll be descriptive so that if someone
faces a similar issue will find a complete solution).

1. I shouldn't have a style with the id "menuButton" because after parsing the XML, there wouldn't actually exist a control element. It would have been decomposed in the text and panel
2. I must add for each subelement of the button (text and panel) a style with the id "${controlStyleAttribute}#${subElementStyleAttribute}"
3. I need to create those substyles from scratch, probably copying them from the nifty-button style definition
4. Make sure all the required attributes for each simple element type are satisfied. Performing the previous steps will result in the same issue because the "nifty-button#text" style has a "base" attribute from which it takes the font from

Possible improvements:

For step #3: Not copying all the style. Playing with the "base" attribute
should do the trick. See the example below

For step #4: Documenting which attributes are required and using
'use="required"' in the XSD might help

Ok, so I now have the whole "nifty-button" in my XML. And this works!. The
first thing I think is I'm not reusing code (actually I'm using the library
just to copy text from :P). Now, I can see the "nifty-button#text" style
inherits the font by using the "base" attribute. Not only this looks nice, but
also seems to be exactly what I need. So, instead of pasting the whole "nifty-
button#panel" style in my "menuButton#panel" and just changing the padding
(which is the only thing I want to change from that button) I should be able
to do the following:

<style id="menuButton#panel" base="nifty-button#panel">
    <attributes paddingLeft="7px" paddingRight="70px"/>
</style>

This way all the attributes and effects from "nifty-button#panel" will be
inherited by "menuButton#panel", the same way "nifty-button#text" inherits the
font from "base-font". Aditionally the paddings should be overwritten and I
should end with the expected button definition. However, for some reason, this
is not happening.

I can live by copy pasting a lot... but is there any way to not doing so?

Thanks again!