可视化报表生成器案例综述：03 polymer designer

2014年谷歌I/O大会上，谷歌团队发表了两件对于web前端而言极有影响力的大事，其一是Material Design设计风格，其二是polymer前端框架。其中，前者对于安卓来说具有划时代的意义，向那些各种各样不同设计的应用程序和毫无美感可言的Launcher发出了一条信号：我们的设计不比苹果差多少，采用Material设计的APP将更具有美感。后者则是继angularjs后，站在一系列新的Web标准（甚至是尚未实现的标准）的顶端，使用web component原则，引领web开发到达未来新纪元的一个前端开发框架。

本文重点不是讨论polymer如何使用或者Material Design设计原则，而是讨论 polymer designer这个使用 Polymer 来制作原型 app 的可视化拖拽式工具。

首先还是有必要稍微详细地介绍一下polymer：polymer跟angularjs非常相似，使用angularjs的前端开发者其实很容易入手polymer，angualrjs中deractive(组件)的概念其实就是web component之先河，只不过polymer中更专注于跨框架的通用web组件的定制，因此有着基础的模板和绑定以及很强的组件模型。事实上正在开发的angularjs2.0中就计划支持正宗的web component，毕竟都是google的亲儿子，Polymer未来或许可以帮助 AngularJS 扩展在 Web Component 上的实现(详见：Plans for supporting Web Components in AngularJS and Ember.js)。对于一个大型项目来说，如果其中有很多应用，那么使用polymer来定制通组件无疑会大大减小开发和维护成本。不过，目前我不会在我的任何项目中随意上马polymer，一方面是因为polymer还面临很多兼容性问题，例如对微软浏览器的兼容性官方推荐IE10+，除此还有一堆未实现的难题；另一方面因为我经手的项目不敢称之为大项目，上马polymer追求潮流反而会导致学习和维护成本上升。但是不论如何，此类前端技术的新变化无疑指引了前端未来的发展方向。

polymer designer完全是以ploymer框架为基础，Material Design为设计风格做的一个简单的原型 app 生成工具。你的作品将会被作为 Github gists 保存起来。作为开源程序，它可以免费试用，地址是：http://docs.polymerchina.org/tools/designer/

以上是Polymer Designer编辑界面，上图中我编辑的test文档已经被保存到GitHubGist中。（https://gist.github.com/zhangdiwaa/65fb761f13cfe94840bd）

它的界面左侧是编辑区域。整个区域使用网格系统进行划分，就是你看到的背景上的蓝色网格，每个小格子10*10像素，所有可拖拽组件的缩放和位移，都是以这些小格子为单位进行的。右侧是菜单栏，菜单栏上部是组件属性的编辑区域，包含属性编辑和样式编辑两部分。下半部是palette(调色板)和tree(dom树)。palette(调色板)中就是各种可拖拽组件，这些组件的拖拽效果如上图所示。tree(dom树)中则是用树形列表展示编辑区域所有元素的内容。熟悉chrome开发人员工具的童鞋很容易理解并使用这个dom树。可拖拽组件总共有5类：

1. components组件，例如google map, chart.js绘制的图形等等。
2. core组件，包含polymer预定义的核心组件，例如input, menu, item, animated pages.
3. demo案例，主要是polymer的演示案例，诸如Quiz demo Grid。
4. paper系列组件，是Material Design风格的系列组件，包含很多较为复杂的组件诸如calculator,  panel with tabs. 这些组件多由多个核心组件和自定义组件组合而成。
5. topeka系列组件，同上。

虽然我们可以选中组件，然后对其的ID等属性和样式进行一系列编辑。但是大部分组件，你是不能再这个界面中进行详细编辑的（例如chart.js生成的图表，你不能在这个界面中随意选择绑定数据和展示样式）。如果想要进行详细编辑，得要在保存后，从 Github gists 上下载再进行coding. 毕竟，这只是原型生成工具，也就是说它是类似bootstrap的可视化布局系统LayoutIt一样，生成的是原型，毕竟实际APP的内在逻辑还是需要进行详细编码的，polymer designer并不提供复杂的在线IDE功能。我觉得这样就好。

我个人觉得作为一个可视化布局系统（我们姑且用这个名字），Polymer Designer至少有如下几点值得参考：

 

• 整个区域使用网格系统进行划分，可以有效地避免用户生成大小有问题的组件，同时规范显示位置。
• 组件的归类显示方式与属性修改方式
• 复杂组件的叠放方式

 

事实上，如果web component标准未来能够得到广泛实施，那么以后的web开发或许真的会像这个界面所展示的那样，所有组件任意调用，APP开发将变得异常简单。而Polymer Designer如果能和前文所提到过得bootstrap的几种在线编辑器做个优势互补，那么成品一定非常可观。

 

其他文献：

web component组织官网：http://webcomponents.org/

angularjs的material design 风格组件：https://material.angularjs.org/

关于polymer的讨论：http://www.zhihu.com/search?q=polymer&type=question

关于material Design的更多设计案例：http://www.zhihu.com/question/24851189