Adding icons to each list item in a List

Question

I want to add an icon to each items in a list an image. This is my code for creating list :

    Form f3=new Form("DEMO FORM");
    f3.setScrollable(true);
    f3.setLayout(new BorderLayout());
    f3.setLayout(new BoxLayout(BoxLayout.Y_AXIS));


     String items[] = {"one","two","three","four"};
     DefaultListModel myListModel = new DefaultListModel(items);
     List lst=new List(myListModel);

    f3.addComponent(lst);
    f3.show();

How can I do that?

Answer 1

Use this List Renderer

import com.sun.lwuit.Component;
import com.sun.lwuit.Font;
import com.sun.lwuit.Image;
import com.sun.lwuit.Label;
import com.sun.lwuit.List;
import com.sun.lwuit.list.ListCellRenderer;
import com.sun.lwuit.plaf.Border;
import java.io.IOException;
public class MyListRenderer extends Label implements ListCellRenderer {

    private Image[] images;
    /** Creates a new instance of MyListRenderer */

    public MyListRenderer() {
        super("");
        images = new Image[2];
        try {
            images[0] = Image.createImage("/on.png");
            images[1] = Image.createImage("/off.png");
        } catch (IOException ex) {
            ex.printStackTrace();
        }
    }

    public Component getListCellRendererComponent(List list, Object value, int index, boolean isSelected) {
        setText(value.toString());
        //getStyle().setFont(Font.createSystemFont(Font.FACE_SYSTEM, Font.STYLE_BOLD,Font.SIZE_MEDIUM));
        if (isSelected) {
            setFocus(true);
            setIcon(images[1]);
            getStyle().setBgColor(0xffcc99);
            getStyle().setBgTransparency(55);
            getStyle().setBorder(Border.createRoundBorder(15, 15, 0xff9900, true));
        } else {
            setFocus(false);
            setIcon(images[0]);
            getStyle().setBgColor(0xffffff);
            getStyle().setFgColor(0x000000);
            getStyle().setBorder(Border.createRoundBorder(15, 15, 0xffcc99, true));
            getStyle().setBgTransparency(255);
        }
        return this;
    }

    public Component getListFocusComponent(List list) {
        setIcon(images[1]);
        setText("");
        getStyle().setBgColor(0x0000ff);//no effect
        setFocus(true);
        getStyle().setBgTransparency(100);
        return this;
    }
}

You can remove unwanted embelishments from this renderer: color changes on focus, etc, ...I have also given code for two different icons for the unselected and selected list item. Then set the renderer of the list like this:

lst.setListCellRenderer(new MyListRenderer());