List vs list of Components

[Bryan Buchanan]

I had a custom ListCellRendered which had

setUIID("Underline");
focus = new Label("");
focus.setUIID("UnderlineSelected");

and

   @Override
    public Component getListFocusComponent(List list) {
        return focus;
    }

so when the List item is selected the visual appearance of that item changes. I've now changed the code to use a list of Components, as advised, where each component is generated from:

    Container makeComponent(final Product product) {

        int h = Display.getInstance().convertToPixels(8, false);

        Container c = new Container();
        c.setUIID("Underline");
        c.setLayout(new BoxLayout(BoxLayout.Y_AXIS));
        c.setScrollableY(false);

        Label code = new Label();
        code.setUIID("BoldLabel");
        code.setText(product.getCode());

        Label price = new Label();
        price.setUIID("BoldLabel");
        price.setText("$" + product.getPrice() + "/" + product.getUnit());

        Label desc = new Label();
        desc.setUIID("MyLabel");
        desc.setText(product.getDescription());

        Container c1 = new Container();
        c1.setLayout(new BorderLayout());
        c1.addComponent(BorderLayout.WEST, code);
        c1.addComponent(BorderLayout.EAST, price);

        c.add(c1);
        c.add(desc);

        c.setPreferredH(c.getPreferredH() < h ? h : c.getPreferredH());

        return c;

    }

where these components are added to a form in a loop. The UIID "Underline" that the container has renders OK. I've changed the Selected and Pressed styles for the "Underline" selector to be the same as the "UnderlineSelected" UIID I was originally using in the List implimentation. My problem is when one of these containers is selected/pressed there is no change in the visual appearance.

If I make the components buttons, such as:

   Container makeComponent(final ProductCategory pc) {

        int h = Display.getInstance().convertToPixels(8, false);

        Container c = new Container();
        c.setLayout(new BoxLayout(BoxLayout.Y_AXIS));
        c.setScrollableY(false);

        Button b = new Button(pc.getDescription());
        b.setUIID("Underline");
        b.setPreferredH(b.getPreferredH() < h ? h : b.getPreferredH());
        b.addActionListener(new ActionListener() {
            @Override
            public void actionPerformed(ActionEvent evt) {

                CommonContext.INSTANCE.setProductCategory(pc);

                GroupForm f = new GroupForm().init();
                f.setBackForm(CategoryForm.this);
                f.show();
            }

        });

        c.add(b);
        return c;

    }

this works because the button changes state.

What is the best way to get a state change in a Container which does not have a button (or has other stuff in addition to a button).

[Bryan Buchanan]

It seems that all that is needed to make one of the label components a button, style it as a label, and make it the lead component.

[Shai Almog]

Yep, it doesn't even need to have content to work as the lead.

[Bryan Buchanan]

Simply adding components seems to have zero impact in terms of scrolling performance vs a list, which is quite surprising, so you must be doing some trick stuff behind the scenes. It does make the code simpler, and by using the lead component paradigm, you can have a quite complex UI - especially differing height components which was always the limitation of the List. Well done (as usual !).

[Shai Almog]

The really cool part is the infinite scroll support that we use in PropertyCross etc.: https://www.codenameone.com/blog/property-cross-revisited.html