Re: My CellTable is slow and I don't know why

Christ!

I have never seen a hover effect so sluggish (probably because the hover/graying effect is being added programatically by CellTable implementation code of the mouse out and mouseover).

The online sample goes fast on the browser,
http://www.gwtproject.org/doc/latest/DevGuideUiCellTable.html

The one triggered by mvn gwt:run is a disaster.
Mouseout: 176 ms, mouseover 208 ms, according to speed tracer, but it looks even slower.


I am basically using the standard css from GWT along with the css from twitter bootstrap.
I tried both the CellTable from bootstrap and from GWT both are just dead slow.
Firefox is considerably faster, but even there you feel the delay for the hover effect to show.

The table has the three rows of the example!

At this rate I will just have to extend the cell table and override the mouse out and mouseover events to simply do nothing.

I tried removing the bootstrap CSS, which I want to keep, but it also seemed to have no effect on the performance.


On Thursday, November 4, 2010 5:45:09 PM UTC+1, Owen Powell wrote:

It looks like the problem might only exist when you test locally. At
least for me, when I upload to AppEngine my table is as responsive as
the Showcase table.

~Owen

On 3 nov, 18:21, Owen Powell <opow...@gmail.com> wrote:
> I checked the CellTable style sheet, it looks fine. But the standard
> GWT stylesheet (the "standard.css" resource that gets loaded in my
> app) contains a dependant style selector "table td".
>
> Could this be my problem? Can the standard style sheet somehow be
> modified?
>
> Best,
>
> ~Owen
>
> On 3 nov, 18:08, Owen Powell <opow...@gmail.com> wrote:
>
>
>
>
>
>
>
> > Thanks John, the problem definitely seems to be descendant style
> > selectors (since I see recurring Javascript calls in Speed Tracer).
>
> > But I'm not sure why this is, since I don't have any styles defined in
> > my app. Could it be that the default CellTable style file is creating
> > this problem?
>
> > ~Owen
>
> > On 3 nov, 16:25, John LaBanca <jlaba...@google.com> wrote:
>
> > > Have you tried looking at it with SpeedTracer?  We tested with large tables
> > > (100 rows), and the hover code is pretty straight forward.
>
> > > In past applications, we've seen performance problems when hovering due
> > > to descendant style selectors because of the way they are implemented in
> > > browser.
>
> > > For example, you have this CSS style defined:
> > > .myRandomWidget td {
> > >   padding: 3px;
>
> > > }
>
> > > And you have a CellTable that is NOT myRandomWidget, then changing the hover
> > > style of the row will cause some browsers to walk up from every TD in the
> > > CellTable trying to match the style definition.  In the degenerate case,
> > > where CellTable is not myRandomWidget, this means walking up to the body
> > > element.  This is a native browser implementation, and the only solution is
> > > to avoid descendant style selectors.
>
> > > If this isn't the case, SpeedTracer should be able to help you narrow down
> > > the performance problem.
>
> > > Thanks,
> > > John LaBanca
> > > jlaba...@google.com
>
> > > On Wed, Nov 3, 2010 at 10:22 AM, Owen Powell <opow...@gmail.com> wrote:
> > > > I've only tested it on the latest stable build of Chrome.
>
> > > > On 3 nov, 14:28, Lukas Herman <herni...@gmail.com> wrote:
> > > > > My CellTable is slow under Firefox 3.6 only.
>
> > > > > On 3 lis, 14:07, Owen Powell <opow...@gmail.com> wrote:
>
> > > > > > Hi everyone,
>
> > > > > > When I make a simple CellTable, the responsiveness of the table in the
> > > > > > browser to mouse events (mouseOver, mouseOut) is nowhere nearly as
> > > > > > fast as the table in the Showcase (http://gwt.google.com/samples/
> > > > > > Showcase/Showcase.html#!CwCellTable). Any ideas why this might be?
>
> > > > > > My code is below. Best,
>
> > > > > > ~Owen
>
> > > > > > // Data object class.
>
> > > > > > package tabletest.client;
>
> > > > > > import java.util.ArrayList;
>
> > > > > > public class InterestingThing {
>
> > > > > >         public ArrayList<String> values = new ArrayList<String>();
>
> > > > > >         public InterestingThing(int n) {
> > > > > >                 for (int i=0; i<n; i++) {
> > > > > >                         values.add("Value " + i);
> > > > > >                 }
> > > > > >         }
>
> > > > > > }
>
> > > > > > // Custom CellTable class.
>
> > > > > > package tabletest.client;
>
> > > > > > import java.util.ArrayList;
>
> > > > > > import com.google.gwt.user.cellview.client.CellTable;
> > > > > > import com.google.gwt.user.cellview.client.TextColumn;
>
> > > > > > public class MyCellTable extends CellTable<InterestingThing> {
>
> > > > > >         public MyCellTable() {
> > > > > >                 super();
>
> > > > > >                 int NUM_COLUMNS = 4;
> > > > > >                 int NUM_ROWS = 25;
>
> > > > > >                 // Create table.
> > > > > >                 for (int i=0; i<NUM_COLUMNS; i++) {
> > > > > >                         addTextColumn(i);
> > > > > >                 }
>
> > > > > >                 // Create data.
> > > > > >                 ArrayList<InterestingThing> data = new
> > > > > > ArrayList<InterestingThing>();
> > > > > >                 for (int i=0; i<NUM_ROWS; i++) {
> > > > > >                         data.add(new InterestingThing(NUM_COLUMNS));
> > > > > >                 }
>
> > > > > >                 // Put data into table.
> > > > > >                 setRowData(0, data);
> > > > > >         }
>
> > > > > >         private void addTextColumn(final int i) {
> > > > > >                 TextColumn<InterestingThing> newColumn = new
> > > > > > TextColumn<InterestingThing>() {
>
> > > > > >                         public String getValue(InterestingThing m) {
> > > > > >                                 return m.values.get(i);
> > > > > >                         }
> > > > > >                 };
> > > > > >                 addColumn(newColumn, "Field " + i);
> > > > > >         }
>
> > > > > > }
>
> > > > > > // Entrypoint.
>
> > > > > > package tabletest.client;
>
> > > > > > import com.google.gwt.core.client.EntryPoint;
> > > > > > import com.google.gwt.user.client.ui.RootPanel;
>
> > > > > > public class TableTest implements EntryPoint {
>
> > > > > >         public void onModuleLoad() {
>
> > > > > >                 MyCellTable table = new MyCellTable();
> > > > > >                 RootPanel.get().add(table);
> > > > > >         }
>
> > > > > > }
>
> > > > --
> > > > 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-toolkit+unsubscribe@googlegroups.com<google-web-toolkit%2Bunsubs cr...@googlegroups.com>
> > > > .
> > > > For more options, visit this group at
> > > >http://groups.google.com/group/google-web-toolkit?hl=en.

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