原文链接: Step 1: Creating the app structure
翻译日期: 2014年7月5日
翻译人员: 铁锚

在本节中,将使用一些预先构建好的Polymer元素来创建基本的应用程序结构，包括一个工具栏(toolbar)和一些选项卡(tabs).

编辑 index.html 文件
进入根目录下面的 starter 目录中, 使用你喜欢的文本编辑器打开 index.html 文件, 文件的初始内容大致如下所示:

<!doctype html>
<html>

<head>
  <title>unquote</title>
  <meta name="viewport"
    content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
  <script src="../components/platform/platform.js">
  </script>

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

说明:

  • 本文件定义了一些基本的风格(styles)并嵌入了 platform.js 脚本文件,该脚本可以提供所有缺少的平台特性。
  • 元素 link rel="import" 是HTML中一种新的引入一个 html 文件作为资源的方式,称为 HTML Import.

略过中间的那些样式新鲜(style),在文件的底部,你会看到一些新鲜的东西:

  ...
<body unresolved touch-action="auto">

</body>
  ...

说明:

  • <body>元素的 unresolved 属性(attribute), 是为了防止 那些在浏览器中没有原生(native)支持的自定义的无样式元素(FOUC)发生闪烁(flash)而设计的。详情请参考 Polymer样式参考文档。
  • touch-action="auto" 属性是为了确保在某些浏览器中妥善处理触摸事件。

-------------------------------------------------------------------------------------

接下来我们要在合适的位置添加一些 HTML import link 来引入  <core-header-panel>, <core-toolbar>, 以及 <paper-tabs> 元素：

  <script     src="../components/platform/platform.js">
  <link rel="import"     href="../components/font-roboto/roboto.html">
  <!-- 下面是需要添加的元素,如果乱码,请删除中文内容,或另存为UTF-8编码 -->
  <link rel="import"    href="../components/core-header-panel/core-header-panel.html">
  <link rel="import"    href="../components/core-toolbar/core-toolbar.html">
  <link rel="import"    href="../components/paper-tabs/paper-tabs.html">

说明: 

  • Polymer 使用 HTML imports技术 来加载组件。HTML imports提供了依赖管理,确保自定义元素及其所有的依赖项都在使用之前被加载进来。
  • 在原教程中,需要添加的代码使用黑色文字显示(因为 CSDN的 pre 限制,所以译文中请读者自己甄别)。

-------------------------------------------------------------------------------------

要增加一个工具条(toolbar), 可以在 body 标签内添加下面的代码:

  <core-header-panel>
    <core-toolbar>
    </core-toolbar>
    <!-- 主要的页面内容将会放在这里 --> 

  </core-header-panel>

保存后/部署后刷新页面,将看到顶部一个蓝色的工具栏.
说明:

  • <core-header-panel> 元素是一个简单的容器,包含一个header(在本例中是<core-toolbar> 元素) 和一些内容。默认情况下, header 保持在屏幕的顶部,但也可以设置为随内容滚动。
  • <core-toolbar> 元素作为容器,可以存放 选项卡(tab)的,菜单按钮以及其他控件。

-------------------------------------------------------------------------------------

添加选项卡(tab)
本应用将使用选项卡(tab,有时也称为标签)在两个不同的界面(view,标签页,视图)中切换, 包括一个消息列表(messages ), 以及一个收藏/关注列表(favorites). <paper-tabs> 元素的实现方式类似于 <select> 元素, 但显示出来是一些选项卡的集合.

  <core-header-panel>
    <core-toolbar>
	<!-- 添加一些选项卡,以paper-开头的是Material design风格的标签,具有很炫酷的效果 -->
	<paper-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>

保存/部署后刷新页面,将看到顶部工具栏以及两个选项卡,切换了试试?
说明:

  • 默认情况下, <paper-tabs> 通过索引(index)值来标识选中了哪一个子元素。valueattr="name" 指定它应该根据子元素的 name 属性来确定选中哪一个。
  • selected="all" 选择第一个选项卡(tab)作为初始的选项卡(因为第一个的 name="all")。
  • 在这里,子元素是 <paper-tab> 元素, 当你触摸时,这些元素改变样式,并显示“墨涟漪(ink ripple)”动画效果。

-------------------------------------------------------------------------------------

在文件的末尾(body里面)添加一个 <script> 标签来处理 tab 切换事件:

  <script>
    // 获取选项卡DOM元素 paper-tabs
    var tabs = document.querySelector('paper-tabs');
    // 添加事件监听, 很明显,你需要chrome浏览器来运行
    // 这里每次切换会触发2次,前一个tab取消选中,以及新tab被选中
    tabs.addEventListener('core-select', function(e) {
      //
      var detail = e["detail"] || {};
      var item = detail["item"] || {};
      var isSelected = detail["isSelected"];
      console.log(
        "Tab(\""+ item["innerText"] + "\") changeTo: "+ isSelected +"; [" + tabs.selected + "] isSelected "
        );
    });
  </script>

说明: 

  • <paper-tab> 元素在您选择一个tab时会触发 core-select 事件。你可以像一个内置元素一样可以和他交互。
  • 现在没有什么可切换的,稍后的小节您将完成这一点。

保存(建议编辑过程中随时保存,这是好的编码习惯)文件,部署,然后用chrome打开访问链接, 比如
http://localhost:8080/polymer-tutorial-master/starter/index.html

图 第一个Polymer app运行效果.

如果发生了什么错误,可以和 step-1 目录下的 index.html 文件进行对比,当然,你也可以直接访问那个文件试试。

在本节中,通过 HTML imports 来引入一些自定义的元素,并使用它们来创建了一个简单的 app 布局.
思考:  在 <paper-tabs> 中可以使用其他子元素吗,试试 <img> 或者 <span> 吧?

下一节
Step2: 第一个Polymer应用 - (2)创建你自己的元素

第一个Polymer应用 - (1)创建APP结构的更多相关文章

  1. 第一个Polymer应用 - (2)创建你自己的元素

    原文链接: Step 2: Your own element翻译日期: 2014年7月6日翻译人员: 铁锚通过上一节的学习和实践, 您已经完成了一个基本的应用程序结构(application stru ...

  2. 第一个Polymer应用 - (0)准备工作

    原文链接:  Getting Started - Your first Polymer application翻译时间: 2014年7月5日翻译人员: 铁锚 关于Polymer 的简介,请参考 CSD ...

  3. Django（博客系统）：基于pycharm如何一个django工程下创建多个app

    背景:通常我们创建一个django系统时,为了把业务模块划分清楚往往会把一个独立的业务模块放到一个app中,如果多个独立的业务模块就会创建多个app,一般情况下为了更好的管理这些app,会把他们都存放 ...

  4. Django 创建 APP和目录结构介绍

    一.通过pip安装Django 以windows 系统中使用pip命令安装为例 win+r,调出cmd,运行命令:pip install django自动安装PyPi 提供的最新版本.指定版本,可使用 ...

  5. [Xcode 实际操作]九、实用进阶-(28)在iTunes Connect(苹果商店的管理后台)中创建一个新的新的APP

    目录:[Swift]Xcode实际操作 本文将演示如何在iTunes Connect(苹果商店的管理后台)中创建一个新的新的APP. 首先要做的是打开浏览器,并进入[iTunesConnect网站], ...

  6. React Native APP结构探索

    APP结构探索 我在Github上找到了一个有登陆界面,能从网上获取新闻信息的开源APP,想来研究一下APP的结构. 附上原网址:我的第一个React Native App 具体来讲,就是研究一个复杂 ...

  7. 【如何快速的开发一个完整的iOS直播app】(原理篇)

    原文转自:袁峥Seemygo    感谢分享.自我学习 目录 [如何快速的开发一个完整的iOS直播app](原理篇) [如何快速的开发一个完整的iOS直播app](播放篇) [如何快速的开发一个完整的 ...

  8. pycharm上运行django服务器端、以及创建app方法

     快来加入群[python爬虫交流群](群号570070796),发现精彩内容. 安装Django  下载Django包,解压缩. CMD 进入解压路径下. 执行:python setup.py in ...

  9. 如何快速的开发一个完整的iOS直播app(原理篇)

    目录 [如何快速的开发一个完整的iOS直播app](原理篇) [如何快速的开发一个完整的iOS直播app](播放篇) [如何快速的开发一个完整的iOS直播app](采集篇) 前言 大半年没写博客了,但 ...

随机推荐

  1. EBS业务学习之应付INVOICE类型

    INVOICE类型 类      型 描           述 标准INVOICE 是指由于采购货物或接受劳务,从供应商处取得的INVOICE (标准INVOICE,既可以和订单匹配,也可以不匹配) ...

  2. 凸函数与Jensen不等式

    这个是在凸优化里面看的,在EM算法中看有用到,所以用latex写了篇回忆用的小短文,现在不会把latex产生的pdf怎么转变成放到这里的内容. 所以我选择直接贴图. 这个pdf可以在我的资源里找到.  ...

  3. PGM：贝叶斯网表示之朴素贝叶斯模型naive Bayes

    http://blog.csdn.net/pipisorry/article/details/52469064 独立性质的利用 条件参数化和条件独立性假设被结合在一起,目的是对高维概率分布产生非常紧凑 ...

  4. [lua]luasocket.c:20:17: fatal error: lua.h: No such file or directory

    安装luasocket的时候出现了如下的错误 问题 $ tar xzf luasocket-2.0.2.tar.gz $ cd luasocket-2.0.2 $ $ make cd src; mak ...

  5. actionbar详解（二）

    经过前面两篇文章的学习,我想大家对ActionBar都已经有一个相对较为深刻的理解了.唯一欠缺的是,前面我们都只是学习了理论知识而已,虽然知识点已经掌握了,但是真正投入到项目实战当中时会不会掉链子还很 ...

  6. OpenMP与MPI联合编程

    研究一下如何一起使用mpi和openmp 先上程序: #include <stdio.h> #include <stdlib.h> #ifdef _OPENMP #includ ...

  7. 2.1、Android Studio通过Lint提升你的代码

    为了测试你的Android应用符合功能需求.最重要的是确保你的代码没有结构性问题.结构差的代码影响你的Android应用的可靠性,让你的代码难以维护.比如,如果你的XML资源文件包含未使用的明明空间, ...

  8. 【一天一道LeetCode】#225. Implement Stack using Queues

    一天一道LeetCode 本系列文章已全部上传至我的github,地址:ZeeCoder's Github 欢迎大家关注我的新浪微博,我的新浪微博 欢迎转载,转载请注明出处 (一)题目 Impleme ...

  9. HTML中锚点的使用

    说到锚点,我们也许会需要稍微的思考一下,什么是锚点? 官方的答案是这样的: 那么你可能就会有下面的疑问,锚点能做什么啊? 回答就是,锚点可以理解为一个标记,一个用于而且便于寻找的标记.常用于网页制作的 ...

  10. CentOS下Mariadb表名大小写的问题

    今天在linux上跑一个系统 发现数据库报错,说找不到表 问题是,我已经建立了表呀. 我把报错的那个表 复制到命令行 运行一下. 发现是大小写的问题. 那问题就简单了. 网上百度可以知道 打开/etc ...