LWUIT List Renderer, by Chen Fishbein

List is one of the most important widgets in LWUIT, we also discovered this is one of the most difficult Widget to understand.

In this post I will review the List Renderer to give you a better understanding what you can achive when you create your own Renderer to the List.

When we designed this widget we took the MVC separation model from Swing, that means we created a data model to encapsulate the data and a renderer to display the data items to the screen.

The renderer:
Let's have a closer look at the List Renderer, the Renderer is a simple interface with 2 methods:

public interface ListCellRenderer {

//This method is called by the List for each item, when the List paints itself.
public Component getListCellRendererComponent(List list, Object value, int index, boolean isSelected);

//This method returns the List animated focus.
public Component getListFocusComponent(List list);

} 

Now let's try to implement our own renderer's.
The most simple/naive implementation may choose to implement the renderer as follows:

public Component getListCellRendererComponent(List list, Object value, int index, boolean isSelected){
 return new Label(value.toString());
}

public Component getListFocusComponent(List list){
 return null;
} 

This will compile and work, but won't give you much, notice that you won't see the List selection moves on the List, this is just because the renderer returns a Label with the same style regardless if it's being selected or not.

Now Let's try to make it a bit more useful.

public Component getListCellRendererComponent(List list, Object value, int index, boolean isSelected){

       Label l = new Label(value.toString());
if (isSelected) {
              l.setFocus(true);
              l.getStyle().setBgTransparency(100);
          } else {
              l.setFocus(false);
              l.getStyle().setBgTransparency(0);
         }
         return l;
}    public Component getListFocusComponent(List list){
       return null;
}

In this renderer we set the Label.setFocus(true) if it's selected, calling to this method doesn't really gives the focus to the Label,
it is simply indicates to the LookAndFeel to draw the Label with fgSelectionColor and bgSelectionColor instead of fgColor and bgColor.
Then we call to Label.getStyle().setBgTransparency(100) to give the selection semi transparency and 0 for full transparency if not selected.
OK that's a bit more functional, but not very efficient that's because we create a new Label each time the method is called.

To make it more device friendly keep a reference to the Component or extend the Widget.

class MyRenderer extends Label{

public Component getListCellRendererComponent(List list, Object value, int index, boolean isSelected){
 setText(value.toString());
if (isSelected) {
   setFocus(true);
   getStyle().setBgTransparency(100);
} else {
 setFocus(false);
   getStyle().setBgTransparency(0);
}
return this;
}
 }
} 

Now Let's have a look at a more advanced Renderer (This was taken from the LWUIT Scrolling Demo)

class ContactsRenderer extends Container implements ListCellRenderer {

  private Label name = new Label("");
  private Label email = new Label("");
  private Label pic = new Label("");

  private Label focus = new Label("");

  public ContactsRenderer() {
      setLayout(new BorderLayout());
      addComponent(BorderLayout.WEST, pic);
      Container cnt = new Container(new BoxLayout(BoxLayout.Y_AXIS));
      name.getStyle().setBgTransparency(0);
      name.getStyle().setFont(Font.createSystemFont(Font.FACE_SYSTEM, Font.STYLE_BOLD, Font.SIZE_MEDIUM));
      email.getStyle().setBgTransparency(0);
      cnt.addComponent(name);
      cnt.addComponent(email);
      addComponent(BorderLayout.CENTER, cnt);

      focus.getStyle().setBgTransparency(100);
  }

  public Component getListCellRendererComponent(List list, Object value, int index, boolean isSelected) {

      Contact person = (Contact) value;
      name.setText(person.getName());
      email.setText(person.getEmail());
      pic.setIcon(person.getPic());
      return this;
  }

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

In this renderer we want to renderer a Contact Object to the Screen, we build the Component in the constructor and in the getListCellRendererComponent we simply updates the Labels texts according to the Contact Object.
Notice that in this renderer I return a focus Label with semi transparency, as mentioned before the focus component can be modified by using this method.
For example I can modify the focus Component to have an icon.

    focus.getStyle().setBgTransparency(100);
try {
   focus.setIcon(Image.createImage("/duke.png"));
   focus.setAlignment(Component.RIGHT);
} catch (IOException ex) {
      ex.printStackTrace();
} 

In the next post I will review the List Model

Chen