Post on 06-Aug-2015
Vaadin Components
@joonaslehtinen Founder & CEO
for AngularJS
Vaadin Framework?
User Interface Components
For "business apps"
Developer
Productivity
Rich
UX
htmljava
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
GWTAPI
Java Server
Automatic communication
API
HTML5API
Vaadin ComponentC s0.3-beta2
<v-grid>
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'); });});
Features
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 Functiongrid.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.
Impl.
<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>
webcomponents.js
<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>
Magic
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
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
plays nice with screenreaders
simulated kinetic scrolling if needed
Apache 2.0
Vaadin ComponentC s
ComboBox
DateField
Vaadin Charts
<v-grid>
Charts
@joonaslehtinen Founder & CEO
Je zult maar letter wezen. Goed, ik ben niet ontevredet. Maar het valt niet mee in deze zeventiger jaren tot het vaderlandse alfabet te behoren. Foto-zetterijen wringen je steeds in steeds ingevikkelder. Je zult maar letter wezen. Goed, ik ben
slides slideshare.com/joonaslehtinen