Namespaces

Variants
Actions

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.

Revision as of 09:17, 27 January 2014 by croozeus (Talk | contribs)

Understanding LWUIT List

From Wiki
Jump to: navigation, search

This article explains the LWUIT List Component. This component is usually the hardest to understand out of all the LWUIT components. This article is intended for beginners so that they can understand how it works.

Article Metadata
Code ExampleCompatibilityArticle
Created: arunkam (04 Feb 2014)
Last edited: croozeus (27 Jan 2014)

Contents

Introduction

LWUIT list is one of the most often used component, at the same time , it is the least understood component. This is primarily because a LWUIT list makes use of MVC model.

MVC Model

MVC stands for Model - View - Controller.

1.) Model - Model contains the data that is to be displayed.

2.) View - The view contains the logic that renders the list on the screen.

3.) Controller - Controller coordinates the Model and View

In LWUIT List, the Model is a List Model, View is a List Cell Renderer and Controller is the List itself.

Default Model and Renderer

While this might seem like a complex set of process to be taken care of for creating a list, however, LWUIT has a Default List Model and Default List Cell Renderer that is suitable for most common operations.

The default list model along with the default list cell renderer is created in the background for a simple list that displays a string at each row.

List l = new List();
 
l.addItem("Apple");
l.addItem("Orange");
l.addItem("Mangoes");
l.addItem("Peaches");

This automatically creates a simple list , with a default list model and a default list cell renderer, with each row containing one entry. The entries apple, orange ,mangoes and peaches are added into the default list model.

Simple List

A Custom Designed list

We will now talk about how to create a custom list which is shown in the figure.

A Complex List

List Model

The list model contains an image,a heading string and a description string. We will have all these in a class.

public class ModelData
{
Image display_pic;
String name;
String description;
 
public ModelData(String heading, String description, String imgLocation)
{
this.name = heading;
this.description = description;
try
{
this.display_pic = Image.createImage(imgLocation);
} catch (IOException ex)
{
ex.printStackTrace();
}
}
 
public Image getDisplay_pic()
{
return display_pic;
}
 
public void setDisplay_pic(Image display_pic)
{
this.display_pic = display_pic;
}
 
public String getName()
{
return name;
}
 
public void setName(String name)
{
this.name = name;
}
 
public String getDescription()
{
return description;
}
 
public void setDescription(String description)
{
this.description = description;
}
}

Now we can use an array/vector of objects of this class as our list model.

List Renderer

We will now create our List cell Renderer. To do this, we need to implement ListCellRenderer interface.

class myRenderer implements ListCellRenderer
{
 
public Component getListCellRendererComponent(List list, Object value, int index, boolean isSelected)
{
}
 
public Component getListFocusComponent(List list)
{
}
}


The getListCellRendererComponent method is called for painting 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 that.

class myRenderer extends Container implements ListCellRenderer
{
myRenderer()
{
 
}
public Component getListCellRendererComponent(List list, Object value, int index, boolean isSelected)
{
return this;
}
public Component getListFocusComponent(List list)
{
return this;
}
}

The image shows how each entry in the row should look like. We will implement this within our renderer using layouts.

A Single Row
class myRenderer extends Container implements ListCellRenderer
{
Label dp;
Label heading;
Label description;
myRenderer()
{
this.setLayout(new BoxLayout(BoxLayout.X_AXIS));
Container left = new Container();
Container right = new Container();
//Left Side
dp = new Label();
left.addComponent(dp);
//Right Side
heading = new Label();
description = new Label();
right.setLayout(new BoxLayout(BoxLayout.Y_AXIS));
right.addComponent(heading);
right.addComponent(description);
//Adding them to the main container
this.addComponent(left);
this.addComponent(right);
}
public Component getListCellRendererComponent(List list, Object value, int index, boolean isSelected)
{
return this;
}
public Component getListFocusComponent(List list)
{
return this;
}
}

In the above code, we have managed to create the necessary layout we need. We will now map the data to the components in this container. This is done in the getListCellRendererComponent Method.

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

For rendering each row, this method is called. The present index which is being rendered is available in the index variable. The value contains the data for that particular index, taken from the list model. We will typecast the value variable to our need and use it. The resulting method is shown below.

public Component getListCellRendererComponent(List list, Object value, int index, boolean isSelected)
{
ModelData m = (ModelData) value;
dp.setIcon(m.getDisplay_pic());
heading.setText(m.getHeading());
description.setText(m.getDescription());
return this;
}

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.
myComplexList.setModel(dlm);
// Setting the renderer.
myComplexList.setRenderer(new myRenderer());

Interacting with the List

You can use either a Selection Listener or an ActionListener in a list for interacting with it. Action Listeners are more commonly used , especially in touch devices.

We use the method getSelectedItem() for getting the currently selected item.

 myComplexList.addActionListener(new ActionListener()
{
public void actionPerformed(ActionEvent evt)
{
ModelData selection = (ModelData) myComplexList.getSelectedItem();
System.out.println(selection.getName());
 
}
});


Precautions & Limitations

While Lists are very powerful (Million Entry List), it is important to keep in mind that it has its own 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 :

http://codenameone.blogspot.in/2008/07/lwuit-list-renderer-by-chen-fishbein.html

http://www.codenameone.com/3/post/2013/12/deeper-in-the-renderer.html

Note.pngNote: Codename one is developed by the same engineers who designed and developed LWUIT. Codename One is similar to LWUIT in many ways. Hence some of the concepts in Codename One are applicable to LWUIT as well.

Summary

This article is intended to give an introduction to LWUIT lists for beginners.

306 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×