Simple working example of the Data Presentation Widget CellTable

755 views
Skip to first unread message

saklig

unread,
Jun 2, 2010, 5:52:20 AM6/2/10
to Google Web Toolkit
Hi,

I want to create a working example of the CellTable widget that was
recently released in GWT 2.1 M1.
I'm having a hard time finding documentation for this widget, as
apparently it has not been written yet :-/

What I've tried so far:


List<MyCellData> dataList = new ArrayList<MyCellData>();
dataList.add("Pizza", 15);
dataList.add("Car", 4);


ListViewAdapter<MyCellData> adapter = new
ListViewAdapter<MyCellData>();
CellTable<MyCellData> view = new CellTable<MyCellData>(5);
adapter.addView(view);

RootPanel.get("cellTableDiv").add(view);

view.setData(0, stringList.size(), dataList);

adapter.refresh();

private class MyCellData{
private String name;
private int numberOfSomething;

public MyCellData(String name, int numberOfSomething){
this.name = name;
this.numberOfSomething = numberOfSomething;
}

public String getName(){
return name;
}

public int getNumberOfSomething(){
return numberOfSomething;
}
}



I'm not sure what to insert as parameter in the view.setData .

Could someone pleas give me a pointer.... or a map :-)

Thanks!

Andrew

unread,
Jun 2, 2010, 11:18:31 PM6/2/10
to Google Web Toolkit
The following code is what I'm woking on, hope it can help you:

protected void init() {
VerticalPanel container = new VerticalPanel();
initWidget(container);

int pageSize = 10;
CellTable<User> cellTable = new CellTable<User>(pageSize);
setColumns(cellTable);
setSelectionModel(cellTable);

setDataSize(cellTable);
int pageStart = 0;
loadData(pageStart, pageSize, cellTable);

SimplePager<User> pager = createPager(cellTable);

container.add(cellTable);
container.add(pager);
}

private SimplePager<User> createPager(final CellTable<User>
cellTable) {
SimplePager<User> pager = new SimplePager<User>(cellTable,
SimplePager.TextLocation.CENTER) {
public void onRangeOrSizeChanged(PagingListView<User> listView) {
loadData(listView.getPageStart(), listView.getPageSize(),
listView);
super.onRangeOrSizeChanged(listView);
}
};
return pager;
}

private void setColumns(CellTable<User> cellTable) {
cellTable.addColumn(new TextColumn<User>() {
@Override
public String getValue(User user) {
return user.getName();
}
}, new TextHeader("Name"));

cellTable.addColumn(new TextColumn<User>() {
@Override
public String getValue(User user) {
return user.getLocation();
}
}, new TextHeader("Location"));
}

private void setSelectionModel(CellTable<User> cellTable) {
final SingleSelectionModel<User> selectionModel = new
SingleSelectionModel<User>();
SelectionChangeHandler selectionHandler = new
SelectionChangeHandler() {
@Override
public void onSelectionChange(SelectionChangeEvent event) {
User user = selectionModel.getSelectedObject();
Window.alert(user.getId() + ": " + user.getName());
}
};
selectionModel.addSelectionChangeHandler(selectionHandler);
cellTable.setSelectionEnabled(true);
cellTable.setSelectionModel(selectionModel);
}

private void setDataSize(final PagingListView<User> cellTable) {
employeeRequest.countUsers(new AsyncCallback<Integer>() {
public void onFailure(Throwable caught) {
Window.alert("Request failure: " + caught.getMessage());
}

public void onSuccess(Integer result) {
cellTable.setDataSize(result, true);
}
});
}

private void loadData(int start, int size,
final PagingListView<User> cellTable) {
employeeRequest.getUsers(start, size,
new AsyncCallback<PagingData<User>>() {
public void onFailure(Throwable caught) {
Window.alert("Request failure: " + caught.getMessage());
}

public void onSuccess(PagingData<User> result) {
cellTable.setData(result.getStart(),
result.getLength(), result.getValues());
}
});
}
Message has been deleted
Message has been deleted

Paul Stockley

unread,
Jun 3, 2010, 8:14:37 AM6/3/10
to Google Web Toolkit
Sorry my message got truncated:

Your over complicating it. You should just subclass
AsyncListViewAdapter such as:

protected class residentAsyncAdapter extends
AsyncListViewAdapter<ResidentListDO>{
@Override
protected void onRangeChanged(ListView<ResidentListDO> view) {
Range newRange = view.getRange();

updateViewData(newRange.getStart(), newRange.getLength(), <a list
of data for the requested range>);
}
}

Then add the table as a view of the adapter

CellTable<ResidentListDO> residentTable = new
CellTable<ResidentListDO>(5);

Column<ResidentListDO, String> unitColumn = new
Column<ResidentListDO, String>(new TextCell()) {
@Override
public String getValue(ResidentListDO object) {
return object.getUnit();
}
};

residentTable.addColumn(unitColumn, "Unit");

SimplePager<ResidentListDO> thePager = new
SimplePager<ResidentListDO>(residentTable);
residentTable.setPager(thePager);

mainGridContainer.add(residentTable);
pagerContainer.add(thePager);

residentAsyncAdapter residentTableAdapter = new
residentAsyncAdapter();
residentTableAdapter.addView(view.residentTable);
residentTableAdapter.updateDataSize(<size of data set>, true);

If you have a list on the client already for the data set it is even
easier. Instead of using
AsyncListViewAdapter use ListViewAdapter as follows:

List<ResidentListDO> ourList = new ArrayList<ResidentListDO>();
ListViewAdapter<ResidentListDO> residentTableAdapter = new
ListViewAdapter<ResidentListDO>(ourList );
residentTableAdapter.addView(view.residentTable);
//No need to call updateDataSize

On Jun 3, 7:52 am, Paul Stockley <pstockl...@gmail.com> wrote:
> Your making it overly complicated:
>
> For the case where you have all the data in a list already:
>
>             Column<ResidentListDO, String> unitColumn = new
> Column<ResidentListDO, String>(new TextCell()) {
>                 @Override
>                 public String getValue(ResidentListDO object) {
>                         return object.getUnit();
>                 }
>                 };
>
>                 Column<ResidentListDO, String> nameColumn = new
> Column<ResidentListDO, String>(new TextCell()) {
>                 @Override
>                 public String getValue(ResidentListDO object) {
>                         return object.getName();
>                 }
>                 };
>
>                 residentTable.addColumn(unitColumn, "Unit");
>                 residentTable.addColumn(nameColumn, "Name");
>
>                 SimplePager<ResidentListDO> thePager = new
> SimplePager<ResidentListDO>(residentTable);
>                 residentTable.setPager(thePager);
>
>                 mainGridContainer.add(residentTable);
>                 pagerContainer.add(thePager);
>
>                residentTableAdapter = new residentAsyncAdapter();

saklig

unread,
Jun 3, 2010, 10:12:54 AM6/3/10
to Google Web Toolkit
This helped me a lot :-)
Thanks guys!

Ed

unread,
Jun 3, 2010, 10:15:21 AM6/3/10
to Google Web Toolkit
I don't know if I like this whole Data View pattern the it's used in
the above examples.
I think the view and data should be separated, as such that the widget
should not contain a Generic that is indicating the contained data
object.
I thinks you should use something like a a ListViewer with Crud and
sort actions and the ListViewer will contain a display element (a
wrapped Table for example) that is used to sync the display and data.
This is a very short description, but this is a bit how I use it and
it works nice, and I have used it for long now in complex situations.
This pattern isn't GWT specific and can also be used in any GUI
framework. It's the display element that is GWT specific.
Another note: be careful using data providers like "give me data of
row,colum 1,2" as the question is: " what will you return? a widget/
text/HTML ?... (I used that in the past)..
Better is to use a more flexible push solution: pass in a Editor,
something like a Row/Table editor and use that in a specific
DataEditor class to set the data. The data editor can then choose to
set a widget/text/html snippet which might be different for very
cell...

Just a few thoughts that popped up... Maybe people can use it...
I would love to give more insight if I every get the time :(.... (my
problem always :()


Ed

unread,
Jun 3, 2010, 3:29:02 PM6/3/10
to Google Web Toolkit
Owww, what I forget to mention which is essential in my last post:
The row/table editor (whatever you prefer) can be used to set the
content of a cell by inserting a widget/text/html.
This boosts performance as you can easily set a simple text in case of
a simple text you want to show, or set some html content... or if you
really need it, a widget.
Why this is important?: just like GWT mentions, in case of table that
contains a lot of data, be careful using widgets that exactly don't do
anything as they are relative expensive... (see IO session 2010, UI
overhaul)...

I just like to separate things a bit more and use more general gui
design patterns and add some advanced "push" solutions like explained
above as they are proven to work well in other app's... and I adapted
them to perform well in gwt (and looked at other frameworks like Gxt
how sorting is performed directly on the DOM) ... I am not very
familiar yet with the data GWT presentation widget concepts, but I
think they give a very good start to realize Data View separation

Alek

unread,
Jun 4, 2010, 4:29:50 AM6/4/10
to Google Web Toolkit
Spring Roo has some example for last milestone.

But compared with above examples it looks like horrible :)

Stefan Bachert

unread,
Jun 5, 2010, 9:38:40 AM6/5/10
to Google Web Toolkit
Hi Alek,

did you make Spring Roo run with GWT?
I tried the "petclinic" sample.
Some stuff (enums, boolean) is not supported, and I could not create a
working war.
Just development mode is working.


Did you get more out of Spring roo, yet?


Stefan Bachert
http://gwtworld.de

Subhrajyoti Moitra

unread,
Jun 5, 2010, 10:20:48 AM6/5/10
to google-we...@googlegroups.com
I also could not get the initial example in Roo+GWT running.
Does any one know of how to go about using Roo with GWT.

Thanks,
Subhro.


--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To post to this group, send email to google-we...@googlegroups.com.
To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.


Stefan Bachert

unread,
Jun 6, 2010, 11:13:49 AM6/6/10
to Google Web Toolkit
Hi Subhrajyoti,

The best I found was
http://www.emforge.net/web/akakunin/blogs/-/blogs/petclinic-gwt-application-in-less-then-30-minutes

However, the following thing I did not make run
* to deploy a working war
* to start the mobile variant

At the moment Spring Roo 1.1M1 is not even usable for long term
development. It is just to have a glance what the future may bring.
I am hoping to a further release which is more stable and more useful.

Stefan Bachert
http://gwtworld.de


On 5 Jun., 16:20, Subhrajyoti Moitra <subhrajyo...@gmail.com> wrote:
> I also could not get the initial example in Roo+GWT running.
> Does any one know of how to go about using Roo with GWT.
>
> Thanks,
> Subhro.
>
> On Sat, Jun 5, 2010 at 7:08 PM, Stefan Bachert <stefanbach...@yahoo.de>wrote:
>
> > Hi Alek,
>
> > did you make Spring Roo run with GWT?
> > I tried the "petclinic" sample.
> > Some stuff (enums, boolean) is not supported, and I could not create a
> > working war.
> > Just development mode is working.
>
> > Did you get more out of Spring roo, yet?
>
> > Stefan Bachert
> >http://gwtworld.de
>
> > On 4 Jun., 10:29, Alek <akorotenk...@gmail.com> wrote:
> > > Spring Roo has some example for last milestone.
>
> > > But compared with above examples it looks like horrible :)
>
> > --
> > You received this message because you are subscribed to the Google Groups
> > "Google Web Toolkit" group.
> > To post to this group, send email to google-we...@googlegroups.com.
> > To unsubscribe from this group, send email to
> > google-web-tool...@googlegroups.com<google-web-toolkit%2Bunsu...@googlegroups.com>
> > .

Alek

unread,
Jun 6, 2010, 3:51:38 PM6/6/10
to Google Web Toolkit
I used last Spring Roo milestone, installed it according to the
official manuals.
I just typed:

script -f samples/expenses.roo

And then I built application with Maven.
Everything should work.

PS Really, this approach buit with patterns... so smart... but it's
only first milestone. So now I prefer use only CellTable without
valuestore package.

Regards

On 5 июн, 16:38, Stefan Bachert <stefanbach...@yahoo.de> wrote:
> Hi Alek,
>
> did you make Spring Roo run with GWT?
> I tried the "petclinic" sample.
> Some stuff (enums, boolean) is not supported, and I could not create a
> working war.
> Just development mode is working.
>
> Did you get more out of Spring roo, yet?
>
> Stefan Bacherthttp://gwtworld.de

bond

unread,
Jun 17, 2010, 7:15:32 AM6/17/10
to Google Web Toolkit
Hi,
someone can post a complete example of use of Data presentation
Widget?
it'll be also welcome an example of server side.

Thanks

Best regards

On 3 Giu, 14:14, Paul Stockley <pstockl...@gmail.com> wrote:
> Sorry my message got truncated:
>
> Your over complicating it. You should just subclass
> AsyncListViewAdapter such as:
>
>         protected class residentAsyncAdapter extends
> AsyncListViewAdapter<ResidentListDO>{
>                 @Override
>                 protected void onRangeChanged(ListView<ResidentListDO> view) {
>                         Range newRange = view.getRange();
>
>                         updateViewData(newRange.getStart(), newRange.getLength(), <a list
> ofdatafor the requested range>);
>                 }
>         }
>
> Then add the table as a view of the adapter
>
> CellTable<ResidentListDO> residentTable = new
> CellTable<ResidentListDO>(5);
>
>   Column<ResidentListDO, String> unitColumn = new
> Column<ResidentListDO, String>(new TextCell()) {
>                 @Override
>                 public String getValue(ResidentListDO object) {
>                         return object.getUnit();
>                 }
>
> };
>
> residentTable.addColumn(unitColumn, "Unit");
>
> SimplePager<ResidentListDO> thePager = new
> SimplePager<ResidentListDO>(residentTable);
> residentTable.setPager(thePager);
>
> mainGridContainer.add(residentTable);
> pagerContainer.add(thePager);
>
> residentAsyncAdapter residentTableAdapter = new
> residentAsyncAdapter();
> residentTableAdapter.addView(view.residentTable);
> residentTableAdapter.updateDataSize(<size ofdataset>, true);
>
> If you have a list on the client already for thedataset it is even
> easier. Instead of using
> AsyncListViewAdapter use ListViewAdapter as follows:
>
> List<ResidentListDO> ourList = new ArrayList<ResidentListDO>();
> ListViewAdapter<ResidentListDO> residentTableAdapter = new
> ListViewAdapter<ResidentListDO>(ourList );
> residentTableAdapter.addView(view.residentTable);
> //No need to call updateDataSize
>
> On Jun 3, 7:52 am, Paul Stockley <pstockl...@gmail.com> wrote:
>
> > Your making it overly complicated:
>
> > For the case where you have all thedatain a list already:
Reply all
Reply to author
Forward
0 new messages