Improving the HTML Table
Transcript of Improving the HTML Table
![Page 1: Improving the HTML Table](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a7b7d21a28ab146d8b45d2/html5/thumbnails/1.jpg)
Leif ÅstrandProduct Manager
Improving the HTML tablea quick guide on getting in over your head
lördag 24 januari 15
![Page 2: Improving the HTML Table](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a7b7d21a28ab146d8b45d2/html5/thumbnails/2.jpg)
Demo
lördag 24 januari 15
![Page 3: Improving the HTML Table](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a7b7d21a28ab146d8b45d2/html5/thumbnails/3.jpg)
Technical stuff
lördag 24 januari 15
![Page 4: Improving the HTML Table](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a7b7d21a28ab146d8b45d2/html5/thumbnails/4.jpg)
Escalator
DOM
Grid
DataSource
Column
Scrolled to row 15
Show data for row 15in 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
![Page 5: Improving the HTML Table](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a7b7d21a28ab146d8b45d2/html5/thumbnails/5.jpg)
Smooth scrolling
lördag 24 januari 15
![Page 6: Improving the HTML Table](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a7b7d21a28ab146d8b45d2/html5/thumbnails/6.jpg)
Row 1
Row 6
Row 7
Row 8
Row ...
Row 2
Row 3
Row 4
Row 5
lördag 24 januari 15
![Page 7: Improving the HTML Table](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a7b7d21a28ab146d8b45d2/html5/thumbnails/7.jpg)
Row 1
Row 6
Row 7
Row 8
Row ...
Row 2
Row 3
Row 4
Row 5
lördag 24 januari 15
![Page 8: Improving the HTML Table](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a7b7d21a28ab146d8b45d2/html5/thumbnails/8.jpg)
Row 2
Row 3
Row 4
Row 5
lördag 24 januari 15
![Page 9: Improving the HTML Table](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a7b7d21a28ab146d8b45d2/html5/thumbnails/9.jpg)
Row 3
Row 4
Row 5
lördag 24 januari 15
![Page 10: Improving the HTML Table](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a7b7d21a28ab146d8b45d2/html5/thumbnails/10.jpg)
Row 3
Row 4
Row 5
Row 6
lördag 24 januari 15
![Page 11: Improving the HTML Table](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a7b7d21a28ab146d8b45d2/html5/thumbnails/11.jpg)
Row 3
Row 4
Row 5
Row 6
lördag 24 januari 15
![Page 12: Improving the HTML Table](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a7b7d21a28ab146d8b45d2/html5/thumbnails/12.jpg)
Row 3
Row 4
Row 5
Row 6
lördag 24 januari 15
![Page 13: Improving the HTML Table](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a7b7d21a28ab146d8b45d2/html5/thumbnails/13.jpg)
Row 4
Row 5
Row 6
Row 7
lördag 24 januari 15
![Page 14: Improving the HTML Table](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a7b7d21a28ab146d8b45d2/html5/thumbnails/14.jpg)
Row 4
Row 5
Row 6
Row 7
lördag 24 januari 15
![Page 15: Improving the HTML Table](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a7b7d21a28ab146d8b45d2/html5/thumbnails/15.jpg)
Row 4
Row 5
Row 6
Row 7
Row 4
lördag 24 januari 15
![Page 16: Improving the HTML Table](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a7b7d21a28ab146d8b45d2/html5/thumbnails/16.jpg)
Row 5
Row 6
Row 7
Row 8
Row 8
lördag 24 januari 15
![Page 17: Improving the HTML Table](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a7b7d21a28ab146d8b45d2/html5/thumbnails/17.jpg)
will-change: transform;transform: translate(0, -y);
transform: translate3d(0, -y, 0);
top: y;
GPU acceleration
lördag 24 januari 15
![Page 18: Improving the HTML Table](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a7b7d21a28ab146d8b45d2/html5/thumbnails/18.jpg)
without screwing up focusRestore order
lördag 24 januari 15
![Page 19: Improving the HTML Table](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a7b7d21a28ab146d8b45d2/html5/thumbnails/19.jpg)
Touch scrolling
lördag 24 januari 15
![Page 20: Improving the HTML Table](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a7b7d21a28ab146d8b45d2/html5/thumbnails/20.jpg)
-webkit-overflow-scrolling: touch;
Flick scrolling
lördag 24 januari 15
![Page 21: Improving the HTML Table](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a7b7d21a28ab146d8b45d2/html5/thumbnails/21.jpg)
No scroll events?lördag 24 januari 15
![Page 22: Improving the HTML Table](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a7b7d21a28ab146d8b45d2/html5/thumbnails/22.jpg)
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
![Page 23: Improving the HTML Table](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a7b7d21a28ab146d8b45d2/html5/thumbnails/23.jpg)
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
![Page 24: Improving the HTML Table](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a7b7d21a28ab146d8b45d2/html5/thumbnails/24.jpg)
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
![Page 25: Improving the HTML Table](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a7b7d21a28ab146d8b45d2/html5/thumbnails/25.jpg)
Lazy loading
lördag 24 januari 15
![Page 26: Improving the HTML Table](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a7b7d21a28ab146d8b45d2/html5/thumbnails/26.jpg)
public abstract class AbstractRemoteDataSource { public abstract void getRow(int rowIndex, RequestRowCallback callback);}
Get a row
lördag 24 januari 15
![Page 27: Improving the HTML Table](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a7b7d21a28ab146d8b45d2/html5/thumbnails/27.jpg)
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
![Page 28: Improving the HTML Table](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a7b7d21a28ab146d8b45d2/html5/thumbnails/28.jpg)
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
![Page 29: Improving the HTML Table](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a7b7d21a28ab146d8b45d2/html5/thumbnails/29.jpg)
Pixel limits
lördag 24 januari 15
![Page 30: Improving the HTML Table](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a7b7d21a28ab146d8b45d2/html5/thumbnails/30.jpg)
Detached scrollbars
lördag 24 januari 15
![Page 31: Improving the HTML Table](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a7b7d21a28ab146d8b45d2/html5/thumbnails/31.jpg)
Detached scrollbars
lördag 24 januari 15
![Page 32: Improving the HTML Table](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a7b7d21a28ab146d8b45d2/html5/thumbnails/32.jpg)
Detached scrollbars
lördag 24 januari 15
![Page 33: Improving the HTML Table](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a7b7d21a28ab146d8b45d2/html5/thumbnails/33.jpg)
Detached scrollbars
lördag 24 januari 15
![Page 34: Improving the HTML Table](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a7b7d21a28ab146d8b45d2/html5/thumbnails/34.jpg)
Detached scrollbars
lördag 24 januari 15
![Page 35: Improving the HTML Table](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a7b7d21a28ab146d8b45d2/html5/thumbnails/35.jpg)
Building a scrollbar
lördag 24 januari 15
![Page 36: Improving the HTML Table](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a7b7d21a28ab146d8b45d2/html5/thumbnails/36.jpg)
Building a scrollbar
lördag 24 januari 15
![Page 37: Improving the HTML Table](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a7b7d21a28ab146d8b45d2/html5/thumbnails/37.jpg)
<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
![Page 38: Improving the HTML Table](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a7b7d21a28ab146d8b45d2/html5/thumbnails/38.jpg)
Learn more
lördag 24 januari 15
![Page 39: Improving the HTML Table](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a7b7d21a28ab146d8b45d2/html5/thumbnails/39.jpg)
/client/src/com/vaadin/client/widgets/Grid.javagithub.com/vaadin/vaadin
lördag 24 januari 15
![Page 40: Improving the HTML Table](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a7b7d21a28ab146d8b45d2/html5/thumbnails/40.jpg)
groupId:artifactId:
version:
vaadin-widgets.jarcom.vaadinvaadin-widgets7.4.0.beta2
lördag 24 januari 15
![Page 41: Improving the HTML Table](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a7b7d21a28ab146d8b45d2/html5/thumbnails/41.jpg)
<inherits name='com.vaadin.Vaadin'/><inherits name='com.vaadin.themes.Valo'/>
Using vaadin-widgets
lördag 24 januari 15
![Page 42: Improving the HTML Table](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a7b7d21a28ab146d8b45d2/html5/thumbnails/42.jpg)
github.com/Artur-/grid-gwt
lördag 24 januari 15
![Page 43: Improving the HTML Table](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a7b7d21a28ab146d8b45d2/html5/thumbnails/43.jpg)
Questions?
Answers?
Please rate the talk at gwtcreate.com/agenda? [email protected]
lördag 24 januari 15