Polimero - Elementi personalizzati

Polymer è un framework che consente di creare elementi personalizzati utilizzando elementi HTML standard. Gli elementi web personalizzati forniscono le seguenti funzionalità:

• Fornisce il nome dell'elemento personalizzato con l'associazione della classe.

• Quando si modifica lo stato dell'istanza dell'elemento personalizzato, verranno richiesti i callback del ciclo di vita.

• Se modifichi gli attributi su un'istanza, verrà richiesta la richiamata.

È possibile definire l'elemento personalizzato utilizzando la classe ES6 e la classe può essere associata all'elemento personalizzato come mostrato nel codice seguente.

//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);

L'elemento personalizzato può essere utilizzato come elemento standard come mostrato di seguito:

<element-demo></element-demo>

Note - Il nome dell'elemento personalizzato deve iniziare con una lettera minuscola e contenere un trattino tra i nomi.

Ciclo di vita dell'elemento personalizzato

Il ciclo di vita dell'elemento personalizzato fornisce una serie di reazioni dell'elemento personalizzato che sono responsabili della modifica del ciclo di vita dell'elemento e sono definite nella tabella seguente.

Sr.No.	Reazioni e descrizione
1	constructor Quando crei un elemento o definisci l'elemento creato in precedenza, verrà chiamata questa reazione dell'elemento.
2	connectedCallback Quando aggiungi un elemento a un documento, verrà chiamata questa reazione dell'elemento.
3	disconnectedCallback Quando rimuovi un elemento da un documento, verrà chiamata questa reazione dell'elemento.
4	attributeChangedCallback Ogni volta che modifichi, aggiungi, rimuovi o sostituisci un elemento da un documento, verrà chiamata questa reazione dell'elemento.

Aggiornamenti degli elementi

Possiamo utilizzare elementi personalizzati prima di definirli tramite specifica e qualsiasi istanza esistente di un elemento verrà aggiornata alla classe personalizzata aggiungendo una definizione a tale elemento.

Lo stato dell'elemento personalizzato contiene i seguenti valori:

• uncustomized - Il nome dell'elemento personalizzato valido è un elemento incorporato o un elemento sconosciuto, che non può diventare un elemento personalizzato.

• undefined - L'elemento può avere un nome di elemento personalizzato valido, ma non può essere definito.

• custom - L'elemento può avere un nome di elemento personalizzato valido, che può essere definito e aggiornato.

• failed - Tentativo di aggiornare l'elemento fallito di una classe non valida.

Definizione di un elemento

Un elemento personalizzato può essere definito creando una classe che estende Polymer.Element e passa la classe al metodo customElements.define. La classe contiene il metodo getter che restituisce un nome di tag HTML dell'elemento personalizzato. Ad esempio:

//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');

Importazioni e API

Gli elementi Polymer possono essere definiti specificando le seguenti tre importazioni HTML:

• polymer-element.html - Specifica la classe base Polymer.Element.

• legacy-element.html- Estende Polymer.Element utilizzando la classe base Polymer.LegacyElement e aggiunge l'API legacy compatibile 1.x. Crea anche elementi ibridi definendo il metodo factory legacy Polymer ().

• polymer.html - Comprende le classi di base Polymer insieme agli elementi helper, che sono stati inclusi in 1.x polymer.html.

Definisci un elemento nel documento HTML principale

È possibile definire un elemento nel documento HTML principale utilizzando la funzione HTMLImports.whenReady ().

Esempio

Il seguente esempio mostra come definire un elemento nel documento HTML principale. Crea un file index.html e aggiungi il codice seguente.

<!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>

Ora crea un elemento personalizzato chiamato define-element.html e includi il codice seguente.

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

Produzione

Per eseguire l'applicazione, accedere alla directory del progetto creato ed eseguire il comando seguente.

polymer serve

Ora apri il browser e vai a http://127.0.0.1:8081/. Di seguito sarà l'output.

Definisci un elemento legacy

L'elemento legacy può essere utilizzato per registrare un elemento utilizzando la funzione Polymer, che prende il prototipo per un nuovo elemento. Il prototipo dovrebbe contenereis che definisce il nome del tag HTML per un elemento personalizzato.

Esempio

//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();

Callback del ciclo di vita

I callback del ciclo di vita vengono utilizzati per eseguire le attività per le funzionalità integrate di Polymer.Elementclasse. Polymer utilizza il callback pronto, che verrà richiamato quando Polymer completa la creazione e l'inizializzazione degli elementi DOM.

Di seguito è riportato un elenco di callback legacy in Polymer.js.

• created - Viene chiamato quando si crea un elemento prima di impostare i valori della proprietà e inizializzare il DOM locale.

• ready - Viene chiamato quando crei un elemento dopo aver impostato i valori della proprietà e inizializzato il DOM locale.

• attached - Viene richiamato dopo aver allegato l'elemento al documento e può essere richiamato più di una volta durante la durata di un elemento.

• detached - Viene richiamato dopo aver scollegato l'elemento dal documento e può essere richiamato più di una volta durante la durata di un elemento.

• attributeChanged - Viene chiamato quando ci sono modifiche negli attributi di un elemento e contiene le modifiche agli attributi, che non sono compatibili con le proprietà dichiarate.

Dichiarazione delle proprietà

Le proprietà possono essere dichiarate su un elemento per aggiungere un valore predefinito e altre caratteristiche specifiche nel sistema dati e possono essere utilizzate per specificare le seguenti caratteristiche:

• Specifica il tipo di proprietà e il valore predefinito.

• Chiama il metodo dell'osservatore, quando ci sono cambiamenti nel valore della proprietà.

• Specifica lo stato di sola lettura per interrompere le modifiche impreviste al valore della proprietà.

• Fornisce il supporto per il data binding bidirezionale, che attiva un evento quando si modificano i valori delle proprietà.

• È una proprietà calcolata, che calcola un valore dinamicamente a seconda delle altre proprietà.

• Aggiorna e riflette il valore dell'attributo corrispondente, quando si modificano i valori della proprietà.

La tabella seguente mostra le chiavi per ogni proprietà, che sono supportate dall'oggetto proprietà.

Sr.No.	Chiave e descrizione	genere
1	type Deserializza da un attributo il cui tipo di proprietà è determinato utilizzando il costruttore del tipo.	costruttore (booleano, data, numero, stringa, matrice o oggetto)
2	value Specifica il valore predefinito per la proprietà e, se è una funzione, utilizza il valore restituito come valore predefinito della proprietà.	booleano, numero, stringa o funzione.
3	reflectToAttribute Se questa chiave è impostata su true, imposta l'attributo corrispondente sul nodo host. L'attributo può essere creato come un attributo booleano HTML standard, se si imposta il valore della proprietà come booleano.	booleano
4	readOnly Non è possibile impostare la proprietà direttamente tramite assegnazione o data binding, se questa chiave è impostata su true.	booleano
5	notify È possibile utilizzare la proprietà per l'associazione dati bidirezionale, se questa chiave è impostata su true e quando si modifica la proprietà, verrà attivato l'evento di modifica del nome della proprietà.	booleano
6	computed È possibile calcolare il valore di un argomento ogni volta che cambia, invocando il metodo e il valore verrà semplificato come nome del metodo e elenco di argomenti.	corda
7	observer Richiamare il nome del metodo, che è semplificato da un valore, quando il valore della proprietà cambia.	corda

Deserializzazione degli attributi

Deserializzare il nome della proprietà che corrisponde a un attributo sull'istanza in base al tipo specificato e lo stesso nome della proprietà sull'istanza dell'elemento, se la proprietà è configurata nell'oggetto proprietà.

È possibile impostare il tipo specificato direttamente come valore della proprietà, se non ci sono altre opzioni di proprietà definite nell'oggetto proprietà; in caso contrario, fornirà il valore alla chiave del tipo nell'oggetto di configurazione delle proprietà.

Configurazione delle proprietà booleane

La proprietà booleana può essere configurata dal markup, impostandola su false e se è impostata su true, non è possibile configurare dal markup perché l'attributo con o senza un valore è equalizzato a true. Pertanto, è noto come comportamento standard per gli attributi nella piattaforma web.

Le proprietà dell'oggetto e dell'array possono essere configurate passandole in formato JSON come -

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

Configurazione dei valori di proprietà predefiniti

La proprietà predefinita può essere configurata utilizzando il campo valore nell'oggetto proprietà e può essere un valore primitivo o una funzione che restituisce un valore.

Esempio

L'esempio seguente illustra come configurare i valori delle proprietà predefinite nell'oggetto proprietà.

<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>

Produzione

Eseguire l'applicazione come mostrato nell'esempio precedente e passare a http://127.0.0.1:8000/. Di seguito sarà l'output.

Proprietà di sola lettura

È possibile evitare modifiche impreviste sui dati prodotti impostando il flag readOnly su true, nell'oggetto proprietà. Element utilizza il setter della convenzione _setProperty (value), per modificare il valore della proprietà.

Esempio

L'esempio seguente illustra l'uso di proprietà di sola lettura nell'oggetto proprietà. Crea un file index.html e aggiungi il seguente codice al suo interno

<!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>

Ora, crea un altro file chiamato my-element.html e includi il codice seguente.

<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>

Successivamente, crea un altro file chiamato prop-element.html e aggiungi il seguente codice.

//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>

Produzione

Eseguire l'applicazione come mostrato nell'esempio precedente e passare a http://127.0.0.1:8081/. Di seguito sarà l'output.

Dopo aver fatto clic sul pulsante, cambierà il valore come mostrato nello screenshot seguente.

Riflettere le proprietà agli attributi

L'attributo HTML può essere sincronizzato con il valore della proprietà impostando il reflectToAttribute su true su una proprietà nell'oggetto di configurazione delle proprietà.

Serializzazione degli attributi

Il valore della proprietà può essere serializzato nell'attributo, mentre riflette o associa una proprietà a un attributo, e per impostazione predefinita i valori possono essere serializzati in base al tipo corrente del valore.

• String - Non è necessaria la serializzazione.

• Date or Number - Utilizzare toString per serializzare i valori.

• Boolean - Imposta l'attributo non valorizzato visualizzato come vero o falso.

• Array or Object - Utilizza JSON.stringify per serializzare il valore.