Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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
GWT
API
Java Server
Automatic
communication
API
HTML5
API
Vaadin Component
C s
0.3-beta2
<v-grid>
Static
<v-grid>
<table>
<colgroup>
<col header-text="Name">
<col header-text="Value">
<col header-text="Progress">
</colgr...
Component: Template
<v-grid (select)="select($event)">
<table>
<colgroup>
<col width=54>
<col header-text="First">
<col he...
Component: Code (1/2)
import {bootstrap, Component, View, NgFor, NgIf} from 'angular2/
angular2';
@Component({
selector: '...
Component: Code (2/2)
export class AngularGridExample {
users;
selected;
constructor() { < Fetch some users to _this.users...
Setup (1/2)
<script src="webcomponents-lite.js"></script>
<script src="https://github.jspm.io/jmcriffey/bower-traceur-
run...
Setup (2/2)
window.addEventListener("WebComponentsReady",function() {
var fileref = document.createElement("script");
file...
https://github.com/jojule/angular-grid-example
Features
Data-source: Array
grid.data.source = [
{ projectName: "Project A", cost: {estimate: 10, current: 80 } },
{ projectName: "...
Data-source: Function
var data = [ [ "Project A", 10000, 0.8 ],
[ "Project B", 87654, 0.2 ],
[ "Project C", 12999, 0.6 ] ]...
Data-source: Async Function
grid.data.source = function(req) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = fu...
Columns
<v-grid>
<table>
<colgroup>
<col header-text="Name" width="100" flex="1">
<col header-text="Surname" max-width="20...
Multilevel headers/footers
<v-grid>
<table>
<colgroup>
<col><col><col><col>
</colgroup>
<thead>
<tr><th colspan="2">Emp.</...
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) {
r...
Renderers
var progressRenderer = function(cell) {
cell.element.innerHTML = '';
var child = document.createElement('progres...
Sorting
var data = [ [ "Project A", 10000, 0.8 ],
[ "Project D", 999999, 0.2 ],
[ "Project C", 43256, 0.01 ]];
grid.data.s...
Selection
• Single is the default selection mode for
Grid. It allows only one row to be
selected at once.
• Multi selectio...
http://vaadin.github.io/components-examples/
Impl.
<x-component></x-component>
var proto = Object.create(HTMLElement.prototype);
proto.createdCallback = function() {
var div...
var host = document.querySelector('#host');
var root = host.createShadowRoot(); // Create a Shadow Root
var div = document...
index.html
<link rel="import" href="component.html" >
component.html
<link rel="stylesheet" href="css/style.css">
<script ...
<template id="template">
<style>
...
</style>
<div>
<h1>Web Components</h1>
<img src="http://webcomponents.org/img/logo.sv...
webcomponents.js
<my-counter counter="10">Points</my-counter>
<polymer-element name="my-counter" attributes="counter">
<template>
<style> /*...*/ </style>
<div id="label"><content></co...
<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 15
in these DOM elements
Get data for row 15
Ext...
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
plays nice with
screenreaders
simulated kinetic
scrolling if needed
https://github.com/vaadin/components
Apache 2.0
Vaadin Component
C s
ComboBox
DateField
Vaadin Charts
<v-grid>
Charts
@joonaslehtinen
Founder & CEO
slides
slideshare.com/joonaslehtinen
Vaadin Components @ Angular U
Vaadin Components @ Angular U
Vaadin Components @ Angular U
Vaadin Components @ Angular U
Vaadin Components @ Angular U
Vaadin Components @ Angular U
Vaadin Components @ Angular U
Vaadin Components @ Angular U
Vaadin Components @ Angular U
Vaadin Components @ Angular U
Vaadin Components @ Angular U
Vaadin Components @ Angular U
Vaadin Components @ Angular U
Vaadin Components @ Angular U
Nächste SlideShare
Wird geladen in …5
×

Vaadin Components @ Angular U

1.800 Aufrufe

Veröffentlicht am

My presentation on Vaadin's high performance data grid that is available to use from any client-side framework. Examples from Angular 2.

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

Vaadin Components @ Angular U

  1. 1. Vaadin Components @joonaslehtinen Founder & CEO
 
 
 for AngularJS
  2. 2. Vaadin Framework?
  3. 3. User Interface Components
  4. 4. For "business apps"
  5. 5. Developer Productivity Rich UX
  6. 6. htmljava
  7. 7. Automated Communication Statically typed Java Components
  8. 8. Automated Communication Statically typed Java Components Framework Components web
  9. 9. <v-grid> Sass API for theme engine <v-component> / JS API GWT API Java Server Automatic communication API HTML5 API
  10. 10. Vaadin Component C s 0.3-beta2
  11. 11. <v-grid>
  12. 12. 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> ...
  13. 13. 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>
  14. 14. 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] })
  15. 15. 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);
  16. 16. 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">
  17. 17. 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'); }); });
  18. 18. https://github.com/jojule/angular-grid-example
  19. 19. Features
  20. 20. 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";
  21. 21. 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); };
  22. 22. 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(); };
  23. 23. 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
  24. 24. 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>
  25. 25. Default row grid.header.defaultRow = 1;
  26. 26. Frozen columns <v-grid frozen-columns="1"> <table> … grid.frozenColumns = 1; or
  27. 27. Interactive headers grid.header.getCell(1, 0).content = filterElement;
  28. 28. Styles grid.rowClassGenerator = function(row) { return classFor(row.data); }; grid.cellClassGenerator = function(cell) { return classFor(cell.index, cell.row.data); };
  29. 29. 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;
  30. 30. 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="">
  31. 31. 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.
  32. 32. http://vaadin.github.io/components-examples/
  33. 33. Impl.
  34. 34. <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 });
  35. 35. 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
  36. 36. index.html <link rel="import" href="component.html" > component.html <link rel="stylesheet" href="css/style.css"> <script src="js/script.js"></script>
  37. 37. <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>
  38. 38. webcomponents.js
  39. 39. <my-counter counter="10">Points</my-counter>
  40. 40. <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>
  41. 41. <v-grid>
 193 files 37 kLOC
 2 years
 3 - 5 persons No human sacrifices ;)
 </v-grid>
  42. 42. Magic
  43. 43. 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
  44. 44. Row 1 Row 6 Row 7 Row 8 Row ... Row 2 Row 3 Row 4 Row 5 lördag 24 januari 15
  45. 45. Row 1 Row 6 Row 7 Row 8 Row ... Row 2 Row 3 Row 4 Row 5 lördag 24 januari 15
  46. 46. Row 2 Row 3 Row 4 Row 5 lördag 24 januari 15
  47. 47. Row 3 Row 4 Row 5 lördag 24 januari 15
  48. 48. Row 3 Row 4 Row 5 Row 6 lördag 24 januari 15
  49. 49. Row 3 Row 4 Row 5 Row 6 lördag 24 januari 15
  50. 50. Row 3 Row 4 Row 5 Row 6 lördag 24 januari 15
  51. 51. Row 4 Row 5 Row 6 Row 7 lördag 24 januari 15
  52. 52. Row 4 Row 5 Row 6 Row 7 lördag 24 januari 15
  53. 53. Row 4 Row 5 Row 6 Row 7 Row 4 lördag 24 januari 15
  54. 54. Row 5 Row 6 Row 7 Row 8 Row 8 lördag 24 januari 15
  55. 55. will-change: transform; transform: translate(0, -y); transform: translate3d(0, -y, 0); top: y; GPU acceleration
  56. 56. plays nice with screenreaders
  57. 57. simulated kinetic scrolling if needed
  58. 58. https://github.com/vaadin/components
  59. 59. Apache 2.0
  60. 60. Vaadin Component C s
  61. 61. ComboBox
  62. 62. DateField
  63. 63. Vaadin Charts
  64. 64. <v-grid> Charts
  65. 65. @joonaslehtinen Founder & CEO slides slideshare.com/joonaslehtinen

×