Nifty UI Custom listbox items could be selected only by clicking in empty item area

[jinjavamojo]

Hi. i created custom listbox control in nifty ui. Items are displayed. Every row contains image, text and checkbox. I can choose item only by clicking in empty space in item area. If i click on image of item, row will not selected. What i do wrong?

control(new ListBoxBuilder("detailListBox") {{

    onStartScreenEffect(fadeEffect);
    childClip(true);
    displayItems(4);

    width("100%");
    height("100%");
    childLayoutVertical();
    alignCenter();
    valignCenter();
    selectionColor(new Color(1.0f, 1.0f, 0.0f, 1.0f));
    selectionModeSingle();
    hideHorizontalScrollbar();
    showVerticalScrollbar();

    viewConverterClass(DetailRowViewConverter.class);
    control(new ControlBuilder("row"));
}});

public class DetailRowViewConverter implements ListBox.ListBoxViewConverter<DetailRow> {
    @Override
    public void display(final Element listBoxItem, final DetailRow item) {
        Nifty nifty = JMonkeyApp.nifty;

        Element detailIcon = listBoxItem.findElementById("#col-0");
        ImageRenderer imageRenderer = detailIcon.getRenderer(ImageRenderer.class);
        imageRenderer.setImage(nifty.getRenderEngine().createImage(nifty.getCurrentScreen(),item.iconPath,false));

        Element textElement = listBoxItem.findElementById("#col-1" );
        textElement.getRenderer(TextRenderer.class).setText(item.textLabel);

        CheckBox checkBox= listBoxItem.findNiftyControl("#col-2", CheckBox.class);
        checkBox.setChecked(item.checked);
    }

    @Override
    public int getWidth(final Element listBoxItem, final DetailRow item) {
        int width = 0;
        Element detailIcon = listBoxItem.findElementById("#col-0");
        ImageRenderer imageRenderer = detailIcon.getRenderer(ImageRenderer.class);

        TextRenderer textRenderer = listBoxItem.findElementById("#col-1").getRenderer(TextRenderer.class);
        CheckBox checkBox= listBoxItem.findNiftyControl("#col-2", CheckBox.class);

        width= 28 + textRenderer.getFont().getWidth(item.textLabel) + checkBox.getWidth();
        return width;
    }
}




public class DetailRow {
    public String[] data = new String[5];

    public String textLabel;
    public String iconPath;
    public boolean checked = false;

    public DetailRow(String iconPath, String textLabel , boolean checked) {
        this.textLabel = textLabel;
        this.iconPath = iconPath;
        this.checked = checked;
    }


    public DetailRow(final String ... param) {
        for (int i=0; i<param.length; i++) {
            data[i] = param[i];
        }
    }
}


ControlDefinitionBuilder rowControlBuilder = new ControlDefinitionBuilder("row") {{

    visibleToMouse();
    controller("com.nifty.controller.DetailListBoxItemController");

    inputMapping("de.lessvoid.nifty.input.mapping.MenuInputMapping");
    onCustomEffect(new EffectBuilder("changeImage") {{
        customKey("select");
        effectParameter("active", "niftyui/colors/yellow.png");
        effectParameter("inactive", "niftyui/colors/transparent.png");
        neverStopRendering(true);
        effectParameter("timeType", "infinite");

    }});
    onCustomEffect(new EffectBuilder("textColor") {{
        customKey("select");
        post(false);
        effectParameter("color", "#ff0f");
        neverStopRendering(true);
        effectParameter("timeType", "infinite");
    }});
    interactOnClick("listBoxItemClicked()");
    panel(new PanelBuilder() {{
        childLayoutHorizontal();
        width("100%");
        alignCenter();

        image(new ImageBuilder() {{
            childLayoutCenter();
            id("#col-0");
            inputMapping("de.lessvoid.nifty.input.mapping.MenuInputMapping");
            visibleToMouse(false);
            width("30%");
            height("75px");
            valign(VAlign.Center);
            visibleToMouse(true);
            align(Align.Left);
            interactOnClick("next()");
        }});
        text(new TextBuilder("#col-1") {{
            width("40%");
            valign(VAlign.Center);
            style("base-font");
            inputMapping("de.lessvoid.nifty.input.mapping.MenuInputMapping");
            visibleToMouse(false);
        }});
        control(new CheckboxBuilder("#col-2") {{
            childLayoutCenter();
            inputMapping("de.lessvoid.nifty.input.mapping.MenuInputMapping");
            style("detail-checkbox-style");
            height("32px");
            visibleToMouse(false);
            valign(VAlign.Center);
            width("30%");
            checked(false);
        }});
    }});
}};

public class DetailListBoxItemController extends ListBoxItemController {

    @Override
    public void listBoxItemClicked() {
        super.listBoxItemClicked();
    }

    @NiftyEventSubscriber(id="detailListBox")
    public void onListBoxSelectionChanged(final String id, final ListBoxSelectionChangedEvent<DetailRow> event) {
    }
}

[pspeed]

How to type code blocks

Markdown code block : Embed your code in 3 backticks, like this ```<optional language> //your code here ``` If you don’t know how to type a backtick, here are some related links : How to type a backtick on windows For mac users : On qwerty keyboards it’s the key right to the left shift (along with the " key). On azerty keyboards it’s the key over the right shift (along with the £ key). This uses highlight.js, but uses a subset of the supported langages (following code block uses java)…

[glh3586]

From the looks of it you set visibleToMouse twice on your image element and the second time you set it to true which would capture the mouse input if you clicked on it.

[jinjavamojo]

I try visibleToMouse(true) or visibleToMouse(false) of each item element but no result. List item still can be selected when clicked to empty area. I found that every child of item have no attachedInputControl. How to initialize them?