【Polymer】Polymer ～ 入門編 ～

■ はじめに

https://dk521123.hatenablog.com/entry/2018/06/18/233411

の続き。
Hello Worldとして、スタートキットを動かす

目次

【１】前提条件
【２】スタートキットを動かす
　１）プロジェクト用のディレクトリを作成する
　２）プロジェクトを初期化する
　３）プロジェクトを起動する
【３】新しいページを追加する

【１】前提条件

https://dk521123.hatenablog.com/entry/2018/06/18/233411

で、初期設定を行うこと。

【２】スタートキットを動かす

https://www.polymer-project.org/3.0/start/toolbox/set-up

を参考に。

１）プロジェクト用のディレクトリを作成する
２）プロジェクトを初期化する
３）プロジェクトを起動する

１）プロジェクト用のディレクトリを作成する

mkdir my-app
cd my-app

２）プロジェクトを初期化する

polymer init

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

３）プロジェクトを起動する

polymer serve --open

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

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

スタートキットを動かした後は、新しいページを追加する

https://www.polymer-project.org/3.0/start/toolbox/create-a-page

を参考に。

１）新しいページを追加する
２）src/my-app.js に新規追加するページの処理を追記する
３）プロジェクトを起動する

１）新しいページを追加する

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

２）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」を探し、『New View』を追加する

<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="[[rootPath]]view1">View One</a>
      <a name="view2" href="[[rootPath]]view2">View Two</a>
      <a name="view3" href="[[rootPath]]view3">View Three</a>
      <a name="new-view" href="[[rootPath]]new-view">New View</a> <!-- Add -->
    </iron-selector>
  </app-drawer>

３）プロジェクトを起動する

polymer serve --open

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

関連記事

Polymer ～ 初期設定編 ～
https://dk521123.hatenablog.com/entry/2018/06/18/233411
マテリアル デザイン フレームワーク の比較調査
https://dk521123.hatenablog.com/entry/2018/05/26/005948