vaadin components @ angular u
TRANSCRIPT
![Page 1: Vaadin Components @ Angular U](https://reader035.vdocuments.mx/reader035/viewer/2022062304/55c36d43bb61eb1a788b4756/html5/thumbnails/1.jpg)
Vaadin Components
@joonaslehtinen Founder & CEO
for AngularJS
![Page 2: Vaadin Components @ Angular U](https://reader035.vdocuments.mx/reader035/viewer/2022062304/55c36d43bb61eb1a788b4756/html5/thumbnails/2.jpg)
Vaadin Framework?
![Page 3: Vaadin Components @ Angular U](https://reader035.vdocuments.mx/reader035/viewer/2022062304/55c36d43bb61eb1a788b4756/html5/thumbnails/3.jpg)
User Interface Components
![Page 4: Vaadin Components @ Angular U](https://reader035.vdocuments.mx/reader035/viewer/2022062304/55c36d43bb61eb1a788b4756/html5/thumbnails/4.jpg)
For "business apps"
![Page 5: Vaadin Components @ Angular U](https://reader035.vdocuments.mx/reader035/viewer/2022062304/55c36d43bb61eb1a788b4756/html5/thumbnails/5.jpg)
Developer
Productivity
Rich
UX
![Page 6: Vaadin Components @ Angular U](https://reader035.vdocuments.mx/reader035/viewer/2022062304/55c36d43bb61eb1a788b4756/html5/thumbnails/6.jpg)
htmljava
![Page 7: Vaadin Components @ Angular U](https://reader035.vdocuments.mx/reader035/viewer/2022062304/55c36d43bb61eb1a788b4756/html5/thumbnails/7.jpg)
Automated Communication
Statically typed Java
Components
![Page 8: Vaadin Components @ Angular U](https://reader035.vdocuments.mx/reader035/viewer/2022062304/55c36d43bb61eb1a788b4756/html5/thumbnails/8.jpg)
Automated Communication
Statically typed Java
Components
Framework
Components web
![Page 9: Vaadin Components @ Angular U](https://reader035.vdocuments.mx/reader035/viewer/2022062304/55c36d43bb61eb1a788b4756/html5/thumbnails/9.jpg)
<v-grid>Sass API for theme engine
<v-component> / JS API
GWTAPI
Java Server
Automatic communication
API
HTML5API
![Page 10: Vaadin Components @ Angular U](https://reader035.vdocuments.mx/reader035/viewer/2022062304/55c36d43bb61eb1a788b4756/html5/thumbnails/10.jpg)
Vaadin ComponentC s0.3-beta2
![Page 11: Vaadin Components @ Angular U](https://reader035.vdocuments.mx/reader035/viewer/2022062304/55c36d43bb61eb1a788b4756/html5/thumbnails/11.jpg)
<v-grid>
![Page 14: Vaadin Components @ Angular U](https://reader035.vdocuments.mx/reader035/viewer/2022062304/55c36d43bb61eb1a788b4756/html5/thumbnails/14.jpg)
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>...
![Page 16: Vaadin Components @ Angular U](https://reader035.vdocuments.mx/reader035/viewer/2022062304/55c36d43bb61eb1a788b4756/html5/thumbnails/16.jpg)
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>
![Page 17: Vaadin Components @ Angular U](https://reader035.vdocuments.mx/reader035/viewer/2022062304/55c36d43bb61eb1a788b4756/html5/thumbnails/17.jpg)
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]})
![Page 18: Vaadin Components @ Angular U](https://reader035.vdocuments.mx/reader035/viewer/2022062304/55c36d43bb61eb1a788b4756/html5/thumbnails/18.jpg)
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);
![Page 19: Vaadin Components @ Angular U](https://reader035.vdocuments.mx/reader035/viewer/2022062304/55c36d43bb61eb1a788b4756/html5/thumbnails/19.jpg)
Setup (1/2)
<script src="webcomponents-lite.js"></script>
<script src="https://github.jspm.io/jmcriffey/[email protected]/traceur-runtime.js"></script>
<script src="https://jspm.io/[email protected]"></script>
<link rel="import" href="vaadin-grid.html">
![Page 20: Vaadin Components @ Angular U](https://reader035.vdocuments.mx/reader035/viewer/2022062304/55c36d43bb61eb1a788b4756/html5/thumbnails/20.jpg)
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'); });});
![Page 22: Vaadin Components @ Angular U](https://reader035.vdocuments.mx/reader035/viewer/2022062304/55c36d43bb61eb1a788b4756/html5/thumbnails/22.jpg)
Features
![Page 23: Vaadin Components @ Angular U](https://reader035.vdocuments.mx/reader035/viewer/2022062304/55c36d43bb61eb1a788b4756/html5/thumbnails/23.jpg)
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";
![Page 24: Vaadin Components @ Angular U](https://reader035.vdocuments.mx/reader035/viewer/2022062304/55c36d43bb61eb1a788b4756/html5/thumbnails/24.jpg)
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);};
![Page 25: Vaadin Components @ Angular U](https://reader035.vdocuments.mx/reader035/viewer/2022062304/55c36d43bb61eb1a788b4756/html5/thumbnails/25.jpg)
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();};
![Page 26: Vaadin Components @ Angular U](https://reader035.vdocuments.mx/reader035/viewer/2022062304/55c36d43bb61eb1a788b4756/html5/thumbnails/26.jpg)
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
![Page 27: Vaadin Components @ Angular U](https://reader035.vdocuments.mx/reader035/viewer/2022062304/55c36d43bb61eb1a788b4756/html5/thumbnails/27.jpg)
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>
![Page 28: Vaadin Components @ Angular U](https://reader035.vdocuments.mx/reader035/viewer/2022062304/55c36d43bb61eb1a788b4756/html5/thumbnails/28.jpg)
Default row
grid.header.defaultRow = 1;
![Page 29: Vaadin Components @ Angular U](https://reader035.vdocuments.mx/reader035/viewer/2022062304/55c36d43bb61eb1a788b4756/html5/thumbnails/29.jpg)
Frozen columns
<v-grid frozen-columns="1"> <table> …
grid.frozenColumns = 1;
or
![Page 30: Vaadin Components @ Angular U](https://reader035.vdocuments.mx/reader035/viewer/2022062304/55c36d43bb61eb1a788b4756/html5/thumbnails/30.jpg)
Interactive headers
grid.header.getCell(1, 0).content = filterElement;
![Page 31: Vaadin Components @ Angular U](https://reader035.vdocuments.mx/reader035/viewer/2022062304/55c36d43bb61eb1a788b4756/html5/thumbnails/31.jpg)
Styles
grid.rowClassGenerator = function(row) { return classFor(row.data);};
grid.cellClassGenerator = function(cell) { return classFor(cell.index, cell.row.data);};
![Page 32: Vaadin Components @ Angular U](https://reader035.vdocuments.mx/reader035/viewer/2022062304/55c36d43bb61eb1a788b4756/html5/thumbnails/32.jpg)
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;
![Page 33: Vaadin Components @ Angular U](https://reader035.vdocuments.mx/reader035/viewer/2022062304/55c36d43bb61eb1a788b4756/html5/thumbnails/33.jpg)
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="">
![Page 34: Vaadin Components @ Angular U](https://reader035.vdocuments.mx/reader035/viewer/2022062304/55c36d43bb61eb1a788b4756/html5/thumbnails/34.jpg)
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.
![Page 36: Vaadin Components @ Angular U](https://reader035.vdocuments.mx/reader035/viewer/2022062304/55c36d43bb61eb1a788b4756/html5/thumbnails/36.jpg)
Impl.
![Page 37: Vaadin Components @ Angular U](https://reader035.vdocuments.mx/reader035/viewer/2022062304/55c36d43bb61eb1a788b4756/html5/thumbnails/37.jpg)
![Page 38: Vaadin Components @ Angular U](https://reader035.vdocuments.mx/reader035/viewer/2022062304/55c36d43bb61eb1a788b4756/html5/thumbnails/38.jpg)
![Page 39: Vaadin Components @ Angular U](https://reader035.vdocuments.mx/reader035/viewer/2022062304/55c36d43bb61eb1a788b4756/html5/thumbnails/39.jpg)
<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 });
![Page 40: Vaadin Components @ Angular U](https://reader035.vdocuments.mx/reader035/viewer/2022062304/55c36d43bb61eb1a788b4756/html5/thumbnails/40.jpg)
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
![Page 41: Vaadin Components @ Angular U](https://reader035.vdocuments.mx/reader035/viewer/2022062304/55c36d43bb61eb1a788b4756/html5/thumbnails/41.jpg)
index.html<link rel="import" href="component.html" >
component.html<link rel="stylesheet" href="css/style.css"> <script src="js/script.js"></script>
![Page 42: Vaadin Components @ Angular U](https://reader035.vdocuments.mx/reader035/viewer/2022062304/55c36d43bb61eb1a788b4756/html5/thumbnails/42.jpg)
<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>
![Page 43: Vaadin Components @ Angular U](https://reader035.vdocuments.mx/reader035/viewer/2022062304/55c36d43bb61eb1a788b4756/html5/thumbnails/43.jpg)
webcomponents.js
![Page 44: Vaadin Components @ Angular U](https://reader035.vdocuments.mx/reader035/viewer/2022062304/55c36d43bb61eb1a788b4756/html5/thumbnails/44.jpg)
![Page 45: Vaadin Components @ Angular U](https://reader035.vdocuments.mx/reader035/viewer/2022062304/55c36d43bb61eb1a788b4756/html5/thumbnails/45.jpg)
<my-counter counter="10">Points</my-counter>
![Page 46: Vaadin Components @ Angular U](https://reader035.vdocuments.mx/reader035/viewer/2022062304/55c36d43bb61eb1a788b4756/html5/thumbnails/46.jpg)
<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>
![Page 47: Vaadin Components @ Angular U](https://reader035.vdocuments.mx/reader035/viewer/2022062304/55c36d43bb61eb1a788b4756/html5/thumbnails/47.jpg)
![Page 48: Vaadin Components @ Angular U](https://reader035.vdocuments.mx/reader035/viewer/2022062304/55c36d43bb61eb1a788b4756/html5/thumbnails/48.jpg)
<v-grid> 193 files 37 kLOC 2 years 3 - 5 persons No human sacrifices ;)</v-grid>
![Page 49: Vaadin Components @ Angular U](https://reader035.vdocuments.mx/reader035/viewer/2022062304/55c36d43bb61eb1a788b4756/html5/thumbnails/49.jpg)
Magic
![Page 50: Vaadin Components @ Angular U](https://reader035.vdocuments.mx/reader035/viewer/2022062304/55c36d43bb61eb1a788b4756/html5/thumbnails/50.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 51: Vaadin Components @ Angular U](https://reader035.vdocuments.mx/reader035/viewer/2022062304/55c36d43bb61eb1a788b4756/html5/thumbnails/51.jpg)
Row 1
Row 6
Row 7
Row 8
Row ...
Row 2
Row 3
Row 4
Row 5
lördag 24 januari 15
![Page 52: Vaadin Components @ Angular U](https://reader035.vdocuments.mx/reader035/viewer/2022062304/55c36d43bb61eb1a788b4756/html5/thumbnails/52.jpg)
Row 1
Row 6
Row 7
Row 8
Row ...
Row 2
Row 3
Row 4
Row 5
lördag 24 januari 15
![Page 53: Vaadin Components @ Angular U](https://reader035.vdocuments.mx/reader035/viewer/2022062304/55c36d43bb61eb1a788b4756/html5/thumbnails/53.jpg)
Row 2
Row 3
Row 4
Row 5
lördag 24 januari 15
![Page 54: Vaadin Components @ Angular U](https://reader035.vdocuments.mx/reader035/viewer/2022062304/55c36d43bb61eb1a788b4756/html5/thumbnails/54.jpg)
Row 3
Row 4
Row 5
lördag 24 januari 15
![Page 55: Vaadin Components @ Angular U](https://reader035.vdocuments.mx/reader035/viewer/2022062304/55c36d43bb61eb1a788b4756/html5/thumbnails/55.jpg)
Row 3
Row 4
Row 5
Row 6
lördag 24 januari 15
![Page 56: Vaadin Components @ Angular U](https://reader035.vdocuments.mx/reader035/viewer/2022062304/55c36d43bb61eb1a788b4756/html5/thumbnails/56.jpg)
Row 3
Row 4
Row 5
Row 6
lördag 24 januari 15
![Page 57: Vaadin Components @ Angular U](https://reader035.vdocuments.mx/reader035/viewer/2022062304/55c36d43bb61eb1a788b4756/html5/thumbnails/57.jpg)
Row 3
Row 4
Row 5
Row 6
lördag 24 januari 15
![Page 58: Vaadin Components @ Angular U](https://reader035.vdocuments.mx/reader035/viewer/2022062304/55c36d43bb61eb1a788b4756/html5/thumbnails/58.jpg)
Row 4
Row 5
Row 6
Row 7
lördag 24 januari 15
![Page 59: Vaadin Components @ Angular U](https://reader035.vdocuments.mx/reader035/viewer/2022062304/55c36d43bb61eb1a788b4756/html5/thumbnails/59.jpg)
Row 4
Row 5
Row 6
Row 7
lördag 24 januari 15
![Page 60: Vaadin Components @ Angular U](https://reader035.vdocuments.mx/reader035/viewer/2022062304/55c36d43bb61eb1a788b4756/html5/thumbnails/60.jpg)
Row 4
Row 5
Row 6
Row 7
Row 4
lördag 24 januari 15
![Page 61: Vaadin Components @ Angular U](https://reader035.vdocuments.mx/reader035/viewer/2022062304/55c36d43bb61eb1a788b4756/html5/thumbnails/61.jpg)
Row 5
Row 6
Row 7
Row 8
Row 8
lördag 24 januari 15
![Page 62: Vaadin Components @ Angular U](https://reader035.vdocuments.mx/reader035/viewer/2022062304/55c36d43bb61eb1a788b4756/html5/thumbnails/62.jpg)
will-change: transform;transform: translate(0, -y);
transform: translate3d(0, -y, 0);
top: y;
GPU acceleration
lördag 24 januari 15
![Page 63: Vaadin Components @ Angular U](https://reader035.vdocuments.mx/reader035/viewer/2022062304/55c36d43bb61eb1a788b4756/html5/thumbnails/63.jpg)
plays nice with screenreaders
![Page 64: Vaadin Components @ Angular U](https://reader035.vdocuments.mx/reader035/viewer/2022062304/55c36d43bb61eb1a788b4756/html5/thumbnails/64.jpg)
simulated kinetic scrolling if needed
![Page 66: Vaadin Components @ Angular U](https://reader035.vdocuments.mx/reader035/viewer/2022062304/55c36d43bb61eb1a788b4756/html5/thumbnails/66.jpg)
Apache 2.0
![Page 67: Vaadin Components @ Angular U](https://reader035.vdocuments.mx/reader035/viewer/2022062304/55c36d43bb61eb1a788b4756/html5/thumbnails/67.jpg)
Vaadin ComponentC s
![Page 68: Vaadin Components @ Angular U](https://reader035.vdocuments.mx/reader035/viewer/2022062304/55c36d43bb61eb1a788b4756/html5/thumbnails/68.jpg)
![Page 69: Vaadin Components @ Angular U](https://reader035.vdocuments.mx/reader035/viewer/2022062304/55c36d43bb61eb1a788b4756/html5/thumbnails/69.jpg)
ComboBox
![Page 70: Vaadin Components @ Angular U](https://reader035.vdocuments.mx/reader035/viewer/2022062304/55c36d43bb61eb1a788b4756/html5/thumbnails/70.jpg)
DateField
![Page 71: Vaadin Components @ Angular U](https://reader035.vdocuments.mx/reader035/viewer/2022062304/55c36d43bb61eb1a788b4756/html5/thumbnails/71.jpg)
![Page 72: Vaadin Components @ Angular U](https://reader035.vdocuments.mx/reader035/viewer/2022062304/55c36d43bb61eb1a788b4756/html5/thumbnails/72.jpg)
![Page 73: Vaadin Components @ Angular U](https://reader035.vdocuments.mx/reader035/viewer/2022062304/55c36d43bb61eb1a788b4756/html5/thumbnails/73.jpg)
![Page 74: Vaadin Components @ Angular U](https://reader035.vdocuments.mx/reader035/viewer/2022062304/55c36d43bb61eb1a788b4756/html5/thumbnails/74.jpg)
![Page 75: Vaadin Components @ Angular U](https://reader035.vdocuments.mx/reader035/viewer/2022062304/55c36d43bb61eb1a788b4756/html5/thumbnails/75.jpg)
![Page 76: Vaadin Components @ Angular U](https://reader035.vdocuments.mx/reader035/viewer/2022062304/55c36d43bb61eb1a788b4756/html5/thumbnails/76.jpg)
Vaadin Charts
![Page 77: Vaadin Components @ Angular U](https://reader035.vdocuments.mx/reader035/viewer/2022062304/55c36d43bb61eb1a788b4756/html5/thumbnails/77.jpg)
![Page 78: Vaadin Components @ Angular U](https://reader035.vdocuments.mx/reader035/viewer/2022062304/55c36d43bb61eb1a788b4756/html5/thumbnails/78.jpg)
<v-grid>
Charts
![Page 79: Vaadin Components @ Angular U](https://reader035.vdocuments.mx/reader035/viewer/2022062304/55c36d43bb61eb1a788b4756/html5/thumbnails/79.jpg)
@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