[Nifty] Element.setStyle() behavior --Work around

Troubleshooting gui
1

Hello,



I try to tune up my toolbar → I want to dynamically change the style of a button via code.



I test with two styles : icon-empty, icon-system



My button is defined like that :








And when I want to change it via code :
[java]
element.setStyle( "icon-system" );
[/java]

Nothing change on the GUI, but I have thins in the log :

INFO: before removeStyle [nifty-button]
[element] (style => nifty-button, name => button, imageMode => resize:2,148,2,2,2,148,2,28,2,148,2,2 {nifty-button#panel}, id => btn0, width => 100%, controller => de.lessvoid.nifty.controls.button.controller.ButtonControl, inputMapping => de.lessvoid.nifty.input.mapping.MenuInputMapping, type => button, focusable => true, backgroundImage => button/black-button-normal.png {nifty-button#panel}, childLayout => center {nifty-button#panel}, visibleToMouse => true {nifty-button#panel}, height => 10%)
(onClick => toggleSheet(0))
()
(imageMode => resize:7,148,7,7,7,148,7,28,7,148,7,7, inset => -5px, filename => button/black-button-hover.png, name => imageOverlay, post => true)
()
(imageMode => resize:7,148,7,7,7,148,7,28,7,148,7,7, inset => -5px, filename => button/black-button-hover.png, name => imageOverlay, post => true)
(inherit => true, name => move, length => 2000, direction => top, startDelay => 20, mode => in)
children elements: 1
[element] (style => #text, id => button-text, textHAlign => center {nifty-button#text}, font => aurulent-sans-16-bold.fnt {button-font}, textVAlign => center {nifty-button#text}, align => center {nifty-button#text}, valign => center {nifty-button#text}, visibleToMouse => false {nifty-button#text})
()
()
no children elements
Nov 27, 2010 8:54:37 PM de.lessvoid.nifty.elements.Element removeStyle
INFO: after removeStyle [nifty-button]
[element] (style => nifty-button, name => button, imageMode => resize:2,148,2,2,2,148,2,28,2,148,2,2 {nifty-button#panel}, id => btn0, width => 100%, controller => de.lessvoid.nifty.controls.button.controller.ButtonControl, inputMapping => de.lessvoid.nifty.input.mapping.MenuInputMapping, type => button, focusable => true, backgroundImage => button/black-button-normal.png {nifty-button#panel}, childLayout => center {nifty-button#panel}, visibleToMouse => true {nifty-button#panel}, height => 10%)
(onClick => toggleSheet(0))
()
(imageMode => resize:7,148,7,7,7,148,7,28,7,148,7,7, inset => -5px, filename => button/black-button-hover.png, name => imageOverlay, post => true)
()
(imageMode => resize:7,148,7,7,7,148,7,28,7,148,7,7, inset => -5px, filename => button/black-button-hover.png, name => imageOverlay, post => true)
(inherit => true, name => move, length => 2000, direction => top, startDelay => 20, mode => in)
children elements: 1
[element] (style => #text, id => button-text, textHAlign => center {nifty-button#text}, font => aurulent-sans-16-bold.fnt {button-font}, textVAlign => center {nifty-button#text}, align => center {nifty-button#text}, valign => center {nifty-button#text}, visibleToMouse => false {nifty-button#text})
()
()
no children elements
Nov 27, 2010 8:54:37 PM de.lessvoid.nifty.elements.Element setStyle
INFO: after setStyle [icon-system]
[element] (style => icon-system, name => button, imageMode => resize:2,148,2,2,2,148,2,28,2,148,2,2 {nifty-button#panel}, id => btn0, width => 100%, controller => de.lessvoid.nifty.controls.button.controller.ButtonControl, inputMapping => de.lessvoid.nifty.input.mapping.MenuInputMapping, type => button, focusable => true, backgroundImage => button/black-button-normal.png {nifty-button#panel}, childLayout => center {nifty-button#panel}, visibleToMouse => true {nifty-button#panel}, height => 10%)
(onClick => toggleSheet(0))
()
(imageMode => resize:7,148,7,7,7,148,7,28,7,148,7,7, inset => -5px, filename => button/black-button-hover.png, name => imageOverlay, post => true)
()
(imageMode => resize:7,148,7,7,7,148,7,28,7,148,7,7, inset => -5px, filename => button/black-button-hover.png, name => imageOverlay, post => true)
(inherit => true, name => move, length => 2000, direction => top, startDelay => 20, mode => in)
children elements: 1
[element] (style => #text, id => button-text, textHAlign => center {nifty-button#text}, font => aurulent-sans-16-bold.fnt {button-font}, textVAlign => center {nifty-button#text}, align => center {nifty-button#text}, valign => center {nifty-button#text}, visibleToMouse => false {nifty-button#text})
()
()
no children elements
Nov 27, 2010 8:54:37 PM de.lessvoid.nifty.effects.EffectProcessor startEffect
2

can you post the style definition too? the style you applied first and the style you are changing too?



changing the style of an element dynamically is supported but does currently not work for effects as well as substyles. There already is a pending feature request on the “feature request tracker for nifty”. here is the link: http://sourceforge.net/tracker/?func=detail&aid=2820480&group_id=223898&atid=1059825

3

Hello,

Thanks for the link. I will follow the future evolutions :slight_smile:



My styles are for buttons :

[xml]

|!-- +++++++++++++++++++++++++++++++++++++ --|

|!-- ICON : Empty --|

|!-- +++++++++++++++++++++++++++++++++++++ --|

|style id=“icon-empty#panel”|

|attributes backgroundImage=“empty.png” imageMode=“normal” height=“40px” width=“40px” align=“center” childLayout=“center” visibleToMouse=“true” /|

|effect|

|onHover name=“imageOverlay” filename=“empty.png” imageMode=“normal” post=“true” inset="-5px" /|

|/effect|

|/style|

|style id=“icon-empty#text” base=“button-font”|

|attributes align=“center” valign=“center” textHAlign=“center” textVAlign=“center” visibleToMouse=“false”/|

|/style|



|!-- +++++++++++++++++++++++++++++++++++++ --|

|!-- ICON : System --|

|!-- +++++++++++++++++++++++++++++++++++++ --|

|style id=“iconSystem#panel”|

|attributes backgroundImage=“iconSystem.png” imageMode=“normal” height=“40px” width=“40px” align=“center” childLayout=“center” visibleToMouse=“true” /|

|effect|

|onHover name=“imageOverlay” filename=“iconSystem_hover.png” imageMode=“normal” post=“true” inset="-5px" /|

|/effect|

|/style|

|style id=“iconSystem#text” base=“button-font”|

|attributes align=“center” valign=“center” textHAlign=“center” textVAlign=“center” visibleToMouse=“false”/|

|/style|

[/xml]



This problems allowed me to review my code - I won’t need the switch of style for now.

Now I create the whole button via code instead of changinf the style of an existing button.

[java]

//

// Button creation
//
//Add the element and do the animation
Element parent = screen.findElementByName( "paneButtons" );
CustomControlCreator creator = new CustomControlCreator( "button");
creator.setId( "btn" + String.valueOf( index ) );
creator.setStyle( controller.getButtonStyle() );
//creator.setHeight( "10%" );
//creator.setWidth( "100%" );

//Custom effect
ControlEffectAttributes effectParam = new ControlEffectAttributes();
effectParam.setName("move");
effectParam.setAttribute( "mode", "in" );
effectParam.setAttribute( "direction", "top" );
effectParam.setAttribute( "length", "2000" );
effectParam.setAttribute( "startDelay", "20" );
effectParam.setAttribute( "inherit", "true" );
creator.addEffectsOnCustom(effectParam);

//Interaction
creator.setInteractOnClick("toggleSheet(" + String.valueOf( index ) + ")" );

Element element = creator.create( nifty, screen, parent );
element.startEffect(EffectEventId.onCustom);
[/java]

Just an other small question related to that :
How do we remove an existing element from a screen ?
[java]element.markForRemoval();[/java]
4

Yes, element.markForRemoval() is correct. It has this odd name because it will not be removed immediately. Instead it will be removed at the end of the frame.



It’s a little annoying that it is not removed immediately but this was necessary because you could actually add an onEndScreen effect to the element that gets executed first and the element will be removed when this effect has ended. There is a markForRemoval() you can call with an EndNotify listener which will be called when the onEndScreen effect has ended if you want to trigger some things then.



Enabling immediately removal of elements without such an onEndScreen effect is a planned feature for 2.0 tho :smiley: