improving the html table
TRANSCRIPT
Leif ÅstrandProduct Manager
Improving the HTML tablea 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 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
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 januari 15
without screwing up focusRestore 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(); 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
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
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
Lazy loading
lördag 24 januari 15
public abstract class AbstractRemoteDataSource { public abstract void getRow(int rowIndex, RequestRowCallback callback);}
Get a row
lördag 24 januari 15
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
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
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: <body-viewport-width>;}
.inner { width: <native-scrollbar-height>; height: <body-content-width>;}
Building a scrollbar
lördag 24 januari 15
Learn more
lördag 24 januari 15
/client/src/com/vaadin/client/widgets/Grid.javagithub.com/vaadin/vaadin
lördag 24 januari 15
groupId:artifactId:
version:
vaadin-widgets.jarcom.vaadinvaadin-widgets7.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? [email protected]
lördag 24 januari 15