[Solved] Custom ListBox – Problem with mouse seleccion

Hello monkeys,



I’m working on a custom ListBox with a string to show the level number and an icon to show the level status (locked, available, done, etc).



All works fine, I can add items and they are shown properly. I’m also can navigate with the arrows key and select/unselect the levels with the space. However, that doesn’t work with the mouse and I can’t find out what is wrong.



The code of the nifty customListBox.xml:



[xml]<?xml version=“1.0” encoding=“UTF-8”?>

<nifty xmlns=“http://nifty-gui.sourceforge.net/nifty-1.3.xsd” xmlns:xsi=“http://www.w3.org/2001/XMLSchema-instance” xsi:schemaLocation=“http://nifty-gui.sourceforge.net/nifty-1.3.xsd http://nifty-gui.sourceforge.net/nifty-1.3.xsd”>

<useStyles filename=“nifty-default-styles.xml” />

<useControls filename=“nifty-default-controls.xml” />



<controlDefinition name=“customListBox-line”>

<panel childLayout=“horizontal” width=“100%” align=“center”>

<control id="#numeroNivel" name=“label” visibleToMouse=“true” font=“Interface/Fonts/UltraBold.fnt” align=“left” textHAlign=“left” height=“30px” width="" wrap=“true”/>

<image id="#icono" width=“25px” height=“25px” />

</panel>

</controlDefinition>



<!-- Screen -->



<screen id=“start” controller=“mygame.ControlCustomListBox”>

<layer id=“layer” backgroundColor="#40ff" childLayout=“vertical”>

<control name=“listBox” id=“myCustomListBox” width=“100%” height="
" vertical=“on” horizontal=“off” selection=“single” displayItems=“5” viewConverterClass=“mygame.CustomListBoxViewConverter”>

<control name=“customListBox-line” controller=“de.lessvoid.nifty.controls.listbox.ListBoxItemController” />

</control>

</layer>

</screen>

</nifty>

[/xml]



The custom listBox item class:

[java]/*

  • To change this template, choose Tools | Templates
  • and open the template in the editor.

    */

    package mygame;



    import de.lessvoid.nifty.render.NiftyImage;



    /**

    *
  • @author Javi

    /

    public class CustomListBoxItem {



    private String label;

    private NiftyImage icono;





    public CustomListBoxItem(String labelParam, NiftyImage icono)

    {

    this.label = labelParam;

    this.icono = icono;

    }



    @Override

    public String toString() {

    return label;

    }



    public String getLabel()

    {

    return this.label;

    }



    public void setLabel(String label)

    {

    this.label = label;

    }



    public NiftyImage getIcon()

    {

    return this.icono;

    }



    public void setIcon(NiftyImage icono)

    {

    this.icono = icono;

    }



    }[/java]



    The ListBoxViewConverter:

    [java]/

  • To change this template, choose Tools | Templates
  • and open the template in the editor.

    */

    package mygame;



    import de.lessvoid.nifty.controls.ListBox.ListBoxViewConverter;

    import de.lessvoid.nifty.elements.Element;

    import de.lessvoid.nifty.elements.render.ImageRenderer;

    import de.lessvoid.nifty.elements.render.TextRenderer;



    /**

    *
  • @author Javi

    */

    public class CustomListBoxViewConverter<T> implements ListBoxViewConverter<CustomListBoxItem>

    {

    private static final String NUMERO_NIVEL = "#numeroNivel";

    private static final String ICONO = "#icono";



    public final void display(final Element listBoxItem, final CustomListBoxItem item)

    {

    final Element text = listBoxItem.findElementByName(NUMERO_NIVEL);

    final TextRenderer textRenderer = text.getRenderer(TextRenderer.class);



    final Element icon = listBoxItem.findElementByName(ICONO);

    final ImageRenderer iconRenderer = icon.getRenderer(ImageRenderer.class);



    if (item != null) {

    textRenderer.setText(item.toString());

    iconRenderer.setImage(item.getIcon());

    } else {

    textRenderer.setText("");

    iconRenderer.setImage(null);

    }

    }





    public final int getWidth(Element listBoxItem, CustomListBoxItem item)

    {

    final Element text = listBoxItem.findElementByName(NUMERO_NIVEL);

    final TextRenderer textRenderer = (TextRenderer)text.getRenderer(TextRenderer.class);

    final Element icon = listBoxItem.findElementByName(ICONO);

    final ImageRenderer iconRenderer = icon.getRenderer(ImageRenderer.class);



    return ((textRenderer.getFont() == null) ? 0 : textRenderer.getFont().getWidth(item.getLabel()))
  • ((iconRenderer.getImage() == null) ? 0 : iconRenderer.getImage().getWidth());

    }

    }

    [/java]



    The screen controller class:

    [java]/*
  • To change this template, choose Tools | Templates
  • and open the template in the editor.

    */

    package mygame;



    import de.lessvoid.nifty.Nifty;

    import de.lessvoid.nifty.controls.ListBox;

    import de.lessvoid.nifty.screen.Screen;

    import de.lessvoid.nifty.screen.ScreenController;



    /**

    *
  • @author Javi

    */

    public class ControlCustomListBox implements ScreenController{



    private Nifty nifty;

    private Screen screen;



    public void bind(Nifty nifty, Screen screen) {

    System.out.println("bind( " + screen.getScreenId() + ")");

    this.nifty = nifty;

    this.screen = screen;

    }



    public void onStartScreen() {

    System.out.println("onStartScreen");



    ListBox<CustomListBoxItem> mylist = nifty.getCurrentScreen().findNiftyControl("myCustomListBox", ListBox.class);



    for(int i=0; i< 20; i++){

    CustomListBoxItem l1 = new CustomListBoxItem("OPCIÓN: " + i,

    nifty.getRenderEngine().createImage("Interface/candado.png", false));

    mylist.addItem(l1);

    }

    }



    public void onEndScreen() {

    System.out.println("onEndScreen");

    }



    }[/java]



    And the main class:

    [java]package mygame;



    import com.jme3.app.SimpleApplication;

    import com.jme3.niftygui.NiftyJmeDisplay;

    import de.lessvoid.nifty.Nifty;

    import de.lessvoid.nifty.controls.ListBox;



    /**
  • test
  • @author normenhansen

    */

    public class Main extends SimpleApplication {



    private Nifty nifty;



    public static void main(String[] args) {

    Main app = new Main();

    app.start();

    }



    @Override

    public void simpleInitApp() {



    inputManager.setCursorVisible(true);

    flyCam.setEnabled(false);



    NiftyJmeDisplay niftyDisplay = new NiftyJmeDisplay(assetManager,

    inputManager,

    audioRenderer,

    guiViewPort);

    nifty = niftyDisplay.getNifty();

    nifty.fromXml(“Interface/customListBox.xml”, “start”, new ControlCustomListBox());



    // attach the nifty display to the gui view port as a processor

    guiViewPort.addProcessor(niftyDisplay);



    }



    @Override

    public void simpleUpdate(float tpf) {



    ListBox<CustomListBoxItem> mylist = nifty.getCurrentScreen().findNiftyControl(“myCustomListBox”, ListBox.class);

    System.out.println("Item Selected: " + mylist.getSelection());



    }



    }[/java]



    I’ve read a lot and trying different things but nothing works. I can’t see what’s wrong.



    Any suggestions,
2 Likes

I had this problem as well before (at least it sounds like it’s the same problem) and it took a while to find the cause.

Finally I realised that styles can have functionality (interact tags) and that was the problem - the default listbox-item style (nifty-listbox-item) has the following interact and effect attributes:

[xml]<interact onClick=“listBoxItemClicked()” />

<effect>

<onCustom customKey=“focus” name=“colorBar” post=“false” color="#444f" neverStopRendering=“true” timeType=“infinite” />

<onCustom customKey=“select” name=“colorBar” post=“false” color="#444f" neverStopRendering=“true” timeType=“infinite” />

<onCustom customKey=“select” name=“textColor” post=“false” color="#fc0f" neverStopRendering=“true” timeType=“infinite” />

<onHover name=“colorBar” color="#444f" post=“false” neverStopRendering=“true” timeType=“infinite” inset=“1px”/>

<onClick name=“focus” targetElement="#parent#parent"/>

</effect>[/xml]



You probably only need the interact and the onClick (focus) effect to make it work.

1 Like

Thanks Tumaini,



I’ve added the code to the xml file and it works fine.

The final result:





And the final xml code:

[xml]<?xml version=“1.0” encoding=“UTF-8”?>

<nifty xmlns=“http://nifty-gui.sourceforge.net/nifty-1.3.xsd” xmlns:xsi=“http://www.w3.org/2001/XMLSchema-instance” xsi:schemaLocation=“http://nifty-gui.sourceforge.net/nifty-1.3.xsd http://nifty-gui.sourceforge.net/nifty-1.3.xsd”>

<useStyles filename=“nifty-default-styles.xml” />

<useControls filename=“nifty-default-controls.xml” />



<controlDefinition name=“customListBox-line”>

<panel childLayout=“horizontal” width=“100%” align=“center”>

<interact onClick=“listBoxItemClicked()” />

<effect>

<!–onCustom customKey=“focus” name=“colorBar” post=“false” color="#800f" neverStopRendering=“true” timeType=“infinite” /!–>

<onCustom customKey=“select” name=“colorBar” post=“false” color="#444f" neverStopRendering=“true” timeType=“infinite” />

<onCustom customKey=“select” name=“textColor” post=“false” color="#1aff" neverStopRendering=“true” timeType=“infinite” />

<onHover name=“colorBar” color="#444f" post=“false” neverStopRendering=“true” timeType=“infinite” inset=“1px”/>

<onClick name=“focus” targetElement="#parent#parent"/>

</effect>

<control id="#numeroNivel" name=“label” visibleToMouse=“true” font=“Interface/Fonts/UltraBold.fnt” align=“left” textHAlign=“left” height=“30px” width="" wrap=“true”/>

<image id="#icono" width=“25px” height=“25px” />



</panel>

</controlDefinition>



<!-- Screen -->



<screen id=“start” controller=“mygame.ControlCustomListBox”>

<layer id=“layer” backgroundColor="#40ff" childLayout=“center”>

<control name=“listBox” id=“myCustomListBox” width=“80%” height="
" vertical=“on” horizontal=“off” selection=“single” forceSelection=“false” displayItems=“10” viewConverterClass=“mygame.CustomListBoxViewConverter”>

<control name=“customListBox-line” controller=“de.lessvoid.nifty.controls.listbox.ListBoxItemController” />

</control>

</layer>

</screen>

</nifty>

[/xml]



I’ve made a couple of changes in the xml code to make the custom ListBox work as I expected (colors and so on…).

Thanks again because that issue was killing me!!!

hi,



where do u set the color white of the control element text?

My customlist entry are not highlighted grey, why?

where do u set this settings?



greetings

The white color is due I’m using a custom font created with the Font Editor implemented with the SDK. Then I use it for my customListBox-line definition. For the highlighted grey, you need to add to your customListBox some effects:



[xml]<controlDefinition name=“customListBox-line”>

<panel childLayout=“horizontal” width=“100%” align=“center”>

<interact onClick=“listBoxItemClicked()” />

<effect>

<!–onCustom customKey=“focus” name=“colorBar” post=“false” color="#800f" neverStopRendering=“true” timeType=“infinite” /!–>

<onCustom customKey=“select” name=“colorBar” post=“false” color="#444f" neverStopRendering=“true” timeType=“infinite” />

<onCustom customKey=“select” name=“textColor” post=“false” color="#1aff" neverStopRendering=“true” timeType=“infinite” />

<onHover name=“colorBar” color="#444f" post=“false” neverStopRendering=“true” timeType=“infinite” inset=“1px”/>

<onClick name=“focus” targetElement="#parent#parent"/>

</effect>

<control id="#numeroNivel" name=“label” visibleToMouse=“true” font=“Interface/Fonts/UltraBold.fnt” align=“left” textHAlign=“left” height=“30px” width="*" wrap=“true”/>

<image id="#icono" width=“25px” height=“25px” />



</panel>

</controlDefinition>[/xml]



[xml]font=“Interface/Fonts/UltraBold.fnt”[/xml]



[xml]<effect>

<!–onCustom customKey=“focus” name=“colorBar” post=“false” color="#800f" neverStopRendering=“true” timeType=“infinite” /!–>

<onCustom customKey=“select” name=“colorBar” post=“false” color="#444f" neverStopRendering=“true” timeType=“infinite” />

<onCustom customKey=“select” name=“textColor” post=“false” color="#1aff" neverStopRendering=“true” timeType=“infinite” />

<onHover name=“colorBar” color="#444f" post=“false” neverStopRendering=“true” timeType=“infinite” inset=“1px”/>

<onClick name=“focus” targetElement="#parent#parent"/>

</effect>[/xml]

1 Like