Thursday, September 24, 2009

New Components In LWUIT


We are working full steam ahead towards LWUIT 1.3 and have gotten several of the key features in LWUIT 1.3 already into the SVN. We implemented a tree component very similar to the one mentioned in a previous post in this blog and now I committed yet another major component a table component.
Unlike our list which we discussed several times before this time we chose to go with the composite approach for building elaborate components. Our general thought process is that these components are elaborate and would include complex editing, while the list is more of a selection component designed for scalability.

Here is a minor sample of using the standard table component, it should be pretty self explanatory:
final Form f = new Form("Table Test");
TableModel model = new DefaultTableModel(new String[] {"Col 1", "Col 2", "Col 3"}, new Object[][] {
{"Row 1", "Row A", "Row X"},
{"Row 2", "Row B", "Row Y"},
{"Row 3", "Row C", "Row Z"},
{"Row 4", "Row D", "Row K"},
}) {
public boolean isCellEditable(int row, int col) {
return col != 0;
}
};
Table table = new Table(model);
table.setScrollableX(true);
f.setLayout(new BorderLayout());
f.addComponent(BorderLayout.CENTER, table);
f.show();
However, IMO the more "interesting" aspect of the table is the table layout and its ability to create rather unique layouts relatively easily similarly to HTML's tables. You can use the layout constraints (also exposed in the table class) to create spanning and elaborate UI's.
In order to customize the table cell behavior you can now derive the table to create a "renderer like" widget, however unlike the list this component is "kept" and used as is. This means you can bind listeners to this component and work with it as you would with any other component in LWUIT.

10 comments:

  1. This comment has been removed by the author.

    ReplyDelete
  2. which provide for the release of LWUIT 1.3?

    ReplyDelete
  3. @Mike The LWUIT table can scroll on Y but it can also narrow itself to fit on the screen.
    I currently defaulted it to use TextField's of one row for single line editing but wrapping can probably be achieved by using TextArea's in the createCell method.

    If you have a consistent reproducible exception with code that you think is valid please file an issue and I'll take a look at it.

    ReplyDelete
  4. I think i figured it out;
    I set a table layout for the table.

    table.setLayout(new TableLayout(0,2));

    ReplyDelete
  5. Yes, there is a bug when calling the setModel() method of the Table class more than once.

    You get the following exception.

    java.lang.NullPointerException: 0
    - com.sun.lwuit.table.TableLayout.removeLayoutComponent(), bci=9802688
    - com.sun.lwuit.Container.removeComponentImpl(), bci=10
    - com.sun.lwuit.Container.removeComponent(), bci=2
    - com.sun.lwuit.Container.removeAll(), bci=65
    - com.sun.lwuit.table.Table.updateModel(), bci=39
    - com.sun.lwuit.table.Table.setModel(), bci=6

    ReplyDelete
  6. This comment has been removed by the author.

    ReplyDelete
  7. MoD,

    I tried the same thing and it also worked for me.

    table.setLayout(new TableLayout(0, columnNames.length));
    table.setModel(new DefaultTableModel(columnNames, data));

    You must make sure that you call setLayout before setModel This seems like a temporary fix to this bug.

    BTW, great framework.

    ReplyDelete
  8. But the problem with this is, i couldn't create dynamic tables (i need to update the table content without removing & creating objects. (rows&columns changes))

    ReplyDelete
  9. Hi there. I've been using LWUIT for a while now and i really love the possibilities it provides. But now i don't really know how to go about doing something i want to do.

    I want a form with a game map where some of the cells of the tile will be cities the player can select.

    The way i've done it was to set a grid layout on the form, and add all the Labels with every tile of the map. Then i add a focus listener that changes the color of the border of the focused Label. Somehow this doesn't really work.

    I have a screenshot here: http://img163.imageshack.us/img163/4821/mobileapplication1sonye.png

    The border is a line border with 1px width. The padding for the labels is 1px wide all around and the margin is 0px.
    But the labels have empty space around them and after i change the selection, the whole thing freezes.

    How would you make a game map with selectable cells?

    ReplyDelete