首页 > 数据可视化 > 可视化报表生成器案例综述:03 polymer designer
2015
03-12

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

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

google的material design设计风格样例图

本文重点不是讨论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


留下一个回复

你的email不会被公开。