zoukankan      html  css  js  c++  java
  • 平面报表设计体验

         传统的报表设计器,使用了称之为条带式的设计体验,也就是报表样式设计界面上,设计面板上放置了一个个横条,这些横条就组成了报表的基础框架,它们一般区分为页眉条,页脚条,主条,明细条,二级明细条等等。设计报表模板必须首先设计好这些条条框框。然后在这些条上面放置各种报表样式元素。

        下图就是一个条带式报表的设计界面,很多报表工具比如Access,FastReport等等都是如此。实际上,若报表设计时采用控件拖拽的方式则一般是采用条带式设计体验。

        这种条带式报表设计体验是传统模式,历史悠久,而且报表模板一般只有两层结构,条带和报表元素。结构比较呆板,任何报表元素都必须在某个条带中,对于复杂的明细式报表,需要使用二三四级明细条,结构复杂,数据源绑定麻烦,当报表比较复杂时可能需要子报表,此时报表设计需要来回切换多个界面,使用不便。有些不大适应日益复杂的软件开发环境,因此必须有所改善或突破,于是出现了类似EXCEL的电子表格的报表设计体验,本文不讨论EXCEL的报表设计体验。

        针对条带式的一些缺点,本人提出了平面式的报表设计体验,设计报表时仍然采用控件拖拽的方式来编辑报表元素,但抛弃的条带式的结构,进而实现了多层次的报表结构。任意的报表元素都可以放置在设计面板上,不再区分页眉页脚主栏明细栏了,此外还实现了容器类型的报表元素,这种报表元素可以承载其他报表元素,比如面板和表格。由普通报表元素和容器报表元素混合其他使用就实现了多层次的树状报表结构。下图就是实现了这种平面式的报表设计模式。

        在这种设计方式下,设计器抛弃了条带的模式,甚至页眉页脚的概念也放弃了,所有的报表元素紧密的组织在一起,而且在容器元素(面板和表格)的作用下形成一个树状的报表结构。设计器对于任何报表元素都是同等对待的,没有了条带的隔阂,也就形成了一种平面式的设计体验。

        有人要奇怪了,居然连页眉页脚的概念都抛弃了,那怎么实现页眉页脚的功能啊?其实在我这个工具中很简单,只要指定报表的页眉页脚高度就可以了,报表引擎会根据页眉高度,让报表文档的开头的一部分作为页眉来显示。而将报表文档的最后的指定高度的一部分作为页脚来显示。由于只是指定高度,对报表编制没有任何影响,因此有很大的自由度,甚至可以让一个报表元素一半显示在页眉或页脚中而另一半显示在表身中。这样报表结构可以根据需要进行简化,而页眉页脚中可显示的内容就不受限制了。

        平面报表设计体验带来了树状的报表元素结构,而为此相配套,笔者又推出了多层次的树状的数据源模型,这两个树状结构紧密配合,就能将报表数据填充倒报表模板中而形成最终的报表输出。

    使用这种平面的设计体验和树状的报表结构的好处主要有

    1. 符合报表的编制逻辑,对于条带式报表,需要将一个报表强行拆分成一条条,但树状的报表结构不需要对报表进行拆分,而是把报表作为一个有机的整体进行设计,只要理解了原始报表的结构就不必考虑拆分就能设计报表了。
    2. 对于复杂报表,可很大的避免使用子报表,子报表会将报表设计分成多个界面,用户需要来回切换,使用不便。而树状的报表结构理论上层数不受限制,可以承载复杂的报表,因此可以很大程度上的避免使用子报表,在同一个界面中设计报表简洁方便。当然有时考虑到报表模板的重用,本工具也提供了子报表的功能。
    3. 树状报表结构比条带结构更贴近人们常规的编程思路,便于人们编制和检查报表结构。比如对于订单明细报表,如果使用编程生成HTML文件来展示报表,则一般会采用Table的方式来实现而不会采用DIV的方式来实现。因为这个报表的主体就是一个表格。
    4. 由于此处表格就是一个容器,其单元格本身有文本内容,但还可以放置任意个数的其他报表元素,甚至是表格套表格,因此也就大大扩展了表格式报表的设计自由度。

        在做报表设计器前,笔者已经开发了名为XDesignerLib的图形化设计器中间件,这个中间件支持了多层次的设计文档结构,使用了平面式设计体验。在做报表设计器时,笔者就为了能利用XDesignerLib就苦思冥想,结合以前的报表开发经验,想出了这套全新的报表理论,因此可以说这套理论是逼出来的。

        根据上述,平面式报表设计体验已经放弃了条带式设计模式,是一种新的设计体验,但该模型还比较新,应该还有有不少考虑不周之处,望大家多多评论。

    XDesigner软件工作室( http://www.xdesigner.cn ) 2006-9-20

  • 相关阅读:
    Educational Codeforces Round 67 D. Subarray Sorting
    2019 Multi-University Training Contest 5
    Educational Codeforces Round 69 (Rated for Div. 2) E. Culture Code
    Educational Codeforces Round 69 D. Yet Another Subarray Problem
    2019牛客暑期多校训练第六场
    Educational Codeforces Round 68 E. Count The Rectangles
    2019牛客多校第五场题解
    2019 Multi-University Training Contest 3
    2019 Multi-University Training Contest 2
    [模板] 三维偏序
  • 原文地址:https://www.cnblogs.com/xdesigner/p/509379.html
Copyright © 2011-2022 走看看