polymer ajax
HTML浏览器与任何广泛部署的技术一样，都具有随着时间的推移变得过时且不相关的风险。 随着网络信息访问方式的变化和主流用户要求新的UI功能以及竞争性替代技术的出现，浏览器供应商必须适应以保持生存能力。 意识到这种需求后，W3C Web组件诞生了，这是几年前开始的一项社区标准计划，并得到了所有现代浏览器供应商的支持。 Web组件包括几个规范草案，这些规范草案使开发人员能够以可扩展和可维护的方式创建和共享可重用的自定义HTML元素（Web组件）。
Polymer是一个开放源代码，跨平台，受支持的库，具有丰富的工具，它利用了新兴的Web组件标准。 对于渴望构建现代Web应用程序的开发人员而言，Polymer的到来是及时的。 Web应用程序设计现在趋向于单页，高度交互的应用程序。 而且，使用Web技术构建的混合移动应用程序正在成为规范，而不是例外。 使用Polymer，与使用常规JavaScript DOM操作库相比，创建两种类型的应用程序要容易得多。
您可以通过两种方式使用Polymer（通常是Web组件库）：
- 作为消费者：使用Web组件构建自己的应用程序。
- 作为创建者：创建可重用的Web组件，以共享或用于您自己的应用程序。
通过一系列示例，本教程将向您介绍Polymer，并说明如何使用和自定义Polymer Web组件。 （请参阅下载以获取示例代码。）
聚合物：跨平台的Web组件库
Polymer是一个预构建的可组合Web组件库，可用于构建应用程序或创建新的Web组件。 Polymer还包括行业标准的polyfill，以确保该库在所有现代浏览器中的行为均相似。 由于浏览器供应商仍在积极地实施Web组件标准的各个方面，每个方面都有自己的进度，因此必须使用polyfill。
Polymer是一个浏览器供应商投资使其产品适应基于Web组件的未来的成果。 Polymer开发团队可以前所未有地访问核心浏览器（Chrome）开发团队，因此浏览器的开发与该库紧密相关—确保该库在所有核心Chrome更改中都能保持高性能水平并正确运行。 在撰写本文时，Polymer处于“开发人员预览”阶段。
图1显示了聚合物的高级结构。
图1.聚合物的高级结构
当前，您的应用程序可以通过Polymer的平台实现将Web组件用于多个浏览器，您可以通过包含platform.js使用它。 Polymer确保库和组件对于包含不同级别的Web组件规范的本机实现的浏览器都可以相同地工作。
“ Polymer确保库和组件对于包含不同级别的Web组件规范本机实现的浏览器都可以相同地工作。 ”
当您使用Polymer时，您对DOM，CSS和JavaScript所了解和喜爱的一切都将像以前一样继续工作。 此外，通过仅使用HTML，CSS和JavaScript，您现在可以创建可重用的自定义HTML组件，这些组件完全封装了一部分UI或应用程序功能。
除与Web组件部署相关的其他任务外，Polymer还协助组件注册，生命周期管理，属性处理，CSS样式，方法调用和事件处理。 Web开发社区现在正在共享一个不断增加的可公开使用组件的开源库。 作为使用其他人创建的Web组件的开发人员，您需要了解的唯一另一件事是要使用的一组新HTML标记。
嵌入式响应式布局组件
假设您希望应用程序的布局根据打开设备的大小而变化。一种布局应适合于小型移动屏幕，另一种布局应适合于桌面浏览器。 在第一个示例中，您将看到如何使用Polymer创建响应式布局。
图2显示了布局在台式机或平板电脑浏览器中的外观。
图2.桌面屏幕尺寸的响应式布局
桌面布局的左侧有一个侧边栏面板，可用于导航，带有其自己的标题和可单击的菜单选择。 在典型的应用程序中，您可以在导航面板中进行选择，然后右侧面板会显示所选内容。 右侧面板的顶部也有其自己的标题工具栏。
当设备屏幕宽度狭窄时，左侧边栏面板将缩回，仅保留内容面板可见。 其余面板的工具栏上将自动出现一个“汉堡”菜单按钮。 图3显示了该布局的小型设备版本。
图3.手机窄屏的响应式布局
单击此段后面的“ 查看布局”按钮以在桌面浏览器和手机的浏览器中打开示例页面，以比较这两种布局。 或者，与本教程中的所有示例一样，您可以通过手动调整桌面版本中浏览器窗口的宽度来模拟电话浏览器的行为。
注意，当您点击或单击汉堡菜单按钮时，抽屉从左侧滑入，覆盖了主面板的右侧（通常显示可用选项的列表），如图4所示。
图4.导航侧栏菜单从内容面板的左侧滑入
如果使用标准HTML / JavaScript库，则需要大量代码来实现与这些库相同的行为。 清单1显示了使用Polymer创建响应式布局的代码。
清单1.使用<core-scaffold> Polymer组件<core-scaffold>响应式布局
<!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="../bower_components/platform/platform.js"></script>
<link rel="import"
href="../bower_components/core-scaffold/core-scaffold.html">
</head>
<body>
<core-scaffold>
</core-scaffold>
</body>
</html> 在清单1中，Polymer平台库通过platform.js包含在<script>标记中。 HTML Imports包含其他组件：在这种情况下，通过core-scaffold.html的<core-scaffold> Web组件。
要生成丰富的响应式调整大小行为，您所需要做的就是放入<core-scaffold> Web组件。 <core-scaffold>似乎是一个新可用HTML标记，但实际上它是Polymer核心元素库的一部分的自定义Web组件。 Polymer的核心部分包含一整套有用的Web组件，有望使您的Web开发体验比以前更加简单。 您可以浏览文档以查看正在使用的组件。
请注意， <body>仅包含<core-scaffold>标记。 那就是您所需要的。 <core-scaffold>定制元素完全封装了复杂的响应UI处理。
您可以相互组合聚合物组件（包括<core-scaffold> ，也可以与其他自定义Web组件组合，以创建页面或单页Web应用程序（或您自己的自定义Web组件）。
通过属性自定义Web组件
与标准HTML元素一样，自定义Web组件具有可用于进一步自定义的属性。 聚合物<core-scaffold>组件有两个属性：
-
responsiveWidth宽度控制边栏向左侧缩回的最小设备宽度。 此属性的值默认为600px。 -
mode在内容滚动时控制标题行为。mode值默认为seamed。 （本教程的下一个示例探讨了其他可能的模式。）
尝试改变responsiveWidth在清单1为较小的值与该响应布局切换到窄版点进行实验：
<core-scaffold responsiveWidth='300px'></core-scaffold>注意 ：您必须从Web服务器运行该应用程序，HTML导入Polyfill才能正常工作。
自定义元素的内部也以HTML，CSS和JavaScript实现。 但是实现细节对元素的用户是隐藏的。 由于自定义元素的Shadow DOM提供了封装，因此您不必担心代码和组件的内部实现之间JavaScript名称空间冲突或CSS样式污染。
在内部， <core-scaffold>是其他几个聚合物核心组件的组成。 接下来，您将学习如何自定义它们。
组成：Web组件的基石
您可以通过将其他可视化Web组件组合到<core-scaffold>实例中来构造Web应用程序（或单页移动应用程序）的核心UI结构。 下一个示例显示如何向侧边栏添加选择菜单以及内容面板的超高标题，该标题随内容滚动而凝结。
当您以狭窄的屏幕宽度启动应用程序时，标题区域特别高，具有足够的空间来添加其他UI组件，例如标签栏，如图5所示。
图5.带有超高标题的内容面板
向下滚动面板的内容时，高标题会变短，直到达到标准的工具栏高度，如图6所示。
图6.高标题压缩到标准工具栏高度
如果再次向下滚动内容，则标题将展开。 如果您随时单击汉堡菜单按钮，则会出现侧边栏，其中包含完整菜单以及带有标题和dW徽标的工具栏，如图7所示。
图7.扩展了侧边栏抽屉的菜单和标题工具栏
此示例的代码在dwpcompose / index.html中（请参见下载 ）。 图8显示了一起组成骨骼UI的Web组件。
图8.组成Polymer核心组件以构造UI
该代码现在包含更多HTML导入，该组合中的每个Web组件都包含一个HTML导入，其中一个包含了所使用的Roboto字体（一种用于移动设备的更干净的字体，以及当前Android设备的中坚字体）：
<link rel="import" href="../bower_components/font-roboto/roboto.html">
<link rel="import" href="../bower_components/core-scaffold/core-scaffold.html">
<link rel="import" href="../bower_components/core-icon-button/core-icon-button.html">
<link rel="import" href="../bower_components/core-menu/core-menu.html">
<link rel="import" href="../bower_components/core-header-panel/core-header-panel.html">
<link rel="import" href="../bower_components/core-item/core-item.html"> 现在， <core-scaffold>的mode属性设置为waterfall-tall ，向Web组件发出信号以处理高标头的折叠。 <body>标记上的unresolved属性激活了一些代码，这些代码可以防止某些浏览器上的未样式化内容（FOUC）工件闪烁 。 touch="auto"属性可确保在所有受支持的浏览器中一致地处理触摸行为：
<body unresolved touch="auto">
<core-scaffold mode="waterfall-tall"> 缩回侧边栏在<core-scaffold>元素内部组成。 标头包含两个组件： <core-header-panel>容器内的<core-header-panel> <core-toolbar>和<core-menu> 。
<core-header-panel>上的navigation属性向<core-scaffold>容器发出信号，它是用于可导航伸缩抽屉的元素。 <core-header-panel>也将其模式设置为seamed ，这意味着任何内容都将与标题一起滚动。 <core-toolbar>包含dW徽标图标和标题：
<core-header-panel navigation flex mode="seamed">
<core-toolbar><img src='/images/dwlogo.svg' width='50px' height='30px'>
<span flex>Compose</span>
</core-toolbar> <core-menu>包含两个名为s1和s2项目。 因为selected属性的值为s1 ，所以最初选择了项目s1 。 用于两个菜单项的名为explore的图标来自<core-icon>集合（先前导入）：
<core-menu id='menu' selected="s1" >
<core-item name="s1" icon="explore" label="Selection 1"></core-item>
<core-item name="s2" icon="explore" label="Selection 2"></core-item>
</core-menu>
</core-header-panel>您可以在“聚合物图标”页面上看到所有可用的图标及其相应的名称。
右侧面板的工具栏包含“汉堡”按钮，该按钮由组件内部管理。 但是您可以通过将tool属性添加到元素来向该工具栏添加元素。 在此示例中，在工具栏底部添加了“组件”标题。 此外，设置按钮（实际上是带有名为more-vert <core-icon-button>的<core-icon-button>元素）被添加到工具栏的右侧。 具有flex属性的空<span>占据中心可用空间。 Polymer通过直观的声明性语法支持布局属性（如flex ，在此使用），大大简化了基础CSS Flexbox的部署。
最后但并非最不重要的一点是，将带有content类的<div> 分发 （用于插入的Web组件术语） 分配到<core-scaffold>右面板的内容区域中：
<div tool class="bottom indent">Components</div>
<span tool flex></span>
<core-icon-button tool icon="more-vert" on-tap="{{settingsAction}}"></core-icon-button>
<div class="content">First line<br/>Second line</div>
</core-scaffold>
</body>使用Web组件绘制业务图形
现在，我将扩展支架，添加一些数据并创建一个应用程序。
下一个示例使用Web组件绘制业务图。 该应用程序根据菜单选择显示两个销售图表之一，区域销量或每月全球销量。
使用伸缩式抽屉侧边栏，您可以选择其中任何一个图，如图9所示。
图9.两个销售图表的侧边栏选择
选择区域销售时，将显示一个饼图，如图10所示。
图10.区域销售饼图的显示
选择每月全球销售额时，将显示一个条形图，如图11所示。
图11.每月全球销售的条形图
今天的开源社区中提供了数百种预制的即用型Web组件。 很快就会有成千上万种，以及商业上可用的替代品。 Google Web Components （此示例中使用的<google-chart>组件的来源）和customelements.io是两个比较流行的Web组件存储库。 阅读每个Web组件的文档，以了解可用的属性，方法，事件和集成说明。
您可以使用Bower安装Web组件：
bower install GoogleWebComponents/google-chart --save 在dwpgraph / index.html中找到此应用程序的代码（请参阅下载 ）。 HTML导入将<google-chart>组件包含在代码中：
<link rel="import" href="../bower_components/google-chart/google-chart.html">这个应用程序示例还演示了您可以使用CSS设置Web组件的样式，处理事件，修改属性和调用方法。
使用CSS样式化Web组件
与内置HTML元素一样，您可以将任何CSS样式应用于Web组件。
在sales-chart应用程序的代码中，您可以在<style>部分中看到<google-chart>元素的样式（已设置宽度）：
google-chart {
width: 380px;
}处理来自Web组件的事件
与标准HTML元素一样，Web组件可以触发事件以响应用户交互或其他输入。 例如，当用户触摸或单击<core-menu>项目时，将触发core-select事件。
您可以通过向菜单添加事件侦听器来为事件编写处理程序。 添加处理程序的代码是：
var menu = document.querySelector('core-menu');
menu.addEventListener( 'core-select', function (evt) {
... event handler logic ...
}); 此应用程序中的事件处理程序逻辑可操纵<google-chart>网络组件的属性以显示所选的销售图。 这些图的数据来自硬编码的JSON兼容JavaScript对象。 在生产应用程序中，可以通过网络从数据库中获取数据（也许通过使用Polymer <core-ajax>组件）。
修改自定义Web组件的属性
Web组件包含可以声明或编程方式修改的属性。 此前，你试验过responsiveWidth的属性<core-scaffold>组件。 在sales-chart应用程序的事件处理程序中，使用JSON数据源中的值，通过DOM节点setAttribute()方法以编程方式设置<google-chart>组件的四个属性。
由于取消选择项时也会触发core-select事件，因此对isSelected标志的检查可确保逻辑仅在选择项期间执行：
menu.addEventListener( 'core-select', function (evt) {
if (evt.detail.isSelected) {
var chart = document.querySelector('google-chart');
var scaffold = document.querySelector('core-scaffold');
var graph = document.getElementById('graph');
var selectedGraph = analytics[menu.selected];
chart.setAttribute("type", selectedGraph.type);
chart.setAttribute("options", selectedGraph.options);
chart.setAttribute("cols", selectedGraph.cols);
chart.setAttribute("rows", selectedGraph.rows);
graph.innerHTML = selectedGraph.name;
console.log(menu.selected);
scaffold.togglePanel();
}
});Web组件的调用方法
自定义Web组件可以实现您作为Web组件用户可以直接调用的方法。 对于<core-header-panel> ，可以在脚手架处于窄显示模式时调用名为togglePanel()的方法来滑动抽屉面板。
在事件处理程序代码中，更新了chart元素的属性后，可通过调用scaffold.togglePanel()关闭抽屉面板：
chart.setAttribute("type", selectedGraph.type);
chart.setAttribute("options", selectedGraph.options);
chart.setAttribute("cols", selectedGraph.cols);
chart.setAttribute("rows", selectedGraph.rows);
...
scaffold.togglePanel();地图应用
Web组件不仅封装了用户交互的外观和处理方式，而且还封装了完整的应用程序功能-包括数据访问，应用程序逻辑和网络通信。
下一个示例将完整的，随时可使用的交互式地图组件添加到您的应用程序中。
该应用程序提供了三个位置的菜单（罗利，旧金山和圣地亚哥），如图12所示。
图12.带有用于选择位置的菜单的应用程序
当您选择一个位置时，内容面板中会显示所选区域的地图。 这些地图是完全交互式的，并且您可以添加卫星地图，放大等等，这一切都取决于该嵌入式Web组件。
在图13中，显示了旧金山地图。
图13.应用程序显示了旧金山地区的交互式地图
在图14中，显示的是罗利地图，其布局处于窄模式。
图14.应用程序在窄屏模式下显示了Raleigh的交互式地图
复杂的地图UI处理已烘焙到组件中，您可以免费获得它。 Web组件内部还具有用于检索地图数据的网络访问以及该数据的处理和显示。 您所需要做的就是指定要显示在地图中心的位置的经度和纬度。
创建地图应用
地图应用程序的源代码位于dwpmap / index.html文件中（请参阅下载 ）。 该应用程序的体系结构类似于销售图表应用程序示例。 以下是创建此应用程序的步骤的摘要：
- 将Web组件安装到您的项目中：
bower install PolymerLabs/google-map --save - 使用HTML导入将Web组件导入到您的应用中：
<link rel="import" href="../bower_components/google-map/google-map.html"> - 将
<google-map>网络组件添加到内容区域：<div class="content"> <google-map> </google-map> </div> - 自定义菜单项以显示城市名称。 选择更改时会触发
core-select事件：<core-menu id='menu' selected="sf" > <core-item name="rh" icon="explore" label="Raleigh"></core-item> <core-item name="sf" icon="explore" label="San Francisco"></core-item> <core-item name="sd" icon="explore" label="San Diego"></core-item> </core-menu> - 使用位置的经度和纬度数据创建一个与JSON兼容的数据对象。 请注意，这些键与菜单中
<core-item>的名称匹配：var waypoints = { "rh" : {"latitude":"35.843768", "longitude":"-78.645056", "fullname":"Raleigh"}, "sd" : {"latitude":"32.8245525", "longitude":"-117.0951632", "fullname":"San Diego"}, "sf": {"latitude": "37.77493", "longitude": "-122.414942", "fullname":"San Francisco"}}; - 对
core-select事件处理程序进行编码，以在更改选择时更新<google-map>组件的属性：var menu = document.querySelector('core-menu'); menu.addEventListener( 'core-select', function (evt) { if (evt.detail.isSelected) { var map = document.querySelector('google-map'); var scaffold = document.querySelector('core-scaffold'); var location = document.getElementById('location'); var selectedLocation = waypoints[menu.selected]; map.setAttribute("latitude", selectedLocation.latitude); map.setAttribute("longitude", selectedLocation.longitude); location.innerHTML = selectedLocation.fullname; console.log(menu.selected); scaffold.togglePanel(); } });
您可以轻松地看到，仅使用这几个Web组件，如何创建复杂的现实世界应用程序。 例如，您的应用程序可能会处理在线分析处理（OLAP）数据集，在世界地图上显示销售参与摘要信息，然后使用户能够深入研究每个地区的销售情况，甚至可以深入研究特定商店或位置在区域内-通过触摸移动设备上的地图选择。 该假设示例演示了Web组件组合的强大功能。
使用Polymer拖放式组件设计器使设计变得简单
手动编码Web组件非常简单。 为了使使用Web组件的工作变得更加轻松和容易，更多的开发人员可以使用Polymer的在线Beta 拖放设计器 。
由于Web组件的可组合性，您可以使用拖放设计器将现有组件组合在一起以创建更高级别的组件，甚至创建整个应用程序。
图15显示了实际的拖放设计器。
图15. Polymer的拖放式自定义元素设计器
测试版设计师当然有一些限制。 大多数复杂的组件仍然需要通过拖放设计无法生成的手工代码。 但是，您可以使用设计器来手动编辑基础HTML文件。 并且请放心，各种来源都在为应用程序和组件构建提供更完整的解决方案。
结论
Polymer建立在Web组件标准的基础上，并将DOM（现在是开发人员可扩展的）DOM的无处不在的优势扩展为下一个十年Web和移动应用程序开发的基础。 Polymer重申浏览器供应商对发展和适应其旗舰产品以更好地满足新一代用户和应用程序开发人员的需求的坚定承诺。
翻译自: https://www.ibm.com/developerworks/web/library/wa-polymer/index.html
polymer ajax
95
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
