Vaadin Components @ Angular U

Vaadin Components
@joonaslehtinen
Founder & CEO 
 
 
for AngularJS

Developer
Productivity
Rich
UX

Automated Communication
Statically typed Java
Components

Automated Communication
Statically typed Java
Components
Framework
Components web

<v-grid>
Sass API for theme engine
<v-component> / JS API
GWT
API
Java Server
Automatic
communication
API
HTML5
API

Vaadin Component
C s
0.3-beta2

Static
<v-grid>
<table>
<colgroup>
<col header-text="Name">
<col header-text="Value">
<col header-text="Progress">
</colgroup>
<tbody>
<tr>
<td>Project A</td><td>10000</td><td>0.8</td>
</tr>
...

Component: Template
<v-grid (select)="select($event)">
<table>
<colgroup>
<col width=54>
<col header-text="First">
<col header-text="Last">
</colgroup>
<tbody>
<tr *ng-for="var user of users">
<td><img src="{{user.picture.thumbnail}}" /></td>
<td>{{user.name.first}}</td>
<td>{{user.name.last}}</td>

Component: Code (1/2)
import {bootstrap, Component, View, NgFor, NgIf} from 'angular2/
angular2';
@Component({
selector: 'angular-grid-example'
})
@View({
templateUrl: 'angular-grid-example.html',
directives: [NgFor, NgIf]
})

Component: Code (2/2)
export class AngularGridExample {
users;
selected;
constructor() { < Fetch some users to _this.users > }
select(event) {
var grid = event.target;
this.selected = this.users[grid.selection.selected()[0]];
}
}
bootstrap(AngularGridExample);

Setup (1/2)
<script src="webcomponents-lite.js"></script>
<script src="https://github.jspm.io/jmcriffey/bower-traceur-
runtime@0.0.90/traceur-runtime.js"></script>
<script src="https://jspm.io/system@0.16.js"></script>
<link rel="import" href="vaadin-grid.html">

Setup (2/2)
window.addEventListener("WebComponentsReady",function() {
var fileref = document.createElement("script");
fileref.setAttribute("src",
"https://code.angularjs.org/2.0.0-alpha.26/angular2.dev.js");
document.getElementsByTagName("head")[0].appendChild(fileref);
fileref.addEventListener('load', function() {
var ag = document.createElement("angular-grid-example");
document.body.appendChild(ag);
System.import('angular-grid-example');
});
});

https://github.com/jojule/angular-grid-example

Data-source: Array
grid.data.source = [
{ projectName: "Project A", cost: {estimate: 10, current: 80 } },
{ projectName: "Project B", cost: {estimate: 20, current: 1100 } }
];
grid.columns[0].name = "projectName";
grid.columns[1].name = "cost.estimate";

Data-source: Function
var data = [ [ "Project A", 10000, 0.8 ],
[ "Project B", 87654, 0.2 ],
[ "Project C", 12999, 0.6 ] ];
grid.data.source = function(req) {
var slice = data.slice(req.index, req.index + req.count);
req.success(slice, data.length);
};

Data-source: Async Function
grid.data.source = function(req) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == XMLHttpRequest.DONE &&
xhr.status == 200){
var json = JSON.parse(xhr.responseText);
req.success(json.results, dataSourceSize);
}
}
xhr.open("GET", "http://foo.com/" + req.count, true);
xhr.send();
};

Columns
<v-grid>
<table>
<colgroup>
<col header-text="Name" width="100" flex="1">
<col header-text="Surname" max-width="200">
grid.columns = [
{ headerContent: "First column" },
{ headerContent: "Second column" }
];
grid.columns[0].flex = 1;
grid.columns[1].maxWidth = 200;
or

Multilevel headers/footers
<v-grid>
<table>
<colgroup>
<col><col><col><col>
</colgroup>
<thead>
<tr><th colspan="2">Emp.</th><th colspan="2">Resp.</th></tr>
<tr><th>First</th><th>Last</th><th>Op.</th><th>Pr.</th></tr>
</thead>
<tfoot>
<tr></tr>
</tfoot>

Default row
grid.header.defaultRow = 1;

Frozen columns
<v-grid frozen-columns="1">
<table>
…
grid.frozenColumns = 1;
or

Interactive headers
grid.header.getCell(1, 0).content = filterElement;

Styles
grid.rowClassGenerator =
function(row) {
return classFor(row.data);
};
grid.cellClassGenerator =
function(cell) {
return classFor(cell.index,
cell.row.data);
};

Renderers
var progressRenderer = function(cell) {
cell.element.innerHTML = '';
var child = document.createElement('progress');
child.setAttribute('value', cell.data);
cell.element.appendChild(child);
};
grid.columns[2].renderer = progressRenderer;

Sorting
var data = [ [ "Project A", 10000, 0.8 ],
[ "Project D", 999999, 0.2 ],
[ "Project C", 43256, 0.01 ]];
grid.data.source = data;
grid.addEventListener('sort', function() {
var idx = grid.data.sortOrder[0].column;
var asc = grid.data.sortOrder[0].direction == 'asc';
data.sort(function(a, b) {
return a[idx] < b[idx] && asc ? -1 : 1;
});
});
<v-grid>
<table>
<colgroup>
<col header-text="Name"
sortable="">

Selection
• Single is the default selection mode for
Grid. It allows only one row to be
selected at once.
• Multi selection mode reveals an
additional checkbox column allowing
the user to select multiple rows.
• All selection mode has each row
selected by default allowing the user to
deselect individual rows.
• Disabled disables the selection
functionality.

http://vaadin.github.io/components-examples/

<x-component></x-component>
var proto = Object.create(HTMLElement.prototype);
proto.createdCallback = function() {
var div = document.createElement('div');
div.textContent = 'This is Custom Element';
this.appendChild(div);
};
var XComponent = document.registerElement('x-component', {
prototype: proto
});

var host = document.querySelector('#host');
var root = host.createShadowRoot(); // Create a Shadow Root
var div = document.createElement('div');
div.textContent = 'This is Shadow DOM';
root.appendChild(div); // Append elements to the Shadow Root

index.html
<link rel="import" href="component.html" >
component.html
<link rel="stylesheet" href="css/style.css">
<script src="js/script.js"></script>

<template id="template">
<style>
...
</style>
<div>
<h1>Web Components</h1>
<img src="http://webcomponents.org/img/logo.svg">
</div>
</template>
<script>
var template = document.querySelector('#template');
var clone = document.importNode(template.content, true);
var host = document.querySelector('#host');
host.appendChild(clone);
</script>
<div id="host"></div>

<my-counter counter="10">Points</my-counter>

<polymer-element name="my-counter" attributes="counter">
<template>
<style> /*...*/ </style>
<div id="label"><content></content></div>
Value: <span id="counterVal">{{counter}}</span><br>
<button on-tap="{{increment}}">Increment</button>
</template>
<script>
Polymer({
counter: 0, // Default value
counterChanged: function() {
this.$.counterVal.classList.add('highlight');
},
increment: function() { this.counter++; }
});
</script>
</polymer-element>

<v-grid> 
193 files
37 kLOC 
2 years 
3 - 5 persons
No human sacrifices ;) 
</v-grid>

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

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

Row 3
Row 4
Row 5

Row 3
Row 4
Row 5
Row 6

Row 4
Row 5
Row 6
Row 7

Row 4
Row 5
Row 6
Row 7
Row 4

Row 5
Row 6
Row 7
Row 8
Row 8

will-change: transform;
transform: translate(0, -y);
transform: translate3d(0, -y, 0);
top: y;
GPU acceleration

simulated kinetic
scrolling if needed

https://github.com/vaadin/components

@joonaslehtinen
Founder & CEO
slides
slideshare.com/joonaslehtinen

Vaadin Components @ Angular U

More Related Content

What's hot

Similar to Vaadin Components @ Angular U

More from Joonas Lehtinen

Recently uploaded

Vaadin Components @ Angular U