[SOLVED]Nifty custom control with onHover effect, onClick event do not work

Troubleshooting gui
1

Hello every body,
i have following problem, i create a screen for my game in nifty. With custom style and custom button(image in panel with hover effect) but if i use onHover effect my click even don’t work eny more.
Here is the xml definition for control:

<style id="quizbuttonStyle">
        <attributes width="100%" height="100%" padding="5px" backgroundColor="#fff0" childLayout="overlay" />
    </style>
    <controlDefinition style="quizbuttonStyle" name="quizbutton" 
                       controller="de.lessvoid.nifty.controls.button.ButtonControl" inputMapping="de.lessvoid.nifty.input.mapping.MenuInputMapping">
        <panel style="#panel" focusable="false">
            <image width="100%" height="100%" childLayout="center" filename="Interface/quiz/button.png" imageMode="resize:15,2,15,15,15,2,15,2,15,2,15,15" >
                <text id="#text" font="Interface/Fonts/bmfont.fnt" style="#text" text="$label"/>
                <!-- REMOVE EFFECTS IT WORKS FINE -->
                <effect>
                    <onHover name="textSize" maxSize="60%" active="Interface/quiz/buttonHover.png" inactive="Interface/quiz/button.png">
                        <hover hoverFalloffType="linear" hoverFalloffConstraint="both" hoverWidth="100%" hoverHeight="100%" />
                    </onHover>
                    <onHover name="changeImage" active="Interface/quiz/buttonHover.png" inactive="Interface/quiz/button.png" imageMode="resize:15,2,15,15,15,2,15,2,15,2,15,15" />
                </effect>
               <!-- REMOVE EFFECTS IT WORKS FINE -->
            </image>
        </panel>
    </controlDefinition>

Here is the usage:

<panel id="quizPanelBottomTopLeft" height="100%" width="50%" valign="center" childLayout="center">
                        <control id="buttonA" width="50%" height="60%" name="quizbutton" align="right" valign="center" label="A">
                            <interact onClick="answer(A)" />
                        </control>
                    </panel>

I fond this post on stackoverflow and tried to modify my definition, but it do not help.
What is wrong in my xml definition?

2

It looks like you are trying to co-opt the button control without understanding what the controller class or input class do. Just taking a quick glance at it… I’m guessing that the on click event is attacked to the panel so when you add the effect the image is eating the click event. You would have to look at the nifty code you are using to be sure.

3

glh3586 thx big for you reply. After search i found this video on youtube for the nifty editor: https://www.youtube.com/watch?v=4iTVPYMEtH0. This https://sourceforge.net/projects/nifty-gui/files/nifty-gui/1.3.2/nifty-gui-the-manual-1.3.2.pdf/download helps real. Then I install new JME3 SDK and implement it.

  • ButtonStyle
<?xml version="1.0" encoding="UTF-8"?>
<nifty-styles xmlns="http://nifty-gui.lessvoid.com/nifty-gui">

    <!-- +++++++++++++++++++++++++++++++++++++ -->
    <!-- style for the button background panel -->
    <!-- +++++++++++++++++++++++++++++++++++++ -->
    <style id="quiz-button#panel">
        <attributes backgroundImage="Interface/quiz/button.png" imageMode="resize:15,2,15,15,15,2,15,2,15,2,15,15"
                    paddingLeft="7px" paddingRight="7px" width="100px" height="23px" childLayout="center"
                    visibleToMouse="true"/>
        <effect>
            <onHover name="changeImage" active="Interface/quiz/buttonHover.png" inactive="Interface/quiz/button.png" imageMode="resize:15,2,15,15,15,2,15,2,15,2,15,15" />
        </effect>
    </style>

    <!-- +++++++++++++++++++++++++++++++++++++ -->
    <!-- style for the button text -->
    <!-- +++++++++++++++++++++++++++++++++++++ -->
    <style id="quiz-button#text" base="button-font">
        <attributes align="center" valign="center" textHAlign="center" textVAlign="center" visibleToMouse="false"/>
        <effect>
            <onEnabled name="textColorAnimated" startColor="#8886" endColor="#eeef" post="false" length="150"/>
            <onDisabled name="textColorAnimated" startColor="#eeef" endColor="#8886" post="false" length="150"/>
        </effect>
    </style>
</nifty-styles>
  • ButtonControl
<?xml version="1.0" encoding="UTF-8"?>
<nifty-controls xmlns="http://nifty-gui.lessvoid.com/nifty-gui">
    <controlDefinition style="quiz-button" name="button" 
                       controller="de.lessvoid.nifty.controls.button.ButtonControl"
                       inputMapping="de.lessvoid.nifty.input.mapping.MenuInputMapping">
        <panel style="#panel" focusable="true">
            <text id="#text" style="#text" font="Interface/Fonts/bmfont.fnt" text="$label"/>
        </panel>
    </controlDefinition>
</nifty-controls>
  • Usage
<control name="button" id="buttonA" width="50%" style="quiz-button" valign="center" label="A" align="right" height="60%">
   <interact onClick="answer(A)" />
</control>