这个教程挺不错！：http://blog.csdn.net/renfufei/article/details/37040883 过时了，现在的版本已经为1.0了

一：创建APP结构

本教程会使用预先构建好的polymer元素：toolbar，tabs，panel

<meta name="viewport"  content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">

//提供缺少的平台特性

//<script src="../components/platform/platform.js">
//该引入的是这个，而不是platform.js
<script src="../components/webcomponentsjs/webcomponents.js"></script>

//引入html文件

<link rel="import" href="../components/font-roboto/roboto.html">

//unresolved为了防止，浏览器中没有原生支持的无样式元素，而发生的闪烁。

<body unresolved touch-action="auto">

	<core-header-panel>

		<core-toolbar>

			//valueattr="name"指会根据子元素的name属性来确定选择哪一个；selected="all"指选择name为all的作为初始的选项卡;self-end什么意思？

			<paper-tabs id="tabs" valueattr="name" selected="all" self-end>

				<paper-tab name="all">所有</paper-tab>

				<paper-tab name="favorites">收藏</paper-tab>

			</paper-tabs>

		</core-toolbar>

		<!-- 主要的页面内容将会放在这里 --> 

	</core-header-panel>

	<script>

	    var tabs = document.querySelector('paper-tabs');

	    // 添加事件监听, 很明显,你需要chrome浏览器来运行

	    // 这里每次切换会触发2次,前一个tab取消选中,以及新tab被选中

	    tabs.addEventListener('core-select', function(e) {

	      //e = {detail:object}

	      var detail = e["detail"] || {};
　　　　　　　　//e.detail = {isSelected:false; item:paper-tab}

	      var item = detail["item"] || {};

	      var isSelected = detail["isSelected"];
　　　　　　　　//item = paper-tab.innerText, tabs.selected = paper-tabs的selected属性的值

	      console.log(

	        "Tab(\""+ item["innerText"] + "\") changeTo: "+ isSelected +"; [" + tabs.selected + "] isSelected "

	        );

	    });

    </script>

</body>

二：自定义元素：<script>写在template外面

调用自定义元素

<post-card>

	<img src="">

	<h2>孙飞鹏</h2>

	<h3>you are the best</h3>

</post-card>

影子DOM：局部的DOM树添加到某个DOM元素中，局部的DOM样式跟全局的web独立

<link rel="import" href="../components/polymer/polymer.html">

<link rel="import" href="../components/core-icon-button/core-icon-button.html">

//<polymer-element>自定义新元素的方式，创建的元素叫post-card

<polymer-element name="post-card">
　//<polymer-element>直接子元素中只能有一个<template>,但是<template>可以嵌套<template>,创建的元素不会出现在宿主元素的children中

  <template>

    <style>
    //:host指<post-card>

    :host {

      display: block;

      position: relative;

      background-color: white;

      padding: 20px;

      width: 100%;

      font-size: 1.2rem;

      font-weight: 300;

    }

    .card-header {

      margin-bottom: 10px;

    }

    polyfill-next-selector { content: '.card-header h2'; }
　　 //::content h2指通过插入点<content>派发的h2,不能对插入点设置自身样式，所以::content伴随后代选择器

    .card-header ::content h2 {

      margin: 0;

      font-size: 1.8rem;

      font-weight: 300;

    }

    polyfill-next-selector { content: '.card-header img'; }

    .card-header ::content img {

      width: 70px;

      border-radius: 50%;

      margin: 10px;

    }

    core-icon-button {

      position: absolute;

      top: 3px;

      right: 3px;

      color: #636363;

    }

    :host([favorite]) core-icon-button {

      color: #da4336;

    }

    </style>

　　//添加div和content，layout horizontal center创建flexbox的方式，<img>会访入第一个content

    <div class="card-header" layout horizontal center>

      <content select="img"></content>

      <content select="h2"></content>

    </div>

    <core-icon-button

      id="favicon"

      icon="favorite"

      on-tap="{{favoriteTapped}}">

    </core-icon-button>

    <content></content>

  </template>

  <script>

  Polymer({

    publish: {

      favorite: {

        value: false,

        reflect: true

      }

    },

    favoriteTapped: function(event, detail, sender) {

      this.favorite = !this.favorite;

      this.fire('favorite-tap');

    }

  });

  </script>

</polymer-element>

三：数据获取和绑定

post-list

<link rel="import" href="../components/polymer/polymer.html">

<link rel="import" href="../post-service/post-service.html">

<link rel="import" href="post-card.html">

//创建一个名为show的发布属性

<polymer-element name="post-list" attributes="show">

  <template>

    <style>

    :host {

      display: block;

      width: 100%;

    }

    post-card {

      margin-bottom: 30px;

    }

    </style>

　　//posts="{{posts}}"在<post-service>和自定义元素间加了数据绑定：<post-service>有一个属性posts，也就是这里的{{posts}}
　　//id可以随便写

    <post-service id="service" posts="{{posts}}"></post-service>

    <div layout vertical center>

      <template repeat="{{post in posts}}">

        <post-card

          favorite="{{post.favorite}}"

          on-favorite-tap="{{handleFavorite}}"

          hidden?="{{show == 'favorites' && !post.favorite}}">

          <img src="{{post.avatar}}" width="70" height="70">

          <h2>{{post.username}}</h2>

          <p>{{post.text}}</p>

        </post-card>

      </template>

    </div>

  </template>

  <script>

  Polymer({

    handleFavorite: function(event, detail, sender) {

      var post = sender.templateInstance.model.post;

      this.$.service.setFavorite(post.uid, post.favorite);

    }

  });

  </script>

</polymer-element>

其实也挺简单的，通过<post-service>连接前端和后端。

前端引入预设和自定义的元素，后端通过ajax来获取数据。中间通过发布属性来连接。

教程：http://blog.csdn.net/renfufei/article/details/38349971  很不错 介绍了四个布局元素

把browser调整为移动设备

<cored-header-panel>

header部分：<core-toolbar>或者div.core-header。有很多种模式。需要指定高度

content部分：

<core-toolbar>

工具栏，容器。通过.medium .tall改变高度

<core-drawer-panel>

通过togglePanel方法来切换状态

nav部分：left, right。drawer属性

content部分：main属性

<core-scaffold>

可以包含以上三个元素

把这个教程重新做一遍：http://blog.csdn.net/renfufei/article/details/37040883

创建APP结构做好

开始做自定义元素:script写在template外面

获取，绑定数据:

link html元素是使用href;

post-service--post-list--post-card--index；

post-list.html <polymer-element>有一个发布属性attributes="show",在index.html中使用show="all"

post-list.html <post-service>有一个属性publish="{{itmes}}":publish来自于post-service.html的<polymer-element attributes="publish">，在post-service.html的方法中，可以使用this.publish来接受返回的响应；itmes用在post-list.html中，来表示返回对象的数组。

收尾工作：

黑色变为红色，是通过color属性

很特殊的问题

<paper-tabs selected="all"></paper-tabs>

var tabs = document.querySelector("paper-tabs");

tabs.selected为all。

不能用jquery获取：$("paper-tabs")，获取后，取不到selected的值。

只能通过document.querySelector();

添加事件的方法：tabs.addEventListener('core-select', function(e){});

post-card

 <div class="card-header" layout horizontal center>

  <content select="img"></content>

  <content select="h2"></content>

</div>

<core-icon-button

  id="favicon"
　//选择心形图标

  icon="favorite"
  //tap（触摸）时，调用favoriteTapped方法

  on-tap="{{favoriteTapped}}">

</core-icon-button>

<content></content>

  <script>

  Polymer({
　　//发布属性的一种方式

    publish: {

      favorite: {

        value: false,
　　　　 //属性值发生变化时 favorite 属性会被更新

        reflect: true

      }

    },

    favoriteTapped: function(event, detail, sender) {

      this.favorite = !this.favorite;
　　　 //每个自定义元素原型的工具方法之一，触发自定义事件

      this.fire('favorite-tap');

    }

  });

  </script>

post-list

//favorite-tap 事件 的 事件处理程序 是 handleFavorite, hidden?="{{}}"如果绑定的表达式计算值为true则设置该属性
<post-card favorite="{{post.favorite}}" on-favorite-tap="{{handleFavorite}}" hidden?="{{show=='favorites' && !post.favorite}}">

	<img src="{{post.avatar}}" width="70" height="70">

	<h2>{{post.username}}</h2>

	<h2>{{post.text}}</h2>

</post-card>

Polymer({

  handleFavorite: function(event, detail, sender) { 
　　//post-list接受post-service传过来的值，是这样获取的。

    var post = sender.templateInstance.model.post;

    this.$.service.setFavorite(post.uid, post.favorite);

  }

});

polymer入门例子-已过时的更多相关文章

  1. 一个简单的iBatis入门例子

    一个简单的iBatis入门例子,用ORACLE和Java测试 目录结构: 1.导入iBatis和oracle驱动. 2.创建类Person.java package com.ibeats;import ...

  2. 【Bootstrap Demo】入门例子创建

    本文简单介绍下如何来使用 Bootstrap,通过引入 Bootstrap,来实现一个最基本的入门例子. 在前一篇博文[Bootstrap]1.初识Bootstrap 基础之上,我们完全可以更加方便快 ...

  3. 【Bootstrap】入门例子创建

    本文简单介绍下如何来使用 Bootstrap,通过引入 Bootstrap,来实现一个最基本的入门例子. 在前一篇博文[Bootstrap]1.初识Bootstrap 基础之上,我们完全可以更加方便快 ...

  4. spring boot入门例子

    最近学习spring boot,总结一下入门的的基础知识 1新建maven项目,修改pom.xml <project xmlns="http://maven.apache.org/PO ...

  5. 解决Maven项目编译时提示：源值1.5已过时，将在未来所有版本中删除

    每次编译项目时,都提示:源值1.5已过时,将在未来所有版本中删除 查了一些资料,发现是因为IDEA默认把项目的源代码版本设置为jdk1.5,目标代码设置为jdk1.5 解决方案:  修改Maven的S ...

  6. 某些输入文件使用或覆盖了已过时的 API

    android出现注: 某些输入文件使用或覆盖了已过时的 API. 注: 有关详细信息, 请使用 -Xlint:deprecation 重新编译. 注: 某些输入文件使用了未经检查或不安全的操作. 注 ...

  7. MINA经典入门例子----Time Server

    原文地址 http://blog.sina.com.cn/s/blog_720bdf0501010b8r.html 貌似java的IO.NIO的入门例子都有相关的Time Server Demo.本例 ...

  8. 【转】android出现注: 某些输入文件使用或覆盖了已过时的 API。 注: 有关详细信息, 请使用 -Xlint:deprecation 重新编译。 注: 某些输入文件使用了未经检查或不安全的操作。 注

    使用Android studio打包应用程序出现如下错误: 注: 某些输入文件使用或覆盖了已过时的 API. 注: 有关详细信息, 请使用 -Xlint:deprecation 重新编译. 注: 某些 ...

  9. JPA入门例子(采用JPA的hibernate实现版本) 转

    JPA入门例子(采用JPA的hibernate实现版本) jpahibernate数据库jdbcjava框架(1).JPA介绍: JPA全称为Java Persistence API ,Java持久化 ...

随机推荐

  1. myeclipse修改内存大小不足

    工具中修改设置Default VM Arguments   1 打开MyEclipse,如下图所示 2 打开Windows-> Preferences 3 然后选择右侧菜单的Java->I ...

  2. Visual Studio环境变量、工作目录、vc++目录、 命令等 的配置和作用

    在调试 Visual Studio 2008 程序时,经常有一些动态链接库(即 dll 文件)需要加载到工程里,这样才能依赖第三方库进行程序调试. 这些动态链接库,往往都是测试版本或是开发中的版本,或 ...

  3. new 运算符干了什么

    为了追本溯源, 我顺便研究了new运算符具体干了什么?发现其实很简单,就干了三件事情. var obj = {}; obj.__proto__ = F.prototype; F.call(obj); ...

  4. 常用工具&网址

    工具 I tell you http://www.win7999.com/news/197912345.html VisualSVN Server(免费) http://www.visualsvn.c ...

  5. 前端基础——AJAX

    一  简介 AJAX(Asynchronous Javascript And XML),即AJAX = 异步JavaScript + XML.AJAX是一种用于创建快速动态网页的技术. AJAX两大特 ...

  6. windows下测试flask的例子tuorial报错flask KeyError: 'DATABASE'

    windows下测试flask的例子tuorial报错flask KeyError: 'DATABASE' flask KeyError: 'DATABASE' 提示是 变量 database错误 由 ...

  7. FoxPro 打开文件及使用SQL查询

    set exclusive off OPEN DATABASE t:\tpswin\comp1\time.dbc SHARED select empl_no,date,in, bout, bin, o ...

  8. sql中合并列方法

    方法一:创建合并列函数 -------创建一个方法---------- CREATE FUNCTION dbo.Role_Name(@AdminID int) ) AS BEGIN ) SET @r ...

  9. avalon新一代UI库发布

    任何前端框架,尤其是国内的,想推广开,必须有一个UI库,光是一个核心库当光头司令是不行的.此外还有一个小圈子,供大家遇到问题时可以发问,一起完善.自从avalon嫁入"去哪儿网"后 ...

  10. idea git 操作

    工作中多人使用版本控制软件协作开发,常见的应用场景归纳如下: 假设小组中有两个人,组长小张,组员小袁 场景一:小张创建项目并提交到远程Git仓库 场景二:小袁从远程Git仓库上获取项目源码 场景三:小 ...