第一个Polymer应用 - 创建APP结构
Posted yangykaifa
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了第一个Polymer应用 - 创建APP结构相关的知识，希望对你有一定的参考价值。
原文链接: Step 1: Creating the app structure
翻译日期: 2014年7月5日
翻译人员: 铁锚
在本节中,将使用一些预先构建好的Polymer元素来创建基本的应用程序结构，包含一个工具栏(toolbar)和一些选项卡(tabs).
编辑 index.html 文件
进入根文件夹以下的 starter 文件夹中, 使用你喜欢的文本编辑器打开 index.html 文件, 文件的初始内容大致例如以下所看到的:
略过中间的那些样式新奇(style),在文件的底部,你会看到一些新奇的东西:
接下来我们要在合适的位置加入一些 HTML import link 来引入 <core-header-panel>, <core-toolbar>, 以及 <paper-tabs> 元素：
要添加一个工具条(toolbar), 能够在 body 标签内加入以下的代码:
说明:
加入选项卡(tab)
本应用将使用选项卡(tab,有时也称为标签)在两个不同的界面(view,标签页,视图)中切换, 包含一个消息列表(messages ), 以及一个收藏/关注列表(favorites). <paper-tabs> 元素的实现方式相似于 <select> 元素, 但显示出来是一些选项卡的集合.
http://localhost:8080/polymer-tutorial-master/starter/index.html
假设发生了什么错误,能够和 step-1 文件夹下的 index.html 文件进行对照,当然,你也能够直接訪问那个文件试试。
在本节中,通过 HTML imports 来引入一些自己定义的元素,并使用它们来创建了一个简单的 app 布局.
思考: 在 <paper-tabs> 中能够使用其它子元素吗,试试 <img> 或者 <span> 吧?
下一节
Step2: 第一个Polymer应用 - (2)创建你自己的元素
翻译日期: 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)的,菜单button以及其它控件。
加入选项卡(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 事件。
你能够像一个内置元素一样能够和他交互。
- 如今没有什么可切换的,稍后的小节您将完毕这一点。
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应用 - 创建APP结构的主要内容，如果未能解决你的问题，请参考以下文章
Polymer Starter Kit vs Polymer App Toolbox