Improving the HTML Table

L
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
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 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();
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.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
1 of 43

Recommended

Comparing GWT Transport Mechanisms by
Comparing GWT Transport MechanismsComparing GWT Transport Mechanisms
Comparing GWT Transport Mechanismslastrand
8.5K views45 slides
Remote controlling Parrot AR drone with Vaadin & Spring Boot @ GWT.create by
Remote controlling Parrot AR drone with Vaadin & Spring Boot @ GWT.createRemote controlling Parrot AR drone with Vaadin & Spring Boot @ GWT.create
Remote controlling Parrot AR drone with Vaadin & Spring Boot @ GWT.createPeter Lehto
2.2K views98 slides
Vaadin with Java EE 7 by
Vaadin with Java EE 7Vaadin with Java EE 7
Vaadin with Java EE 7Peter Lehto
5.6K views151 slides
Web html table tags by
Web html  table tagsWeb html  table tags
Web html table tagsKainat Ilyas
7.7K views25 slides
Html by
HtmlHtml
HtmlLincoln School
6.3K views201 slides
Difference Between HTML and HTML5 by
Difference Between HTML and HTML5Difference Between HTML and HTML5
Difference Between HTML and HTML5Bapu Graphics India
6.9K views10 slides

More Related Content

Viewers also liked

Week 2 by
Week 2Week 2
Week 2Rowena LI
434 views18 slides
Html table by
Html tableHtml table
Html tableargusacademy
682 views33 slides
Html tables examples by
Html tables   examplesHtml tables   examples
Html tables examplesMukesh Tekwani
19.8K views14 slides
Html table tags by
Html table tagsHtml table tags
Html table tagseShikshak
7.3K views18 slides
HTML: Tables and Forms by
HTML: Tables and FormsHTML: Tables and Forms
HTML: Tables and FormsBG Java EE Course
32.7K views37 slides
HyperText Markup Language - HTML by
HyperText Markup Language - HTMLHyperText Markup Language - HTML
HyperText Markup Language - HTMLSun Technlogies
1.4K views89 slides

Viewers also liked(9)

Improving the HTML Table