|
PagingScrollTable
A full featured table that supports scrolling, paging, column resizing and sorting, cell editing, and more...
IntroductionThe gen2 PagingScrollTable supports navigating between pages of data, which can be generated on the client or via an RPC call. It also supports column resizing within a minimum and maximum range, column sorting on the client or server side, inline cell editing, data caching, and scrolling with a fixed header and footer. The data can be rendered very quickly as a String using a TableBulkRenderer. Note: You can view documentation on the old version of the PagingScrollTable on the PagingScrollTableOld wiki page. How It WorksClass DiagramComing soon... Row ValuesA PagingScrollTable can represent a list of any type, which we call the row value. For example, you might define a Student object to use as the row value. Each column will contain information about the row value, such as the name, age, and GPA of the Student. TableModelThe TableModel defines how the PagingScrollTable accesses data. The method requestRows(Request, Callback) is called any time the PagingScrollTable needs more data. From here, you can return data from a data source on the client, or you can send an RPC request for the data. The Request includes the ColumnSortInfo from the PagingScrollTable, allowing you to perform server side sorting. ColumnDefinitionThe ColumnDefinition defines information about the columns in your table, such as the minimum/maximum/preferred column width, whether the column is sortable, and how to set and retrieve data from a row value. For example, a ColumnDefinition used for the name column in a PagingScrollTable would define how to get and set the name of a Student. The AbstractColumnDefinition is a basic implementation that allows you to get and set the minimum/maximum/preferred column widths. You can also attach a CellRenderer or CellEditor to a ColumnDefinition to control how it will appear. The InlineCellEditors (eg. TextCellEditor) are simple CellEditor implementations that popup input fields above the cell. ColumnDefinitions are combined into a TableDefinition, which defines which columns will appear in your table via the getVisibleColumnDefinitions() method. The DefaultTableDefinition implementation provides convenience methods for adding, removing, and hiding columns. TableBulkRendererThe TableBulkRenderer allows you to render your PagingScrollTable as an HTML string, which dramatically increases performance of large tables. Using the CellRenderers defined in the ColumnDefinitions, you can customize the look of each column or cell based on the contents. PagingScrollTableWhen all of the components are combined, you get a PagingScrollTable that requests data from the TableModel and renders the columns defined the TableDefinition using the TableBulkRenderer for performance. A Note about Layout IssuesAs many developers have noticed, the PagingScrollTable has a layout issue when it is relatively sized and placed inside of a TD cell (such as inside of a GWT Panel) where it will continuously expand, shrink, or otherwise behave badly. The root cause is that the PagingScrollTable pushes out on the TD cells from the inside instead of resizing with the cells. Why haven't we fixed this issue if we know the root cause? We're trying to find a solution that works on all browsers, but we have not found a perfect solution yet. The simple workaround is to set the width of the PagingScrollTable in pixels. Of course that isn't ideal, but its the easiest fix for many layout bugs. In our sample, we use a WindowResizeListener to set the size of the table relative to the client width of the Window. WalkthroughCreate a GWT projectThis tutorial assumes that you are familiar with GWT (Google Web Toolkit). However, if you've stumbled across this page without ever using GWT, you can find more information at the GWT Homepage. Follow the instructions in the GWT Getting Started guide to create a new project. Or, you can add the PagingScrollTable to an existing project. This tutorial will use a GWT project module: com.google.gwt.walkthrough.Walkthrough Checkout the incubator projectThis tutorial also assumes that you are familiar with incubator and subversion (svn). However, if you've never used incubator or svn, you can follow these steps:
If you've never used subversion, you can find a variety of free svn clients online for all operating systems at the subversion homepage. TortoiseSVN is an easy to use visual client for Windows. Most linux installations come with an svn client preinstalled. Define a row valueFrom within the project, define a data type to display in each row. You can use any data type, so let's use a Student for this walkthrough. /*
* Copyright 2008 Google Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License"); you may not
* use this file except in compliance with the License. You may obtain a copy of
* the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations under
* the License.
*/
package com.google.gwt.walkthrough.shared;
import com.google.gwt.user.client.rpc.IsSerializable;
/**
* A representation of a student.
*/
public class Student implements IsSerializable {
private String firstName = null;
private String lastName = null;
private int age = 0;
private boolean isMale = true;
private int graduationYear = 0;
private double gpa = 0.0;
public int getAge() {
return age;
}
public String getFirstName() {
return firstName;
}
public double getGpa() {
return gpa;
}
public int getGraduationYear() {
return graduationYear;
}
public String getLastName() {
return lastName;
}
public boolean isMale() {
return isMale;
}
public void setAge(int age) {
this.age = age;
}
public void setFirstName(String firstName) {
this.firstName = firstName;
}
public void setGpa(double gpa) {
this.gpa = gpa;
}
public void setGraduationYear(int graduationYear) {
this.graduationYear = graduationYear;
}
public void setLastName(String lastName) {
this.lastName = lastName;
}
public void setMale(boolean isMale) {
this.isMale = isMale;
}
}You'll notice that the above type implements IsSerializable so we can send it over RPC and do server side sorting. Since we want to use this data type on both the server and client side, let's create a shared package on the same level as the client package. You're path should look like this: com.google.gwt.walkthrough
public/
Walkthrough.gwt.xml
com.google.gwt.walkthrough.client
Walkthrough
com.google.gwt.walkthrough.shared
StudentGo ahead and add the Student file now. Define the TableModelThe TableModel defines the source of the data. |
Sign in to add a comment
Hi , It's really impressive work.
Thanks Raghunath
I'm trying to search for source files of PagingScrollTable example. I didn't find source files in incubator truck.In truck there is only compiled version on this application. Please check-in this demo application.
Thanks Raghunath
We are using GWT in our current project. PagingScrollTable is most suited widget for our requirement. Could you please tell us when you are planning to release gwt-incubator with this widget.
Yeah, it's nice, but implementation of paging is not valid, i am already rewriting that widget to be valid.
The example is not valid with the last jar library. Can you post a working example?
Thanks
I added gwt-incubator_1-4_final.jar into my classpath and finally managed to make it work. But there seems to be two problems for me:
1. It breeds a considerable large increase on app loading time (in hosted mode) and compile time. It takes 2-3 mins to start in hosted mode in my Pentium D 3.40 ghz, 2GB-ram, win XP sp2 machine..
2. The whole table is never able to be as in the above demo. There's always a disturbing horizontal scrollbar, which I do nothing special to make it occur.
Do you guys have any suggestions in order to overcome these issues?
Any chance we can see an up-to-date example of the table? Several properties/functions/classes do not longer exist in the current: gwt-incubator_1-4_final.jar Will this project be further developed?
This example (with ReadOnlyTableModel? and SelectionGrid?.SelectionPolicy?...) works fine: I have compiled (the latest) gwt and gwt-incubator from the svn-trunks and changed ScrollTableDemo?.css to newer version (the link above points to an old one). (ant build was successfull but there were errors in ant tests) Web mode of this example works too except the LeftRightArrow? for resizing columns looks different then in hosted mode. ScrollTableDemo? works fine in both hosted and web-mode but the PagingScrollTableDemo? works only in hosted mode. I tried to use Compile/Browse button but it failed (see the picture
)
Can somebody advice how to run it in web mode?
Thanks
I am getting fired for choosing PagingScrollTable in out project. It is worst piece of code and how they dare to include that in GWT Core.
Yes, it is possible to compile the new PagingScrollTableDemo? to work in web-mode with little workaround:
There is (or maybe I have) a problem with RPC, so if you comment-out creating rpc-proxy in the file DataSourceTableModel?.java in requestRows method like this -- it will work quite good:
public void requestRows(final Request request, final Callback<Serializable> callback) {
// // Create the service if needed // if (dataService == null) { // dataService = GWT.create(DataSourceService?.class); // ServiceDefTarget? endpoint = (ServiceDefTarget?) dataService; // String moduleRelativeURL = GWT.getModuleBaseURL() + "datasource"; // endpoint.setServiceEntryPoint(moduleRelativeURL); // } // // // Send RPC request for data // dataService.requestRows(request, // new AsyncCallback?<SerializableResponse?<Serializable>>() { // public void onFailure(Throwable caught) { // callback.onFailure(new Exception("RPC Failure")); // } // // public void onSuccess(SerializableResponse?<Serializable> result) { // callback.onRowsReady(request, result); // } // });Does anybody have a better idea how to run this demo in webmode?
(I am sorry to hear that abelon.dev but incubator is only a future vision of gwt. Maybe I am wrong but I did not see this features in GWT RC2 which was published yesterday. Gwt-ext has some solutions for tables, i will try it soon. What would you choose instead of PagingScrollTable?)
Hi Igor, I've read that they are planning to include that piece in GWT core. Compiling is good and it worked for first two weeks good, but then bugs started happens, look at the issue list, almost any issue from it I need to be fixed, but year is gone and nothing has been fixed yet. You should use GWT-ext if you will decide to use gwt-ext everywhere in your project.
Yes I see, there are some new fixes and workarounds which are still not included into the trunk. For example this one http://code.google.com/p/google-web-toolkit-incubator/issues/detail?id=108 is far better than mine above. I was able to compile the PagingScrollTable demo with it. Another great fix is: http://code.google.com/p/google-web-toolkit-incubator/issues/detail?id=131
Most issues I was fighting was resizing columns and disappearing table in other layout, other bugs behavior non-visual bugs I was able to fix on my own.
Hi, thank you for warning. I tried the tables in gwt-ext. In ubuntu their demo loads very slowly in hosted mode and many of the grid examples did not apear in the tabs. In windows it is ok. They are fixing the problems, but you are right it is a fight to make it work.. So did you switch to gwt-ext or do you still use gwt/gwt-incubator? Or something else?
As you know I failed with PagingScroll? table, what I can say, I started write my table.
If it would depend on me I would use gwt-ext on windows but I can not :|. Developing my own table was something I wanted to avoid. First I found http://advanced-gwt.sourceforge.net/ and than http://code.google.com/p/gwt-advanced-table/ which was good, but I wanted something like DataSet?/DataGrid?/DataTable?/DataView? with separated data and layout and suddenly I found gwt-incubator. I was very happy that I do not have to develop tables on my own..
PagingScrollTable might work on small projects where you can create right environment for it (size-fixed containers and etc.) but when project is enough big PagingScrollTable becomes so pain yes I was able to use PagingScrollTable on example page using a lot hacks, but for other programmers are not and they just started submits bugs and it's disaster, so many bugs and it's cheaper create some table than use bug one.
Hi PagingScrollTable developers why you have ideal example of using PagingScrollTable in RootPanel?, you think everybody use rootpanel. I vote for full rewriting ScrollTable just look at issue list I think so many bugs are still not fixed because there is something wrong in arhitecture. Or maybe just delete it form incubator do not screw developers life on planet.
I thought I'd give gen2 a try. In the course of doing so, I became curious about how the SerializableResponse? class in TableModelHelper? requires my domain objects to implement the old, deprecated IsSerializable? interface - which, as far as I know, is not required for any reason as of GWT 1.5.
Is there a reason that you can't just use Serializable now that 1.5 is out? Any plans to make that change, if so?
Another question: While studying the gen2 demo code for the PagingScrollTable, I do not see where the names of the columns in the headerTable get set. Does it work like the first gen code where I need to set them, or does the gen2 code try to pull them out of the ColumnDefinition? objects in the TableDefinition?? If so, that would be nice, but it doesn't appear to be working that way in my application. For some reason I'm not seeing a headerTable at all.
Other than that, it's looking good.
I think I answered my second question above: I somehow overlooked the StudentPagingScrollTable?.java file, wherein there is an updateHeaderTable method that iterates through the column definitions and sets the header table values from the names contained in there.
Hrm...the only kind of table model that you can wrap with a CachedTableModel? now is a MutableTableModel?. What if one wants client-side caching of a read-only TableModel??
can anyone provide the steps to implement the pagingscroll table i got the sample pagingscrolltabledemo source code but it looks like it is missing many dependent classes and causes compilation error ... can some one post the clear and working code sample of the same.
I was just trying to look for the live demo, but actually the above link links to the demo of ScrollTable. Please provide a proper link.
Look at wiki, or http://collectionofdemos.appspot.com/demo/index.html the demos on the bottom work. I think demos are now excluded (compare the size of incubator 1.4 feb 2008 == 10MB) from the downloadable incubator .jar file and you have to download (checkout) them from svn: http://www.google.com/codesearch/p?hl=en#kxqvj77bOTo/trunk/src-demo/com/google/gwt/gen2/demo/scrolltable/client/PagingScrollTableDemo.java&q=PagingScrollTable%20package:http://google-web-toolkit-incubator%5C.googlecode%5C.com&exact_package=http://google-web-toolkit-incubator.googlecode.com/svn
How can capture the onclick event in a cell in GWT 1.6? TableListener? interface is deprecated.
Capture events on table:
pagingScrollTable.getDataTable().addTableListener(listener) (Deprecated) pagingScrollTable.getDataTable().addRowSelectionHandler(handler) GWT 1.6
please help me !!!
....don't work any idea ? needed TableModel? ? ColumnDefinition? ? etc..
my TableModel? : ...
...
that's rigth ? Excuse my English (http://translate.google.com XD) Thanks
Felipe,
Usually the best place to get help with gwt-incubator widgets is on the GWT developer forum:
http://groups.google.com/group/Google-Web-Toolkit
It also helps if you can post a more detailed description of the problem. Variations on "it doesn't work" aren't very helpful. :)
- Isaac
Ok,
I get the solution to my problem.
Thank you so much.
"Ya encontre la solucion a mi problema, muchas gracias."
Where's the source code for the demo table?
I have a problem with paging options the loader image when u navigate through the paging from 1 to 2 or from first to last page it actually shows up when i implement the code in a separate example... but when i add the same code in my exisitng project its not showing up it looks as if no image is available..any idea what i am missing here?
If the table is empty and the emptyTableWidget is shown, the footer doesn't stay at the bottom of the table (if the ScrollPolicy? isn't disabled. I think the SimplePanel? which contains the emptyTableWidget must be set to height: 100% also (the width is set that way in the constructor of PagingScrollTable). Anyone else having this problem or an alternative solution?