Wednesday, April 13, 2011

Contain That List - Bringing Containers & List's Together

LWUIT's List's are a unique component in their adherence to the Swing concepts of MVC (model, view/controler, renderer). The difference between lists and container/component hierarchy can be summed up quite easily: "Lists are about showing data, containers are about showing widgets".
Widgets can be anything, tend to be interactive and have elaborate hierarchies.
Data can be presented in many ways and might come in very large volumes.

This is easy to illustrate with the features of list, e.g. a list can be horizontal or fixed in various ways (as you would do to data) but its very hard to implement something like that with the container/component model.

Naturally each approach has its use cases and advantages and sometimes its really hard to shoehorn one approach to the other but we are sometimes forced to do so due to design aesthetic e.g. variable sized list.
Allot of people had an issue with implementing our recommended approach since they wanted to share code that used the list model/renderer approach with code that used layout managers. While this was technically possible its not trivial and is a common enough use case to fold it into LWUIT which is exactly what we did.

ContainerList is effectively a container that tries to abide by the contract of the list component, it creates thin internal components that render themselves using the cell renderer. To achieve this we had to replace the ListCellRenderer (which is now deprecated but still working) with the new CellRenderer interface. The original ListCellRenderer methods accept a List component which doesn't make sense for the new component, the CellRenderer interface resolves these issues.

Generally the class is a plugin replacement for a list with the addition of quite a few features from container through the ability to set the layout to anything we want, e.g. to accomplish variable size lists just use BoxLayout on Y_AXIS. To accomplish a grid just use grid layout as we do in the LWUIT demo that I just committed (see the video above).

The newest version of the resource editor now includes support for this component in the GUI builder as well as some other nifty features such as marking the components that have code associated with them.


  1. nice & amzing list type

    but I notice in last svn

    in DefaultListCellRenderer

    method .setFocusPainted(true);

    not work!!

  2. Are you just invoking it on the rederer or within the get renderer component method in a subclass?
    Only the latter will work.
    Even then, setFocusPainted() will only paint the focus when the component HAS focus... The method is actually designed to disable focus painting even for a focused component.

  3. How can I change padding for Entry inner component Style?

  4. That depends on the component UIID. We don't support nested selectors like in CSS but since we allow defining any UIID you would like for a component and allow style inheritance you can just set the inner UIID's to anything and derive the original UIID by default.

  5. This comment has been removed by the author.