Web-UI框架需求.doc

Web UI框架需求

深圳市泽宝网络科技有限公司

版本记录
日期
修订者
版本
备注
2009-08-27

1.0
创建文档
2009-08-31

1.1
控件体系确定及客户端配置体系实现章节西化
2009-09-03

1.2
目标更新，将原来分散开的控件全部移到控件体系一章
2009-09-17

1.3
配置体系框架

保密条款
本文档版权归Sunvalley所有，未经Sunvalley书面批准，文档或任何类似的资讯都不允许被复制和以他人名义发布。
预期读者
Sunvalley授权用户。

---------------------------------第29页 共29页------------------------------------
目录
1. 目标 5
2. 总体框架 5
3. 菜单 6
4. 控件体系 6
4.1. 日期 6
4.2. 数字 6
4.3. 文本 6
4.4. 模糊查询 6
4.5. CheckBox 7
4.6. RadioBox 7
4.7. 表格(Table) 7
4.8. 图片 7
4.9. 日期范围控件 7
4.10. 分页控件 7
4.11. Toolbar控件 8
4.11.1. 按类别定制 8
4.11.2. 事件的封装 8
4.11.3. 控制权限 8
4.12. 消息提示控件 8
4.13. 打开窗口框架 9
5. TAB键顺序及ENTER转换为TAB 9
6. UI与后台交互框架 9
7. 国际化支持及客户端资源 9
7.1. 国际化支持 9
7.2. 客户端资源 10
7.3. 图标资源 10
8. 过滤条件 10
8.1. 基本过滤条件 10
8.2. 高级过滤条件 10
9. 客户端配置体系实现 11
10. 导出EXCEL/CSV 15
11. 导入EXCEL/CSV 15
12. 打印方案 15
13. 报表方案 15
14. 终极目标 15

1. 目标
采用标准的MVC设计模式，实现一个轻量级、可配置、高扩展性、快速开发、具有良好用户体验的Web应用开发框架。最终实现用户可定义View层，解决不同用户的客户化订制需求。
View即UI，实现页面的布局，采用跨浏览器的DHTML+CSS实现
Control端采用JavaScript实现，包括开源框架JQuery、自有JavaScript库，控件库、页面配置信息、客户端业务逻辑
Model即数据层，采用JSON对象实现
Model
Control
View

JSON
JavaScript
DHTML+CSS

2. 总体框架
大布局，使用表格进行布局，大布局采用上左右下方式。
Title
Menu
Function
Footer
3. 菜单
默认采用Outlook风格，静态化为HTML文件
4. 控件体系
控件体系的原则是以最优实现方案进行选择，暂时不强求全部在客户端还是服务端实现。这个需要尽快确定。
对于单个控件，必须提供getValue()、setValue(value,formatter)方法，
对于表格，参见表格需求
4.1. 日期
日期主要考虑国际化支持
4.2. 数字
主要考虑国际化支持
4.3. 文本
4.4. 模糊查询
对于基础资料，在输入时可以进行模糊查询，提高用户输入效率及可用性。
4.5. CheckBox
4.6. RadioBox
4.7. 表格(Table)
详见<表格需求>
4.8. 图片
包括图片的上传、缩略图实现、多图片的显示，以及通过小图查看大图。
4.9. 日期范围控件
用户在按日期查询时，通常都是采用范围进行的，同时，多数用户的工作习惯都是按周、按月等进行的，所以经常需要按周、按月方式进行查询。如图所示：

支持本周、本月、本季、本年、上周、上月、上季、上年、近多少天(其中天可以输入)
4.10. 分页控件

每页行数可以进行输入或者选者，不允许输入超过系统预设的最大值(100)，每页行数设置需要按用户存储
问题：是否按业务进行存储
4.11. Toolbar控件

采用标准的DHTML+CSS进行Toolbar的定制
4.11.1. 按类别定制
主要有列表、编辑界面等
4.11.2. 事件的封装
对于每个功能，封装相应的事件函数，规范化事件的编写
4.11.3. 控制权限
按钮权限由权限值和状态进行控制
对于每个按钮设置权限值，在加载时根据权限对控件进行控制
同时，业务状态发生变化时，需要进行权限的控制。
4.12. 消息提示控件
等待进度、对话框(OK,YESNO,YESNOCANCEL)、功能及根据验证信息及维护信息的可用性提示、验证错误提示信息、标准信息提示（无需用户关闭，等待设定的几秒时间自动关闭，提供关闭按钮供用户直接关闭）
4.13. 打开窗口框架
使用DIV模式打开窗口
5. Tab键顺序及Enter转换为Tab
实现全键盘操作，按Enter键的时候，按设定的Tab键顺序进行跳转。
在有效性检查后，如果存在错误，此时Tab键跳转顺序只在错误的控件之间跳转
6. UI与后台交互框架
采用JSF的交互框架，实现统一的UI与后台的交互体系，实现标准的调用接口和返回接口，并且实现后台的权限验证
7. 国际化支持及客户端资源
7.1. 国际化支持
封装国际化支持的客户端类，实现数字、日期等的显示格式和Parse功能，该类将用于整个系统的国际化支持。包括单个控件的显示和表格中数据的显示等。
7.2. 客户端资源
在程序时，所有资源必须与程序独立，分公共资源及特定资源，公共资源统一进行维护，特定资源分子系统划分文件进行维护，合理减少资源文件的数量及维护难度。
公共资源包括：标准提示信息、显示信息、格式化信息等
7.3. 图标资源
为了降低系统图标资源的请求数，将所有图标整合为一个文件
8. 过滤条件
通过配置实现，无需人人编写代码，此部分包括客户端和服务端两部分，并且过滤条件方案可以进行保存。
8.1. 基本过滤条件
在列表上摆放的过滤条件
8.2. 高级过滤条件
可以选择相关业务信息的所有字段进行自定义的过滤条件
问题：如何实现多表连接时的别名问题
9. 客户端配置体系实现
本部分是整个框架的核心，将通过配置将前边的功能全部串起来，实现整个程序的配置化开发，最终将提供一工具生成该配置信息。配子信息主要包括：
1) 编辑控件与JSON数据属性的对应关系
2) 数据类型
3) 显示格式（包含国际化）
4) 有效性验证（包括必录项、值范围、正则表达式等）
5) 可用性提示信息
a) 可用性提示的目的是帮助用户能够轻易的使用系统，省去帮助文档的编写，实际情况下，用户很少去阅读帮助文档来使用软件
b) 可用性提示分为事前提示和事后提示，事前提示告知用户在做本件事前需要做什么活着注意事项，包括有效性验证的提示和需求定义部分；事后提示告知用户后续操作流程，包括后续可以处理的操作或者错误提示及解决办法。
6) 表格相关属性
7) Tab键顺序
8) 过滤条件
9) 引用基础资料相关信息
10) 默认值及连续新增默认值
配置框架：
Var xxxPage=
{
//页面类型：列表，编辑界面
pageType: List,Form
//Tab键顺序数组，在有效性验证错误后只在错误的控件中跳转，否则按正常顺序跳转
tabOrders : [],
//过滤条件配置
filter:
[
{}, //过滤条件配置数组
{
id: //控件id
datatype: //数据类型
filed: //对应数据库表的别名.字段，这个需要SQL非常规范
idclass: //控件js类
formatter: //显示风格，对于日期、金额等数字显示格式直接根据数据类型即可确定（并且国际化），所以可以默认
reference:{} //引用
oper: //操作符[EQ,LT,GT,LE,GE,LIKE,NE,IN,RANGE…]
oper说明，1、对于RANGE操作符，有两个控件对应，默认配置在第一个控件上，第二个控件id为该id+_to构成
2、对于IN操作符，可以选择多个值，主要用于下拉状态的多状态查询
3、对于IN操作符，idc为下拉时，需要产生可多选的下拉
}
],
//页面部分
forms
{
formx1:
{ type: grid,
required:1,
json:jsonobject
Fields:[
{
Id: //控件id
key: //Json属性名称
datatype:默认string //数据类型
idclass: 默认根据数据类型确定 //控件js类
formatter:默认空 //显示风格，对于日期、金额等数字显示格式直接根据数据类型即可确定（并且国际化），所以可以默认
Default:[defaultvalue,1 or 0], //默认值
validation: //有效性验证
{
required: 1, //必录
Range:[大于等于，小于等于，大于，小于],
fn:默认无，//自定义回调验证函数
regex: [正则验证规则串,错误提示]
},
reference: //引用配置开始
{
type: //引用的基础资料类别
subtype://引用某类基础资料的子类，只支持2级
mode: //显示方式，0 完全显示，1模糊查询
value: //设置控件的值的json属性
display: //设置控件显示的值的json属性
assigns:[{to://控件或者列的id,from://Json属性}]
filters:[] //依赖条件
} //引用配置结束
readonly:0 //只读属性
toJson:默认1,不用设置//是否打包json
expression: 默认空 //计算公式，暂不实现
},
{}
]
},
formx2:{},
…
}
}
10. 导出Excel/CSV
11. 导入Excel/CSV
业务逻辑验证是最需要考虑的
12. 打印方案
Web打印效果不是特别理想，但是对于一些基本的打印还是可以通过Web模板化的方式实现。
对于要求比较高的打印可以采用后台生成PDF格式或者采用浏览器打印插件方式解决。
13. 报表方案
选择一开源报表工具，制作报表
14. 终极目标
可扩展的自定义界面工具附录资料：
Ehcache缓存配置

简介
Cache的配置很灵活，官方提供的Cache配置方式有好几种。你可以通过声明配置、在xml中配置、在程序里配置或者调用构造方法时传入不同的参数。
你可以将Cache的配置从代码中剥离出来，也可以在使用运行时配置，所谓的运行时配置无非也就是在代码中配置。以下是运行时配置的好处：
·   在同一个地方配置所有的Cache，这样很容易管理Cache的内存和磁盘消耗。
·   发布时可更改Cache配置。
·   可再安装阶段就检查出配置错误信息，而避免了运行时错误。
本文将会对ehcache.xml配置文件进行详细的阐述。在配置的时可以拷贝一个现有的ehcache.xml，如果没有请点击这里去下载。
ehcache-failsafe.xml

如果你调用了CacheManager默认构造方法去创建CacheManager的实例，此方法会到classpath中找ehcache.xml文件，否则它会到类路径下找ehcache-failsafe.xml文件。而ehcache-failsafe.xml被包含在jar包中，所有它肯定能找的到。

ehcache-failsafe.xml提供了一个非常简单的默认配置，这样可以使用户在没有创建ehcache.xml的情况下使用Ehcache。

不过这样做Ehcache会提醒用户创建一个正确的Ehcache配置。

ehcache.xml片段：
<ehcache>
    <diskStore path="java.io.tmpdir"/>
    <defaultCache
            maxElementsInMemory="10000"
            eternal="false"
            timeToIdleSeconds="120"
            timeToLiveSeconds="120"
            overflowToDisk="true"
            maxElementsOnDisk="10000000"
            diskPersistent="false"
            diskExpiryThreadIntervalSeconds="120"
            memoryStoreEvictionPolicy="LRU"
            />
</ehcache>
ehcache.xml和其他配置文件
在Ehcache-1.6之前的版本，只支持ASCII编码的ehcache.xml配置文件。在Ehcach-1.6之后版本中，支持UTF8编码的ehcache.xml配置文件。因为向后兼容，所有采用ASCII编码的配置文件完全没有必要转换为UTF8。
一个CacheManager必须要有一个XML配置。由于磁盘路径或是监听端口，多个CacheManager使用同一个配置文件时会出现错误。
下面是ehcache.xml具体实例以及配置指南
<ehcache xmlns:xsi=http://www.w3.org/2001/XMLSchema-instance
·   CacheManager配置
DmulticastGroupPort=4446，这样可以配置监听端口。
·   DiskStore配置
如果你使用的DiskStore（磁盘缓存），你必须要配置DiskStore配置项。如果不配置，Ehcache将会使用java.io.tmpdir。
diskStroe的“path”属性是用来配置磁盘缓存使用的物理路径的，Ehcache磁盘缓存使用的文件后缀名是.data和.index。
<disStore path=”java.io.tmpdir”/>
·   CacheManagerEventListener配置
我们通过CacheManagerEventListenerFactory可以实例化一个CacheManagerPeerProvider，当我们从CacheManager中added和removed Cache时，将通知CacheManagerPeerProvider，这样一来，我们就可以很方面的对CacheManager中的Cache做一些统计。
注册到CacheManager的事件监听类名有： adding a Cache和removing a Cache
<cacheManagerEventListenerFacotory class=”” properties=””/>
·   CacheManagerPeerProvider配置
在集群中CacheManager配置CacheManagerPeerProviderFactory创建CacheManagerPeerProvider。具体的实例如下：

<cacheManagerPeerProviderFactoryclass="net.sf.ehcache.distribution.

RMICacheManagerPeerProviderFactory"

properties="peerDiscovery=manual, rmiUrls=//server1:40000/sampleCache1|//server2:40000/sampleCache1| //server1:40000/sampleCache2|//server2:40000/sampleCache2"
propertySeparator="," />

·   CacheManagerPeerListener配置
CacheManagerPeerListener配置是用来监听集群中缓存消息的分发的。
<cacheManagerPeerListenerFactory
    class="net.sf.ehcache.distribution.RMICacheManagerPeerListenerFactory"
    properties="hostName=fully_qualified_hostname_or_ip,
                port=40001,
               socketTimeoutMillis=120000"
                propertySeparator="," />

·   Cache配置
·           name：Cache的唯一标识
·           maxElementsInMemory：内存中最大缓存对象数。
·           maxElementsOnDisk：磁盘中最大缓存对象数，若是0表示无穷大。
·           eternal：Element是否永久有效，一但设置了，timeout将不起作用。
·           overflowToDisk：配置此属性，当内存中Element数量达到maxElementsInMemory时，Ehcache将会Element写到磁盘中。
·           timeToIdleSeconds：设置Element在失效前的允许闲置时间。仅当element不是永久有效时使用，可选属性，默认值是0，也就是可闲置时间无穷大。
·           timeToLiveSeconds：设置Element在失效前允许存活时间。最大时间介于创建时间和失效时间之间。仅当element不是永久有效时使用，默认是0.，也就是element存活时间无穷大。
·           diskPersistent：是否缓存虚拟机重启期数据。（这个虚拟机是指什么虚拟机一直没看明白是什么,有高人还希望能指点一二）。
·           diskExpiryThreadIntervalSeconds：磁盘失效线程运行时间间隔，默认是120秒。
·           diskSpoolBufferSizeMB：这个参数设置DiskStore（磁盘缓存）的缓存区大小。默认是30MB。每个Cache都应该有自己的一个缓冲区。
·           memoryStoreEvictionPolicy：当达到maxElementsInMemory限制时，Ehcache将会根据指定的策略去清理内存。默认策略是LRU（最近最少使用）。你可以设置为FIFO（先进先出）或是LFU（较少使用）。这里比较遗憾，Ehcache并没有提供一个用户定制策略的接口，仅仅支持三种指定策略，感觉做的不够理想。
·   Cache Exception Handling配置

<cacheExceptionHandlerFactory class="com.example.ExampleExceptionHandlerFactory"                               properties="logLevel=FINE"/>

总结

这里只对通用缓存的配置做了详细的阐述，至于RMI缓存和集群缓存可以参考这里。

下面给出几个配置示例：
·   Ehcache默认Cache配置
<defaultCache
        maxElementsInMemory="10000"
        eternal="false"
        timeToIdleSeconds="120"
        timeToLiveSeconds="120"
        overflowToDisk="true"
        diskSpoolBufferSizeMB="30"
        maxElementsOnDisk="10000000"
        diskPersistent="false"
        diskExpiryThreadIntervalSeconds="120"
        memoryStoreEvictionPolicy="LRU"
        />
·   SampleCache1配置
简单配置，在ehcache.xml文件中有此配置，在使用Ehcache前最好将其删除掉，自己配置。
缓存名sampleCache1，内存中最多可缓存10000个Element，其中的element会在闲置5分钟或是存活10分钟之后失效。
超过10000element时，element将会输出到磁盘中，输出路径是java.io.tmpdir。
<cache name="sampleCache1"
       maxElementsInMemory="10000"
       maxElementsOnDisk="1000"
       eternal="false"
       overflowToDisk="true"
       diskSpoolBufferSizeMB="20"
       timeToIdleSeconds="300"
       timeToLiveSeconds="600"
       memoryStoreEvictionPolicy="LFU"
        />

·   SampleCache2配置
Cache名为SampleCache2，内存中最多可以缓存1000个element，超出1000不能输出到磁盘中。缓存是永久有效的。
<cache name="sampleCache2"
       maxElementsInMemory="1000"
       eternal="true"
       overflowToDisk="false"
       memoryStoreEvictionPolicy="FIFO"
        />
·   SampleCache3配置
Cache名为SampleCache3。可缓存到磁盘。磁盘缓存将会缓存虚拟机重启期的数据。磁盘缓存失效线程运行间隔时间是10分钟。
<cache name="sampleCache3"
       maxElementsInMemory="500"
       eternal="false"
       overflowToDisk="true"
       timeToIdleSeconds="300"
       timeToLiveSeconds="600"
       diskPersistent="true"
       diskExpiryThreadIntervalSeconds="1"
       memoryStoreEvictionPolicy="LFU"
        />

·   sampleDistributedCache1配置
Cache名为sampleDistributedCache1。
<cache name="sampleDistributedCache1"
       maxElementsInMemory="10"
       eternal="false"
       timeToIdleSeconds="100"
       timeToLiveSeconds="100"
       overflowToDisk="false">
    <cacheEventListenerFactory
            class="net.sf.ehcache.distribution.RMICacheReplicatorFactory"/>
    <bootstrapCacheLoaderFactory
            class="net.sf.ehcache.distribution.RMIBootstrapCacheLoaderFactory"/>
</cache>

·   sampleDistributedCache2配置
<cache name="sampleDistributedCache2"
       maxElementsInMemory="10"
       eternal="false"
       timeToIdleSeconds="100"
       timeToLiveSeconds="100"

       overflowToDisk="false">

    <cacheEventListenerFactory
            class="net.sf.ehcache.distribution.RMICacheReplicatorFactory"
            properties="replicateAsynchronously=false, replicatePuts=false,
                        replicateUpdates=true, replicateUpdatesViaCopy=true,
                       replicateRemovals=false"/>

</cache>
·   sampleDistributedCache3配置
<!--
Sample distributed cache named sampleDistributedCache3.
This cache replicates using defaults except that the asynchronous replication
interval is set to 200ms.
-->
<cache name="sampleDistributedCache3"
       maxElementsInMemory="10"
       eternal="false"
       timeToIdleSeconds="100"
       timeToLiveSeconds="100"
       overflowToDisk="false">
    <cacheEventListenerFactory
            class="net.sf.ehcache.distribution.RMICacheReplicatorFactory"
            properties="asynchronousReplicationIntervalMillis=200"/>
</cache>