Polymer-quick-guide

提供：Dev Guides
移動先:案内、検索

ポリマー-概要

Polymer.jsは、Googleが作成したJavaScriptライブラリで、コンポーネントを使用してアプリケーションを構築するためにHTML要素を再利用できます。

Polymerは、Google開発者によって開発されたオープンソースのJavaScriptライブラリであり、2015年5月27日に最初にリリースされました。 安定版リリースは1.7.0で、2016年9月29日にリリースされました。

Polymer.jsを使用する理由

  • HTML、CSS、およびJavaScriptを使用して独自のカスタム要素を簡単に作成し、要素に相互作用を追加できます。
  • Googleによって作成され、クロスブラウザ互換のアプリケーションとWebコンポーネントを提供します。
  • 一方向と双方向の両方のデータバインディングを提供します。
  • 単純なコンポーネントから複雑なWebアプリケーションまでプロジェクトを管理するためのPolymerコマンドラインインターフェイスを提供します。

Polymer.jsの機能

  • これは、カスタムHTML要素の構築を可能にするWeb標準APIの上に構築されたJavaScriptライブラリです。
  • 独自のカスタマイズされた再利用可能な要素を作成するためのポリフィル（Webコンポーネント仕様）を提供します。
  • WebドキュメントおよびWebアプリケーションで再利用可能なウィジェットを作成するために、Webコンポーネント標準を使用します。
  • ハイブリッドモバイルアプリケーションの開発にGoogleマテリアルデザインを使用しています。
  • ネットワーク全体にカスタム要素を配布し、ユーザーはHTMLインポートの助けを借りてこれらの要素を使用できます。

ポリマー-インストール

システムでPolymerを構成するのは簡単です。 以下は、Polymerをインストールする2つの方法です。

  • Polymer CLI（コマンドラインインターフェイス）
  • バウアー

Polymer CLIを使用したPolymerのインストール

  • ステップ1 *-次のnpmコマンドを使用してPolymerをインストールします。
npm install -g polymer-cli@next
  • ステップ2 *-次のコマンドを使用して、正常なインストールとバージョンを確認します。
polymer --version

それが正常にインストールされている場合、次のようにバージョンが表示されます-

  • ステップ3 *-選択した名前でディレクトリを作成し、そのディレクトリに切り替えます。
mkdir polymer-js
cd polymer-js
  • ステップ4 *-プロジェクトを初期化するには、_polymer-jsdirectory_で次のコマンドを実行します。
polymer init

上記のコマンドを実行した後、このようなものが表示されます- 

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
  • ステップ5 *-上記のオプションからポリマー2アプリケーションを選択します。

ここで、次のコマンドを使用してプロジェクトを開始します。 

polymer serve

Bowerを使用したポリマーのインストール

  • ステップ1 *-Bowerメソッドを使用してゼロから開始するには、次のコマンドを使用してBowerをインストールします。
npm install -g bower
  • ステップ2 *-次のコマンドを使用してポリマーをインストールします。
npm install -g polymer-cli@next
  • ステップ3 *-次のコマンドを使用して、Polymerの正常なインストールとバージョンを確認します。
polymer --version

それが正常にインストールされている場合、次のようにバージョンが表示されます- 

0.18.0-pre.13.
  • ステップ4 *-bowerから最新のPolymer 2.0 RCリリースをインストールするには、次のコマンドを使用します。
bower install Polymer/polymer#^2.0.0-rc.3

ステップ5 *- *indexl ファイルを作成し、<head>タグに次のコードを追加します。 

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

<link rel = "import" href = "/bower_components/polymer/polymerl">
//it import Polymer
  • ステップ6 *-次のコマンドを使用してプロジェクトを開始します。
polymer serve

展開のための構築

プロジェクトを展開用にビルドするには、 polymer build コマンドがより簡単な方法であり、コマンドラインフラグに応じてコードを縮小、コンパイル、またはバンドルします。

すべてのブラウザーで機能するユニバーサルビルドを作成するには、次のコマンドを使用します。 

polymer build --js-compile

上記のコマンドはプロジェクトをbuild/defaultにビルドし、次のコマンドを使用してこのディレクトリを起動できます。 

polymer serve build/default

Polymer 2.0は、ES6およびHTMLカスタム要素を使用します。 ベストプラクティスとして、ES6を完全にサポートしているブラウザーでES6を使用し、ES6をサポートしていない古いブラウザーにES5をコンパイルすることをお勧めします。 次の表は、プロジェクトに最適な戦略を示しています。

Strategy Easiest for cross-browser support Most optimal for WC v1 performance
Server Any server works, including static ones Differential serving required
Deployed Code ES5 transpiled ES6
Polyfill Loader webcomponents-es5-loader.js webcomponents-loader.js

ポリマー-要素

ポリマー要素は、レイアウト、ユーザーインタラクション、選択、および足場アプリケーションで動作するように設計された視覚的および非視覚的要素のセットです。 これらには、単純なボタンから、きちんとした視覚効果のあるダイアログボックスまで、すべてが含まれます。 次の表に、さまざまな種類のポリマー要素を示します。

Sr.No. Types & Description
1

app elements

アプリ要素は、アプリケーション全体を構築するときに役立ちます。

2

iron elements

これらは、アプリケーションを作成するための基本的な構成要素です。

3

paper elements

紙の要素は、Googleの材料設計ガイドラインを実装するために設計された一連のUIコンポーネントです。

4

google Web components

google Webコンポーネントは、Google APIおよびサービス用のWebコンポーネントのストックです。

5

gold elements

ゴールド要素は、eコマース固有のユースケース向けに構築されています。

6

neon elements

Webアニメーションを使用してPolymer要素のアニメーション化されたトランジションを実装するために使用されます。

7

platinum elements

プラチナ要素は、Webページを真のWebアプリに変える機能を提供します。

8

molecules elements

分子要素は、アプリケーションを簡単に開発するのに役立ち、プラグインのグループをPolymerアプリケーションに接続するために使用されます。

ポリマー-カスタム要素

Polymerは、標準のHTML要素を使用してカスタム要素を作成できるフレームワークです。 カスタムWeb要素は次の機能を提供します-

  • クラスを関連付けるカスタム要素名を提供します。
  • カスタム要素インスタンスの状態を変更すると、ライフサイクルコールバックが要求されます。
  • インスタンスの属性を変更すると、コールバックが要求されます。

次のコードに示すように、ES6クラスを使用してカスタム要素を定義し、クラスをカスタム要素に関連付けることができます。 

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

カスタム要素は、以下に示すように標準要素として使用することができます- 

<element-demo></element-demo>

注-カスタム要素名は小文字で始まり、名前の間にダッシュを含める必要があります。

カスタム要素のライフサイクル

カスタム要素ライフサイクルは、要素ライフサイクルの変更を担当するカスタム要素反応のセットを提供し、次の表で定義されています。

Sr.No. Reactions & Description
1

constructor

要素を作成するか、以前に作成した要素を定義すると、この要素の反応が呼び出されます。

2

connectedCallback

ドキュメントに要素を追加すると、この要素の反応が呼び出されます。

3

disconnectedCallback

ドキュメントから要素を削除すると、この要素の反応が呼び出されます。

4

attributeChangedCallback

ドキュメントの要素を変更、追加、削除、または置換するたびに、この要素の反応が呼び出されます。

要素のアップグレード

仕様で定義する前にカスタム要素を使用できます。要素の既存のインスタンスは、その要素に定義を追加することでカスタムクラスにアップグレードされます。

カスタム要素の状態には、次の値が含まれています-

  • uncustomized -有効なカスタム要素名は、組み込み要素または不明な要素のいずれかです。これらはカスタム要素にはなりません。
  • undefined -要素は有効なカスタム要素名を持つことができますが、定義することはできません。
  • カスタム-要素には、定義およびアップグレードできる有効なカスタム要素名を付けることができます。
  • failed -無効なクラスの失敗した要素をアップグレードしようとしています。

要素を定義する

カスタム要素を定義するには、Polymer.Elementを拡張するクラスを作成し、そのクラスをcustomElements.defineメソッドに渡します。 クラスには、カスタム要素のHTMLタグ名を返すgetterメソッドが含まれます。 例えば- 

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

インポートとAPI

Polymer要素は、次の3つのHTMLインポートを指定することで定義できます-

  • polymer-elementl -Polymer.Element基本クラスを指定します。
  • legacy-elementl -Polymer.LegacyElement基本クラスを使用してPolymer.Elementを拡張し、1.x互換のレガシーAPIを追加します。 また、従来のPolymer（）ファクトリメソッドを定義することにより、ハイブリッド要素を作成します。
  • polymerl -これは、1.xポリマーに含まれていたヘルパー要素とともにPolymerベースクラスで構成されます。

メインHTMLドキュメントで要素を定義する

HTMLImports.whenReady（）関数を使用して、メインHTMLドキュメントに要素を定義できます。

例

次の例は、メインHTMLドキュメントで要素を定義する方法を示しています。 indexlファイルを作成し、次のコードを追加します。 

<!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/polymerl">
      <link rel = "import" href = "define-elementl">
   </head>

   <body>
      <define-element></define-element>
   </body>
</html>

ここで、define-elementlというカスタム要素を作成し、次のコードを含めます。 

<dom-module id = "define-element">
   <template>
      <h2>Welcome to finddevguides!!!</h2>
   </template>

   <script>
      HTMLImports.whenReady(function(){
         Polymer ({
            is: "define-element"
         })
      })
   </script>
</dom-module>

出力

アプリケーションを実行するには、作成されたプロジェクトディレクトリに移動し、次のコマンドを実行します。 

polymer serve

ここでブラウザを開き、 http：//127.0.0.1：8081/ に移動します。 出力は次のようになります。

ポリマー定義要素

レガシー要素を定義する

Legacy要素は、Polymer関数を使用して要素を登録するために使用できます。Polymer関数は、新しい要素のプロトタイプを取得します。 プロトタイプには、カスタム要素のHTMLタグ名を定義する is を含める必要があります。

例

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

ライフサイクルコールバック

ライフサイクルコールバックは、 Polymer.Element クラスの組み込み機能のタスクを実行するために使用されます。 Polymerはreadyコールバックを使用します。これは、PolymerがDOM要素の作成と初期化を完了すると呼び出されます。

以下は、Polymer.jsのレガシーコールバックのリストです。

  • created -プロパティ値を設定してローカルDOMを初期化する前に要素を作成するときに呼び出されます。
  • ready -プロパティ値を設定し、ローカルDOMを初期化した後に要素を作成すると呼び出されます。
  • attached -要素をドキュメントに添付した後に呼び出され、要素の存続期間中に複数回呼び出すことができます。
  • detached -ドキュメントから要素を分離した後に呼び出され、要素の存続期間中に複数回呼び出すことができます。
  • attributeChanged -要素の属性に変更があり、宣言されたプロパティと互換性のない属性の変更を保持するときに呼び出されます。

プロパティの宣言

プロパティは、データシステムのデフォルト値と他の特定の機能を追加する要素で宣言することができ、次の機能を指定するために使用することができます-

  • プロパティタイプとデフォルト値を指定します。
  • プロパティ値に変更がある場合、オブザーバーメソッドを呼び出します。
  • プロパティ値への予期しない変更を停止するために、読み取り専用ステータスを指定します。
  • プロパティ値を変更するとイベントをトリガーする双方向データバインディングをサポートします。
  • これは計算されたプロパティであり、他のプロパティに応じて値を動的に計算します。 *プロパティ値を変更すると、対応する属性値が更新および反映されます。

次の表は、プロパティオブジェクトでサポートされる各プロパティのキーを示しています。

Sr.No. Key & Description Type
1
  • type*

プロパティの型が型のコンストラクターを使用して決定される属性から逆シリアル化します。

constructor (Boolean, Date, Number, String, Array or Object)
2

value

プロパティのデフォルト値を指定し、関数の場合は、戻り値をプロパティのデフォルト値として使用します。

boolean, number, string or function.
3

reflectToAttribute

このキーがtrueに設定されている場合、ホストノードの対応する属性を設定します。 プロパティ値をブール値として設定した場合、属性は標準のHTMLブール属性として作成できます。

boolean
4

readOnly

このキーがtrueに設定されている場合、割り当てまたはデータバインディングによってプロパティを直接設定することはできません。

boolean
5

notify

このキーをtrueに設定し、プロパティを変更すると、property-name-changedイベントがトリガーされる場合、双方向データバインディングにプロパティを使用できます。

boolean
6

computed

メソッドを呼び出すことにより、引数が変更されるたびに引数の値を計算できます。値はメソッド名と引数リストとして簡略化されます。

string
7

observer

プロパティ値が変更されたときに、値によって簡略化されたメソッド名を呼び出します。

string

属性の逆シリアル化

プロパティがプロパティオブジェクトで構成されている場合、指定されたタイプと要素インスタンスの同じプロパティ名に従って、インスタンスの属性と一致するプロパティ名を逆シリアル化します。

プロパティオブジェクトに他のプロパティオプションが定義されていない場合は、指定されたタイプをプロパティの値として直接設定できます。それ以外の場合は、プロパティ構成オブジェクトのtypeキーに値を提供します。

ブールプロパティの構成

ブールプロパティは、falseに設定することでマークアップから構成できます。trueに設定されている場合、値のある属性またはない属性がtrueに等しくなるため、マークアップから構成できません。 したがって、Webプラットフォームの属性の標準的な動作として知られています。

オブジェクトと配列のプロパティは、それらをJSON形式で渡すことで設定できます- 

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

デフォルトのプロパティ値の構成

既定のプロパティは、プロパティオブジェクトの値フィールドを使用して構成でき、プリミティブ値、または値を返す関数のいずれかです。

例

次の例は、プロパティオブジェクトでデフォルトのプロパティ値を設定する方法を示しています。 

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

//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 finddevguides;!!!'
               },
               data: {
                  type: Object,
                  notify: true,
                  value: function() { return {}; }
               }
            }
         }
      }
      window.customElements.define(PolymerApp.is, PolymerApp);
   </script>
</dom-module>

出力

前の例のようにアプリケーションを実行し、 http：//127.0.0.1：8000/ に移動します。 出力は次のようになります。

ポリマーのデフォルトのプロパティ値の設定

読み取り専用プロパティ

プロパティオブジェクトでreadOnlyフラグをtrueに設定すると、生成されたデータの予期しない変更を回避できます。 要素は、プロパティ値を変更するために、_setProperty（value）規則のセッターを使用します。

例

次の例では、プロパティオブジェクトで読み取り専用プロパティを使用しています。 indexlファイルを作成し、次のコードを追加します 

<!doctype html>
<html>
   <head>
      <title>Polymer Example</title>
      <script src = "bower_components/webcomponentsjs/webcomponents-lite.js"></script>

      <link rel = "import" href = "bower_components/polymer/polymerl">
      <link rel = "import" href = "my-elementl">
   </head>

   <body>
      <my-element></my-element>
   </body>
</html>

次に、my-elementlという名前の別のファイルを作成し、次のコードを含めます。 

<link rel = "import" href = "bower_components/polymer/polymer-elementl">
<link rel = "import" href = "prop-elementl">

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

次に、prop-elementlというファイルをもう1つ作成し、次のコードを追加します。 

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

出力

前の例のようにアプリケーションを実行し、 http：//127.0.0.1：8081/ に移動します。 出力は次のようになります。

ポリマー読み取り専用プロパティ

ボタンをクリックすると、次のスクリーンショットに示すように値が変更されます。

ポリマー読み取り専用プロパティ

プロパティを属性に反映する

プロパティ構成オブジェクトのプロパティで reflectToAttribute をtrueに設定することにより、HTML属性をプロパティ値と同期できます。

属性のシリアル化

プロパティ値は、プロパティを属性に反映またはバインドしながら属性にシリアル化できます。デフォルトでは、値の現在のタイプに応じて値をシリアル化できます。

  • String -シリアル化の必要はありません。
  • 日付または番号-toStringを使用して値をシリアル化します。
  • ブール-表示された非値属性をtrueまたはfalseとして設定します。
  • 配列またはオブジェクト-JSON.stringifyを使用して値をシリアル化します。

ポリマー-シャドウDOMとスタイリング

シャドウDOMは、コンポーネントの構築に使用されるDOMの新しいプロパティです。

例

次のコードでは、ヘッダーコンポーネントにページタイトルとメニューボタンが含まれています。 

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

シャドウDOMでは、*シャドウツリー*と呼ばれるスコープ付きサブツリーで子を見つけることができます。 

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

シャドウルートルートはシャドウツリーの最上部と呼ばれ、ツリーにアタッチされている要素はシャドウホスト（ヘッダーデモ）と呼ばれます。 このシャドウホストには、シャドウルートを指定するshadowRootというプロパティが含まれています。 シャドウルートは、ホストプロパティを使用してホスト要素を識別します。

シャドウDOMと構成

シャドウDOMに要素がある場合、要素の子の代わりにシャドウツリーをレンダリングできます。 <slot>要素をシャドウツリーに追加することにより、要素の子をレンダリングできます。

たとえば、<header-demo>には次のシャドウツリーを使用します。 

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

子を<my-header>要素に追加します- 

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

ヘッダーは、</slot>要素を上記の指定された子に置き換えます- 

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

フォールバックコンテンツ

フォールバックコンテンツは、スロットにノードが割り当てられていないときに表示できます。 例えば- 

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

次のように要素に独自のアイコンを提供できます- 

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

マルチレベル配布

スロット要素をスロットに割り当てることができます。これはマルチレベル配布と呼ばれます。

たとえば、以下に示すようにシャドウツリーの2つのレベルを取ります- 

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

次のコードを考慮してください- 

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

平坦化されたツリーの構造は次のようになります。 

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

シャドウDOMは、配布を確認するために次のスロットAPIを使用します-

  • HTMLElement.assignedSlot -スロットへの要素の割り当てがない場合、要素にスロットを割り当て、nullを返します。
  • HTMLSlotElement.assignedNodes -flattenオプションをtrueに設定すると、スロットとともにノードのリストを提供し、分散ノードを返します。
  • HTMLSlotElement.slotchange -このイベントは、スロットの分散ノードに変更があるとトリガーされます。

イベントのリターゲティング

リスニング要素と同じスコープで要素を表すことができるイベントのターゲットを指定します。 カスタム要素からのイベントを提供します。これは、内部要素ではなく、カスタム要素タグから来ているように見えます。

例

次の例は、Polymer.jsでのイベントのリターゲットの使用を示しています。 indexlというファイルを作成し、その中に次のコードを挿入します。 

<!doctype html>
<html>
   <head>
      <title>Polymer Example</title>
      <script src = "bower_components/webcomponentsjs/webcomponents-lite.js"></script>
      <link rel = "import" href = "bower_components/polymer/polymerl">
      <link rel = "import" href = "retarget-eventl">
   </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>

次に、retarget-eventlという別のファイルを作成し、次のコードを含めます。 

<link rel = "import" href = "bower_components/polymer/polymer-elementl">

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

出力

アプリケーションを実行するには、作成されたプロジェクトディレクトリに移動し、次のコマンドを実行します。 

polymer serve

ここでブラウザを開き、 http：//127.0.0.1：8081/ に移動します。 出力は次のようになります。

ポリマーリターゲットイベント

上記のテキストをクリックしてコンソールを開き、次のスクリーンショットに示すように、リターゲットされたイベントを確認します。

ポリマーリターゲットイベント

シャドウDOMスタイリング

ホストからシャドウツリーに継承するスタイルプロパティを使用して、シャドウDOMのスタイルを設定できます。

例 

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

DOMテンプレート

DOMテンプレートを使用して、要素のDOMサブツリーを作成できます。 DOMテンプレートを要素に追加することで、要素のシャドウルートを作成し、テンプレートをシャドウツリーにコピーできます。

DOMテンプレートは2つの方法で指定することができます-

  • <dom-module>要素を作成します。これはid属性とともに要素の名前と一致する必要があります。
  • <dom-module>内に<template>要素を定義します。

例 

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

要素のシャドウDOMのスタイル設定

Shadow DOMでは、フォント、テキストの色、クラスなどのスタイルプロパティを使用して、要素の範囲外に適用せずにカスタム要素のスタイルを設定できます。

  • ：host *セレクターを使用してホスト要素のスタイルを設定します（シャドウDOMに接続された要素はホストと呼ばれます）。 Polymer-applというファイルを作成し、その中に次のコードを追加します。
<link rel = "import" href = "../../bower_components/polymer/polymer-elementl">

<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 finddevguides!!!'
               }
            };
         }
      }

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

前のリンク：/polymer/polymer_custom_elements [chapter]に示すようにアプリケーションを実行し、 http：//127.0.0.1：8000/ に移動します。 出力は次のようになります。

ポリマーシャドウDOMスタイリング

スタイルスロットコンテンツ

要素のテンプレートに*スロット*を作成し、実行時に使用することができます。

例

次の例は、要素のテンプレートでのスロット付きコンテンツの使用を示しています。 indexlファイルを作成し、その中に次のコードを追加します。 

<!doctype html>
<html>
   <head>
      <title>Polymer Example</title>
      <link rel = "import" href = "bower_components/polymer/polymerl">
      <link rel = "import" href = "slotted-contentl">
   </head>

   <body>
      <slotted-content>
         <div slot = "text">This is Polymer.JS Slotted Content Example</div>
      </slotted-content>
   </body>
</html>

次に、slotted-contentlという別のファイルを作成し、次のコードを含めます。 

<link rel = "import" href = "bower_components/polymer/polymer-elementl">

<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 finddevguides!!',
            },
         },
      });
   </script>
</dom-module>

前の例のようにアプリケーションを実行し、 http：//127.0.0.1：8081/ に移動します。 出力は次のようになります。

ポリマースタイルスロットコンテンツ

スタイルモジュールの使用

スタイルモジュールと共に、要素間でスタイルを共有できます。 スタイルモジュールでスタイルを指定し、要素間で共有します。

例

次の例は、要素間でスタイルモジュールを使用する方法を示しています。 indexlファイルを作成し、その中に次のコードを追加します。 

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

   <body>
      <style-module></style-module>
   </body>
</html>

次のコードを使用して、style-modulelという別のファイルを作成します。 

<link rel = "import" href = "bower_components/polymer/polymer-elementl">

<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 finddevguides!!',
            },
         },
      });
   </script>
</dom-module>

次に、_colors-modulel_というファイルをもう1つ作成します。このファイルは、次のコードに示すように、スタイルモジュールを要素に提供します。 

<link rel = "import" href = "bower_components/polymer/polymer-elementl">

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

アプリケーションを実行し、 http：//127.0.0.1：8081/ に移動します。 出力は次のようになります。

ポリマースタイルモジュール

カスタムプロパティを使用する

カスタムCSSプロパティを使用して、Polymer要素を使用してアプリケーション内の要素の外観をスタイルできます。 カスタムプロパティはカスケードCSS変数を提供します。これは、スタイルシートを介したスタイルデータの散乱を防ぐカスタム要素の環境外で使用できます。

カスタムプロパティは、構成されたDOMツリーから継承する標準のCSSプロパティと同様に定義できます。 前の例では、要素に定義されたカスタムCSSプロパティを確認できます。

CSS継承では、要素にスタイルが定義されていない場合、次のコードに示すように、親からスタイルを継承します。 

<link rel = "import" href = "components/polymer/myelement-stylel">
<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>

ポリマー-イベント

イベントは、DOMツリーの状態変更と親要素と通信できる要素によって使用され、イベントの作成、ディスパッチ、およびリスニングに標準のDOM APIを使用します。 *アノテーション付きイベントリスナー*はPolymerによって使用されます。Polymerは、イベントリスナーをDOMテンプレートの小さなチャンクとして定義し、テンプレートのoneventアノテーションを使用してDOM子に追加できます。

例

次の例では、注釈付きイベントリスナーをテンプレートに追加します。 indexlというファイルを作成し、その中に次のコードを挿入します。 

<!doctype html>
<html>
   <head>
      <title>Polymer Example</title>
      <script src = "bower_components/webcomponentsjs/webcomponents-lite.js"></script>
      <link rel = "import" href="bower_components/polymer/polymerl">
      <link rel = "import" href = "annotated-eventlistnersl">
   </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>

出力

アプリケーションを実行するには、作成されたプロジェクトディレクトリに移動し、次のコマンドを実行します。 

polymer serve

ここでブラウザを開き、 http：//127.0.0.1：8000/ に移動します。 出力は次のようになります。

Polymer Annotated Eventlistners

次のスクリーンショットに示すように、テキストをクリックしてコンソールに結果を表示します。

Polymer Annotated Eventlistners

カスタムイベント

カスタムイベントは、標準のCustomEventコンストラクターとホスト要素のdispatchEventメソッドを使用してトリガーできます。

ホスト要素からカスタムイベントをトリガーする次の例を考えてみましょう。 indexlファイルを開き、次のコードを追加します。 

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

   <body>
      <custom-event></custom-event>
      <script>
         document.querySelector('custom-event').addEventListener('customValue', function (e) {
            console.log(e.detail.customval);//true
         })
      </script>
   </body>
</html>

次に、custom-eventlという別のファイルを作成し、次のコードを含めます。 

<link rel = "import" href = "bower_components/polymer/polymer-elementl">

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

出力

前の例に示したようにアプリケーションを実行し、 http：//127.0.0.1：8000/ に移動します。 出力は次のようになります。

ポリマーカスタムイベント

次に、ボタンをクリックしてコンソールを開き、次のスクリーンショットに示すように、カスタムイベントの真の値を確認します。

ポリマーカスタムイベント

「イベントのリターゲティング」で移動します。これは、リスニング要素と同じスコープで要素を表すことができるイベントのターゲットを指定します。 たとえば、ターゲットはメインドキュメント内の要素と見なすことができ、シャドウツリーではなくメインドキュメント内のリスナーを使用します。 詳細と例については、リンク：/polymer/polymer_shadow_dom_and_styling [Polymer shadow dom styling]の章を参照してください。

ジェスチャーイベント

ジェスチャーイベントは、ユーザーインタラクションに使用できます。これにより、タッチデバイスとモバイルデバイスの両方でより良いインタラクションが定義されます。 たとえば、タップイベントは、モバイルデバイスとデスクトップデバイスの両方で一貫して発生するジェスチャイベントの一部です。

この章の冒頭で説明したジェスチャーイベントの例を参照できます。この例では、テンプレートに注釈付きイベントリスナーを追加する on-tap イベントを使用します。

次の表に、さまざまな種類のジェスチャーイベントの種類を示します。

Sr.No. Event Type & Description Properties
1

down

指/ボタンが下に移動したことを示します。

  • x -イベントのclientX座標を提供します。
  • y -イベントのclientY座標を提供します。
  • sourceEvent -DOMイベントによって引き起こされるダウンアクションを指定します。
2

up

指/ボタンが上に移動したことを示します。

  • x -イベントのclientX座標を提供します。
  • y -イベントのclientY座標を提供します。
  • sourceEvent -DOMイベントによって引き起こされるupアクションを指定します。
3

tap

アップアクションとダウンアクションの発生を指定します。

  • x -イベントのclientX座標を提供します。
  • y -イベントのclientY座標を提供します。
  • sourceEvent -DOMイベントによって引き起こされるタップアクションを指定します。
4

track

アップアクションとダウンアクションの発生を指定します。

  • x -イベントのclientX座標を提供します。
  • y -イベントのclientY座標を提供します。
  • 状態-追跡状態を指定するタイプ文字列です。
  • dx -最初のイベントを追跡するときに、ピクセル単位で水平方向に変更を加えます。
  • dy -最初のイベントを追跡するときに、ピクセル単位で垂直方向に変更を加えます。
  • ddx -最後のイベントを追跡するときに、ピクセル単位で水平方向に変更を加えます。
  • ddy -最後のイベントを追跡すると、ピクセル単位で垂直方向に変更が行われます。
  • * hover（）*-現在ホバーされている要素を決定するために使用されます。

例

次の例では、テンプレートでのジェスチャーイベントタイプの使用を指定しています。 indexlというファイルを作成し、その中に次のコードを配置します。 

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

   <body>
      <gesture-event></gesture-event>
   </body>
</html>

ここで、gesture-eventlという別のファイルを作成し、次のコードを含めます。 

<link rel = "import" href = "bower_components/polymer/polymer-elementl">

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

出力

前の例に示すようにアプリケーションを実行し、 http：//127.0.0.1：8081/ に移動します。 要素内でマウスのドラッグを開始すると、次のスクリーンショットに示すように状態が表示されます。

ポリマージェスチャイベント

要素内でマウスをドラッグすると、次のスクリーンショットに示すように、イベントトラッキングの進行状況が表示されます。

ポリマージェスチャイベント

マウスのドラッグを停止すると、次のスクリーンショットに示すように、要素の追跡イベントが終了します。

ポリマージェスチャイベント

ポリマー-データシステム

ポリマーは、次のようなさまざまなアクションをとることにより、要素のプロパティの変化を観察できます

  • オブザーバー-データが変更されるたびにコールバックを呼び出します。
  • 計算されたプロパティ-他のプロパティに基づいて仮想プロパティを計算し、入力データが変更されるたびにそれらを再計算します。
  • データバインディング-データが変更されるたびにアノテーションを使用して、DOMノードのプロパティ、属性、またはテキストコンテンツを更新します。

データパス

*Path* は、データシステム内の文字列であり、スコープに関連するプロパティまたはサブプロパティを提供します。 スコープはホスト要素にすることができます。 パスは、データバインディングを使用してさまざまな要素にリンクできます。 要素がデータバインディングで接続されている場合、データの変更は1つの要素から別の要素に移動できます。

例

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

<address-card>が<my-profile>要素のローカルDOMにある場合、上記の2つのパス（my-profileおよびaddress-card）はデータバインディングで接続できます。

以下は、Polymer.jsの特別なタイプのパスセグメントです-

  • ワイルドカード（*）文字は、パスの最後のセグメントとして使用できます。
  • 配列の変更は、パスの最後のセグメントとして文字列のスプライスを配置することにより、特定の配列に表示できます。
  • 配列項目パスは配列内の項目を示し、数値パスセグメントは配列インデックスを指定します。

データパスでは、各パスセグメントはプロパティ名であり、次の2種類のパスが含まれています-

  • ドットで区切られたパスセグメント。 例：「apple.grapes.orange」。
  • 文字列の配列では、各配列要素はパスセグメントまたはドットパスのいずれかです。 例：["apple"、 "grapes"、 "orange"]、["apple.grapes"、 "orange"]。

データフロー

例

次の例では、データフローの双方向バインディングを指定しています。 indexlファイルを作成し、その中に次のコードを追加します。 

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

   <body>
      <my-element></my-element>
   </body>
</html>

次に、my-elementlという名前の別のファイルを作成し、次のコードを含めます。 

<link rel = "import" href = "bower_components/polymer/polymer-elementl">
<link rel = "import" href = "prop-elementl">

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

次に、prop-elementlというファイルをもう1つ作成し、次のコードを追加します。 

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

出力

前の章で示したようにアプリケーションを実行し、 http：//127.0.0.1：8081/ に移動します。 出力は次のようになります。

ポリマーデータフローの例

ボタンをクリックすると、次のスクリーンショットに示すように値が変更されます。

ポリマーデータフローの例

2つのパスのリンク

linkPathsメソッドを使用して2つのパスを同じオブジェクトにリンクできます。データバインディングを使用して要素間の変更を生成する必要があります。

例

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

パスのリンクは、以下に示すようにunlinkPathsメソッドを使用して削除することができます- 

unlinkPaths('myTeam');

オブザーバー

要素のデータに発生する観察可能な変更は、オブザーバーと呼ばれるメソッドを呼び出します。 オブザーバーの種類は次のとおりです。

  • 単一のプロパティを監視するには、単純なオブザーバが使用されます。
  • 複雑なオブザーバーは、複数のプロパティまたはパスを監視するために使用されます。

データバインディング

データバインディングを使用して、ローカルDOMのホスト要素から要素のプロパティまたは属性を接続できます。 次のコードに示すように、DOMテンプレートに注釈を追加することにより、データバインディングを作成できます。 

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

ローカルDOMテンプレートのデータバインディングの構造は次のように見えます- 

property-name=annotation-or-compound-binding

or 

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

バインディングの左側はターゲットのプロパティまたは属性を指定し、バインディングの右側はバインディングアノテーションまたは複合バインディングを指定します。 バインディングアノテーション内のテキストは、二重中括弧（\ {\ {}}）または二重角括弧（[[区切り文字と複合バインディングには、1つ以上の文字列リテラルバインディングアノテーションが含まれます。

以下は、データバインディングのユースケースで使用されるヘルパー要素です-

  • テンプレートリピーター-テンプレートのコンテンツのインスタンスは、配列内の各アイテムに対して作成できます。
  • Array Selector -構造化データの配列の選択状態を提供します。
  • 条件付きテンプレート-条件が真の場合、コンテンツを識別できます。
  • 自動バインディングテンプレート-ポリマー要素の外部のデータバインディングを指定します。

ヘルパー要素がDOMツリーを更新すると、DOMツリーはdom-changeイベントをトリガーします。 作成されたノードと対話するのではなく、モデルデータを変更することでDOMと対話できる場合があります。 したがって、dom-changeイベントを使用して、ノードに直接アクセスできます。

「https://www.finddevguides.com/index.php?title=Polymer-quick-guide&oldid=79196」から取得
Powered by MediaWiki