Up & Running with Polymer
-
Upload
fiyaz-hasan -
Category
Technology
-
view
50 -
download
0
Transcript of Up & Running with Polymer
![Page 1: Up & Running with Polymer](https://reader036.fdocuments.in/reader036/viewer/2022062522/58ce9af31a28ab8c3b8b750f/html5/thumbnails/1.jpg)
UP & RUNNING WITH POLYMER
Fiyaz Hasan(N.B: Don’t try to pronounce my name. Just call me Fizz)
![Page 2: Up & Running with Polymer](https://reader036.fdocuments.in/reader036/viewer/2022062522/58ce9af31a28ab8c3b8b750f/html5/thumbnails/2.jpg)
WEB COMPONENTShttps://www.webcomponents.org/
![Page 3: Up & Running with Polymer](https://reader036.fdocuments.in/reader036/viewer/2022062522/58ce9af31a28ab8c3b8b750f/html5/thumbnails/3.jpg)
Allow us to bundle markup and Styles
into custom HTML elements(Magic of Shadow DOM)
![Page 4: Up & Running with Polymer](https://reader036.fdocuments.in/reader036/viewer/2022062522/58ce9af31a28ab8c3b8b750f/html5/thumbnails/4.jpg)
<div class="container"></div>
<script> var host = document.querySelector('.container'); var root = host.createShadowRoot(); root.innerHTML = '<p>Hello World</p>' </script>
Writing First Web Component!
![Page 5: Up & Running with Polymer](https://reader036.fdocuments.in/reader036/viewer/2022062522/58ce9af31a28ab8c3b8b750f/html5/thumbnails/5.jpg)
<div class="container"></div>
<template> <p>Hello I’m just a simple template</p> </template>
<script> var tmpl = document.querySelector('template'); var host = document.querySelector('.container'); var root = host.createShadowRoot(); root.appendChild(document.importNode(tmpl.content, true)); </script>
Using <template> tag
![Page 6: Up & Running with Polymer](https://reader036.fdocuments.in/reader036/viewer/2022062522/58ce9af31a28ab8c3b8b750f/html5/thumbnails/6.jpg)
<div class="container"> <p>I want myself appended inside of a template</p> </div>
<template> <content select="p"></content> </template>
Using <content> tag
![Page 7: Up & Running with Polymer](https://reader036.fdocuments.in/reader036/viewer/2022062522/58ce9af31a28ab8c3b8b750f/html5/thumbnails/7.jpg)
<script> var tmpl = document.querySelector('template');
// Create a prototype for a new element that extends HTMLElement var HelloWorldProto = Object.create(HTMLElement.prototype);
// Setup our Shadow DOM and clone the template HelloWorldProto.createdCallback = function () { var root = this.createShadowRoot(); root.appendChild(document.importNode(tmpl.content, true)); };
// Register our new element var HelloWorld = document.registerElement('hello-world', { prototype: HelloWorldProto }); </script>
Javascript for creating custom element
![Page 8: Up & Running with Polymer](https://reader036.fdocuments.in/reader036/viewer/2022062522/58ce9af31a28ab8c3b8b750f/html5/thumbnails/8.jpg)
Do you know Angular?
![Page 9: Up & Running with Polymer](https://reader036.fdocuments.in/reader036/viewer/2022062522/58ce9af31a28ab8c3b8b750f/html5/thumbnails/9.jpg)
Yes!
![Page 10: Up & Running with Polymer](https://reader036.fdocuments.in/reader036/viewer/2022062522/58ce9af31a28ab8c3b8b750f/html5/thumbnails/10.jpg)
Think of Directives…..But Wait!
![Page 11: Up & Running with Polymer](https://reader036.fdocuments.in/reader036/viewer/2022062522/58ce9af31a28ab8c3b8b750f/html5/thumbnails/11.jpg)
We have a new concept of components in
Angular 1.5.0
![Page 12: Up & Running with Polymer](https://reader036.fdocuments.in/reader036/viewer/2022062522/58ce9af31a28ab8c3b8b750f/html5/thumbnails/12.jpg)
POLYMER(https://www.polymer-project.org/)
![Page 13: Up & Running with Polymer](https://reader036.fdocuments.in/reader036/viewer/2022062522/58ce9af31a28ab8c3b8b750f/html5/thumbnails/13.jpg)
A library which can help us working with web components easily
(Just like JQuery, which helps us to work with Javascript somewhat easier but behind the scene everything is plain Javascript)
![Page 14: Up & Running with Polymer](https://reader036.fdocuments.in/reader036/viewer/2022062522/58ce9af31a28ab8c3b8b750f/html5/thumbnails/14.jpg)
In Short…• Component creation starts with defining a template in a <dom-
module> tag• Way of creating Local DOM (Shady DOM) under our Light DOM• Local DOM is a way of encapsulating a part of HTML code inside
the Light DOM• Outer scripts and styles can not interfere in Local DOM
![Page 15: Up & Running with Polymer](https://reader036.fdocuments.in/reader036/viewer/2022062522/58ce9af31a28ab8c3b8b750f/html5/thumbnails/15.jpg)
<dom-module id="hello-universe"> <template> <h1>Hello Universe Component</h1> </template></dom-module>
Defining Dom Module
![Page 16: Up & Running with Polymer](https://reader036.fdocuments.in/reader036/viewer/2022062522/58ce9af31a28ab8c3b8b750f/html5/thumbnails/16.jpg)
<dom-module id="hello-universe"> <template>
……write markup </template> <script> Polymer({ is: "hello-universe" }); </script></dom-module>
Use polymer to stop writing boilerplate code
![Page 17: Up & Running with Polymer](https://reader036.fdocuments.in/reader036/viewer/2022062522/58ce9af31a28ab8c3b8b750f/html5/thumbnails/17.jpg)
<link ref="import" href="hello-universe.html"/>
Import components in other document
![Page 18: Up & Running with Polymer](https://reader036.fdocuments.in/reader036/viewer/2022062522/58ce9af31a28ab8c3b8b750f/html5/thumbnails/18.jpg)
<!DOCTYPE html>
<html><head> <meta charset="utf-8" /> <title>Asp.Net Core Polymer Starter Template</title>
<link rel="import" href="lib/polymer/polymer.html" />
<!--Custom Elements--> <link rel="import" href="components/hello-universe.html" /></head><body> <hello-universe></hello-universe>
<script src="lib/webcomponentsjs/webcomponents-lite.js"></script> </body></html>
Don’t forget to add polymer itself
![Page 19: Up & Running with Polymer](https://reader036.fdocuments.in/reader036/viewer/2022062522/58ce9af31a28ab8c3b8b750f/html5/thumbnails/19.jpg)
<hello-universe> <p>Hello</p></hello-universe>
<dom-module id="hello-universe"> <template> <h1>Hello Universe Component</h1> <content select='p'></content> </template> <script> Polymer({ is: "hello-universe" }); </script></dom-module>
Injecting html from Light DOM to Local DOM
![Page 20: Up & Running with Polymer](https://reader036.fdocuments.in/reader036/viewer/2022062522/58ce9af31a28ab8c3b8b750f/html5/thumbnails/20.jpg)
<dom-module id="my-input"> <script> Polymer({ is: 'my-input', extends: 'input', created: function () { this.style.border = '1px solid red'; } }); </script></dom-module>
<input is="my-input">
Extending native elements
![Page 21: Up & Running with Polymer](https://reader036.fdocuments.in/reader036/viewer/2022062522/58ce9af31a28ab8c3b8b750f/html5/thumbnails/21.jpg)
Lifecycle callbacks…• Created• Ready• Attached• Detached• AttributeChanged
![Page 22: Up & Running with Polymer](https://reader036.fdocuments.in/reader036/viewer/2022062522/58ce9af31a28ab8c3b8b750f/html5/thumbnails/22.jpg)
Polymer({
is: ‘x-employee',
properties: { name: String, isHappy: Boolean, salary: { type: Number, readOnly: true, notify: true } }});
Defining Property on your component
![Page 23: Up & Running with Polymer](https://reader036.fdocuments.in/reader036/viewer/2022062522/58ce9af31a28ab8c3b8b750f/html5/thumbnails/23.jpg)
type.value.observer. readOnlynotifycomputed reflectionToAttribute
![Page 24: Up & Running with Polymer](https://reader036.fdocuments.in/reader036/viewer/2022062522/58ce9af31a28ab8c3b8b750f/html5/thumbnails/24.jpg)
<dom-module id=" x-employee "> <script> Polymer({ is: 'x-employee', properties: { employee : String, isBad: { type: Boolean, notify: true } }, attached: function() { this.textContent = "My name is " + (this.employee || "nobody") + '.\n' + "This emplyee is " + (this.isBad ? "Bad" : "Good") + "."; } }); </script></dom-module>
<x-employee employee="Fiyaz" is-bad></x-employee>
Attribute Mapping
![Page 25: Up & Running with Polymer](https://reader036.fdocuments.in/reader036/viewer/2022062522/58ce9af31a28ab8c3b8b750f/html5/thumbnails/25.jpg)
this.$. & this.$$(selector)(static nodes & dynamic (dom-repeat/ dom-if))
![Page 26: Up & Running with Polymer](https://reader036.fdocuments.in/reader036/viewer/2022062522/58ce9af31a28ab8c3b8b750f/html5/thumbnails/26.jpg)
<script> Polymer({ is: 'x-custom', listeners: { 'tap': 'regularTap', 'special.tap': 'specialTap' }, regularTap: function(e) { alert("Thank you for tapping"); }, specialTap: function(e) { alert("It was special tapping"); } }); </script>
Events
![Page 27: Up & Running with Polymer](https://reader036.fdocuments.in/reader036/viewer/2022062522/58ce9af31a28ab8c3b8b750f/html5/thumbnails/27.jpg)
<template> <button on-tap="handleTap">Kick Me</button> </template> <script> Polymer({ is: 'x-custom', handleTap: function() { alert('Ow!'); } }); </script>
Annotated Events
![Page 28: Up & Running with Polymer](https://reader036.fdocuments.in/reader036/viewer/2022062522/58ce9af31a28ab8c3b8b750f/html5/thumbnails/28.jpg)
this.listen(this.$.myButton, 'tap', 'onTap');this.unlisten(this.$.myButton, 'tap', 'onTap');
Imperatively add and remove listeners
![Page 29: Up & Running with Polymer](https://reader036.fdocuments.in/reader036/viewer/2022062522/58ce9af31a28ab8c3b8b750f/html5/thumbnails/29.jpg)
<dom-module id="x-custom"> <template> <button on-click="handleClick">Kick Me</button> </template> <script> Polymer({ is: 'x-custom', handleClick: function(e, detail) { this.fire('kick', {kicked: true}); } }); </script></dom-module><x-custom></x-custom><script> document.querySelector('x-custom').addEventListener('kick', function (e) { console.log(e.detail.kicked); // true })</script>
Custom Events
![Page 30: Up & Running with Polymer](https://reader036.fdocuments.in/reader036/viewer/2022062522/58ce9af31a28ab8c3b8b750f/html5/thumbnails/30.jpg)
<dom-module id="host-element"> <template> <target-element target-property="{{hostProperty}}"></target-element> </template></dom-module>
Data Binding
![Page 31: Up & Running with Polymer](https://reader036.fdocuments.in/reader036/viewer/2022062522/58ce9af31a28ab8c3b8b750f/html5/thumbnails/31.jpg)
<template> <!-- Attribute binding --> <my-element selected$="[[value]]"></my-element> <!-- results in <my-element>.setAttribute('selected', this.value); -->
<!-- Property binding --> <my-element selected="{{value}}"></my-element> <!-- results in <my-element>.selected = this.value; --></template>
Attribute and Property Binding
![Page 32: Up & Running with Polymer](https://reader036.fdocuments.in/reader036/viewer/2022062522/58ce9af31a28ab8c3b8b750f/html5/thumbnails/32.jpg)
<dom-module id="employee-list"> <template> <div> Employee list: </div> <template is="dom-repeat" items="{{employees}}"> <div>First name: <span>{{item.first}}</span></div> <div>Last name: <span>{{item.last}}</span></div> </template> <template is="dom-if" if="{{emplyee.isAdmin}}"> <div>You are the man</div> </template>
</template> </dom-module>
Dom-repeat, Dom-if
![Page 33: Up & Running with Polymer](https://reader036.fdocuments.in/reader036/viewer/2022062522/58ce9af31a28ab8c3b8b750f/html5/thumbnails/33.jpg)
<template id="t" is="dom-bind">
<iron-ajax url="http://..." last-response="{{data}}" auto></iron-ajax>
<template is="dom-repeat" items="{{data}}"> <div><span>{{item.first}}</span> <span>{{item.last}}</span></div> </template>
</template>
Dom-bind
![Page 34: Up & Running with Polymer](https://reader036.fdocuments.in/reader036/viewer/2022062522/58ce9af31a28ab8c3b8b750f/html5/thumbnails/34.jpg)
<user-view first="{{user.first}}" last="{{user.last}}"></user-view>
this.set('name.last', 'Maturin'); <my-page show-login="[[!isLoggedIn]]"></my-page> <div>[[_formatName(first, last, title)]]</div> <img src$="https://www.example.com/profiles/[[userId]].jpg"> <span>Name: [[lastname]], [[firstname]]</span>
[[arrayItem(myArray.*, 0, 'name')]] <input type="checkbox" checked="{{hostChecked::change}}">
<my-element value="{{hostValue::value-changed}}">
![Page 35: Up & Running with Polymer](https://reader036.fdocuments.in/reader036/viewer/2022062522/58ce9af31a28ab8c3b8b750f/html5/thumbnails/35.jpg)
Thank You!