CellList -- is prefilled sizing possible?

[aarnott]

Hi there,

I've been using the SmartGWT library mainly for the ListGrid (which is
similar to the CellList). The problem is, the SMartGWT library comes
with a massive footprint (even when it is gzipped). The performace of
our site has been terrible ever since we introduced the ListGrid, but
on the other hand, it is pretty much a requirement.

I was very excited to see the CellList Widget bundled with the 2.1
release, but looking at the samples, I find the fetch behavior a
little awkward. First the List may fetch, say, 50 rows. The scrollbar
will represent a list with 50 rows. When you scroll to the bottom, new
rows are fetched and the scrollbar contents area increases to
accommodate the new rows. This variable sizing seems awkward.

I know the total number of rows my list can have. Is there any way I
can pass this information on to the CellGrid and have it prefill the
unseen areas with blank space and update them when they are scrolled
to?

Thanks,

Andrew

[John LaBanca]

The scroll bar is separate from the CellList.  Its actually an implementation of a pager and is more a proof of concept until we have a proper infinite scrollbar.

You can prepopulate a CellList with nulls or default values until you have data available.  As far as populating them when you scroll into view, you would need to implement your own scrolling pager to figure out which data should be visible, but you can push data into a CellList at any time.  At some point we will probably implement an infinite scrollbar, but it isn't on the agenda in the near term.

Thanks,
John LaBanca
jlab...@google.com

--
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.

[aarnott]

Thanks for your quick (and detailed) response; I really appreciate it.

From what I can tell looking at the API, the pager is built right into
the CellList (as opposed to being a separate widget that can be
optionally provided). Am I missing something? I don't mind mucking
around with the source code (I've done it already with
SplitLayoutPanel, which has a hardcoded splitter width/height that I
needed to change). I just want to make sure that I go about this the
right way.

I am fairly determined to get rid of external dependencies to SmartGWT
for many reasons. So it is very likely I will need to implement some
form of infinite scrollbar.

Thanks,
Andrew Arnott

On Nov 18, 4:02 pm, John LaBanca <jlaba...@google.com> wrote:
> The scroll bar is separate from the CellList.  Its actually an
> implementation of a pager and is more a proof of concept until we have a
> proper infinite scrollbar.
>
> You can prepopulate a CellList with nulls or default values until you have
> data available.  As far as populating them when you scroll into view, you
> would need to implement your own scrolling pager to figure out which data
> should be visible, but you can push data into a CellList at any time.  At
> some point we will probably implement an infinite scrollbar, but it isn't on
> the agenda in the near term.
>
> Thanks,
> John LaBanca

> jlaba...@google.com

>
> On Thu, Nov 18, 2010 at 3:52 PM, aarnott <andrew.wj.arn...@gmail.com> wrote:
> > Hi there,
>
> > I've been using the SmartGWT library mainly for the ListGrid (which is
> > similar to the CellList). The problem is, the SMartGWT library comes
> > with a massive footprint (even when it is gzipped). The performace of
> > our site has been terrible ever since we introduced the ListGrid, but
> > on the other hand, it is pretty much a requirement.
>
> > I was very excited to see the CellList Widget bundled with the 2.1
> > release, but looking at the samples, I find the fetch behavior a
> > little awkward. First the List may fetch, say, 50 rows. The scrollbar
> > will represent a list with 50 rows. When you scroll to the bottom, new
> > rows are fetched and the scrollbar contents area increases to
> > accommodate the new rows. This variable sizing seems awkward.
>
> > I know the total number of rows my list can have. Is there any way I
> > can pass this information on to the CellGrid and have it prefill the
> > unseen areas with blank space and update them when they are scrolled
> > to?
>
> > Thanks,
>
> > Andrew
>
> > --
> > 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>
> > .

[John LaBanca]

The scrollbars are a separate widget called ShowMorePagerPanel.  CellList doesn't have scrollbars by default.

http://code.google.com/p/google-web-toolkit/source/browse/trunk/samples/showcase/src/com/google/gwt/sample/showcase/client/content/cell/ShowMorePagerPanel.java

If you look at the constructor, you'll see that we add a ScrollHandler that modifies the visible Range when the user scrolls.  If you want to implement an infinite scrollbar, you would need to do something similar, which means you need a way to map scroll position to row indexes.  It can be pretty tricky to get it right, but you can probably find a lot of examples online.

Thanks,
John LaBanca
jlab...@google.com

To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.

[Johan Rydberg]

On 11/18/10 10:32 PM, John LaBanca wrote:
> The scrollbars are a separate widget called ShowMorePagerPanel.
> CellList doesn't have scrollbars by default.
> http://code.google.com/p/google-web-toolkit/source/browse/trunk/samples/showcase/src/com/google/gwt/sample/showcase/client/content/cell/ShowMorePagerPanel.java
>
> If you look at the constructor, you'll see that we add a ScrollHandler
> that modifies the visible Range when the user scrolls. If you want to
> implement an infinite scrollbar, you would need to do something
> similar, which means you need a way to map scroll position to row
> indexes. It can be pretty tricky to get it right, but you can
> probably find a lot of examples online.

Is it even possible (today) to do this for CellTable ?

[John LaBanca]

CellTable/CellList and the pager (RangeChangeHandler) were designed to support infinite scrolling.  We created the version in Showcase as a proof of concept.  It helps to think about the scrolling mechanism (Pager) and the CellTable separately.  The CellTable can display a visible range, which is a subset of the total range.  The Pager determines which range is show.  The trick with infinite scrolling is to correlate the vertical position of the scrollbar (which doesn't have to be the native scrollbar) with a range.

Thanks,
John LaBanca
jlab...@google.com

--

[Johan Rydberg]

On 11/19/10 7:31 PM, John LaBanca wrote:
> CellTable/CellList and the pager (RangeChangeHandler) were designed to
> support infinite scrolling. We created the version in Showcase as a
> proof of concept. It helps to think about the scrolling mechanism
> (Pager) and the CellTable separately. The CellTable can display a
> visible range, which is a subset of the total range. The Pager
> determines which range is show. The trick with infinite scrolling is
> to correlate the vertical position of the scrollbar (which doesn't
> have to be the native scrollbar) with a range.

Yeah, but I was more thinking about the current impl of CellTable, which
is doing this with
a standard <table/> element. To me it seems impossible to add a
scroll-table around just
the content of a CellTable.

It would be nice if CellTable could have been split into
AbstractCellTable and CellTable, where
CellTable uses <table>-elements and AbstractCellTable really don't care
how stuff is
rendered.

[Sunit Katkar]

We studied the new offerings - CellList, CellTable and find them very promising and a step in the right direction. However, there are some customisations which are achieving with FlexTable which cannot be directly translated to these new widgets. So till a few more GWT releases where these widgets are made more 'advanced' and 'customizable' it makes no sense for us to convert to them.

I would wait for a few more releases before making the switch to these new widgets.

- Sunit Katkar
http://sunitkatkar.blogspot.com/

[aarnott]

I have made a rough implementation of an InfinitePagerPanel. It
involves a small cheat, but here is the code (hopefully google groups
doesn't butcher the formatting):

public class InfinitePagerPanel extends AbstractPager {

private DockLayoutPanel pagerPanel;
private PagerScrollbar scrollbar;

public InfinitePagerPanel() {
pagerPanel = new DockLayoutPanel(Unit.PX);
scrollbar = new PagerScrollbar();
pagerPanel.addEast(scrollbar, 16);
initWidget(pagerPanel);
}

@Override
public void setDisplay(HasRows display) {
assert display instanceof Widget : "display must be of type Widget";
pagerPanel.add((Widget) display);
super.setDisplay(display);
}

public void setStartRow(int start) {
scrollbar.setScrollPosition(start * PagerScrollbar.INFLATION_SIZE);
}

@Override
protected void onRangeOrRowCountChanged() {
scrollbar.updateRowCount(getDisplay().getRowCount());
}

private class PagerScrollbar extends ScrollPanel implements
ScrollHandler {

protected static final int INFLATION_SIZE = 25;

private HTML content;

public PagerScrollbar() {
super();
content = new HTML("<div></div>");
super.setWidget(content);
super.addScrollHandler(this);
}

public void updateRowCount(int rowCount) {
content.setHTML("<div style=\"height:" + (rowCount *
INFLATION_SIZE) + "px; width:1px;\"></div>");
}

@Override
public void onScroll(ScrollEvent event) {
int start = (super.getScrollPosition() / INFLATION_SIZE);
int length = getDisplay().getVisibleRange().getLength();
getDisplay().setVisibleRange(start, length);
}

}

}



The cheat is that I have put a ScrollPanel with empty contents beside
the CellList and then whenever the scrollbar has a scroll change, the
CellList updates. For the most part it works. The only problem I have
is that when I try using the "up" arrow on the scrollbar, the content
doesn't scroll upwards (it has a very strange effect). I'll see about
producing a simple example to reproduce the problem.

INFLATION_SIZE is my way of making the scrollbar in the scroll panel
reflect the actual number of elements in the list (I figured 25px per
row will give a fairly accurate display even if the rows are a bit
bigger or smaller than 25 px).

The setStartRow(int start) function is there so that I can jump the
list to a specific row (this is a feature my particular implementation
requires).

Any suggestions/comments would be greatly appreciated.

Thanks,

Andrew Arnott