CN102495735A - web 端UI组件应用框架系统 - Google Patents

Abstract

本发明公开了一种web端UI组件应用框架系统，包括页面引擎，其特征在于所述系统包括组件设计器、布局设计器，所述组件设计器根据XML文档的仿真部分展现界面，并列出组件的属性、事件；所述布局设计器用于组件在页面上的布局设计，实现HTML页面的界面仿真和属性配置方式的设置；所述组件采用FACADEPATTERN进行封装后仅提供页面引擎需要的公共方法；所述页面引擎驱动整个页面数据加载过程，并控制组件呈现和默认行为。

Description

web 端UI组件应用框架系统

技术领域

本发明属于JS开发技术领域，具体涉及一种web端UI组件应用框架系统。

背景技术

在web应用开发中JavaScript是前台UI动态展现的必要编程技术，但是业界却没有一套标准化统一的规范。由于该技术易于入门难于精通，大部分的代码非常混乱，无法复用和产品化。无论功能、组件、或者是验证，另一个项目想要再次使用，仍然需要修改，没有一个标准的版本，开发速度不会随项目积累有明显提高。现有JavaScript技术框架众多，但一般来说同一个项目不会同时采用多种框架，导致不同框架下实现的功能无法复用。

ExtJS是一种主要用于创建前端用户界面，是一个基本与后台技术无关的前端ajax的应用框架。单选行，多选行，高亮显示选中的行，拖拽改变列宽度，按列排序，这些基本功能ExtJS轻量级实现。ExtJS支持自动生成行号，支持checkbox全选，动态选择显示哪些列，支持本地以及远程分页，可以对单元格进行单独渲染。

ExtJS作为典型的应用框架，它具有以下特点：1、数量很多封装好的组件可以立即使用；2、整体的风格统一，操作方式相似，为使用者提供了方便；3、功能强大的组件，满足使用者较复杂的需求；4、该技术难于入门，但入门后开发速度较快，比较容易快速搭建新的应用；5、完备的设计规范，组件之间的继承与组装关系在使用中可以明显体会到；6、完善的API文档，组件属性、方法事件等均有说明；7、跨浏览器的支持，支持现有主流浏览器。

然而，ExtJS应用框架也存在以下问题：1、ExtJS组件设计复杂，几乎无法编写自行扩展新的组件；2、由于功能众多，压缩后的运行库达到1MB，不压缩的版本达到4MB，如此这般巨大的JavaScript在web应用中是极其少见；3、由于提供了强大的功能，使用起来十分复杂，也导致运行效率低下；4、布局复杂，层层嵌套，无法可视化设计页面，只能凭感觉来建立页面；5、该技术难以入门，难以精通，对开发者门槛较高。

然而JS组件仍然没有理想的WYSIWYG设计器，开发人员只能靠运行结果来了解组件展现样式。本发明因此而来。

发明内容

为了解决以上问题，本发明提供一套统一的结构与对外接口规范，实现自己的前端UI组件应用框架，全部使用HTML技术，AJAX异步请求，可操作性强。

一种web端UI组件应用框架系统，包括页面引擎，其特征在于所述系统包括组件设计器、布局设计器，所述组件设计器根据XML文档的仿真部分展现界面，并列出组件的属性、事件；所述布局设计器用于组件在页面上的布局设计，实现HTML页面的界面仿真和属性配置方式的设置；所述组件采用FACADE PATTERN进行封装后仅提供页面引擎需要的公共方法；所述页面引擎驱动整个页面数据加载过程，并控制组件呈现和默认行为。

优选的，所述组件包括可视组件、非可视组件，每一个组件都有一套完整规范的描述文件来描述组件的构成。

优选的，所述web端组件之间通信以适配器的形式或接口的形式进行通信；组件与服务端通讯通过统一的组件通信引擎交互，同时把代码写在标准XML描述文件中，由组件引擎进行动态编译，通过事件进行调用。

优选的，所述组件通信引擎中数据通讯协议使用的Virtual ProxyPattern封装，实现最晚调用后台交互的动作。

优选的，所述公共方法包括设置参数方法、绘制对象方法、设置值方法和取出值方法。

本发明通过引擎统一将组件绘制在HTML页面上，前后台数据交互，而这一切不需要开发者关心，可以提供前后台验证、表单计算、默认值、异常处理等框架功能，具有分类统一的接口，便于开发者快速入门。

本发明为轻量级JavaScript框架体系，并且做到组件分步加载，随需加载，最大化控制网络流量；标准的组件结构以、简单的实现过程和事件侦听，方便程序开发人员使用。组件可插拔，可组合，前后端完全分离，同时组件间也解耦。而且可以任意控制组件粒度，如封装业务组件及后台实现。以此增加复用率。

与现有技术相比，本发明的有益效果为：将各种技术实现细节和调用的结束细节对用户屏蔽，让用户可以通过统一的方式调用这些后台技术；组件不断积累，缩短应用开发周期，兼容各种现有JavaScript组件，可以减少工作量，支持目前主流浏览器核心Webkit、Trident、Gecko、Kestrel；可以运行在Microsoft IE、Mozilla FireFox、Google Chrome、Opera Brower等主流浏览器之上。

附图说明

下面结合附图及实施例对本发明作进一步描述：

图1为本发明实施例web端UI组件应用框架系统的架构图；

图2是本发明实施例web端UI组件应用框架系统的通信流程图。

图3是本发明实施例web端UI组件应用框架系统的数据访问层次图。

图4是本发明实施例web端UI组件应用框架系统中WYSIWYG设计器的结构图。

具体实施方式

以下结合具体实施例对上述方案做进一步说明。应理解，这些实施例是用于说明本发明而不限于限制本发明的范围。实施例中采用的实施条件可以根据具体厂家的条件做进一步调整，未注明的实施条件通常为常规使用的条件。

实施例

如图1～图3所示，该web端UI组件应用框架系统，包括页面引擎、组件设计器、布局设计器，所述组件设计器根据XML文档的仿真部分展现界面，并列出组件的属性、事件；所述布局设计器用于组件在页面上的布局设计，实现HTML页面的界面仿真和属性配置方式的设置；所述组件采用FACADE PATTERN进行封装后仅提供页面引擎需要的公共方法；所述页面引擎驱动整个页面数据加载过程，并控制组件呈现和默认行为。

平台前端UI有以下五大点原则：

封装与集成，可以兼容已有的JS组件，各种类型都可以。虽然兼容，但不依赖，可以轻易剥离这些非依赖组件。通讯与扩展，前端界面是无止境的，当功能不能满足要求的时候，需要做到可随时可以扩展组件，而不影响原有功能。规范与积累，基于平台组件体系标准，一切兼容组件以此为规范。根据规范定义出来的组件才具有可积累的特性。引擎及事件，前端页面引擎根据事件驱动，将后台取数到前台组件呈现、绑定数据、绑定验证、默认值设置和表单计算等功能连接起来。可视化设计，根据标准，围绕核心的前端组件引擎，开发出灵动的前端组件设计器，做到可视化配置化拖拽式的开发前端UI。

封装与集成：

采用了FACADE PATTERN在外围封装，核心任何JS代码实现的组件都可以被包装进来，以页面引擎驱动为基础实现一套稳定的接口，组成了组件复用的体系。

JS代码完全可以在实例化部分全部由原生代码负责实现，最后生成一个JS对象，再映射到FACADE PATTERN暴露出来的属性、方法与事件上。

使用该原理一样可以将JQuery、ExtJS或其他任何JS组件作为核心实现，完整的封装起来，仅仅公开页面引擎需要的公共方法，这些公共方法主要包括：设置参数、绘制对象、设置值、取出值。

因此，这样的设计可以保证集成其他JS组件不更改任何原有代码，在使用时也不会感觉不到他们底层实现究竟有多大差别。

另一方面，为了保证开发者想要访问到被封装起来的原生JS对象，组件封装的时候也特意开放了原生对象访问的属性。

一个简单的对象模型如下：

通讯与扩展

封装的组件仅仅能达到展示功能的能力，需要真正的运行起来需要通过AJAX的方式与后台进行交互，数据通讯协议交互组件是使用的VirtualProxy Pattern进行设计的，保证最晚调用后台交互的动作。

组件需要的数据主要分为3种：行列形式的数据、递归树形的数据、自行组织的复合型数据。

针对以上三种形式的数据，后台提供了对应的3个获取数据的服务，由于是通过AJAX方式索取数据，所以后台只敏感服务名而不对实现方式敏感(不关心是j ava实现或者.net实现)

组件的通讯可以采用同步或者异步AJAX，默认情况下是关闭，根据编写组件的开发人员自行对开关进行控制，在效率与复杂程度之间做平衡。

组件暴露给外部扩展用的方式一般使用暴露事件和暴露属性两种方式。为了让开发人员可以根据项目的不同定制代码，又不想改变组件内部结构的情况下，公开事件便于组件的积累与扩展。

通讯协议主要发生在3个位置：

页面引擎初始化。协议主要包括：默认值翻译段、数据段、验证定义段、Toolbar定义段。

组件数据访问。协议主要包括：目标对象、取值列、过滤条件、当前分页位置、分页大小、父节点、子节点、显示节点、根节点值。

数据提交。目标对象、提交类型、主键信息、数据树形结构及表单值、附加提交数据。

规范与积累

前端组件可分为可视组件(如TREEVIEW，PORTAL等)和非可视组件(如数据访问、数据填充、AJAX、验证器等)。每一个组件都有一套完整规范的描述文件来描述组件的构成，以便组件引擎解释，运行。

组件包括：实例化格式、属性清单、事件清单、功能实现代码、后台通信接口描述配置、后台实现代码、界面仿真部分、代码示例。

数据访问、数据填充、验证等已经作为固有组件负责平台可视化组件行为的驱动，抽象参数配置。这样就提供给开发者一个一致的数据交互接口，形成习惯，如要访问后台数据就必须配置数据访问组件参数。

可视化组件抽象按照以下几个级别进行积累：

平台级，最为通用，参数较多，风格简单；

行业级，具有业务特征，参数较多，风格有行业特征；

公司级，具有公司特征，参数较少，风格独特；

项目级，仅在项目中使用完全不考虑复用，几乎无参数，风格独特。

引擎及事件

原则上组件独立运行与引擎之上，不与系统其他部分发生耦合。

在前端，组件之间通信以适配器的形式或接口的形式进行通信。

与后台通讯通过统一的组件通信引擎与后台交互，可以与后台类对接，同时把代码写在标准描述文件中(XML)，由组件引擎进行动态编译(进行懒加载并缓存)，通过事件进行调用。这样做到轻量级的完整组件模式。

事件是一个OBSERVER PATTERN的实现，而引擎是使用事件最多的地方，在引擎运行的每个阶段都会触发事件，如在构建页面Toolbar时就是通过事件方式进行编程的，引擎不仅允许内置的Toolbar构建，并且通过事件的方式允许用户监听，以便满足项目级修改Toolbar的特殊需求

WYSIWYG可视化设计器

设计器是把所有思想的体现，是围绕标准规范的最终实现。也是用户最直接直观面对的地方。

WYSIWYG设计器提供html页面可视化编辑的功能

结构大致图4所示，为了得到JS组件真实呈现的结果，我们通过隐藏一个浏览器，称之为仿真器，将平台约定的JS组件运行起来，再截取画面得到运行态结果反馈给设计器，这样就可以保证组件在设计器中看到的与真实运行出来的结果基本一致。可能出现变数的在于隐藏的浏览器类型与用户实际使用的浏览器核心是否一致，不一致的情况下会在样式上有细微差别。

为了使仿真器可以真实模拟出JS组件运行结果，仿真器还需要每个组件提供3个基本信息：

1、JS组件代码包括：相关JS代码文件、相关CSS代码文件。

2、JS组件实例化前的个性化配置

3、JS组件仿真环境，即可运行该组件的最简单HTML页面，其中包含：JS与CSS引用、固定实例化代码段、反馈代码，JS组件完成呈现工作后通知仿真器可以进行画面抓取。

JS组件为了设计器可视化设计必须提供以下几个文件：

1)仿真环境文件，design.html；

2)配置文件，config.xml。在设计器的属性对话框中列出属性、事件；

3)图标文件，ico.bmp，显示在平台工具栏中，组件的图标；

4)其他资源文件。

以上文件与组件必要文件(JS相关代码、CSS相关文件)都归类在同一个文件夹下，该文件夹的名称即是组件名称。

配置文件config.xml中配置的内容包括：

1)组件名称与分类(分类会体现在设计器工具栏中，同一组组件都会显示在改组分类的下拉框中)；

2)JS引用与CSS引用，用于辅助页面引擎动态加载JS文件；

3)JS组件属性配置；

4)JS组件事件配置。

基本格式如下：

在使用设计器拖放使用组件时，整个过程如下：

首先会根据config.xml中的配置段，将JsRef与CSSRef中的文件引用写入设计的html页面头部，给JS引擎提供动态加载的依据；根据propery段中默认值，在页面中生成组件所对应的个性化JSON配置代码；将生成好的个性化JSON配置代码与组件仿真环境一起加载到仿真器中，运行等待结果；仿真环境中组件完成呈现后，进行反馈，通知仿真器抓取结果画面；仿真器抓取结果画面，并保存成图片，引用显示到网页上。

拖放组件后，在html页面中产生的代码如下：

组件个性化JSON配置段；页面头部的JS与CSS引用，他们保留在html标签的FixRef标记内，大致如下：<HTMLFixJsRef＝″components/JQDateTime/JQDateTime.js，components/ComboBox/ComboBox.js></HTML>；注册JS页面引擎所需要的Fix.Engine.Map段，其中根据平台标准定义的页面组件分布结构，注册时将会把当前设计的组件ID注册到该结构中去。如果配置了事件，则会产生事件段代码。

组件的数据绑定功能，是将组件与后台字段关联起来的功能，只需要选中某一个组件，双击字段视图中的字段名，即可完成组件绑定。绑定后的配置代码存储在个性化JSON代码中。JS页面引擎会根据以上代码进行组件的加载和实例化。

组件设计器根据XML文档的仿真部分展现界面，并列出属性、事件。可图形化的配置属性，以代码形式编写事件与实例化部分。需要的时候也可以进行后台代码与事件的编写。同时，可以在设计时对已有组件进行扩展。

组件的设计成果是一个标准的XML文件、代码实现文件(可以是多个)、仿真及示例文件、其他资源文件，可以独立剥离出来，以便于其他项目复用。独立运于组件引擎之上。

每个组件在WYSIWYG设计器中，实际上是一段JSON代码

布局设计器，是把组件放置到页面上的布局设计。采用流行的DIV+CSS的设计模式呈现组件。以TABLE定位和绝对定位相结合的方式来约定布局模式。通过组件盒子选择平台已有组件进行以拖拽的方式拉到布局中，可对组件进行属性事件等一系列的设置。以接口或适配器的形式进行组件间的通信配置。

布局的设计成果是一个标准的HTML文件，可以独立运行，可以在其他标准的HTML编辑器上编辑，如VS，ECLIPSE，DREAMWEAVER，FRANTEPAGE等。

JsFramework(JS框架)

JavaScript分步加载机制，组件实现代码随需加载；前台验证框架体系，支持前台多种方式触发；仅前台验证；与后台交互验证；组件引擎机制，驱动整个页面数据加载过程，并控制组件呈现和默认行为；异常处理机制，针对设计时与运行时的异常提示功能；国际化体系，对出错信息、验证信息等平台内部信息的国际化支持；表单计算机制，可以进行表单上的数字四则运算和常用公式运算；可视化可编程的明细表

JS组件封装特性，将现有JavaScript功能代码封装成组件的标准

数据访问协议

组件组合特性，将封装好的组件与另一个封装好的组件进行组合的模式

组件可配置特性

JS组件设计器

HTML页面布局设计器：界面仿真、属性配置方式。

显然，本领域的技术人员应该明白，上述的本发明的各模块或各步骤可以用通用的计算装置来实现，它们可以集中在单个的计算装置上，或者分布在多个计算装置所组成的网络上，可选地，它们可以用计算装置可执行的程序代码来实现，从而，可以将它们存储在存储装置中由计算装置来执行，或者将它们分别制作成各个集成电路模块，或者将它们中的多个模块或步骤制作成单个集成电路模块来实现。这样，本发明不限制于任何特定的硬件和软件结合。

上述实例只为说明本发明的技术构思及特点，其目的在于让熟悉此项技术的人是能够了解本发明的内容并据以实施，并不能以此限制本发明的保护范围。凡根据本发明精神实质所做的等效变换或修饰，都应涵盖在本发明的保护范围之内。

Claims (5)

1. 一种web 端UI组件应用框架系统，包括页面引擎，其特征在于所述系统包括组件设计器、布局设计器，所述组件设计器根据XML文档的仿真部分展现界面，并列出组件的属性、事件；所述布局设计器用于组件在页面上的布局设计，实现HTML页面的界面仿真和属性配置方式的设置；所述组件采用FACADE PATTERN进行封装后仅提供页面引擎需要的公共方法；所述页面引擎驱动整个页面数据加载过程，并控制组件呈现和默认行为。

2. 根据权利要求1所述的web 端UI组件应用框架系统，其特征在于所述组件包括可视组件、非可视组件，每一个组件都有一套完整规范的描述文件来描述组件的构成。

3. 根据权利要求1所述的web 端UI组件应用框架系统，其特征在于所述web端组件之间通信以适配器的形式或接口的形式进行通信；组件与服务端通讯通过统一的组件通信引擎交互，同时把代码写在标准XML描述文件中，由组件引擎进行动态编译，通过事件进行调用。

4. 根据权利要求3所述的web 端UI组件应用框架系统，其特征在于所述组件通信引擎中数据通讯协议使用的Virtual Proxy Pattern封装，实现最晚调用后台交互的动作。

5. 根据权利要求1所述的web 端UI组件应用框架系统，其特征在于所述公共方法包括设置参数方法、绘制对象方法、设置值方法和取出值方法。

Images