@programeggsoup 2017-04-16T16:28:07.000000Z 字数 14060 阅读 1409

Polymer框架学习

计算机 前端

1 跑程序

cd \
d:
cd D:\Feanor\Amras\git\文件夹名（且文件夹中必须包含bower.json文件）
bower install + 在index.htm里修改端口号
polymer serve --open
打开浏览器
http://localhost:8080/components/根目录下HTML文件的名字/工程所在文件夹的名字/

++++++
建立自己的app

mkdir my-app（这个是目录名）
cd my-app
添加一个bower.json文件

{
"name": "silmarillion",
"private": true,
"version": "1.0.0",
"homepage": "",
"description": "The Simple Platform of HuijiWiki",
"authors": "programeggsoup",
"license": "TJL",
"dependencies": {
"polymer": "Polymer/polymer#^1.7.1",
"webcomponentsjs": "Polymer/webcomponentsjs#^0.7.23",
"iron-elements": "PolymerElements/iron-elements#^1.0.10",
"paper-elements": "PolymerElements/paper-elements#^1.0.7",
"font-roboto": "PolymerElements/font-roboto-local#^1.0.0",
"app-elements": "PolymerElements/app-elements#^0.10.1",
"neon-elements": "PolymerElements/neon-elements#^1.0.0"
},
"devDependencies": {
"web-component-tester": "^4.0.0"
}
}

添加manifest.json

{
    "name": "silmarillion",
    "short_name": "silm",
    "description": "The Simple Platform of HuijiWiki",
    "display": "standalone",
    "start_url": "/",
    "theme_color": "#5E1911",
    "background_color": "#F4F0E7",
    "icons": [
        {
            "src": "images/icons/site_avatar_lotr_l.png",
            "sizes": "200x200",
            "type": "image/png"
        }
    ]
}

添加polymer.json

{
    "entrypoint": "index.html",
    "shell": "",
    "fragments": [
        "build.html"
    ],
    "sources": [
        "images/**/*",
        "bower.json"
    ],
    "includeDependencies": [
        "manifest.json",
        "bower_components/webcomponentsjs/webcomponents-lite.min.js"
    ]
}

2 添加本地DOM

2.1 编辑icon-toggle.html文件

根目录下的HTML文件：icon-toggle.html，包含着自定义元素的框架。不想其他大部分的HTML文件，这个icon-toggle.html将不会显示任何东西，它仅仅是用来定义新的元素。演示代码加载了icon-toggle.html文件，因而他能使用ID为icon-toggle的元素。就像你在接下来的步骤中，为元素添加特性那样。

看现有的代码：
代码始于——HTML文件载入

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-icon/iron-icon.html">

关键点：

一个载入HTML文件的新方法，使用link rel="import"
这两行增加了Polymer库中的另一个叫做iron-icon自定义元素。

下一段是定义元素自身：
代码始于——本地DOM模板

<dom-module id="icon-toggle">
  <template>
    <style>
      /* local styles go here */
      :host {
        display: inline-block;
      }
    </style>
    <!-- local DOM goes here -->
    <span>Not much here yet.</span>
  </template>

关键点：
- <dom-module>标签封装了一个元素的本地DOM定义。在这种情况下，跟在<dom-module>后面的id属性展示了这个模块包括了本地DOM中、名叫icon-toggle的元素。
- <template>事实上定义了元素的本地DOM结构和样式。在这里你可以为你自定义的元素添加标记。
- 在<template>内部的<style>元素，让你能定义作用域限制在本地DOM中的样式。这样，它们就不会影响到其他的文档了。
- :host伪类匹配了你正在定义的自定义元素（在这个例子中，这个自定义元素是<icon-toggle>）。这个元素包含或托管了本地DOM树。

在元素定义的结尾处，是一些JS代码，用以注册元素。如果元素有一个<dom-module>，这个脚本通常放置在<dom-module>内来集成一切。
代码始于——元素注册

<script>
    Polymer({
      /* this is the element's prototype */
      is: 'icon-toggle'
    });
  </script>
</dom-module>

关键点：
- Polymer调用注册登记了元素，使得它可以被browser（浏览器）识别到。
- 对Polymer调用的参数，是新元素的样板。在接下来的步骤中，你会遇到更多。
- 在模板上的is属性，是一个新元素的名字。它需要匹配在<dom-module>上且包涵了元素模板的id。

2.2 创建本地DOM框架

现在你已熟悉元素的基本布局，在本地DOM模板中，添加一些有用的东西吧。
在注释local DOM goes here下面，找到<span>标签：
icon-toggle.html—修改前

<!-- local DOM goes here -->
    <span>Not much here yet.</span>
  </template>

<iron-icon>标签替换<span>标签中的内容：
icon-toggle.html—修改后

<!-- local DOM goes here -->
    <iron-icon icon="polymer"></iron-icon>
  </template>

关键点：
- <iron-icon>元素是一个自定义元素，用以渲染图标。在这里，使用叫做"polymer"的图标，是一段硬编码。

2.3 本地DOM样式

这儿有许多可以通过本地DOM工作的新CSS选择器。icon-toggle.html文件已经有了一个:host选择器——在上文中有提到的、在最上层命名<icon-toggle>元素。
要命名<iron-icon>元素，则需要在<style>标签里添加如下所示的CSS代码：
icon-toggle.html

<style>
  /* local styles go here */
  :host {
    display: inline-block;
  }
  iron-icon {
    fill: rgba(0,0,0,0);
    stroke: currentcolor;
  }
  :host([pressed]) iron-icon {
    fill: currentcolor;
  }
</style>

关键点：
- <iron-icon>标签用的是可缩放矢量图形（SVG）。fill和stroke属性是SVG特定的CSS属性。它们分别设置了图形的填充颜色和边框颜色。
- 如果括号中的选择器名匹配了主元素，那么:host()函数匹配主元素。在此情况下，[pressed]是一个标准CSS属性选择器，所以当icon-toggle有一个pressed属性时，这个规则便匹配成功了。

3 用数据绑定(Binding)和属性(Properties)

现在，元素的功能还不多。在这一章节里，你将为它添加一个基本的API，使得你能用特性（attribute）从标记处、用属性（property）从JS代码处允许你配置这个图标。

① attribute：特性，是一个类数组的容器，用以存放NameNodeMap。
<div class="box" id="box" gameid="880">hello</div>
var elem = document.getElementById( 'box' );
console.log( elem.attributes[0].name ); // class
console.log( elem.attributes[0].value ); // box
console.log( elem.getAttribute('gameid') ); // 880
attributes是会随着添加或删除attribute节点动态更新的。
② property：属性。若DOM元素是一个普通的Object对象，那么property就是一个以名值对(name=”value”)的形式存放在Object中的属性。
elem.gameid = 880; // 添加
console.log( elem.gameid ) // 获取
delete elem.gameid // 删除

3.1 数据绑定

第一步，一些数据绑定。找到<iron-icon>元素，从polymer到[[toggleIcon]]改变icon特性的值。
icon-toggle.html

<!-- local DOM goes here -->
<iron-icon icon="[[toggleIcon]]">
</iron-icon>

关键点：
- toggleIcon是一个你将用来定义切换按钮元素的属性。它还没有一个默认值。
- icon="[[toggleIcon]]的任务是完成一个数据绑定。它用<iron-icon>的icon属性，连接了元素的toggleIcon属性。

你现在可以在标记或者JS代码中，使用你的元素并设置toggleIcon属性了。

3.2 为属性添加声明

下一步，为toggleIcon属性添加一个声明。
找到脚本标签，将下述属性对象添加在元素模板中。
icon-toggle.html

<script>
  Polymer({
    /* this is the element's prototype */
    is: 'icon-toggle',
    properties: {
      toggleIcon: String
    }
  });
</script>
</dom-module>

关键点：
- 如果属性将成为你元素公共API一部分的话，在properties对象中声明属性是一个不错的主意。
- 如上述代码所示的一个简单的属性声明，仅包含了形式（在这个例子中是String）。

3.2 为属性添加其他特征

properties对象还支持一些其他特征。添加下述代码来实现pressed属性：
icon-toggle.html

Polymer({
    /* this is the element's prototype */
    is: 'icon-toggle',
    properties: {
      toggleIcon: String,
      pressed: {
        type: Boolean,
        value: false,
        notify: true,
        reflectToAttribute: true
      }
    }
  });

关键点：
- 对这个更复杂的属性，你弄出了一个用一些字段组成的构造对象。
- value指定了属性的默认值。
- notify告诉Polymer，当属性值改变时，要调度属性更改事件。这使得其他节点可以观察到这一改变。
- reflectToAttribute告诉Polymer，当属性改变时，要更新相应特性。这使得你可以用特性选择器，例如icon-toggle[pressed]来命名元素。

4 输入反应

当然了，如果你无法点击一个按钮，那么这个按钮就不能被叫做按钮。为了达到切换按钮的目的，需要添加一个事件监听。为了在主元素上添加事件监听器（如在这个例子中，主元素是icon-toggle），即在元素的模板中，添加一个listeners对象：
icon-toggle.html

Polymer({
    /* this is the element's prototype */
    is: 'icon-toggle',
    properties: {
      toggleIcon: String,
      pressed: {
        type: Boolean,
        value: false,
        notify: true,
        reflectToAttribute: true
      }
    },
    listeners: {
      'tap': 'toggle'
    },
    toggle: function() {
      this.pressed = !this.pressed;
    },
  });

关键点：
- listeners object提供了一种简单方法来设置事件处理程序。它将事件名称映射到处理程序的名字上。
- tap（点击）事件是当用户用鼠标点击或用手指敲击由Polymer的手势系统产生的。（）listeners object与诸如keydown和keyup之类内置时间协同合作）

click与tap都会触发点击事件，但是在手机web端，click会有200-300ms的延迟，所以一般用tap代替click作为点击事件。singleTap
和doubleTap分别代表单次点击和双次点击。

5 使用自定义的CSS属性

你现在有了一个有着基础功能的按钮。但它在点击和取消点击的状态下都用着固定的文本颜色。怎么才能把它变得更美些呢？
本地DOM防止了用户因意外而修改元素内设。为了让用户设置自己的元件，你可以使用自定义CSS属性。Polymer提供一个从CSS Custom Properties for Cascading Variables得到灵感的自定义CSS属性实现。
你用var函数在你的元素中应用一个自定义属性。

background-color: var(--my-custom-property, defaultValue);

其中--my-custom-property是一个自定义元素名，通常由--作为开始。defaultValue是一个（可选的）CSS值，仅在自定义属性没有设置时使用。

5.1 添加新的自定义属性值

编辑你的元素<style>标签，用自定义属性替换现有的fill和stroke值。
icon-toggle.html

<style>
    /* local styles go here */
    :host {
      display: inline-block;
    }
    iron-icon {
      fill: var(--icon-toggle-color, rgba(0,0,0,0));
      stroke: var(--icon-toggle-outline-color, currentcolor);
    }
    :host([pressed]) iron-icon {
      fill: var(--icon-toggle-pressed-color, currentcolor);
    }
  </style>

因为默认值的缘故，你依然能通过设置color来改变<icon-toggle>的样式，但现在你有了别的选择。
打开icon-toggle-demo.html文件，设置新属性。（如果你下载了起始代码，这份文件在demo文件夹里）
icon-toggle-demo.html

<style>
      :host {
        font-family: sans-serif;
        --icon-toggle-color: lightgrey;
        --icon-toggle-outline-color: black;
        --icon-toggle-pressed-color: red;
      }
    </style>

5.2 额外加分：在文档层设置自定义属性

比如，你常常想在文档层面上设置自定义属性值，来为整个应用建立一个主题。因为自定义属性不是大多数浏览器内置的，你需要用一个特殊的custom-style标签，在Polymer元素以外，来设置自定义属性值。试着在你的index.html文件的<head>标签中添加以下代码：

<style is="custom-style">
      /* Define a document-wide default—will not override a :host rule in icon-toggle-demo */
      :root {
        --icon-toggle-outline-color: red;
      }
      /* Override the value specified in icon-toggle-demo */
      icon-toggle-demo {
        --icon-toggle-pressed-color: blue;
      }
      /* This rule does not work! */
      body {
        --icon-toggle-color: purple;
      }
    </style>

关键点：
- :root选择器是一个标准的CSS选择器，在文件中处于最顶层的元素，所以它通常相当于html。在custom-style元素中，你需要用到:root，而不是html来指定文档范围的默认值。
- icon-toggle-demo选择器匹配了icon-toggle-demo元素，比icon-toggle-demo文件中的:host有着更高的优先级，因而icon-toggle-demo选择器中的属性，覆盖了这些值。
- 自定义属性只能在匹配:root选择器或者一个Polymer自定义元素的规则集中被设定。
--icon-toggle-color属性没有被设置，因为它不能被用于body标签。试着把这个规则移到icon-toggle-demo中，看看它被应用的效果。
:root规则集为--icon-toggle-outline-color创建了一个文档范围的默认值。但这一值被icon-toggle-demo元素中的相应规则覆盖了。为了让这一默认值显示出来，注释掉icon-toggle-demo.html中的规则：
icon-toggle-demo.html

<style>
      :host {
        font-family: sans-serif;
        --icon-toggle-color: lightgrey;
        /* --icon-toggle-outline-color: black; */
        --icon-toggle-pressed-color: red;
      }
    </style>

为了匹配自定义样式中的选择器，元素必须在文档范围中，例如在index.html中，而不在另一个元素的本地DOM中。例如，这些规则在自定义样式内不起作用：

iron-icon {
      --iron-icon-width: 40px;
      --iron-icon-height: 40px;
}

这是因为页面上的iron-icon元素，是在另一个元素的本地DOM里的。然而，因为自定义属性继承了原有的树，你能在文档层设置这些属性，来定义iron-icon元素的所有属性值。

:root {
      --iron-icon-width: 40px;
      --iron-icon-height: 40px;
}

6 创建自己的应用

6.1 下载插件

在第一次跑应用的时候，要提前下载插件。在node command里运行这条命令：bower install。

6.2 获取模板

进入根目录
输入git init
输入`git add . && git commit -m "Initial commit."

即可得到如下所示的文件结构：

/
|---index.html
|---src/
|---bower_components/
|---images/
|---test/

index.html 是进入程序的主要入口
src/ 是应用程序自定义元素呆的地方
bower_components/ 是重用自定义元素和/或通过bower获取的库
images/ 是静态图片
test/ 是你为你的web组件定义测试的位置。

6.3 为元素建一个新页

建一个src/my-new-view.html

添加一些代码：

<link rel="import" href="../bower_components/polymer/polymer.html">
<dom-module id="my-new-view">
<!-- Defines the element's style and local DOM -->
<template>
    <style>
    :host {
        display: block;
        padding: 16px;
    }
    </style>
    <h1>New view</h1>
</template>
<!-- Creates the element's prototype and registers it -->
<script>
    Polymer({
        is: 'my-new-view'
    });
</script>
</dom-module>

在src/my-app.html的<iron-pages>中加入<my-new-view name="new-view"></my-new-view>

6.4 创建一个导航栏

找到<app-drawer>的代码：

<!-- Drawer content -->
<app-drawer>
    <app-toolbar>Menu</app-toolbar>
    <iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
        <a name="view1" href="/view1">View One</a>
        <a name="view2" href="/view2">View Two</a>
        <a name="view3" href="/view3">View Three</a>
    </iron-selector>
</app-drawer>

添加<a name="new-view" href="/new-view">New View</a>以得到新的新的导航标签。

6.5 注册你的页面

将应用程序部署到Web时，您将使用Polymer CLI准备要部署的文件。 Polymer CLI将需要知道任何需求加载的片段，如您刚刚添加的延迟加载视图。
1. 打开polymer.json
2. 把src/my-new-view.html添加入fragments列表中。
注意：您只需要添加文件，您将延迟加载或使用async属性导入到片段列表。使用同步标签导入的任何文件不应添加到片段中。

7 添加一些元素

安装3rd-party component（第三方组件）

bower install --save PolymerElements/paper-slider

将元素添加到应用程序
- 打开src/my-new-view.html
- 将paper-slider.html作为附属导入：
  <link rel="import" href="../bower_components/paper-slider/paper-slider.html">
- 添加<paper-slider>的标签：
  <paper-slider min="-100" max="100" value="50"></paper-slider>

8 部署

8.1 建立部署文件

运行以下Polymer CLI命令以执行若干步骤来准备应用程序以进行部署：
polymer build
此命令会缩小应用程序的HTML，JS和CSS依赖关系，并生成一个服务工作者，该应用程序预处理应用程序的所有依赖项，以便可以脱机工作。
构建的文件将输出到以下文件夹：
build/unbundled——包含适合通过 HTTP/2 服务器推送服务的粒度资源。
build/bundled——包含适用于从不支持 HTTP/2 服务器推送的服务器或客户端提供的捆绑（连接）资源。

8.2 部署至服务器

Polymer的应用可以部署至任意服务器。
此模板使用<app-location>元素启用基于URL的路由，这需要服务器为所有路由提供index.html入口点。
您可以按照以下部分之一将此应用程式部署到Google AppEngine或Firebase Static Hosting，这是部署Polymer应用程序的免费和安全方法。该方法对于其他托管提供商是类似的。

下载Google App Engine SDK，并按照您平台的说明进行安装。
注册AppEngine帐户。
打开项目仪表板并创建一个新项目。
1. Click the Create
2. Project button.
3. Type a project name.
4. Click the Create button.
进入你的工程根目录。

创建一个app.yaml文件，并指示服务器为没有以文件扩展名结尾的任何URL提供index.html。将{project name}替换为您在上一步中选择的名称。

application: {project name}
version: 1
runtime: python27
api_version: 1
threadsafe: yes

handlers:
- url: /bower_components
  static_dir: build/bundled/bower_components
  secure: always

- url: /images
  static_dir: build/bundled/images
  secure: always

- url: /src
  static_dir: build/bundled/src
  secure: always

- url: /service-worker.js
  static_files: build/bundled/service-worker.js
  upload: build/bundled/service-worker.js
  secure: always

- url: /manifest.json
  static_files: build/bundled/manifest.json
  upload: build/bundled/manifest.json
  secure: always

- url: /.*
  static_files: build/bundled/index.html
  upload: build/bundled/index.html
  secure: always

部署：

appcfg.py -A {project name} update app.yaml

9 Iron元素学习笔记

9.1.1 文档

简介：是一个单例元素，旨在对屏幕阅读器的按需声明特征添加a11y，简化了对屏幕阅读器的文本发布。为了更好地使用announcer，你最好请求在声明元素中的可用性。
例子：

Polymer({

  is: 'x-chatty',

  attached: function() {
    // This will create the singleton element if it has not
    // been created yet:
    Polymer.IronA11yAnnouncer.requestAvailability();
  }
});

在iron-a11y-announcer可用后，元素可通过iron-announce事件做冒泡声明。
例子：

this.fire('iron-announce', {
  text: 'This is an announcement!'
}, { bubbles: true });

注意：仅当你有一个可用的屏幕阅读器后，声明才可见。

9.1.1.2 API参考

属性【Properties】
mode [String]
（默认值：polite）
mode的值时用来设置aria-live属性的。有效值为：off, polite和assertive。
方法【Methods】
announce(text)
text string
需要声明的文本内容。屏幕能显示出的字符串。

9.1.2 例子

地址：
https://elements.polymer-project.org/elements/iron-a11y-announcer?view=demo:demo/index.html&active=iron-a11y-announcer

'iron-a11y-keys'提供了一个跨浏览器接口来处理键盘命令。该界面遵循WAI-ARIA最佳实践。它使用表达式语法过滤按键。

9.2.1 基本使用

下面的示例代码是自定义元素的一部分。目的是当元素paper-input成为焦点并按下Enter键时，唤醒onEnter方法。

<iron-a11y-keys id="a11y" target="[[target]]" keys="enter"
                    on-keys-pressed="onEnter"></iron-a11y-keys>
<paper-input id="input"
             placeholder="Type something. Press enter. Check console."
             value="{{userInput::input}}"></paper-input>

自定义元素声明了一个绑定到属性名为target的iron-a11y-keys元素。target属性需要评估为paper-input结点。iron-a11y-keys使用Polymer的注释事件处理程序语法注册目标节点的事件处理程序。{{userInput :: input}}将userInput属性设置至用户的为每次按键输入。

最后一步是链接元素和自定义元素的注册。

...
properties: {
  userInput: {
    type: String,
    notify: true,
  },
  target: {
    type: Object,
    value: function() {
      return this.$.input;
    }
  },
},
onEnter: function() {
  console.log(this.userInput);
}
...

9.2.2 `key` 特性

'keys'属性表示组合键触发事件。
特性接受由空格分割、加号连接的辅助键键或常用按键的组合。
常用键有：a-z、0-9、F1-F12、Page Up、Page Down、上下左右、Home、End、Escape、空格、回车。
辅助键有：Shift、Control、Alt、Meta。
小写和缩写算同一个键。

9.2.3 语法

以下为EBNF语法的keys特性。

modifier = "shift" | "ctrl" | "alt" | "meta";
ascii = ? /[a-z0-9]/ ? ;
fnkey = ? f1 through f12 ? ;
arrow = "up" | "down" | "left" | "right" ;
key = "tab" | "esc" | "space" | "*" | "pageup" | "pagedown" |
      "home" | "end" | arrow | ascii | fnkey;
keycombo = { modifier, "+" }, key ;
keys = keycombo, { " ", keycombo } ;

9.2.4 例子

将下列值赋给keys：
ctrl+shift+f7 up pagedown esc space alt+m

按下以上键/组合键便会触发事件。

9.2.5 WAI-ARIA Slider 例子

以下是一组实现WAI-ARIA的“滑块”角色最佳实践的示例：

<iron-a11y-keys target="[[target]]" keys="left pagedown down"
                on-keys-pressed="decrement"></iron-a11y-keys>
<iron-a11y-keys target="[[target]]" keys="right pageup up"
                on-keys-pressed="increment"></iron-a11y-keys>
<iron-a11y-keys target="[[target]]" keys="home"
                on-keys-pressed="setMin"></iron-a11y-keys>
<iron-a11y-keys target=""[[target]] keys="end"
                on-keys-pressed="setMax"></iron-a11y-keys>

target属性必须求值到节点。请参见上面的基本用法示例。
on-keys-pressed的特性的每个值必须评估为方法。increment方法应该将滑块向最大值移动一个设定量。decrement应该将滑块向最小值移动一个设定量。 setMin应将滑块移动到最小值。 setMax应将滑块移动到最大值。

9.2.6 API参考

9.2.6.1 属性

keyBindings [!Object]
例子↓
keyBindings: { 'esc': '_onEscPressed'}
keyEventTarget [?EventTarget]
Default: UNKNOWN
将触发相关的KeyboardEvent。将其设置为null以禁用侦听器。
keys [String]
stopKeyboardEventPropagation [Boolean]
Default: false
如果为true，此属性将实现元素自动停止在任何处理器KeyboardEvents上的传播。
target [?Node]

9.2.6.2 方法

addOwnKeyBinding(eventString, handlerName)
keyboardEventMatchesKeys(event, eventString) ➙ boolean
removeOwnKeyBindings()

9.2.6.3 行为

active=Polymer.IronA11yKeysBehavior

9.3.1 基本使用

9.3.2 API参考

9.4 iron-ajax

Polymer.IronA11yKeysBehavior提供了一个用于处理键盘命令的、基于WAI-ARIA best practices的标准化接口。

9.5 iron-autogrow-textarea

KEY+MODIFIER:EVENT": "callback"("KEY": "callback"或者"KEY: EVENT": "callback"