Extremely simple issue with styles

2012-01-13
2012-08-28
  • Gabriel Zanetti

    Gabriel Zanetti - 2012-01-13

    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

    void256 - 2012-01-14

    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

    Gabriel Zanetti - 2012-01-14

    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!

     

Log in to post a comment.

Get latest updates about Open Source Projects, Conferences and News.

Sign up for the SourceForge newsletter:





No, thanks