Download as PDF, PPTX
![To include an html page in another one
HTML Imports
<link rel="import" href="warnings.html">
<script>
var link = document.querySelector('link[rel="import"]');
var content = link.import;
// Grab DOM from warning.html's document.
var el = content.querySelector('.warning');
document.body.appendChild(el.cloneNode(true));
</script>](https://image.slidesharecdn.com/polymer1-161031103010/85/Polymer-1-0-13-320.jpg)
![<paper-checkbox></paper-checkbox>
<paper-input floatinglabel
label="Type only numbers... (floating)"
validate="^[0-9]*$"
error="Input is not a number!">
</paper-input>](https://image.slidesharecdn.com/polymer1-161031103010/85/Polymer-1-0-21-320.jpg)
![● [[]] : one-way bindings OR host to child
● {{}} : automatic binding (one way or two way according to the configuration)
Data Binding : 2 way
<dom-module id="host-element">
<template>
<child-element name="{{myName}}"></child-element>
</template>
</dom-module>](https://image.slidesharecdn.com/polymer1-161031103010/85/Polymer-1-0-43-320.jpg)
![<link rel="import" href="/bower_components/google-map/google-map.html">
<link rel="import" href="/bower_components/google-map/google-map-marker.html">
<section class="map" *ngIf="displayMap">
<google-map map-type="roadmap" latitude="48.8534100" longitude="2.3488000" fit-to-markers
api-key="xxx">
<google-map-marker *ngFor="let person of people" latitude="{{person.geo.lat}}"
longitude="{{person.geo.lng}}">
</google-map-marker>
</google-map>
</section>
Just let me know you’re a WC...
@NgModule({
imports: [],
declarations : [],
schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})](https://image.slidesharecdn.com/polymer1-161031103010/85/Polymer-1-0-62-320.jpg)
Uploaded byCyril Balit
Polymer 1.0
This document provides an overview of Polymer and web components. It introduces key concepts like custom elements, shadow DOM, HTML imports, and templates. It demonstrates how to define a custom element and component API. It also covers Polymer features like data binding, DOM repeat, and CSS styling. Various tools for Polymer development are presented, like the Polymer CLI, Bower, and Web Components Tester. Examples of implementing common elements and integrating Polymer in applications are given.
More Related Content
Polymer 1.0
- 1.
- 2. About me... Cyril Balit CTOFront @cbalit
- 3.
- 7.
- 9.
- 10.
- 11. To define yourown HTML tag Custom Element <body> ... <script> var XFoo = document.registerElement('x-foo', { prototype: Object.create(HTMLElement.prototype) }); </script> <x-foo></x-foo> </body>
- 12. To encapsulate subtreeand style in an element Shadow DOM <button>Hello, world!</button> <script> var host = document.querySelector('button'); var root = host.createShadowRoot(); root.textContent = 'こんにちは、影の世界 !'; </script>
- 13. To include anhtml page in another one HTML Imports <link rel="import" href="warnings.html"> <script> var link = document.querySelector('link[rel="import"]'); var content = link.import; // Grab DOM from warning.html's document. var el = content.querySelector('.warning'); document.body.appendChild(el.cloneNode(true)); </script>
- 14. To have clonabledocument template Template <template id="mytemplate"> <img src="" alt="great image"> <div class="comment"></div> </template> var t = document.querySelector('#mytemplate'); // Populate the src at runtime. t.content.querySelector('img').src = 'logo.png'; var clone = document.importNode(t.content, true); document.body.appendChild(clone);
- 17.
- 18.
- 20.
- 21. <paper-checkbox></paper-checkbox> <paper-input floatinglabel label="Type onlynumbers... (floating)" validate="^[0-9]*$" error="Input is not a number!"> </paper-input>
- 22. A simple containerwith a header section and a content section <paper-header-panel> <paper-header-panel flex> <paper-toolbar> <paper-icon-button icon=“menu"> </paper-icon-button> <div>MY APP</div> </paper-toolbar> <div>…</div> </paper-header-panel> MY APP
- 23. <paper-drawer-panel> <paper-drawer-panel> <div drawer> Drawerpanel... </div> <div main> Main panel... </div> </paper-drawer-panel>
- 24.
- 25. Polymer CLI npm install-g polymer-cli polymer init polymer test polymer lint polymer serve polymer build
- 26. New elements… foryour application
- 27. Container <app-header-layout> <app-header-layout flex> <app-header fixedcondenses effects="waterfall"> <app-toolbar> <div title>App name</div> </app-toolbar> </app-header> <div>…</div> </app-header-layout>
- 28. Headers <app-header> ● Behavior ○ fixed ○reveals ○ condenses ● Scroll Effects ○ waterfall ○ parallax
- 29.
- 30.
- 31. Coming soon ... ●ES6 ○ optional ● Custom element V1 ○ lifecycle changes ● Shadow Dom V1 ○ slot ● Closer to the standard ○ no more polymer.fire…. ● January 2017
- 32.
- 34. <dom-module id="paper-card"> <style> :host {border-radius: 2px; } .card-header ::content img { width: 70px; border-radius: 50%; } paper-material { border-radius: 2px; } </style> <template> <paper-material elevation="{{elevation}}" animated on-tap=”tapAction”> <div class="card-header layout horizontal center”> <content select="img"></content> <h3>{{heading}}</h3> </div> <content></content> </paper-material> </template> </dom-module> <script> Polymer({ is:'paper-card', properties: { heading: {type: String, reflectToAttribute: true, value: “”}, elevation: {type: Number, reflectToAttribute: true, value: 1} }, attached: function() { /* your initialisations here */ }, tapAction: function (e) { /* your event handling here */ } }); </script> script/prototype the name must have a “-” published attributes tags/shadowDOMandstyle Anatomy of a component
- 35.
- 36. Import your element <html> <head> <scriptsrc="webcomponents/webcomponents-lite.min.js"></script> <link rel="import" href="paper-card.html"> </head> <body> </body> </html>
- 37. Use it <html> <head> <script src="webcomponents/webcomponents-lite.min.js"></script> <linkrel="import" href="paper-card.html"> </head> <body> <paper-card heading="hello my friend"> <img src="avatar.svg"> </paper-card> </body> </html>
- 38. API of anelement ● Attributes ● Properties ● Methods ● Events
- 39. ● type ● defaultvalue ● observers ● notification Polymer({ is: 'x-custom', properties: { userName: String, count: { type: Number, value: 5 observer: '_countChanged', notify: true } _countChanged: function(newVal, oldVal) {} } }); <x-custom on-count-changed="do()"></x-custom> Properties
- 40. ● dispatch withfire ● can send datas Polymer({ is: 'x-custom', handleClick: function() { this.fire('kick', {kicked: true}); } }); <x-custom></x-custom> <script> document.querySelector('x-custom').addEventListener ('kick', function (e) { console.log(e.detail.kicked); // true }) </script> Events
- 41. Get and usePolymer({ is: 'x-custom', doSomething: function() { ... } }); <x-custom></x-custom> <script> var elmt=document.querySelector('x-custom'); elmt.doSomething(); </script> Method
- 42.
- 43. ● [[]] :one-way bindings OR host to child ● {{}} : automatic binding (one way or two way according to the configuration) Data Binding : 2 way <dom-module id="host-element"> <template> <child-element name="{{myName}}"></child-element> </template> </dom-module>
- 44. ● iterate ona list ● filter/sort feature <dom-module id="employee-list"> <template> <template is="dom-repeat" items="{{employees}}"> <div># <span>{{index}}</span></div> <div>First name: <span>{{item.first}}</span></div> </template> </template> … </dom-module> Helpers : dom-repeat
- 45. ● Conditional Template <dom-moduleid="user-page"> <template> <template> All users will see this: <div>{{user.name}}</div> <template is="dom-if" if="{{user.isAdmin}}"> Only admins will see this. <div>{{user.secretAdminStuff}}</div> </template> </template> … </dom-module> Helpers : dom-if
- 46. <div class="horizontal layout"> <div>One</div> <div>Two</div> <div>Three</div> </div> ●compute properties ● behavior ● flex layout ● ... And also
- 47.
- 48. with shadow dom,new selectors ● :host ● ::content ● Cross scope Styling ○ ::shadow et /deep/ source :http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/ CSS et Shadow Dom
- 49. compatible with thefutur W3C CSS Custom Properties <dom-module id="my-button"> <template> <style> .title { color: var(--my-toolbar-title-color,red); } :host { @apply(--my-button-theme); } </style> </template> </dom-module> <style> .submit { --my-toolbar-title-color: green; } .special { --my-button-theme:{ padding:20px; backgound-color:red; } </style> <my-button class="submit"></my-button> <my-button class="special"></my-button> Custom CSS properties / mixins
- 50.
- 51. An implementation ofthe google-recaptcha component <re-captcha> <re-captcha sitekey="yoursitekey"></re-captcha> source: https://github.com/cbalit/re-captcha
- 52. A authentification component <frf-login> <frf-loginloginurl=“/login" logouturl=“/logout"> <span>C’est qui ?</span> </frf-login>
- 53.
- 54.
- 55.
- 56.
- 57. API of anelement ● Attributes ● Properties ● Methods ● Events
- 58. The promise Write once... ...run everywhere
- 59. ui: { $frfLogin: 'frf-login' }, events:{ 'login-success frf-login': 'onLogin', }, onLogin: function (e) { this.ui.$frfLogin.hide(); var userDatas=this.ui.$frfLogin.get(0).getCurrentUser(); } Just an HTML element <div class="views"> <frf-login login-url="{{loginUrl}}" logout-url= "{{logoutUrl}}"> <span id="title">franfinance</ span> </frf-login> </div>
- 60. render() { reactPolymer.registerAttribute('login-url'); reactPolymer.registerEvent('login-success','login-success'); return ( <div> <linkrel="import" href="frf-login/frf-login.html"/> <div className="views"> <frf-login ref="frfLogin" login-url={loginUrl} logout-url={logoutUrl} login-success={this.onLogin}> <span id="title">C'est qui ?</span> </frf-login> </div> </div> ); } onLogin(event) { var userDatas = this.refs.frfLogin.getDOMNode().getCurrentUser(); } I need some help https://github.com/jscissr/react-polymer
- 61. <frf-login id="loginCpnt" login-url='{{login.config.loginUrl}}' login-success="login.onlogin($pEvent)" login-ready= "login.onready()" bind-polymer-event="login-success,login-ready"> </frf-login> Listeningto an event https://github.com/cbalit/bind-polymer-event this.frfElemt = document.getElementById ('loginCpnt'); if (this.frfElemt.isUserAuthenticated ()) { var userInfo = this.frfElemt.getCurrentUser ().toJSON(); this.proceedLogin (userInfo); }
- 62. <link rel="import" href="/bower_components/google-map/google-map.html"> <linkrel="import" href="/bower_components/google-map/google-map-marker.html"> <section class="map" *ngIf="displayMap"> <google-map map-type="roadmap" latitude="48.8534100" longitude="2.3488000" fit-to-markers api-key="xxx"> <google-map-marker *ngFor="let person of people" latitude="{{person.geo.lat}}" longitude="{{person.geo.lng}}"> </google-map-marker> </google-map> </section> Just let me know you’re a WC... @NgModule({ imports: [], declarations : [], schemas: [ CUSTOM_ELEMENTS_SCHEMA ] })
- 63.
- 64. Polymer CLI npm install-g polymer-cli polymer init polymer test polymer lint polymer serve polymer build
- 65. bower install --savePolymer/polymer#^1.0.0 bower install --save PolymerElements/iron-elements bower install --save PolymerElements/paper-elements bower install --save PolymerElements/gold-elements Bower
- 66. npm install -ggenerator-polymer yo polymer (polymer:app) yo polymer:el yo polymer:seed yo polymer:gh Yeoman
- 67. npm install -gweb-component-tester wtc OR bower install Polymer/web-component-tester --save <script src="../../web-component-tester/browser.js"></script> Web Components Tester
- 68.
- 69. ● PolyUp ● PolyServe ●PolyLint ● Vulcanize ● Crisper ● PolyBuild ● ... And also
- 70.