wsky's blog,Record my technical life

just coding

导航

富web概述

1.     平台概述

互联网在发展的初期,主要局限于高校和科研机构的象牙塔里,随着Web技术的出现,互联网才开始了爆炸性的发展。

早期的 Web 技术由于存在开发效率低、可维护性差、用户操作不便捷和性能不高等缺点,主要应用于信息发布,对于信息管理之类交互性很强的应用,还不普及。

但随着 Web 技术的发展,Web 应用的优势越来越明显,应用的范围也越来越广。 对早期 Web 技术不足之处,各种 Web 新技术都找到了相应的解决之道;但各种 Web 新技术采用的策略是对某一方面特别重视,从而建立起在该方面的优势, 但相对而言,其他方面则处于一定的劣势;有的技术重视可视化的开发方式,大大提高了开发的效率; 有的技术重视系统架构,抽象出了业务逻辑层,提高了系统的可维护性;还有的系统实现了富界面的客户端,提高了用户操作的便捷性; 但几乎没有技术能在各方面取得均衡,即在保持优势的同时,在其他方面也没有相对的劣势。

我们的目标是建立一个各方面相对均衡的开发平台;基于架构是指采用了面向数据的持久层,提高了系统的稳定性和可维护性;采用可视化的快速开发方式,提高了系统的开发效率,降低了开发的难度;富界面的 Web 客户端,在保持了 Web 应用的各项特性的同时,提高了用户操作的便捷性。这个平台适合于面向数据的、要求开发快速、部署便利、用户操作便捷、应用于局域网或广域网的Web 应用系统。

2.     平台架构

2.1. 多层架构

本平台采用多层的架构。

持久层将表格、SQL语句和存储过程映射为业务对象,并实现了业务对象的读取和更新。

Web 页面层在设计期利用平台控件进行页面开发,在运行期生成Web页面。

客户端在浏览器中展现富界面的Web页面,并实现用户的交互。

2.2. 核心技术

本平台为了实现富界面的客户端、面向数据的持久层和可视化的快速开发,采用了多项关键的核心技术。

全面采用XML标准和技术,其中用到的XMLXML NameSapce已经非常普及,XSLT也有比较广泛的应用,XMLSchema则相对应用较少,而这些技术在本平台中缺一不可,是多层架构之间交互的核心。

客户端数据缓存采用XML文档格式,但为了实现业务对象之间的关系,数据的关联存储保证了业务对象之间数据的一致性。

富表格的可滚动功能,是利用了XSLT标准和IE浏览器的特性,实现了滚动的高效性和自动性;富表格的交互功能,是利用了HTMLDOMIE浏览器的特性,实现了用户交互的便捷性。

持久层充分利用了内存数据库DataSet强大的功能和性能,高效的实现了业务对象的存储、检索、访问和更新。

Visual Studio.Net 强大的控件开发设计能力,让我们可以实现功能全面的平台控件;利用平台控件,在设计期通过和持久层的配合,可以实现整个开发过程的所见即所得。

3.     富界面的Web客户端

传统的 C/S 应用因为是胖客户端,所以也都是富界面的,用户操作很便捷。而因为是瘦客户端,所以绝大多数 Web 应用都不是富界面的,用户在每个页面只能作较少的操作,需要频繁的和服务器交互,并刷新页面,在操作较多时,效率很低。

Internet Explorer 浏览器日益成熟,功能强大,占领了绝大多数的市场份额,特别是在企业内的桌面办公领域;所以我们不必为了浏览器的兼容性,而束缚住自己的手脚,不能施展。为此,我们在基于 Internet Explorer 浏览器的Web应用中,充分利用 Internet Explorer 的强大功能,借鉴了传统的 C/S 应用的客户端,实现了 Web 应用的富界面,提高了用户操作的便利性。

采用 XML 文档格式的数据结构,来实现业务对象的统一存储;将业务对象存储为树型结构,实现了业务对象之间的关系;利用 XMLHTTP 技术在后台从持久层异步获取业务对象的记录,并实现了自动分页的功能,一次只获取富表格所能显示的数据;XMLHTTP Microsoft 1999 年推出的一项异步数据访问的技术,近年,一些开放组织以 AJAX 的名称重新推出,使该技术有了更广泛的应用。

富表格借鉴了胖客户端的数据表格,以表格的形式展现业务对象的数据,在表格内可以直接对业务对象数据进行添加、修改和删除;并根据数据的不同类型,将编辑的方式自动展现为编辑框、下拉列表框或标记框。在富表格之外,还可以对业务对象的成员进行单独的展示和编辑。

3.1. 表头锁定可滚动的富表格

浏览器里标准的表格展现方式比较简单,表格行数多时,页面会有滚动条,浏览数据不方便。一种解决方法是表格内显示所有的数据,但限制表格显示的区域,这种方式虽然表格仅有很小的一部分是可见的,实际上却要耗费大量的资源;另一种方法是表格分页,每次只显示一页的数据,这种方式在换页时会频繁的刷新页面。

本平台的富表格解决方案是缓存数据,动态显示;根据用户对滚动条的操作,从缓存中找到需要显示的数据,动态显示。因为富表格中显示的内容就是所看到的,所以占用的资源很少;分页数据是采用AJAX技术从服务器获得的,也不会有获取页面时的刷新。

如下图所示。

富表格中的滚动条与一般的滚动条操作相同,保留了用户在C/S下操作的习惯,可以通过鼠标实现表格向上滚动一行,向上滚动一页,向下滚动一页,向下滚动一行和托拽定位的操作,而当前所选择的行不变。

鼠标左键点击表格标题,设置键盘的输入焦点后,还可以通过键盘的向上箭头, PageUpPageDown 和向下箭头,将当前所选择的行上移一行、一页和下移一行、一页。还可以按下 Ctrl + Home End,跳转到整个表格的第一行或最后一行。

支持鼠标滚轮的操作,将鼠标移动到表格内,滚动鼠标的滚轮,表格即可滚动。

3.2. 基于AJAX分页下载的富表格

采用分页下载的方式,即节省了网络带宽,也减少了用户等待的时间。而传统的Web页面每获取一次分页,都要和服务器作一次交互,页面就要进行一次刷新。

本平台的富表格采用 AJAX 技术进行分页下载,提升了用户的体验,不需要刷新页面,即可获得新的数据。而富表格的滚动条,可以使用户完全不必关心数据的获取,为操作和交互都带来更大的便利;当向下滚动到需要新的数据时,会自动从服务器获取一页新的数据,这时表格的滚动会有难以察觉的停顿; 而所有下载的数据都会被缓存,显示缓存数据时,就不会再有任何停顿。

既可以从表格的顶部向下滚动,正向下载新数据,也可以从结尾逆向下载新数据;快速拖动滚动条到底部,或鼠标左键点击表格标题,设置键盘的输入焦点后,按 Ctrl + End 跳转到整个表格的结尾,然后向上滚动,则逆向下载数据; 正向和逆向的数据会自动分隔,直到交汇。

3.3. 自适应的页面布局

传统的Web页面是将整个页面内容的平铺,如果页面内容超过浏览器窗口的大小,则会出现滚动条;如果页面数据较多,滚动条会比较长,这时就只能看到页面的一小部分,查找数据很不方便。所以要么一次显示较少的数据,不断的刷新页面获取新的数据;要么用滚动条,不断的滚动页面,来浏览需要的数据。

本平台采用可滚动的富表格,解决了大量数据在有限窗口显示的矛盾。页面由多个可滚动的表格组成,每个富表格都只占用窗口的一部分,而数据都被限制在富表格之内,整个窗口就不再出现滚动条;一个表格内可以包含大量的数据,通过滚动来浏览不同的数据,而不影响其他的表格;不同表格的数据可以同时显示在一个窗口中,以互相参考。本页面还能够自动适应不同的窗口大小,都能展现为适合的布局。

如下图所示,是本平台的持久层配置页面,由主—子—孙—从孙的四级结构共六张表组成,,每个富表格都占用窗口的一定比例,每个富表格都可以包含大量的数据,并在富表格内通过滚动浏览不同的数据,多级关联的富表格会实现联动。

 

对于业务设计来说,由于传统的Web页面技术上的限制,大量的关联业务往往不得不分散到多个页面,既增加了开发的工作量,也带来了用户操作上的不便。而采用本平台,可以采用更加符合业务要求的设计,而开发一个功能完善的页面能大大节省开发的工作量,并给用户带来更加便捷的操作和使用。

3.4. 单元格可编辑的富表格

单元格可编辑是富表格的关键特性,用户可以直接对表格中展现的数据进行编辑; 而传统的浏览器中的数据操作方式,每当选择一条记录进行编辑时,几乎都要和服务器交互一次,并刷新页面; 富表格可以大大提高用户交互的反应时间和操作的便利性。

如下图所示,用鼠标左键点击需要编辑的单元格,既转变为编辑框,输入完成后,按下回车键,或点击页面的其他地方使编辑框失去焦点,编辑结果就被保存到缓存。

将表格滚动到最后,在空白记录中输入就可以添加新的记录。

支持 XML Schema 标准对数据类型有效性的校验方式:

3.5. 一次性的提交

传统的Web页面由于没有富界面的功能,一次只能对一条记录进行修改,修改另一条记录时,就要和服务器作一次交互,刷新一次页面,一项完整的业务需要很多次这样的操作。对于一些复杂的业务,除了以上的麻烦,可能还要多次提交才能完成整个业务。

本平台的富表格的单元格可编辑功能,让用户可以连续在多个富表格中编辑多条记录,而在编辑的过程中,不需要刷新页面;在一个完整的业务操作完成后,单击“提交”按钮,将所有的修改一次性的提交到服务器。

3.6. 根据数据类型决定单元格交互方式

在浏览器的富表格实现技术中,通过充分的利用浏览器的强大功能,可以实现更智能的交互方式。如下图所示,不同数据类型的单元格,采用不同的交互方式。

l         对于文本或数字的简单类型,通过编辑框进行交互,如地址、分机。

l         对于布尔值类型,通过 CheckBox 框进行交互,如已婚。

l         对于日期类型,通过下拉的日期框进行交互,如出生日期。

l         对于时间类型,通过下拉的时间框进行交互。

l         对于枚举约束的单元格,通过列举了静态的枚举值的下拉框进行交互,如尊称。

l         对于查阅约束的单元格,通过列举了动态查询的外键值的下拉框进行交互,如上级。

3.7. 支持拖拽操作的富表格

很多时候,我们需要将一项记录从一个父记录,移动到另一个父记录,通常的操作方式是修改记录的外键。

本平台的富表格支持通过拖拽移动的功能,就是在需要移动的记录按下鼠标左键,然后拖拽到目标父记录松开鼠标左键,则该记录就从源父记录移动到目标父记录下。通过拖拽移动,为修改记录外键的操作,提供了一种更直观的方式。

选择一个产品,按下鼠标左键,然后拖拽到另一个类别,则该产品移动到该类别下。

还有的时候,我们需要给一个父记录增加一条指定的子记录,例如给订单记录增加产品记录。富表格支持通过拖拽新增的功能。

在“所有产品”中选择一个产品,按下鼠标左键,然后拖拽到“订单明细”,则该产品被添加到订单明细中;也可以利用 Ctrl Shift 键加上鼠标左键的多选功能,一次选择多个产品通过拖拽添加到订单明细中。另外一种操作方式是将产品显示在在弹出窗口中,然后通过拖拽添加到“订单明细”。

4.     面向数据的持久层

基于架构(Architecture)是相对于基于组件(Component,也称构件)而言的;COM是基于组件开发的代表,这种方式是对系统的纵向的划分,组件是相对独立的,依赖性小,具备完善的功能;组件是代码驱动的,每增加一个组件,需要编写大量的代码,即使可视化的开发可以自动生成大量的代码,但对这些代码维护的难度和工作量仍然很大;基于架构是对系统的横向的划分,将系统分为多层,每层只实现特定的功能,需要各层之间的相互配合才能实现完整的业务;架构是配置驱动的,增加新的功能时,只要对配置的数据进行添加即可。持久层是系统架构的核心。

面向对象持久层的发展已经有很多年了,已有一些成熟的产品。面向对象的持久层为了实现业务逻辑,需要将数据封包为对象,性能上会有一定的损失;并且面向对象的持久层产品功能相对独立,不能满足快速开发和富界面的一些特殊要求;为此需要新开发一个满足以下要求的持久层。

4.1. 配置工具采用平台自身开发

本平台实现了富界面的 Web 应用,所以持久层的配置没有采用常用的桌面程序,而是直接用本平台进行开发,可以说是他的第一个应用。

采用Web应用的持久层配置方式,使远程协作式开发成为可能;只需要在InternetIntranet上建立持久层服务器,分布在各地的开发者,就可以通过Web在持久层配置自己的对象空间下的业务对象,并在本地开发业务界面,然后只需将所开发的页面上传到服务器即可。

4.2. 采用对象空间的组织方式

对于业务系统配置的大量业务对象而言,如果光采用名称管理的方式,不但容易发生冲突,并且对象的检索和查找也不方便。

然而采用对象空间的管理方式,将业务对象根据所属的业务系统分类,不但可以避免冲突,也能很容易的找到需要的业务对象。在开发时和客户端,都是采用由对象空间约束的对象名称。

对象空间树的级数没有限制。

4.3. 将表格、SQL语句和存储过程映射为业务对象

能够将表格、SQL语句和存储过程映射为业务对象。业务对象是对数据库的屏蔽和抽象,持久层以外只能看到业务对象,看不到数据库。

配置业务对象步骤如下:

l         首先在对象空间中选择业务对象的命名空间;

l         然后输入对象名称,对象名称是持久层对数据库实体的映射。

l         选择命令类型,系统支持表格、SQL语句和存储过程三种命令类型。

l         输入命令文字,与命令类型相对应,是表格名称、SQL语句或存储过程名称。

单击“选择对象成员”,会弹出“选择对象成员”对话框,自动从数据库中获取读取业务对象时返回的所有列。如下图所示。

利用 ShiftCtrl 和鼠标左键的多选功能,可以选择所有需要的列;透过拖拽,可以将所选的列,添加到业务对象的对象成员表格中。

通过FacetPatternEnumeration可以利用XMLSchema标准给对象成员加上进一步的约束。

4.4. 自动实现高效的分页

传统的Web应用的开发,为了实现大数据量的分页读取,要么采用低效率的DataGrid分页之类的自动方式,要么编写大量的嵌套的SELECT TOP之类的复杂的代码。

本平台通过富界面客户端的缓存数据和持久层算法的配合,实现了业务对象数据的高效和自动的分页功能。

客户端在用户滚动到业务对象所缓存的数据的结尾时,会自动向持久层请求后续的数据,并且会将缓存中最后一条记录的主键传给持久层;持久则从该该主键对应的记录以后,读取指定数量的记录;由于有了起始记录的主键,SQL语句的效率会非常高。持久层获取分页数据的SQL语句是自动生成的,不需要用户编写。

4.5. 自动实现业务对象的更新

传统的Web应用,需要编写大量的数据更新的SQL代码,即使这些代码可以自动生成,维护也需要很大的工作量。

本平台能够实现对业务对象数据的自动更新,客户端在对业务对象进行修改以后,在提交时,会将记录的主键和所修改的字段,一起提交到持久层;持久层根据主键找到相应的记录,并更新修改的字段。持久层更新数据的SQL语句是自动生成的,不需要用户编写。

当客户端一次更新多个对象的多个记录时,客户端会向持久层提交一个更新的业务对象树;持久层按照优化的算法,递归更新树上的业务对象节点。

5.     可视化的快速开发

传统的 C/S 开发工具基本上都是采用可视化快速开发的方式,但直到Microsoft .Net的出现才真正有了Web应用的可视化快速开发。

Visual Studio.Net提供了功能强大的控件开发能力,本平台就是通过开发控件,从而利用Visual Studio.Net开发工具实现了可视化的快速开发。

本系统的开发方式就是在Visual Studil.Net下利用平台控件开发Aspx页面。

5.1. 自动获取持久层配置的BusinessObject业务对象控件

BusinessObject 业务对象控件能够从持久层获取所配置的业务对象,并且可以通过可视化的方式进行配置。

如下图所示,添加一个业务对象控件,在ObjectName属性中,通过下拉就可以从持久层所配置的业务对象树中,选择需要的业务对象。

在业务对象控件的Members属性中,通过下拉就可以设置业务对象的成员是否下载、能否更改、成员标题和查阅对象等。

其他的属性还有:

l         权限:可以设置业务对象在客户端的读取、新增、修改和删除等权限的组合。

l         父业务对象:可以设置需要与业务对象进行联动的父业务对象。

l         条件:可以为业务对象设置复杂的条件,对数据进行筛选。

5.2. 所见即所得的RichGrid富表格控件

RichGrid富表格控件将业务对象控件所获取的数据,展现为可编辑的表格的形式。在设计期,富表格控件就可以所见即所得。

如下图所示,添加一个RichGrid富表格控件,在BusinessObject属性中,通过下拉选择刚配置的BusinessObject1业务对象控件。

富表格即展现为所见即所得的形式。

在富表格的Columns属性中,通过下拉就可以设置在富表格中的对象成员是否显示、能否更改、列宽度和对齐方式等。

其他的属性还有:

l         AutoScroll是否自动显示和隐藏滚动条。

l         FixedLayout是否锁定列宽。

l         Height表格高度;如果设置了表格的高度,表格的行数会根据高度计算,可以设置百分比的相对高度。

l         Rows表格的行数;如果大于零,表示总是显示这么多表格行,如果数据不足,用空行填充;如果小于零,表示最多显示这么多表格行,如果数据不足,只显示有效的行;如果等于零,表示最多显示根据高度计算的行数。

5.3. 支持任意级数的TreeView树形

树形在数据库的结构上是自引用的表格,该表格的一项外键就是该表格的主健。树形是设计中很常见,很有效的一种数据库结构,例如多级菜单和组织结构等;平台中树形的级数是没有限制的,可以保证应用的灵活性。

树形也提供对多业务对象同时显示的支持,如同时显示菜单和页面,组织结构和人员等。

如下图所示,在菜单树中选择一个菜单节点,菜单名称中将显示该菜单下的子菜单,页面中将显示该菜单下的页面。

NodeObjects属性中,可以配置需要显示为树形节点的业务对象控件。可以添加多个业务对象控件,并配置相应的图标和在节点显示的对象成员。

其他的属性还有:

l         AutoCollapse选择节点变更时,是否自动隐藏上一个选择的节点。

l         Root是否显示ROOT节点。

5.4. 自适应数据类型的ObjectMember表单控件

ObjectMember表单控件用于显示和编辑业务对象的成员,并且会根据对象成员的不同类型,自动选择不同的展现形式;对于布尔型数据,展现为选择框;对于文本和数字,展现为文本框;对于查阅成员和枚举约束的类型,展现为列表框。

如下所示,添加一个ObjectMember表单控件,选择CatelogObject业务对象控件,对象名称为类别;选择对象成员的名称“说明”,说明的类型为文本,控件显示为一个文本框。

其他的属性还有:

l         BusinessObject业务对象控件。

l         MemberName对象成员。

l         ReadOnly 是否只读。

l         Updatable 是否更新;可以修改对象成员,而不更新数据,主要用于客户端查询。

l         Right        表单控件右边界的位置,用于表单控件的自适应宽度。

6.     集成的权限系统

7.     报表

采用第三方的报表,可以选水晶报表,SQL2005报表或其他报表。

8.     工作流

将采用 Windows Workflow Foundation,还待研究。

posted on 2007-07-05 22:12  wsky  阅读(590)  评论(0编辑  收藏  举报