Tuesday, June 25, 2013

Contribution: FlexTable with Model support

Hi guys,

Recently I stumbled upon the high-performance CellTable. In particular, I like its model-based approach compared to FlexTable's or Grid's 't.setText(x,y,content)'. In my case, I don't care about performance (internal app) and I'd rather like to use all the Widget goodness that I'm used to. So, as a result, I added model support to FlexTable which then allows me to do the following:

ModelFlexTable<Model> table = new ModelFlexTable<Model>();

table.addColumn(new FlexColumn<Model>() {
    @Override
    public Widget createWidget(Model row) {
        return new Label(row.getName());
    }
}, "Name");

table.addColumn(new FlexColumn<Model>() {
    @Override
    public Widget createWidget(Model row) {
        return new InlineHTML("<div style='background-color:"
                + row.getColor() + "; width:50px;height:50px'></div>");
    }
}, "Color");

table.addColumn(new FlexColumn<Model>() {
    @Override
    public Widget createWidget(final Model row) {
        Button remove = new Button("Remove");
        remove.addClickHandler(new ClickHandler() {
            @Override
            public void onClick(ClickEvent event) {
                table.removeRow(row);
            }
        });
        return remove;
    }
});

table.addRow(new Model("red", "#ff0000"));
table.addRow(new Model("green", "#00ff00"));

where the Model class is:

public class Model {
    private final String name;
    private final String color;

    public Model(String name, String color) {
        this.name = name;
        this.color = color;
    }

    public String getName() {
        return name;
    }

    public String getColor() {
        return color;
    }
}


Maybe someone finds this useful. The downside is that the nice default styling of CellTable is missing, and other features of it like paging etc. So it's not a CellTable replacement but rather a nicer-to-use FlexTable if you have a model anyway.

Code is at https://gist.github.com/neothemachine/5857263

Cheers
Maik

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-web-toolkit+unsubscribe@googlegroups.com.
To post to this group, send email to google-web-toolkit@googlegroups.com.
Visit this group at http://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

No comments:

Post a Comment