View
51
Download
0
Category
Preview:
Citation preview
UP & RUNNING WITH POLYMER
Fiyaz Hasan(N.B: Don’t try to pronounce my name. Just call me Fizz)
WEB COMPONENTShttps://www.webcomponents.org/
Allow us to bundle markup and Styles
into custom HTML elements(Magic of Shadow DOM)
<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!
<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
<div class="container"> <p>I want myself appended inside of a template</p> </div>
<template> <content select="p"></content> </template>
Using <content> tag
<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
Do you know Angular?
Yes!
Think of Directives…..But Wait!
We have a new concept of components in
Angular 1.5.0
POLYMER(https://www.polymer-project.org/)
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)
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
<dom-module id="hello-universe"> <template> <h1>Hello Universe Component</h1> </template></dom-module>
Defining Dom Module
<dom-module id="hello-universe"> <template>
……write markup </template> <script> Polymer({ is: "hello-universe" }); </script></dom-module>
Use polymer to stop writing boilerplate code
<link ref="import" href="hello-universe.html"/>
Import components in other document
<!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
<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
<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
Lifecycle callbacks…• Created• Ready• Attached• Detached• AttributeChanged
Polymer({
is: ‘x-employee',
properties: { name: String, isHappy: Boolean, salary: { type: Number, readOnly: true, notify: true } }});
Defining Property on your component
type.value.observer. readOnlynotifycomputed reflectionToAttribute
<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
this.$. & this.$$(selector)(static nodes & dynamic (dom-repeat/ dom-if))
<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
<template> <button on-tap="handleTap">Kick Me</button> </template> <script> Polymer({ is: 'x-custom', handleTap: function() { alert('Ow!'); } }); </script>
Annotated Events
this.listen(this.$.myButton, 'tap', 'onTap');this.unlisten(this.$.myButton, 'tap', 'onTap');
Imperatively add and remove listeners
<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
<dom-module id="host-element"> <template> <target-element target-property="{{hostProperty}}"></target-element> </template></dom-module>
Data Binding
<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
<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
<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
<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}}">
Thank You!
Recommended