Adding icons to each list item in a List - java-me

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());

Answer 2

You need to place the image data in the model or provide some way for the renderer to extract and apply that data. See samples for this in the LWUIT demo where you have both the renderer demo or the Scrolling demo which show off lists that have icons and various entry layouts.

Answer 3

I have used newer 'Generic List Cell Renderer' to produce thumbnail(icons) in a list. I found it easier to implement than other options for list rendering. Following link has example code to show how to create list using this technique.
http://codenameone.blogspot.in/2011/03/list-rendering-easy-way-generic-list.html
To show thumbnail i did the following which is pretty much boilerplace in LWUIT.
private Container createGenericRendererContainer() throws IOException {
Container c = new Container(new BorderLayout());
c.setUIID("ListRenderer");
Label xname = new Label("");
Label description = new Label();
//create box layout to contain name and description
Container cnt = new Container(new BoxLayout(BoxLayout.Y_AXIS));
xname.setName("Name");
xname.getStyle().setBgTransparency(0);
xname.getStyle().setFont(Font.createSystemFont(Font.FACE_SYSTEM, Font.STYLE_BOLD, Font.SIZE_MEDIUM));
description.setFocusable(true);
description.setName("Description");
cnt.addComponent(xname);
cnt.addComponent(description);
c.addComponent(BorderLayout.CENTER, cnt);
//thumbail or icon goes here. we add to the left in our borderlayout
Button thumb = new Button(Image.createImage("/res/home-work.png"));
c.addComponent(BorderLayout.WEST, thumb);
return c;
}