第一个Polymer应用 - (1)创建APP结构

原文链接: 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,纸片,卡片 -->
	<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> 吧?

下一节
Step 2: 创建你自己的元素

第一个Polymer应用 - (1)创建APP结构

时间: 07-06

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

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

原文链接:  Getting Started - Your first Polymer application翻译时间: 2014年7月5日翻译人员: 铁锚 关于Polymer 的简单介绍,请參考 CSDN资讯: [开源推荐]Google新的Web UI库:Polymer 在本教程中,您将构建一个小型的Polymer应用 -- 一个很easy的社交网络服务client. 终于效果图例如以下所看到的: 图1 终于效果图 本项目会向您介绍 Polymer 大部分关键的概念. 假设你有什么不理解的地方

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

一.个人见解(直播难与易) 直播难:个人认为要想把直播从零开始做出来,绝对是牛逼中的牛逼,大牛中的大牛,因为直播中运用到的技术难点非常之多,视频/音频处理,图形处理,视频/音频压缩,CDN分发,即时通讯等技术,每一个技术都够你学几年的. 直播易:已经有各个领域的大牛,封装好了许多牛逼的框架,我们只需要用别人写好的框架,就能快速的搭建一个直播app,也就是传说中的站在大牛肩膀上编程. 二.了解直播 热门直播产品 映客,斗鱼,熊猫,虎牙,花椒等等 直播效果图 直播效果.jpeg 1.一个完整直播ap

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

安装Django  下载Django包,解压缩. CMD 进入解压路径下. 执行:python setup.py install 增加环境变量: C:\Python27\Scripts 测试django是否安装成功 shell import django django.VERSION 把Django导入项目 CMD 进入项目路径 执行 django-admin.py startproject 项目名  运行开发服务器 项目Django路径下  python manage.py runserver

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

前言 大半年没写博客了,但我一直关注着互联网的动向,最近会研究很多东西,并分享,今年移动直播行业的兴起,诞生了一大批网红,甚至明星也开始直播了,因此不得不跟上时代的步伐,由于第一次接触的原因,因此花了很多时间了解直播,整理了直播的原理,当前只是原理篇,后续会持续发布实战篇,教你从零开始搭建一个完整的iOS直播app,希望能帮助到更多的人更快的了解直播. 一.个人见解(直播难与易) 直播难:个人认为要想把直播从零开始做出来,绝对是牛逼中的牛逼,大牛中的大牛,因为直播中运用到的技术难点非常之多,视频

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

前言 在看这篇之前,如果您还不了解直播原理,请查看上篇文章如何快速的开发一个完整的iOS直播app(原理篇) 开发一款直播app,集成ijkplayer成功后,就算完成直播功能一半的工程了,只要有拉流url,就能播放直播啦 本篇主要讲解的是直播app中,需要用到的一个很重要的开源框架ijkplayer,然后集成这个框架可能对大多数初学者还是比较有难度的,所以本篇主要教你解决集成[ijkplayer]遇见的各种坑. 很多文章,可能讲解的是如何做,我比较注重讲解为什么这样做,大家有什么不明白,还可以

使用Material Design 创建App翻译系列----材料主题的使用(Using Material Theme)

上一篇是使用Material Design 创建App翻译系列--開始学习篇,进入正题: 新的材料主题提供了下面内容: 1. 提供了同意设置颜色板的系统部件组件. 2. 为这些系统组件提供了触摸反馈动画. 3. Activity的过渡动画. 依据你的品牌标识,使用你所控制的颜色板能够自己定义材料主题的外观. 使用主题的属性能够给ActionBar 和 status bar进行着色. 系统部件拥有新的设计和触摸反馈动画.你能够为你的应用自己定义颜色板.触摸反馈动画以及Activity之间跳转的过渡

Android开发之创建App Wiget和更新Widget内容

App WidgetsApp Widgets are miniature application views that can be embedded in other applications (such as the Home screen) and receive periodic updates. These views are referred to as Widgets in the user interface, and you can publish one with an Ap

一个站点配置多个App.config

一个项目一般都只有一个配置文件.web项目中用的是web.config,但项目中有时候需要单独来配置一个文件.比如:app.config,那是否可以呢? 答案是可以的.可以在web.config中指定即可.比如项目中有个app.config <appSettings> <!--配置默认语言--> <add key="defaultLanguage" value="zh-CN"/> <!--菜单a标签href配置文件-->

打造支持apk下载和html5缓存的 IIS(配合一个超简单的android APP使用)具体解释

为什么要做这个看起来不靠谱的东西呢? 由于刚学android开发,还不能非常好的熟练控制android界面的编辑和操作,所以我的一个急着要的运用就改为html5版本号了,反正这个运用也是须要从server获取大量数据来展示在手机上面的,也就是说:必须联网,才干正常工作,于是想了一下,反正都要联网获取数据,为什么不直接用我相对熟悉一点的 html来做这个运用呢?省的花费不够用的时间去学习android界面的控制,于是就简单了:用蹩脚的手段做了一个android程序的启动欢迎界面,内页就是一个全屏的

THEOS的第一个TWeak的成功创建

THEOS的第一个TWeak的成功创建html, body {overflow-x: initial !important;}.CodeMirror { height: auto; } .CodeMirror-scroll { overflow-y: hidden; overflow-x: auto; } .CodeMirror-lines { padding: 4px 0px; } .CodeMirror pre { padding: 0px 4px; } .CodeMirror-scroll