Multiple view for HasData (CellTable, CellList)

[d95sld95]

I have a requirement for my CellTable to be able to change the view
(representation) of my columns.

I need to provide a list view, detail view and thumbnail view of the
same data. Like MS Windows explorer where you can change how you look
at the files.

1) List view - simple rows with single line column values
2) Detail view - rows containing small thumbnail, multi-line column
values
3) Thumbnail view - big thumbnails laid out side-by-side

My current approach is a MultiHasDataWrapper class that holds 3
HasData implementations, 2 CellTable and 1 CellView (for the
thumbnails). The wrapper manages the Attach/Detach of the HasData
widgets so only one is attached at a time.

What I am looking for is any suggestion or experience with a similar
setup to learn from. Is there a better way?

[Jeff Larsen]

Why do you need to wrap it? Can't you just add each HasData to your DataProvider? AbstractDataProvider already supports having multiple HasData objects. 

[d95sld95]

The wrapping is mainly to manage the attache/detach from the DOM.
Since only one display (HasData) is shown at a time.

I did notice however that adding two HasData to
AbstractDataProvider.addDataDisplay(..) causes the
onRangeChanged(HasData<T> display) to be called twice. That is most
likely intentional but in my case I only have one of the displays
visible at a time. So loading the data once is sufficient. I was
hoping to deal with that in the wrapper as well.

[d95sld95]

I guess the AbstractDataProvider.addDataDisplay(..) suited for the use
case where two or more displays are provided using independent paging
and sorting. In my case I need the paging, sorting, selection, etc.
the same between the displays (list, detail and thumbnail).

[Eric Metcalf]

Using MVP...

Create a View interface that has ListView, DetailView, and
ThumbnailView implement it. Your presenter will take a default view
implementation. On change of view, apply the different implementation
to your view and update your view.

class Result {
String url;
String data1;
String data2;
...
}

interface View {
public displayResults(List<Result> results);
...
}

class ListView implements View {
displayResults(List<Result> results) {
for (result : results) {
// display each row.
}
}
...
}
...

class Presenter {
View currentView;

Presenter() {
this.listView = new ListView();
this.detailView = new DetailView();
this.currentView = listView; // Default.
}

onViewChange(enum viewType) {
switch viewType:
this.currentView = detailView;
...
view.displayResults(results); // Display results with new view.

[Eric Metcalf]

view.displayResults(results); // Display results with new view.

should be

currentView.displayResults(results); // Display results with new
view.

[George Agiasoglou]

Have you managed to create the thumbnailView and if yes, where you able to use all arrows keys to shift cell focus?

Thanks, 

G