Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Improving the HTML Table

2,121 views

Published on

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

Published in: Software
  • Be the first to comment

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

×