freelogic's blog

2016-03-01-信息系统实践手记1-列表数据展现的6个要素

信息系统实践手记1-列表数据展现的6个要素

说明:

正文:

  • 信息系统实践手记系列是系笔者在平时研发中先后遇到的大小的问题,其中比较典型的内容加以收集和分享。
  • 信息系统实践手记目录:博客园(或查看源码的README.MD文件)

摘要:

  • 介绍典型的客户端中列表数据展现的6个要素。

1.客户端和服务器

一般小型的信息系统总可以分为前台(也称“客户端”)和后台(也称“服务端”)。
服务端一般提供一些列后台功能,和DB交互,从经典的J2EE到现在的restful接口,它将业务的数据处理逻辑从呈现层的UI拆分开,数据解耦。
客户端一般提供UI界面供用户使用,主要分为BS和CS两种。
BS方式:用WEB技术开发的客户端UI界面,只要在浏览器打入web地址就能调出UI,使用方便但界面呈现相对弱于CS。不过近来HTML5等都很有展现力。
CS方式:用比如JAVA或.NET开发的,利用OS本地类库(WINAPI/MFC/WPF/GDI/DIRECTX/JAVA等)开发,有现成控件,运行速度快,界面元素丰富。
使用哪种方式因公司不同,研发策略,技术路线,开发团队能力,使用场景,用户要求,合同内容等而定。

2.为开发GIS(地图)应用采用CS中包含BS的方式

为开发GIS(地图)应用,需要和GIS引擎交互,典型的有:百度地图API,公安标准PGIS,开源的arcGIS,第三方GIS供应商如数字位图等。这些API大都提供JS接口,也有FLEX(Flash)接口,有些是restful风格,封装的不错。其实都比较适合开发网站应用,或手机APP。因为现在典型的GIS应用主战场都在手机APP(安居客等),或网站(百度,大众点评等)场景中展开,所以都提供JS接口方便开发。

但笔者遇到的项目是传统的IT项目,客户需要开发基于GIS的应用,但只能用CS结构实现。所以经过尝试,采用了一种混合的方法,应该也有不少类似的情况。就是windows操作系统下的CS客户端中嵌入了IE的OCX控件,在控件中调用GIS引擎的JS/FLEX的API类库。此方式稍有点复杂,而且对于WPF层,JS层,以及和后台SERVER的信令交互,消息数据传递,局部页面PAGE的异步更新,都有一些注意点(在之后的手记中有机会再仔细描述),大家遇到类似上下文环境可参考。

3.列表数据展现的6个要素

讲了半天,转入正题。一个嵌入了IE的OCX控件并以JS调用GIS引擎的CS客户端,一般可以用C#/WPF来开发。客户端的内容和展现上其实分2两种截然不同的部分,既有GIS地图展现相关的类似WEB的JS内容呈现,又有典型的CS对话框,窗口,设备列表等展现。两种风格混在一起,可能让开发人员不太适应。

下面针对一个具象的问题“列表数据的展现”,比如需要显示一个dialog,里面哪怕只有一列数据,它显示一万个设备ID,怎么做呢?三个开发会有三个样子的东西开发出来。在实践,经过总结并和用户交流,给出如下6点,基本满足要求。

使用高效控件(数据量大就要考虑UI速度。比如MINIUI框架的listbox显示超过数百行就不太好用,可以改为grid控件或其他,但其实百万行的UI人怎么看的过来呢?不成立)
支持数据分页(如果列表数据字段可能超过200行,就应该分页,否则不方便用户查看)
支持数据排序(数据字段总是必须要排序的,不排序的信息毫无价值,用户脑中默认是排序的)
支持数据搜索(即使分页和排序了,还必须提供搜索功能,这样的组合拳下来,用户操作方便,认为界面友好)
支持滚动条(因数据项本身宽度可能很长,且记录行也很多,在有限的dialog可视区域内很难看清楚,必须支持滚动来提升展现力。)
支持TIPS提示(有时滚动很麻烦,为了临时看一下数据,应支持鼠标悬停到某个数据项的时候以tips形式显示“额外信息”,界面就更友好,展现力层次丰富了。)
以上6个要素,对LISTVIEW类型的控件比较基础,如果做好了,基本上用起来没有大的问题。其他UI控件的设计(无论CS还是BS)其实也是类似的思路去寻找呈现的要素和代码的多维度功能控制,最终是满足用户的要求,提升满意度,以此类推。