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

1. Leif Åstrand
Product Manager
Improving the HTML table
a quick guide on getting in over your head
lördag 24 januari 15

2. Demo
lördag 24 januari 15

3. Technical stuff
lördag 24 januari 15

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. Smooth scrolling
lördag 24 januari 15

6. Row 1
Row 6
Row 7
Row 8
Row ...
Row 2
Row 3
Row 4
Row 5
lördag 24 januari 15

7. Row 1
Row 6
Row 7
Row 8
Row ...
Row 2
Row 3
Row 4
Row 5
lördag 24 januari 15

8. Row 2
Row 3
Row 4
Row 5
lördag 24 januari 15

9. Row 3
Row 4
Row 5
lördag 24 januari 15

10. Row 3
Row 4
Row 5
Row 6
lördag 24 januari 15

11. Row 3
Row 4
Row 5
Row 6
lördag 24 januari 15

12. Row 3
Row 4
Row 5
Row 6
lördag 24 januari 15

13. Row 4
Row 5
Row 6
Row 7
lördag 24 januari 15

14. Row 4
Row 5
Row 6
Row 7
lördag 24 januari 15

15. Row 4
Row 5
Row 6
Row 7
Row 4
lördag 24 januari 15

16. Row 5
Row 6
Row 7
Row 8
Row 8
lördag 24 januari 15

17. will-change: transform;
transform: translate(0, -y);
transform: translate3d(0, -y, 0);
top: y;
GPU acceleration
lördag 24 januari 15

18. without screwing up focus
Restore order
lördag 24 januari 15

19. Touch scrolling
lördag 24 januari 15

20. -webkit-overflow-scrolling: touch;
Flick scrolling
lördag 24 januari 15

21. No scroll events?
lördag 24 januari 15

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. 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. 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. Lazy loading
lördag 24 januari 15

26. public abstract class AbstractRemoteDataSource {
public abstract void getRow(int rowIndex,
RequestRowCallback callback);
}
Get a row
lördag 24 januari 15

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. 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. Pixel limits
lördag 24 januari 15

30. Detached scrollbars
lördag 24 januari 15

31. Detached scrollbars
lördag 24 januari 15

32. Detached scrollbars
lördag 24 januari 15

33. Detached scrollbars
lördag 24 januari 15

34. Detached scrollbars
lördag 24 januari 15

35. Building a scrollbar
lördag 24 januari 15

36. Building a scrollbar
lördag 24 januari 15

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. Learn more
lördag 24 januari 15

39. /client/src/com/vaadin/client/widgets/Grid.java
github.com/vaadin/vaadin
lördag 24 januari 15

40. groupId:
artifactId:
version:
vaadin-widgets.jar
com.vaadin
vaadin-widgets
7.4.0.beta2
lördag 24 januari 15

41. <inherits name='com.vaadin.Vaadin'/>
<inherits name='com.vaadin.themes.Valo'/>
Using vaadin-widgets
lördag 24 januari 15

42. github.com/Artur-/grid-gwt
lördag 24 januari 15

43. Questions?
Answers?
Please rate the talk at
gwtcreate.com/agenda
? leif@vaadin.com
lördag 24 januari 15