Leif Åstrand
Product Manager
Improving the HTML table
a quick guide on getting in over your head
lördag 24 januari 15
Demo
lördag 24 januari 15
Technical stuff
lördag 24 januari 15
Escalator
DOM
Grid
DataSource
Column
Scrolled to row 15
Show data for row 15
in these DOM elements
Get data for row 15
Ext...
Smooth scrolling
lördag 24 januari 15
Row 1
Row 6
Row 7
Row 8
Row ...
Row 2
Row 3
Row 4
Row 5
lördag 24 januari 15
Row 1
Row 6
Row 7
Row 8
Row ...
Row 2
Row 3
Row 4
Row 5
lördag 24 januari 15
Row 2
Row 3
Row 4
Row 5
lördag 24 januari 15
Row 3
Row 4
Row 5
lördag 24 januari 15
Row 3
Row 4
Row 5
Row 6
lördag 24 januari 15
Row 3
Row 4
Row 5
Row 6
lördag 24 januari 15
Row 3
Row 4
Row 5
Row 6
lördag 24 januari 15
Row 4
Row 5
Row 6
Row 7
lördag 24 januari 15
Row 4
Row 5
Row 6
Row 7
lördag 24 januari 15
Row 4
Row 5
Row 6
Row 7
Row 4
lördag 24 januari 15
Row 5
Row 6
Row 7
Row 8
Row 8
lördag 24 januari 15
will-change: transform;
transform: translate(0, -y);
transform: translate3d(0, -y, 0);
top: y;
GPU acceleration
lördag 24 ...
without screwing up focus
Restore order
lördag 24 januari 15
Touch scrolling
lördag 24 januari 15
-webkit-overflow-scrolling: touch;
Flick scrolling
lördag 24 januari 15
No scroll events?
lördag 24 januari 15
public void onTouchStart(TouchStartEvent event) {
if (onlyOneFinger(event)) {
cancelMomentumScrolling();
saveStartCoordina...
AnimationScheduler scheduler = AnimationScheduler.get();
public void moveByEvent(TouchMoveEvent event) {
lastMoveEvent = e...
public void startFlickScroll(TouchEndEvent event) {
scheduler.requestAnimationFrame(flick, element);
}
AnimationCallback f...
Lazy loading
lördag 24 januari 15
public abstract class AbstractRemoteDataSource {
public abstract void getRow(int rowIndex,
RequestRowCallback callback);
}...
public abstract class AbstractRemoteDataSource {
public Row getRow(int index) { … };
protected abstract void requestRows(i...
public abstract class AbstractRemoteDataSource {
public Row getRow(int index) { … };
protected abstract void requestRows(i...
Pixel limits
lördag 24 januari 15
Detached scrollbars
lördag 24 januari 15
Detached scrollbars
lördag 24 januari 15
Detached scrollbars
lördag 24 januari 15
Detached scrollbars
lördag 24 januari 15
Detached scrollbars
lördag 24 januari 15
Building a scrollbar
lördag 24 januari 15
Building a scrollbar
lördag 24 januari 15
<div class="outer">
<div class="inner"></div>
</div>
.outer {
overflow-y: scroll;
width: <native-scrollbar-height>;
height...
Learn more
lördag 24 januari 15
/client/src/com/vaadin/client/widgets/Grid.java
github.com/vaadin/vaadin
lördag 24 januari 15
groupId:
artifactId:
version:
vaadin-widgets.jar
com.vaadin
vaadin-widgets
7.4.0.beta2
lördag 24 januari 15
<inherits name='com.vaadin.Vaadin'/>
<inherits name='com.vaadin.themes.Valo'/>
Using vaadin-widgets
lördag 24 januari 15
github.com/Artur-/grid-gwt
lördag 24 januari 15
Questions?
Answers?
Please rate the talk at
gwtcreate.com/agenda
? leif@vaadin.com
lördag 24 januari 15
Upcoming SlideShare
Loading in …5
×

Improving the HTML Table

1,980 views

Published on

Presentation about the Grid Widget for GWT, held at GWT.create 2015 in San Francisco and Munich.

Published in: Software
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,980
On SlideShare
0
From Embeds
0
Number of Embeds
259
Actions
Shares
0
Downloads
44
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Improving the HTML Table

  1. 1. Leif Åstrand Product Manager Improving the HTML table a quick guide on getting in over your head lördag 24 januari 15
  2. 2. Demo lördag 24 januari 15
  3. 3. Technical stuff lördag 24 januari 15
  4. 4. Escalator DOM Grid DataSource Column Scrolled to row 15 Show data for row 15 in these DOM elements Get data for row 15 Extract cell value from row object and show it in this element Renderer Show value in element lördag 24 januari 15
  5. 5. Smooth scrolling lördag 24 januari 15
  6. 6. Row 1 Row 6 Row 7 Row 8 Row ... Row 2 Row 3 Row 4 Row 5 lördag 24 januari 15
  7. 7. Row 1 Row 6 Row 7 Row 8 Row ... Row 2 Row 3 Row 4 Row 5 lördag 24 januari 15
  8. 8. Row 2 Row 3 Row 4 Row 5 lördag 24 januari 15
  9. 9. Row 3 Row 4 Row 5 lördag 24 januari 15
  10. 10. Row 3 Row 4 Row 5 Row 6 lördag 24 januari 15
  11. 11. Row 3 Row 4 Row 5 Row 6 lördag 24 januari 15
  12. 12. Row 3 Row 4 Row 5 Row 6 lördag 24 januari 15
  13. 13. Row 4 Row 5 Row 6 Row 7 lördag 24 januari 15
  14. 14. Row 4 Row 5 Row 6 Row 7 lördag 24 januari 15
  15. 15. Row 4 Row 5 Row 6 Row 7 Row 4 lördag 24 januari 15
  16. 16. Row 5 Row 6 Row 7 Row 8 Row 8 lördag 24 januari 15
  17. 17. will-change: transform; transform: translate(0, -y); transform: translate3d(0, -y, 0); top: y; GPU acceleration lördag 24 januari 15
  18. 18. without screwing up focus Restore order lördag 24 januari 15
  19. 19. Touch scrolling lördag 24 januari 15
  20. 20. -webkit-overflow-scrolling: touch; Flick scrolling lördag 24 januari 15
  21. 21. No scroll events? lördag 24 januari 15
  22. 22. public void onTouchStart(TouchStartEvent event) { if (onlyOneFinger(event)) { cancelMomentumScrolling(); saveStartCoordinates(event); } } public void onTouchMove(TouchMoveEvent event) { if (onlyOneFinger(event)) moveByEvent(event); } public void onTouchEnd(TouchEndEvent event) { if (onlyOneFinger(event)) startFlickScroll(event); } Manual scrolling lördag 24 januari 15
  23. 23. AnimationScheduler scheduler = AnimationScheduler.get(); public void moveByEvent(TouchMoveEvent event) { lastMoveEvent = event; scheduler.requestAnimationFrame(mover, element); } AnimationCallback mover = new AnimationCallback() { public void execute(double timestamp) { lastMoveTimestamp = timestamp; actuallyMoveByEvent(lastMoveEvent); } } Frame by frame lördag 24 januari 15
  24. 24. public void startFlickScroll(TouchEndEvent event) { scheduler.requestAnimationFrame(flick, element); } AnimationCallback flick = new AnimationCallback() { public void execute(double timestamp) { double time = timestamp - lastMoveTimestamp; if (startSpeed = -1) startSpeed = lastMovementDelta / time; if (moveByTime(startSpeed, time)) scheduler.requestAnimationFrame(this, element); } } Flick scrolling lördag 24 januari 15
  25. 25. Lazy loading lördag 24 januari 15
  26. 26. public abstract class AbstractRemoteDataSource { public abstract void getRow(int rowIndex, RequestRowCallback callback); } Get a row lördag 24 januari 15
  27. 27. public abstract class AbstractRemoteDataSource { public Row getRow(int index) { … }; protected abstract void requestRows(int start, int count, RequestRowsCallback callback); } Cache rows lördag 24 januari 15
  28. 28. public abstract class AbstractRemoteDataSource { public Row getRow(int index) { … }; protected abstract void requestRows(int start, int count, RequestRowsCallback callback); public void ensureAvailability(int start, int count) { … }; } What to cache? lördag 24 januari 15
  29. 29. Pixel limits lördag 24 januari 15
  30. 30. Detached scrollbars lördag 24 januari 15
  31. 31. Detached scrollbars lördag 24 januari 15
  32. 32. Detached scrollbars lördag 24 januari 15
  33. 33. Detached scrollbars lördag 24 januari 15
  34. 34. Detached scrollbars lördag 24 januari 15
  35. 35. Building a scrollbar lördag 24 januari 15
  36. 36. Building a scrollbar lördag 24 januari 15
  37. 37. <div class="outer"> <div class="inner"></div> </div> .outer { overflow-y: scroll; width: <native-scrollbar-height>; height: <body-viewport-width>; } .inner { width: <native-scrollbar-height>; height: <body-content-width>; } Building a scrollbar lördag 24 januari 15
  38. 38. Learn more lördag 24 januari 15
  39. 39. /client/src/com/vaadin/client/widgets/Grid.java github.com/vaadin/vaadin lördag 24 januari 15
  40. 40. groupId: artifactId: version: vaadin-widgets.jar com.vaadin vaadin-widgets 7.4.0.beta2 lördag 24 januari 15
  41. 41. <inherits name='com.vaadin.Vaadin'/> <inherits name='com.vaadin.themes.Valo'/> Using vaadin-widgets lördag 24 januari 15
  42. 42. github.com/Artur-/grid-gwt lördag 24 januari 15
  43. 43. Questions? Answers? Please rate the talk at gwtcreate.com/agenda ? leif@vaadin.com lördag 24 januari 15

×