Polimer - Panduan Cepat

Polymer.js adalah pustaka JavaScript yang dibuat oleh Google yang memungkinkan penggunaan kembali elemen HTML untuk membangun aplikasi dengan komponen.

Polymer adalah pustaka JavaScript sumber terbuka yang dikembangkan oleh pengembang Google dan awalnya dirilis pada 27 Mei 2015. Rilis stabilnya adalah 1.7.0 dan dirilis pada 29 September 2016.

Mengapa Menggunakan Polymer.js?

  • Ini memungkinkan untuk membuat elemen kustom kita sendiri dengan mudah menggunakan HTML, CSS, dan JavaScript untuk menambahkan interaksi ke elemen.

  • Itu dibuat oleh Google yang menyediakan aplikasi yang kompatibel lintas-browser bersama dengan komponen web.

  • Ini menyediakan pengikatan data satu arah dan dua arah.

  • Ini menyediakan antarmuka baris perintah Polymer untuk mengelola proyek dari komponen sederhana hingga aplikasi web yang rumit.

Fitur Polymer.js

  • Ini adalah pustaka JavaScript yang dibangun di atas API standar web yang memungkinkan pembuatan elemen HTML khusus.

  • Ini menyediakan polyfills (spesifikasi komponen web) untuk membuat elemen kami sendiri yang disesuaikan dan dapat digunakan kembali.

  • Ini menggunakan standar komponen web untuk pembuatan widget yang dapat digunakan kembali dalam dokumen web dan aplikasi web.

  • Ini menggunakan desain material Google untuk pengembangan aplikasi seluler hybrid.

  • Ini mendistribusikan elemen khusus di seluruh jaringan dan pengguna dapat menggunakan elemen ini dengan bantuan Impor HTML.

Mudah untuk mengkonfigurasi Polymer di sistem Anda. Berikut adalah dua cara untuk menginstal Polymer.

  • CLI Polymer (Antarmuka Baris Perintah)
  • The Bower

Memasang Polymer Menggunakan Polymer CLI

Step 1 - Instal Polymer menggunakan perintah npm berikut.

npm install -g polymer-cli@next

Step 2 - Periksa instalasi dan versi yang berhasil menggunakan perintah berikut.

polymer --version

Jika berhasil diinstal, versi akan ditampilkan sebagai -

Step 3 - Buat direktori dengan nama pilihan Anda dan alihkan ke direktori itu.

mkdir polymer-js 
cd polymer-js

Step 4- Untuk menginisialisasi proyek Anda, jalankan perintah berikut di polymer-jsdirectory Anda .

polymer init

Setelah menjalankan perintah di atas, itu akan menunjukkan sesuatu seperti ini -

C:\polymer-js>polymer init 
? Which starter template would you like to use? 
   1) polymer-1-element - A simple Polymer 1.0 element template 
   2) polymer-2-element - A simple Polymer 2.0 element template 
   3) polymer-1-application - A simple Polymer 1.0 application template 
   4) polymer-2-application - A simple Polymer 2.0 application 
   5) polymer-1-starter-kit - A Polymer 1.x starter application template, with 
      navigation and "PRPL pattern" loading 
   6) polymer-2-starter-kit - A Polymer 2.x starter application template, with 
      navigation and "PRPL pattern" loading 
   7) shop - The "Shop" Progressive Web App demo
   Answer: 4

Step 5 - Pilih aplikasi polimer-2 dari opsi yang diberikan di atas.

Sekarang, mulai proyek Anda menggunakan perintah berikut.

polymer serve

Memasang Polimer Menggunakan Bower

Step 1 - Untuk memulai dari awal menggunakan metode Bower, instal Bower menggunakan perintah berikut.

npm install -g bower

Step 2 - Instal Polymer menggunakan perintah berikut.

npm install -g polymer-cli@next

Step 3 - Periksa instalasi dan versi Polymer yang berhasil, menggunakan perintah berikut.

polymer --version

Jika berhasil diinstal, versi akan ditampilkan sebagai -

0.18.0-pre.13.

Step 4 - Untuk menginstal rilis Polymer 2.0 RC terbaru dari bower, gunakan perintah berikut.

bower install Polymer/polymer#^2.0.0-rc.3

Step 5 - Buat index.html file dan tambahkan kode berikut di tag <head>.

<script src = "/bower_components/webcomponentsjs/webcomponentsloader.js"></script> 
// it loads the polyfills 

<link rel = "import" href = "/bower_components/polymer/polymer.html"> 
// it import Polymer

Step 6 - Mulai proyek Anda menggunakan perintah berikut.

polymer serve

Membangun untuk Penerapan

Untuk membangun proyek Anda untuk penerapan, polymer build perintah adalah cara yang lebih mudah, yang akan mengecilkan, mengompilasi, atau memaketkan kode Anda tergantung pada tanda baris perintah.

Untuk membuat build universal yang berfungsi di semua browser, gunakan perintah berikut.

polymer build --js-compile

Perintah di atas akan membangun proyek ke build / default dan Anda dapat memulai direktori ini, menggunakan perintah berikut.

polymer serve build/default

Polymer 2.0 menggunakan ES6 dan Elemen Kustom HTML. Untuk praktik terbaik, sebaiknya gunakan ES6 ke browser dengan dukungan ES6 lengkap dan kompilasi ES5 ke browser lama yang tidak mendukung ES6. Tabel berikut menunjukkan strategi terbaik untuk proyek Anda.

Strategi Paling mudah untuk dukungan lintas browser Paling optimal untuk performa WC v1
Server Semua server berfungsi, termasuk yang statis Penyajian diferensial diperlukan
Kode yang Diterapkan ES5 terungkap ES6
Pemuat Polyfill webcomponents-es5-loader.js webcomponents-loader.js

Elemen polimer adalah sekumpulan elemen visual dan non-visual yang dirancang untuk bekerja dengan tata letak, interaksi pengguna, pemilihan, dan aplikasi perancah. Ini mencakup semuanya mulai dari tombol sederhana hingga kotak dialog dengan efek visual yang rapi. Tabel berikut menunjukkan berbagai jenis elemen polimer.

Sr.No. Jenis & Deskripsi
1 elemen aplikasi

Elemen aplikasi berguna saat membangun seluruh aplikasi.
2 elemen besi

Ini adalah blok bangunan dasar untuk membuat aplikasi.
3 elemen kertas

Elemen kertas adalah sekumpulan komponen UI yang dirancang untuk menerapkan pedoman desain material Google.
4 komponen web google

Komponen Google Web adalah stok komponen web untuk Google API & layanan.
5 elemen emas

Elemen emas dibuat untuk kasus penggunaan khusus e-niaga.
6 elemen neon

Ini digunakan untuk mengimplementasikan transisi animasi untuk elemen Polimer menggunakan animasi web.
7 elemen platinum

Elemen platinum menyediakan fitur untuk mengubah halaman web Anda menjadi aplikasi web yang sebenarnya.
8 elemen molekul

Elemen molekul membantu mengembangkan aplikasi dengan mudah dan digunakan untuk menghubungkan sekelompok plugin ke aplikasi Polymer.

Polimer adalah kerangka kerja yang memungkinkan pembuatan elemen khusus menggunakan elemen HTML standar. Elemen web kustom menyediakan fitur-fitur berikut -

  • Ini memberikan nama elemen khusus dengan kelas asosiasi.

  • Saat Anda mengubah status instance elemen khusus, itu akan meminta callback siklus hidup.

  • Jika Anda mengubah atribut pada sebuah instance, maka panggilan balik akan diminta.

Anda dapat menentukan elemen khusus menggunakan kelas ES6 dan kelas dapat dikaitkan dengan elemen khusus seperti yang ditunjukkan pada kode berikut.

//ElementDemo class is extending the HTMLElement 
class ElementDemo extends HTMLElement { 
   // code here
};

//link the new class with an element name
window.customElements.define('element-demo', ElementDemo);

Elemen khusus dapat digunakan sebagai elemen standar seperti yang ditunjukkan di bawah ini -

<element-demo></element-demo>

Note - Nama elemen khusus harus dimulai dengan huruf kecil dan berisi tanda hubung di antara nama.

Siklus Hidup Elemen Kustom

Daur hidup elemen khusus menyediakan sekumpulan reaksi elemen khusus yang bertanggung jawab atas perubahan dalam daur hidup elemen dan ditentukan dalam tabel berikut.

Sr.No. Reaksi & Deskripsi
1

constructor

Saat Anda membuat elemen atau menentukan elemen yang dibuat sebelumnya, reaksi elemen ini akan dipanggil.
2

connectedCallback

Saat Anda menambahkan elemen ke dokumen, reaksi elemen ini akan dipanggil.
3

disconnectedCallback

Saat Anda menghapus elemen dari dokumen, reaksi elemen ini akan dipanggil.
4

attributeChangedCallback

Setiap kali Anda mengubah, menambahkan, menghapus, atau mengganti elemen dari dokumen, reaksi elemen ini akan dipanggil.

Peningkatan Elemen

Kita dapat menggunakan elemen khusus sebelum menentukannya dengan spesifikasi dan setiap contoh elemen yang ada akan ditingkatkan ke kelas khusus dengan menambahkan definisi ke elemen itu.

Status elemen kustom berisi nilai-nilai berikut -

  • uncustomized - Nama elemen khusus yang valid adalah elemen bawaan atau elemen yang tidak diketahui, yang tidak bisa menjadi elemen khusus.

  • undefined - Elemen dapat memiliki nama elemen khusus yang valid, tetapi tidak dapat ditentukan.

  • custom - Elemen dapat memiliki nama elemen khusus yang valid, yang dapat ditentukan dan ditingkatkan.

  • failed - Mencoba mengupgrade elemen gagal dari kelas yang tidak valid.

Mendefinisikan sebuah Elemen

Elemen kustom dapat ditentukan dengan membuat kelas yang memperluas Polymer.Element dan meneruskan kelas ke metode customElements.define. Kelas berisi adalah metode pengambil yang mengembalikan nama tag HTML dari elemen khusus. Misalnya -

//ElementDemo class is extending the Polymer.Element 
class ElementDemo extends Polymer.Element {
   static get is() { return 'element-demo'; }
   static get properties() {
      . . .
      . . .
   }
   constructor(){
      super();
      . . .
      . . .
   }
   . . .
   . . .
}

//Associate the new class with an element name
window.customElements.define(ElementDemo.is, ElementDemo);

// create an instance with createElement
var el1 = document.createElement('element-demo');

Impor dan API

Elemen Polymer dapat ditentukan dengan menentukan tiga impor HTML berikut -

  • polymer-element.html - Ini menentukan kelas dasar Polymer.Element.

  • legacy-element.html- Ini memperluas Polymer.Element menggunakan kelas dasar Polymer.LegacyElement dan menambahkan API warisan kompatibel 1.x. Ini juga membuat elemen hibrid dengan menentukan metode pabrik Polymer () lama.

  • polymer.html - Terdiri dari kelas dasar Polimer bersama dengan elemen pembantu, yang termasuk dalam 1.x polymer.html.

Tentukan Elemen di Dokumen HTML Utama

Anda bisa mendefinisikan elemen dalam dokumen HTML utama menggunakan fungsi HTMLImports.whenReady ().

Contoh

Contoh berikut menunjukkan cara mendefinisikan elemen di dokumen HTML utama. Buat file index.html dan tambahkan kode berikut.

<!doctype html>
<html lang = "en">
   <head>
      <title>Polymer Example</title>
      <script src = "bower_components/webcomponentsjs/webcomponents-lite.js"></script>
      <link rel = "import" href = "bower_components/polymer/polymer.html">
      <link rel = "import" href = "define-element.html">
   </head>
   
   <body>
      <define-element></define-element>
   </body>
</html>

Sekarang buat elemen khusus yang disebut define-element.html dan sertakan kode berikut.

<dom-module id = "define-element">
   <template>
      <h2>Welcome to Tutorialspoint!!!</h2>
   </template>
   
   <script>
      HTMLImports.whenReady(function(){
         Polymer ({
            is: "define-element"
         })
      })  
   </script>
</dom-module>

Keluaran

Untuk menjalankan aplikasi, buka direktori proyek yang dibuat dan jalankan perintah berikut.

polymer serve

Sekarang buka browser dan arahkan ke http://127.0.0.1:8081/. Berikut akan menjadi keluarannya.

Tentukan Elemen Legacy

Elemen lama dapat digunakan untuk mendaftarkan elemen menggunakan fungsi Polimer, yang mengambil prototipe untuk elemen baru. Prototipe harus berisiis yang mendefinisikan nama tag HTML untuk elemen khusus.

Contoh

//registering an element
ElementDemo = Polymer ({
   is: 'element-demo',
   
   //it is a legecy callback, called when the element has been created
   created: function() {
     this.textContent = 'Hello World!!!';
   }
});

//'createElement' is used to create an instance
var myelement1 = document.createElement('element-demo');

//use the constructor create an instance
var myelement2 = new ElementDemo();

Lifecycle Callbacks

Callback siklus hidup digunakan untuk menyelesaikan tugas-tugas untuk fitur bawaan Polymer.Elementkelas. Polymer menggunakan callback siap pakai, yang akan dipanggil saat Polymer selesai membuat dan menginisialisasi elemen DOM.

Berikut adalah daftar callback lama di Polymer.js.

  • created - Dipanggil saat Anda membuat elemen sebelum menyetel nilai properti dan menginisialisasi DOM lokal.

  • ready - Dipanggil saat Anda membuat elemen setelah menyetel nilai properti dan menginisialisasi DOM lokal.

  • attached - Disebut setelah melampirkan elemen ke dokumen dan dapat dipanggil lebih dari satu kali selama masa pakai elemen.

  • detached - Disebut setelah melepaskan elemen dari dokumen dan dapat dipanggil lebih dari sekali selama masa pakai elemen.

  • attributeChanged - Dipanggil ketika ada perubahan dalam atribut elemen dan menahan perubahan atribut, yang tidak kompatibel dengan properti yang dideklarasikan.

Mendeklarasikan Properti

Properti dapat dideklarasikan pada elemen untuk menambahkan nilai default dan fitur spesifik lainnya dalam sistem data dan mereka dapat digunakan untuk menentukan fitur berikut -

  • Ini menentukan jenis properti dan nilai default.

  • Ini memanggil metode pengamat, ketika ada perubahan pada nilai properti.

  • Ini menentukan status hanya baca untuk menghentikan perubahan tak terduga pada nilai properti.

  • Ini memberikan dukungan untuk data binding dua arah, yang memicu peristiwa saat Anda mengubah nilai properti.

  • Ini adalah properti yang dihitung, yang menghitung nilai secara dinamis tergantung pada properti lainnya.

  • Ini memperbarui dan mencerminkan nilai atribut yang sesuai, ketika Anda mengubah nilai properti.

Tabel berikut menunjukkan kunci untuk setiap properti, yang didukung oleh objek properti.

Sr.No. Kunci & Deskripsi Tipe
1

type

Ini deserializes dari atribut yang tipe propertinya ditentukan menggunakan konstruktor tipe.

 konstruktor (Boolean, Tanggal, Angka, String, Array atau Objek)
2

value

Ini menentukan nilai default untuk properti dan jika itu adalah fungsi, maka itu menggunakan nilai yang dikembalikan sebagai nilai default dari properti.

 boolean, angka, string atau fungsi.
3

reflectToAttribute

Jika kunci ini disetel ke true, maka itu menetapkan atribut yang sesuai pada node host. Atribut dapat dibuat sebagai atribut boolean HTML standar, jika Anda menyetel nilai properti sebagai Boolean.

 boolean
4

readOnly

Anda tidak dapat menyetel properti secara langsung dengan penetapan atau pengikatan data, jika kunci ini disetel ke true.

 boolean
5

notify

Anda dapat menggunakan properti untuk data binding dua arah, jika kunci ini disetel ke true dan saat Anda mengubah properti, peristiwa yang diubah nama properti akan dipicu.

 boolean
6

computed

Anda dapat menghitung nilai argumen setiap kali berubah, dengan memanggil metode dan nilai akan disederhanakan sebagai nama metode dan daftar argumen.

 tali
7

observer

Panggil nama metode, yang disederhanakan dengan nilai, ketika nilai properti berubah.

 tali

Atribut Deserialization

Deserialisasi nama properti yang cocok dengan atribut pada instance sesuai dengan jenis yang ditentukan dan nama properti yang sama pada instance elemen, jika properti tersebut dikonfigurasi di objek properti.

Anda dapat menyetel tipe yang ditentukan secara langsung sebagai nilai properti, jika tidak ada opsi properti lain yang ditentukan dalam objek properti; jika tidak, ini akan memberikan nilai ke kunci tipe di objek konfigurasi properti.

Mengonfigurasi Properti Boolean

Properti Boolean dapat dikonfigurasi dari markup, dengan menyetelnya ke false dan jika disetel ke true, Anda tidak dapat mengonfigurasi dari markup karena atribut dengan atau tanpa nilai disamakan dengan true. Oleh karena itu, ini dikenal sebagai perilaku standar untuk atribut di platform web.

Properti objek dan array dapat dikonfigurasi dengan meneruskannya dalam format JSON sebagai -

<element-demo player = '{ "name": "Sachin", "country": "India" }'></element-demo>

Mengonfigurasi Nilai Properti Default

Properti default dapat dikonfigurasi menggunakan bidang nilai di objek properti dan bisa berupa nilai primitif, atau fungsi yang mengembalikan nilai.

Contoh

Contoh berikut menggambarkan cara mengkonfigurasi nilai properti default di objek properti.

<link rel = "import" href = "../../bower_components/polymer/polymer-element.html">

//it specifies the start of an element's local DOM
<dom-module id="polymer-app">
   <template>
      <style>
         :host {
            color:#33ACC9;
         }
      </style>
      <h2>Hello...[[myval]]!</h2>	
   </template>

   <script>
      //cusom element extending the Polymer.Element class
      class PolymerApp extends Polymer.Element {
         static get is() { return 'polymer-app'; }
         static get properties() {
            return {
               myval: {
                  type: String,
                  //displaying this value on screen
                  value: 'Welcome to Tutorialspoint;!!!'
               },
               data: {
                  type: Object,
                  notify: true,
                  value: function() { return {}; }
               }
            }
         }
      }
      window.customElements.define(PolymerApp.is, PolymerApp);
   </script>
</dom-module>

Keluaran

Jalankan aplikasi seperti yang ditunjukkan pada contoh sebelumnya, dan navigasikan ke http://127.0.0.1:8000/. Berikut akan menjadi keluarannya.

Properti hanya-baca

Anda bisa menghindari perubahan tak terduga pada data yang dihasilkan dengan menyetel tanda readOnly ke true, di objek properti. Elemen menggunakan penyetel konvensi _setProperty (nilai), untuk mengubah nilai properti.

Contoh

Contoh berikut menggambarkan penggunaan properti hanya-baca di objek properti. Buat file index.html dan tambahkan kode berikut di dalamnya

<!doctype html>
<html>
   <head>
      <title>Polymer Example</title>
      <script src = "bower_components/webcomponentsjs/webcomponents-lite.js"></script>
    
      <link rel = "import" href = "bower_components/polymer/polymer.html">
      <link rel = "import" href = "my-element.html">
   </head>
   
   <body>
      <my-element></my-element>
   </body>
</html>

Sekarang, buat file lain bernama my-element.html dan sertakan kode berikut.

<link rel = "import" href = "bower_components/polymer/polymer-element.html">
<link rel = "import" href = "prop-element.html">

//it specifies the start of an element's local DOM
<dom-module id = "my-element">
   <template>
      <prop-element my-prop = "{{demoProp}}"></prop-element>
      <p>Present value: <span>{{demoProp}}</span></p>
   </template>

   <script>
      Polymer ({
         is: "my-element", properties: {
            demoProp: String
         }
      });
   </script>
</dom-module>

Selanjutnya, buat satu file lagi bernama prop-element.html dan tambahkan kode berikut.

//it specifies the start of an element's local DOM
<dom-module id="prop-element">
   <template>
      <button on-click="onClickFunc">Change value</button>
   </template>
   
   <script>
      Polymer ({
         is: "prop-element", properties: {
            myProp: {
               type: String,
               notify: true,
               readOnly: true,
               value: 'This is initial value...'
            }
         },
         onClickFunc: function(){
            this._setMyProp('This is new value after clicking the button...');
         }
      });
   </script>
</dom-module>

Keluaran

Jalankan aplikasi seperti yang ditunjukkan pada contoh sebelumnya, dan navigasikan ke http://127.0.0.1:8081/. Berikut akan menjadi keluarannya.

Setelah mengklik tombol, itu akan mengubah nilai seperti yang ditunjukkan pada tangkapan layar berikut.

Mencerminkan Properti ke Atribut

Atribut HTML dapat disinkronkan dengan nilai properti dengan mengatur reflectToAttribute menjadi true pada properti di objek konfigurasi properti.

Atribut Serialisasi

Nilai properti dapat diserialkan ke atribut, sambil mencerminkan atau mengikat properti ke atribut, dan secara default nilai dapat diserialkan tergantung pada tipe nilai saat ini.

  • String - Tidak perlu serialisasi.

  • Date or Number - Gunakan toString untuk membuat serialisasi nilai.

  • Boolean - Setel atribut tidak bernilai yang ditampilkan sebagai benar atau salah.

  • Array or Object - Gunakan JSON.stringify untuk membuat serialisasi nilai.

Shadow DOM adalah properti baru DOM yang digunakan untuk membangun komponen.

Example

Pada kode berikut, komponen header meliputi judul halaman dan tombol menu.

<header-demo>
   <header>
      <h1>
         <button>

Shadow DOM memungkinkan menemukan anak-anak dalam subpohon bercakupan, yang dikenal sebagai shadow tree.

<header-demo>
   #shadow-root
   <header>
      <h1>
      <button>

Root akar bayangan disebut sebagai bagian atas pohon bayangan dan elemen yang dilampirkan ke pohon disebut host bayangan (header-demo). Shadow host ini menyertakan properti yang disebut shadowRoot, yang menetapkan shadow root. Root bayangan mengidentifikasi elemen host menggunakan properti host.

Shadow DOM dan Komposisi

Pohon bayangan bisa dirender sebagai ganti turunan elemen, jika ada elemen di shadow DOM. Anak-anak elemen bisa dirender dengan menambahkan elemen <slot> ke pohon bayangan.

Misalnya, gunakan pohon bayangan berikut untuk <header-demo>.

<header>
   <h1><slot></slot></h1>
   &ltbutton>Menu</button>
</header>

Tambahkan anak-anak ke elemen <my-header> sebagai -

<header-demo>Shadow DOM</header-demo>

Header menggantikan elemen </slot> dengan turunan yang ditentukan di atas sebagai -

<header-demo>
   <header>
      <h1>Shadow DOM</h1>
      <button>Menu</button>
   </header>
</header-demo>

Konten Cadangan

Konten fallback dapat ditampilkan jika tidak ada node yang dialokasikan ke slot. Misalnya -

<my-element>
   #shadow-root
   <slot id = "myimgicon">
      <img src = "img-demo.png">
   </slot>
   <slot></slot>
<my-element>

Anda dapat memberikan ikon Anda sendiri untuk elemen sebagai -

<my-element>
   <img slot = "myimgicon" src = "warning.png">
<my-element>

Distribusi Multi Level

Anda dapat mengalokasikan elemen slot ke slot, yang dikenal sebagai distribusi multi-level.

Misalnya, ambil dua tingkat pohon bayangan seperti yang ditunjukkan di bawah ini -

<parent-element>
   #shadow-root
      <child-element>
      <!-- display the light DOM children of parent-element inside child-element -->
      <slot id = "parent-slot">
	  
   <child-element>
      #shadow-root
         <div>
            <!-- Render the light DOM children inside div by using child-element -->
            <slot id = "child-slot">

Perhatikan kode berikut -

<parent-element>
   <p>This is light DOM</p>
<parent-element>

Struktur pohon yang diratakan terlihat seperti berikut ini.

<parent-element>
   <child-element>
      <div>
         <slot id = "child-slot">
            <slot id = "parent-slot">
               <p>This is light DOM</p>

Shadow DOM menggunakan Slot API berikut untuk memeriksa distribusi -

  • HTMLElement.assignedSlot - Ini mengalokasikan slot untuk elemen dan mengembalikan null, jika tidak ada alokasi elemen ke slot.

  • HTMLSlotElement.assignedNodes - Ini menyediakan daftar node bersama dengan slot dan mengembalikan node terdistribusi, ketika Anda menyetel opsi flatten ke true.

  • HTMLSlotElement.slotchange - Peristiwa ini dipicu saat ada perubahan di node terdistribusi slot.

Penargetan Ulang Acara

Ini menentukan target acara di mana elemen dapat direpresentasikan dalam cakupan yang sama dengan elemen pendengar. Ini memberikan peristiwa dari elemen khusus, yang sepertinya berasal dari tag elemen khusus, bukan dari elemen di dalamnya.

Example

Contoh berikut menunjukkan penggunaan event retargeting di Polymer.js. Buat file bernama index.html dan masukkan kode berikut di dalamnya.

<!doctype html>
<html>
   <head>
      <title>Polymer Example</title>
      <script src = "bower_components/webcomponentsjs/webcomponents-lite.js"></script>
      <link rel = "import" href = "bower_components/polymer/polymer.html">
      <link rel = "import" href = "retarget-event.html">
   </head>
   
   <body>
      <template id = "myapp" is = "dom-bind">
         <retarget-event on-tap = "clicky"></retarget-event>
      </template>
      
      <script>
         var myval = document.querySelector('#myapp');
         myval.clicky = function(e) {
            console.log("The retargeted result:", Polymer.dom(myval));
            console.log("Normal result:", e);
         };
      </script>
   </body>
</html>

Sekarang, buat file lain bernama retarget-event.html dan sertakan kode berikut.

<link rel = "import" href = "bower_components/polymer/polymer-element.html">

//it specifies the start of an element's local DOM
<dom-module id = "retarget-event">

   <template>
      <span>Click on this text to see result in console...</span>
   </template>

   <script>
      Polymer ({
         is: 'retarget-event',
      });
   </script>
</dom-module>

Output

Untuk menjalankan aplikasi, buka direktori proyek yang dibuat dan jalankan perintah berikut.

polymer serve

Sekarang buka browser dan arahkan ke http://127.0.0.1:8081/. Berikut akan menjadi keluarannya.

Klik teks di atas dan buka konsol untuk melihat acara yang ditargetkan ulang seperti yang ditunjukkan pada tangkapan layar berikut.

Gaya Shadow DOM

Anda dapat mengatur gaya shadow DOM menggunakan properti gaya, yang diwarisi dari host ke pohon bayangan.

Example

<style>
   .mydemo { background-color: grey; }
</style>

<my-element>
#shadow-root
   <style>
      //this div will have blue background color
      div { background-color: orange; }
   </style>
   <div class = "mydemo">Demo</div>

Pembuatan Template DOM

Subpohon DOM dapat dibuat untuk elemen menggunakan template DOM. Anda dapat membuat shadow root untuk elemen dan menyalin template ke pohon bayangan dengan menambahkan template DOM ke sebuah elemen.

Template DOM dapat ditentukan dengan dua cara -

  • Buat elemen <dom-module>, yang harus cocok dengan nama elemen bersama dengan atribut id.

  • Definisikan elemen <template> di dalam <dom-module>.

Example

<dom-module id = "my-template">
   <template>I am in my template!!!</template>

   <script>
      class MyTemplate extends Polymer.Element {
         static get is() { return  'my-template' }
      }
      customElements.define(MyTemplate.is, MyTemplate);
   </script>
</dom-module>

Mendesain Shadow DOM Elemen

Shadow DOM memungkinkan untuk memberi gaya pada elemen kustom menggunakan properti gaya seperti font, warna teks, dan kelas, tanpa menerapkannya di luar cakupan elemen Anda.

Mari memberi gaya elemen host menggunakan :hostselector (elemen yang dilampirkan ke shadow DOM disebut sebagai host). Buat file bernama polymer-app.html dan tambahkan kode berikut di dalamnya.

<link rel = "import" href = "../../bower_components/polymer/polymer-element.html">

<dom-module id = "polymer-app">
   <template>
      <style>
         :host {
            color:#33ACC9;
         }
      </style>
      <h2>Hello...[[myval]]!</h2>	
  </template>

  <script>
      class PolymerApp extends Polymer.Element {
         static get is() { return 'polymer-app'; }
         static get properties() {
            return {
               myval: {
                  type: String, value: 'Welcome to Tutorialspoint!!!'
               }
            };
         }
      }

      window.customElements.define(PolymerApp.is, PolymerApp);
   </script>
</dom-module>

Jalankan aplikasi seperti yang ditunjukkan pada bab sebelumnya dan arahkan kehttp://127.0.0.1:8000/. Berikut akan menjadi keluarannya.

Gaya Konten Slotted

Itu mungkin untuk dibuat slots dalam template elemen, yang ditempati pada waktu proses.

Example

Contoh berikut menggambarkan penggunaan konten berlubang di template elemen. Buat file index.html dan tambahkan kode berikut di dalamnya.

<!doctype html>
<html>
   <head>
      <title>Polymer Example</title>
      <link rel = "import" href = "bower_components/polymer/polymer.html">
      <link rel = "import" href = "slotted-content.html">
   </head>
   
   <body>
      <slotted-content>
         <div slot = "text">This is Polymer.JS Slotted Content Example</div>
      </slotted-content> 
   </body>
</html>

Sekarang buat file lain bernama slotted-content.html dan sertakan kode berikut.

<link rel = "import" href = "bower_components/polymer/polymer-element.html">

<dom-module id = "slotted-content">
   <template>
      <style>
         ::slotted(*) {
            font-family: sans-serif;
            color:#E94A9D;
         }
      </style>
      
      <h2>Hello...[[prop1]]</h2>
      <h3>
         <div><slot name='text'></slot></div>
      </h3>
   </template>
   
   <script>
      Polymer ({
         is: 'slotted-content', properties: {
            prop1: {
               type: String,
               value: 'Welcome to Tutorialspoint!!',
            },
         },
      });
   </script>
</dom-module>

Jalankan aplikasi seperti yang ditunjukkan pada contoh sebelumnya, dan navigasikan ke http://127.0.0.1:8081/. Berikut akan menjadi keluarannya.

Menggunakan Modul Gaya

Anda dapat berbagi gaya antar elemen bersama dengan modul gaya. Tentukan gaya dalam modul gaya, dan bagikan di antara elemen.

Example

Contoh berikut menunjukkan cara menggunakan modul gaya di antara elemen. Buat file index.html dan tambahkan kode berikut di dalamnya.

<!doctype html>
<html>
   <head>
      <title>Polymer Example</title>
      <link rel = "import" href = "bower_components/polymer/polymer.html">
      <link rel = "import" href = "style-module.html">
   </head>
   
   <body>
      <style-module></style-module> 
   </body>
</html>

Buat file lain bernama style-module.html dengan kode berikut.

<link rel = "import" href = "bower_components/polymer/polymer-element.html">

<dom-module id = "style-module">
   <template>
      <!-- here, including the imported styles from colors-module page -->
      <style include="colors-module"></style>
      <style>
         :host {
            font-family: sans-serif;
            color: green;    
         }
      </style>
      
      <h2>Hello...[[prop1]]</h2>
      <p class = "color1">Sharing styles with style modules 1...</p>
      <p class = "color2">Sharing styles with style modules 2...</p>
      <p class = "color3">Sharing styles with style modules 3...</p>
   </template>
   
   <script>
      Polymer ({
         is: 'style-module', properties: {
            prop1: {
               type: String, value: 'Welcome to Tutorialspoint!!',
            },
         },
      });
   </script>
</dom-module>

Sekarang, buat satu file lagi bernama colors-module.html , yang menyediakan modul gaya ke elemen seperti yang ditunjukkan pada kode berikut.

<link rel = "import" href = "bower_components/polymer/polymer-element.html">

<dom-module id = 'colors-module'>
   <template>
      <style>
         p.color1 {
            color: #EA5AA5;
         }
         p.color2 {
            color: #4B61EA;
         }
         p.color3 {
            color: #D3AA0A;
         }
      </style>
   </template>
</dom-module>

Jalankan aplikasi dan arahkan ke http://127.0.0.1:8081/. Berikut akan menjadi keluarannya.

Gunakan Properti Kustom

Properti CSS khusus dapat digunakan untuk mengatur gaya tampilan elemen dalam aplikasi Anda menggunakan elemen Polymer. Properti khusus menyediakan variabel CSS bertingkat, yang dapat digunakan di luar lingkungan elemen khusus yang mencegah penyebaran data gaya melalui stylesheet.

Properti khusus dapat didefinisikan mirip dengan properti CSS standar, yang diwarisi dari pohon DOM yang disusun. Pada contoh sebelumnya, Anda dapat melihat properti CSS khusus yang ditentukan untuk elemen.

Di bawah pewarisan CSS, jika tidak ada gaya yang ditentukan untuk suatu elemen, maka itu akan mewarisi gaya dari induknya seperti yang ditunjukkan pada kode berikut.

<link rel = "import" href = "components/polymer/myelement-style.html">
<myelement-style>
   <style is = "myelement-style">
      p {
         color: var(--paper-red-900);
      }
      paper-checkbox {
         --paper-checkbox-checked-color: var(--paper-red-900);
      }
   </style>
</myelement-style>

<body>
   <p><paper-checkbox>Check Here</paper-checkbox></p>
</body>

Acara digunakan oleh elemen yang dapat berkomunikasi dengan perubahan status pohon DOM menjadi elemen induk dan menggunakan API DOM standar untuk membuat, mengirim, dan mendengarkan kejadian. Ituannotated event listeners digunakan oleh Polymer, yang mendefinisikan event listener sebagai potongan kecil dari template DOM dan bisa ditambahkan ke turunan DOM menggunakan anotasi onevent di template.

Contoh

Contoh berikut menambahkan event listener beranotasi di template. Buat file bernama index.html dan masukkan kode berikut di dalamnya.

<!doctype html>
<html>
   <head>
      <title>Polymer Example</title>
      <script src = "bower_components/webcomponentsjs/webcomponents-lite.js"></script>
      <link rel = "import" href="bower_components/polymer/polymer.html">
      <link rel = "import" href = "annotated-eventlistners.html">
   </head>
   
   <body>
      <template id = "myapp" is = "dom-bind">
         //tap event is part of gesture events that fires consistently across both mobile
         //and desktop devices
         <annotated-eventlistners on-tap = "myClick"></annotated-eventlistners>
      </template>
      
      <script>
         var myval = document.querySelector('#myapp');
         myval.myClick =  function(e) {
            console.log('Hello World!!!');
         };
      </script>
   </body>
</html>

Keluaran

Untuk menjalankan aplikasi, buka direktori proyek yang dibuat dan jalankan perintah berikut.

polymer serve

Sekarang buka browser dan arahkan ke http://127.0.0.1:8000/. Berikut akan menjadi keluarannya.

Klik teks untuk melihat hasilnya di konsol seperti yang ditunjukkan pada gambar layar berikut.

Acara Kustom

Peristiwa khusus dapat dipicu menggunakan konstruktor CustomEvent standar dan metode dispatchEvent dari elemen host.

Pertimbangkan contoh berikut yang memicu peristiwa khusus dari elemen host. Buka file index.html dan tambahkan kode berikut di dalamnya.

<!doctype html>
<html>
   <head>
      <title>Polymer Example</title>
      <script src = "bower_components/webcomponentsjs/webcomponents-lite.js"></script>
      <link rel = "import" href = "bower_components/polymer/polymer.html">
      <link rel = "import" href = "custom-event.html">
   </head>
   
   <body>
      <custom-event></custom-event>
      <script>
         document.querySelector('custom-event').addEventListener('customValue', function (e) {
            console.log(e.detail.customval); // true
         })
      </script>
   </body>
</html>

Sekarang, buat file lain bernama custom-event.html dan sertakan kode berikut.

<link rel = "import" href = "bower_components/polymer/polymer-element.html">

//it specifies the start of an element's local DOM
<dom-module id = "custom-event">
   <template>
      <h2>Custom Event Example</h2>
      <button on-click = "myClick">Click Here</button>
   </template>
   
   <script>
      Polymer ({
         is: "custom-event", myClick(e) {
            this.dispatchEvent(new CustomEvent('customValue', {detail: {customval: true}}));
         }
      });
   </script>
</dom-module>

Keluaran

Jalankan aplikasi seperti yang ditunjukkan pada contoh sebelumnya dan navigasikan ke http://127.0.0.1:8000/. Berikut akan menjadi keluarannya.

Sekarang klik tombol, buka konsol, dan lihat nilai sebenarnya untuk acara khusus seperti yang ditunjukkan pada tangkapan layar berikut.

Sekarang berpindah dengan "event retargeting", yang menentukan target event tempat elemen dapat direpresentasikan dalam cakupan yang sama dengan elemen pendengar. Misalnya, target dapat dianggap sebagai elemen di dokumen utama, saat menggunakan listener di dokumen utama, bukan di pohon bayangan. Anda dapat merujuk bab penataan dom bayangan Polimer untuk penjelasan dan contoh lebih lanjut.

Acara Isyarat

Peristiwa isyarat dapat digunakan untuk interaksi pengguna, yang menentukan interaksi yang lebih baik pada perangkat sentuh dan seluler. Misalnya, peristiwa tap adalah bagian dari peristiwa isyarat yang diaktifkan secara konsisten di perangkat seluler dan desktop.

Anda dapat merujuk contoh untuk peristiwa isyarat yang dijelaskan di awal bab ini, yang menggunakan on-tap acara yang menambahkan pemroses acara beranotasi di template.

Tabel berikut mencantumkan berbagai jenis jenis peristiwa isyarat.

Sr.No. Jenis & Deskripsi Acara Properti
1

down

Ini menentukan bahwa jari / tombol telah bergerak ke bawah.

  • x - Ini memberikan koordinat clientX untuk sebuah acara.

  • y - Ini memberikan koordinat clientY untuk suatu acara.

  • sourceEvent - Ini menentukan tindakan turun yang disebabkan oleh peristiwa DOM.
2

up

Ini menentukan bahwa jari / tombol telah bergerak ke atas.

  • x - Ini memberikan koordinat clientX untuk sebuah acara.

  • y - Ini memberikan koordinat clientY untuk suatu acara.

  • sourceEvent - Ini menentukan tindakan naik yang disebabkan oleh peristiwa DOM.
3

tap

Ini menentukan terjadinya tindakan naik dan turun.

  • x - Ini memberikan koordinat clientX untuk sebuah acara.

  • y - Ini memberikan koordinat clientY untuk suatu acara.

  • sourceEvent - Ini menentukan tindakan tap yang disebabkan oleh peristiwa DOM.
4

track

Ini menentukan terjadinya tindakan naik dan turun.

  • x - Ini memberikan koordinat clientX untuk sebuah acara.

  • y - Ini memberikan koordinat clientY untuk suatu acara.

  • state - Ini adalah jenis string yang menentukan status pelacakan.

  • dx - Ini secara horizontal membuat perubahan dalam piksel, saat Anda melacak acara pertama.

  • dy - Ini secara vertikal membuat perubahan dalam piksel, saat Anda melacak acara pertama.

  • ddx - Ini secara horizontal membuat perubahan dalam piksel, saat Anda melacak acara terakhir.

  • ddy - Ini secara vertikal membuat perubahan dalam piksel, saat Anda melacak acara terakhir.

  • hover() - Ini digunakan untuk menentukan elemen yang saat ini di-hover.

Contoh

Contoh berikut menentukan penggunaan jenis peristiwa isyarat di template. Buat file bernama index.html dan tempatkan kode berikut di dalamnya.

<!doctype html>
<html>
   <head>
      <title>Polymer Example</title>
      <script src = "bower_components/webcomponentsjs/webcomponents-lite.js"></script>
      <link rel = "import" href = "bower_components/polymer/polymer.html">
      <link rel = "import" href = "gesture-event.html">
   </head>
   
   <body>
      <gesture-event></gesture-event>
   </body>
</html>

Sekarang, buat file lain bernama gesture-event.html dan sertakan kode berikut.

<link rel = "import" href = "bower_components/polymer/polymer-element.html">

//it specifies the start of an element's local DOM
<dom-module id = "gesture-event">
   <template>
      <style>
         #box {
            width: 200px;
            height: 200px;
            background: #D7D0B7;
         }
      </style>
      
      <h2>Gesture Event Types Example</h2>
      <div id = "box" on-track = "myClick">{{track_message}}</div>
   </template>
   
   <script>
      Polymer ({
         is: 'gesture-event', myClick: function(e) {
            switch(e.detail.state) {
               case 'start':
               this.track_message = 'Tracking event started...';
               break;
               case 'track':
                  this.track_message = 'Tracking event is in progress... ' +
                  e.detail.x + ', ' + e.detail.y;
               break;
               case 'end':
                  this.track_message = 'Tracking event ended...';
               break;
            }
         }
      });
   </script>
</dom-module>

Keluaran

Jalankan aplikasi seperti yang ditunjukkan pada contoh sebelumnya dan navigasikan ke http://127.0.0.1:8081/. Sekarang mulailah menyeret mouse di elemen, itu akan menampilkan status seperti yang ditunjukkan pada tangkapan layar berikut.

Setelah menyeret mouse ke dalam elemen, itu akan menunjukkan kemajuan pelacakan peristiwa seperti yang ditunjukkan pada tangkapan layar berikut.

Saat Anda berhenti menyeret mouse, ini akan mengakhiri peristiwa pelacakan pada elemen seperti yang ditunjukkan pada tangkapan layar berikut.

Polymer memungkinkan pengamatan perubahan pada properti elemen dengan mengambil tindakan berbeda seperti -

  • Observers - Ini memanggil callback setiap kali data berubah.

  • Computed Properties - Ini menghitung properti virtual berdasarkan properti lain, dan menghitung ulang setiap kali data masukan berubah.

  • Data Bindings - Ini memperbarui properti, atribut, atau konten teks dari simpul DOM menggunakan anotasi setiap kali data berubah.

Jalur Data

Pathadalah string dalam sistem data, yang menyediakan properti atau sub-properti relatif terhadap cakupan. Cakupan dapat menjadi elemen host. Jalur dapat ditautkan ke elemen berbeda menggunakan data binding. Perubahan data dapat dipindahkan dari satu elemen ke elemen lainnya, jika elemen tersebut terhubung dengan data binding.

Contoh

<dom-module id = "my-profile">
   <template>
      . . .
      <address-card address="{{myAddress}}"></address-card>
   </template>
   . . .
</dom-module>

Dua jalur di atas (profil-saya dan kartu-alamat) dapat dihubungkan dengan pengikatan data, jika <address-card> ada di DOM lokal elemen <profil-saya>.

Berikut adalah jenis khusus segmen jalur di Polymer.js -

  • Karakter wild card (*) dapat digunakan sebagai segmen terakhir di jalur.

  • Mutasi array dapat ditampilkan ke array tertentu dengan menempatkan sambungan string sebagai segmen terakhir di jalur.

  • Jalur item larik menunjukkan item dalam larik dan segmen jalur numerik menentukan indeks larik.

Di jalur data, setiap segmen jalur adalah nama properti dan mereka menyertakan dua jenis jalur berikut -

  • Segmen jalur dipisahkan oleh titik. Misalnya: "apple.grapes.orange".

  • Dalam larik string, setiap elemen larik adalah segmen jalur atau jalur titik-titik. Misalnya: ["apple", "grapes", "orange"], ["apple.grapes", "orange"].

Aliran data

Contoh

Contoh berikut menentukan pengikatan aliran data dua arah. Buat file index.html dan tambahkan kode berikut di dalamnya.

<!doctype html>
<html>
   <head>
      <title>Polymer Example</title>
      <script src = "bower_components/webcomponentsjs/webcomponents-lite.js"></script>
      <link rel = "import" href = "bower_components/polymer/polymer.html">
      <link rel = "import" href = "my-element.html">
   </head>
   
   <body>
      <my-element></my-element>
   </body>
</html>

Sekarang buat file lain bernama my-element.html dan sertakan kode berikut.

<link rel = "import" href = "bower_components/polymer/polymer-element.html">
<link rel = "import" href = "prop-element.html">

//it specifies the start of an element's local DOM
<dom-module id = "my-element">
   <template>
      <prop-element my-prop="{{demoProp}}"></prop-element>
      <p>
         Present value: <span>{{demoProp}}</span>
      </p>
   </template>
   
   <script>
      Polymer ({
         is: "my-element", properties: {
            demoProp: String
         }
      });
   </script>
</dom-module>

Selanjutnya, buat satu file lagi bernama prop-element.html dan tambahkan kode berikut.

//it specifies the start of an element's local DOM
<dom-module id = "prop-element">
   <template>
      <button on-click = "onClickFunc">Change value</button>
   </template>
   
   <script>
      Polymer ({
         is: "prop-element", properties: {
            myProp: {
               type: String,
               notify: true,
               readOnly: true,
               value: 'This is initial value...'
            }
         },
         onClickFunc: function(){
            this._setMyProp('This is new value after clicking the button...');
         }
      });
   </script>
</dom-module>

Keluaran

Jalankan aplikasi seperti yang ditunjukkan pada bab sebelumnya, dan navigasikan ke http://127.0.0.1:8081/. Berikut akan menjadi keluarannya.

Setelah mengklik tombol, itu akan mengubah nilai seperti yang ditunjukkan pada tangkapan layar berikut.

Menghubungkan Dua Jalan

Anda bisa menautkan dua jalur ke objek yang sama menggunakan metode linkPaths dan perlu menggunakan data binding untuk menghasilkan perubahan di antara elemen.

Contoh

linkPaths('myTeam', 'players.5');

Tautan jalur dapat dihapus menggunakan metode unlinkPaths seperti yang ditunjukkan di bawah ini -

unlinkPaths('myTeam');

Pengamat

Perubahan yang dapat diamati yang terjadi pada metode pemanggilan data elemen yang dikenal sebagai pengamat. Berikut adalah jenis-jenis pengamat.

  • Pengamat sederhana digunakan untuk mengamati satu properti.

  • Pengamat kompleks digunakan untuk mengamati lebih dari satu properti atau jalur.

Pengikatan Data

Data binding dapat digunakan untuk menghubungkan properti atau atribut elemen dari elemen host di DOM lokalnya. Data binding dapat dibuat dengan menambahkan anotasi ke template DOM seperti yang ditunjukkan pada kode berikut.

<dom-module id = "myhost-element">
   <template>
      <target-element target-property = "{{myhostProperty}}"></target-element>
   </template>
</dom-module>

Anatomi data binding di template DOM lokal terlihat seperti berikut -

property-name=annotation-or-compound-binding

atau

attribute-name$=annotation-or-compound-binding

Sisi kiri pengikatan menentukan properti atau atribut target, sedangkan sisi kanan pengikatan menentukan anotasi pengikatan atau pengikatan gabungan. Teks dalam anotasi penjilidan diapit oleh pembatas kurung kurawal ganda ({{}}) atau kurung siku ganda ([[]]) dan penjilidan gabungan menyertakan satu atau beberapa anotasi pengikatan literal string.

Berikut adalah elemen pembantu, yang digunakan dengan kasus penggunaan data binding -

  • Template Repeater - Sebuah contoh dari konten template dapat dibuat untuk setiap item dalam sebuah array.

  • Array Selector - Ini memberikan status pemilihan untuk larik data terstruktur.

  • Conditional Template - Anda dapat mengidentifikasi konten, jika kondisinya benar.

  • Auto-binding Template - Ini menentukan data yang mengikat di luar elemen polimer.

Pohon DOM memicu peristiwa perubahan dom, jika elemen pembantu memperbarui pohon DOM. Terkadang, Anda dapat berinteraksi dengan DOM dengan mengubah data model, bukan dengan berinteraksi dengan node yang dibuat. Oleh karena itu, Anda dapat menggunakan acara dom-change untuk mengakses node secara langsung.

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved