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 <[email protected]> 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 <[email protected]> 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 <[email protected]> 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 > > > > [email protected] > > > > > > On Wed, Nov 3, 2010 at 10:22 AM, Owen Powell <[email protected]> > wrote: > > > > > I've only tested it on the latest stable build of Chrome. > > > > > > > On 3 nov, 14:28, Lukas Herman <[email protected]> wrote: > > > > > > My CellTable is slow under Firefox 3.6 only. > > > > > > > > On 3 lis, 14:07, Owen Powell <[email protected]> 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 > > > > > [email protected]<javascript:>. > > > > > > To unsubscribe from this group, send email to > > > > > [email protected] > > > > > <javascript:><google-web-toolkit%2Bunsubs > [email protected] <javascript:>> > > > > > . > > > > > 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 [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/google-web-toolkit. For more options, visit https://groups.google.com/groups/opt_out.
