【Polymer】 Polymer ~ Hello World編 ~

■ はじめに

https://blogs.yahoo.co.jp/dk521123/37597605.html
の続き。
Hello Worldとして、スタートキットを動かす

■ 前提条件

https://blogs.yahoo.co.jp/dk521123/37597605.html
で、初期設定を行うこと。

■ スタートキットを動かす

https://www.polymer-project.org/3.0/start/toolbox/set-up
を参考に。

【1】プロジェクト用のディレクトリを作成する
【2】プロジェクトを初期化する
【3】プロジェクトを起動する

【1】プロジェクト用のディレクトリを作成する

mkdir my-app
cd my-app

【2】プロジェクトを初期化する

polymer init

=> ここでは「polymer-3-starter-kit - A Polymer 3.x starter application template, with navigation a
nd "PRPL pattern" loading」を選択する

【3】プロジェクトを起動する

polymer serve --open

=> ブラウザが起動し、アプリが表示されるはず。

■ 新しいページを追加する

スタートキットを動かした後は、新しいページを追加する
https://www.polymer-project.org/3.0/start/toolbox/create-a-page
を参考に。

【1】新しいページを追加する
【2】src/my-app.js に新規追加するページの処理を追記する
【3】プロジェクトを起動する

【1】新しいページを追加する

cd ~/my-app
sudo vi src/my-new-view.js
[1] src/my-new-view.js を以下の内容で保存する
/* Load the PolymerElement base class and html helper function */
import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
/* Load shared styles. All view elements use these styles */
import './shared-styles.js';

/* Extend the base PolymerElement class */
class MyNewView extends PolymerElement {
  /* Define a template for the new element */
  static get template() {
    return html`
      <style include="shared-styles">
        :host {
          display: block;

          padding: 10px;
        }
      </style>

      <div class="card">
        <div class="circle">4</div>
        <h1>New View</h1>
        <p>New view!</p>
      </div>
    `;
  }
}
/* Register the new element with the browser */
window.customElements.define('my-new-view', MyNewView);

【2】src/my-app.js に新規追加するページの処理を追記する

sudo vi src/my-app.js
[2-1] src/my-app.js 内で「<iron-pages」を探し、『<my-new-view name="new-view"></my-new-view>』を追加する
<iron-pages selected="page" attr-for-selected="name" role="main">
  <my-view1 name="view1"></my-view1>
  <my-view2 name="view2"></my-view2>
  <my-view3 name="view3"></my-view3>
  <my-new-view name="new-view"></my-new-view> <!-- Add -->
  <my-view404 name="view404"></my-view404>
</iron-pages>
[2-2] src/my-app.js 内で「_routePageChanged」を探し、『, 'new-view'』を追加する
_routePageChanged(page) {
   // Show the corresponding page according to the route.
   //
   // If no page was found in the route data, page will be an empty string.
   // Show 'view1' in that case. And if the page doesn't exist, show 'view404'.
  if (!page) {
    this.page = 'view1';
  } else if (['view1', 'view2', 'view3', 'new-view'].indexOf(page) !== -1) {
    this.page = page;
  } else {
    this.page = 'view404';
  }
[2-3] src/my-app.js 内で「_pageChanged」を探し、『case 'new-view':』部分を追加する
_pageChanged(page) {
  // Import the page component on demand.
  //
  // Note: `polymer build` doesn't like string concatenation in the import
  // statement, so break it up.
  switch (page) {
    case 'view1':
      import('./my-view1.js');
      break;
    case 'view2':
      import('./my-view2.js');
      break;
    case 'view3':
      import('./my-view3.js');
      break;
    case 'new-view': // !! Add !!
      import('./my-new-view.js');
      break;
    case 'view404':
      import('./my-view404.js');
      break;
  }
}
[2-4] src/my-app.js 内で「<app-drawer」を探し、『<a name="new-view" href="rootPathnew-view">New View</a>』を追加する
<app-drawer-layout fullbleed="" narrow="{{narrow}}">
  <!-- Drawer content -->
  <app-drawer id="drawer" slot="drawer" swipe-open="narrow">
    <app-toolbar>Menu</app-toolbar>
    <iron-selector selected="page" attr-for-selected="name" class="drawer-list" role="navigation">
      <a name="view1" href="rootPathview1">View One</a>
      <a name="view2" href="rootPathview2">View Two</a>
      <a name="view3" href="rootPathview3">View Three</a>
      <a name="new-view" href="rootPathnew-view">New View</a> <!-- Add -->
    </iron-selector>
  </app-drawer>

【3】プロジェクトを起動する

polymer serve --open

=> ブラウザが起動し、新規ページ追加されたか確認。

関連記事

Polymer

初期設定編
https://blogs.yahoo.co.jp/dk521123/37597605.html

その他

マテリアル デザイン フレームワーク を調査してみた
https://blogs.yahoo.co.jp/dk521123/37559037.html