Polymer ってなんぞ?
Custom elements extend the web
一言でビルトイン以外のカスタムタグを追加すると。
カスタムなイベントや、デフォルトのスタイルも含めてコンポーネントとして定義できるらしい。
面白いのは「フレームワーク」とは名乗ってない所か。HTML5とか勉強会で聞いた通りだ。
ソースを読む
Polymer の導入そのものは、bower さえ入ってれば速攻できるらしい。 Get the code - Polymer
簡単なことはいいことだ。
その上でコンポーネント製作テンプレートを眺めてみた。
Create a reusable element - Polymer
結構いろいろ入ってるが、コンポーネントを作って GitHub で共有するところまであるらしい。
テンプレートを見る限り、基本的にテストも含む全件が入っていそうな感じだ。
Play で導入するなら、画面切り離しでサブプロジェクトでコンポーネントを作ってアクセスするのが良さそうに見える。
後でやってみよう。
ドキュメントを読んでみる
Quick tour of Polymer - Polymer
そして先ほども思ったが、非常にシンプルに作れるっぽい。
コンポーネント製作部分。下記の例だと、proto-element
というタグを定義(ファイル名もproto-element"
)
<link rel="import" href="bower_components/polymer/polymer.html"> <script> // register a new element called proto-element Polymer({ is: "proto-element", // add a callback to the element's prototype ready: function() { this.textContent = "I'm a proto-element. Check out my prototype!" } }); </script>
このコンポーネントはどうも JavaScript 上の運用もできる模様。Registration and lifecycle - Polymer
既存のタグを継承して作ることもできる。
MyInput = Polymer({ is: 'my-input', extends: 'input', created: function() { this.style.border = '1px solid red'; } }); var el1 = new MyInput(); console.log(el1 instanceof HTMLInputElement); // true var el2 = document.createElement('input', 'my-input'); console.log(el2 instanceof HTMLInputElement); // true
作ったコンポーネントは、is
属性を使って既存タグに適用することもできる
<input is="my-input">
ライフサイクルについても読んでみた
順序別配置。
created
: 初期化後に呼ばれるイベントハンドラ- (ローカルDOM作成)
ready
: DOM が作成されたタイミングでコールされるイベントハンドラfactoryImpl
: コンストラクタ
ただし、HTML上にタグとして定義した場合は動作しない。attached
: 見たまま。利用可能になった際のイベント。
また、この後に、以下の事が書かれてる。
create
は必ずready
前に実行されるready
は必ずattached
の前に実行されるready
は子要素から順に呼ばれる
残りのイベントハンドラは
- detached: 見たまま。画面から外された時だと思われ
- attributeChanged: 見たまま、属性変更時。
var MyElement = Polymer.Class({ is: 'my-element', // See below for lifecycle callbacks created: function() { this.textContent = 'My element!'; } }); document.registerElement('my-element', MyElement); // Equivalent: var el1 = new MyElement(); var el2 = document.createElement('my-element');
後は、registerElement でタグを定義して、 createElement で貼り付けができるらしい。
とりあえず、初回導入とコンポーネント追加以外では bower 要らなそうなので、Play にもそのまま組み込めると思われ。