Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.
Understanding LWUIT List
This article provides an introductory overview to the Lightweight User Interface Toolkit (LWUIT) List component.
LWUIT List is one of the most often used components of LWUIT. At the same time, it is the least understood component. This is primarily because a LWUIT list makes use of the MVC model.
MVC stands for Model - View - Controller.
- Model - The Model contains the data that is to be displayed.
- View - The View contains the logic that renders the list on the screen.
- Controller - The Controller coordinates the Model and the View.
In LWUIT List, the Model is a List Model, View is a ListCellRenderer and the Controller is the List itself.
Default Model and Renderer
While this might seem like a complex set of processes that need to be taken care of to create a list, LWUIT has a default List Model and default ListCellRenderer that are suitable for most common operations.
The default List Model and the default ListCellRenderer are created in the background for simple lists that display a string at each row.
This automatically creates a simple list, with a default list model and a default ListCellRenderer, each row containing one entry. The entries apple, orange, mangoes and peaches are added into the default list model.
We will now talk about how to create the custom list shown in the figure.
The list model contains an image, a heading string and a description string. We will put all these into a class.
public class ModelData
public ModelData(String heading, String description, String imgLocation)
this.name = heading;
this.description = description;
this.display_pic = Image.createImage(imgLocation);
} catch (IOException ex)
public Image getDisplay_pic()
public void setDisplay_pic(Image display_pic)
this.display_pic = display_pic;
public String getName()
public void setName(String name)
this.name = name;
public String getDescription()
public void setDescription(String description)
this.description = description;
Now we can use an array/vector of objects of this class as our list model.
We will now create our ListCellRenderer. To do this, we need to implement the ListCellRenderer interface.
The getListCellRendererComponent method is called to paint each row in the list. This method is expected to return a component each time it is called. Since memory allocation is a time-consuming process, it is not advisable to create a new component and return that. We will instead extend a pre-existing component and return it instead.
The image shows what each entry in the row should look like. We will implement this within our renderer using layouts.
class myRenderer extends Container implements ListCellRenderer
Container left = new Container();
Container right = new Container();
dp = new Label();
heading = new Label();
description = new Label();
//Adding them to the main container
public Component getListCellRendererComponent(List list, Object value, int index, boolean isSelected)
public Component getListFocusComponent(List list)
In the above code, we created the necessary layout. We will now map the data to the components in this container. This is done in the getListCellRendererComponent method.
This method is called to render each row. The present index which is being rendered is available in the index variable. The value variable contains the data for that particular index, taken from the list model. We will typecast the value variable as needed and then use it. The resulting method is shown below.
Now everything is ready. We just need to populate the list with a few entries. I have added a few dummy entries along with a few sample pictures.
List myComplexList = new List();
//Creating the data
ModelData entries = new ModelData
new ModelData("John", "Lives in New York", "/images/1.png"),
new ModelData("Jim", "He works in a bank.", "/images/2.png"),
new ModelData("Jack", " Lives in Australis", "/images/3.png"),
new ModelData("Jill", "Works with the Police", "/images/4.png")
//Creating a Default List Model and putting the data in it.
DefaultListModel dlm = new DefaultListModel(entries);
// Setting the model.
// Setting the renderer.
Interacting with the List
You can use either a SelectionListener or an ActionListener to interact with a list. Action Listeners are more commonly used, especially in touch devices.
We use the method getSelectedItem() to get the currently selected item.
Precautions & Limitations
While Lists are very powerful (Million Entry List), it is important to keep in mind that a list has limitations.
A List row can have only a fixed width/height. Hence complex animations/expansion of a particular row in a list is not possible. A component called Container List does not have this problem.
The following articles are worth reading :
This article is intended to give an introduction to LWUIT lists for beginners.