CN103605516B - 柔性Web展现框架模型架构设计方法 - Google Patents

Abstract

本发明公开了一种柔性Web展现框架模型架构设计方法，其通过构造符合AJAX+MVC模式的框架模型，定义了脚本组件模型并通过脚本策略适配器的驱动及事件机制，较好解决了Web软件开发的柔性不足问题；对界面交互展现组件进行面向对象的封装，支持继承和多态，提供了展现组件的按需复用能力，增强了框架可扩展性和可维护性；定义了模型、视图和控制器合理分层的Web应用单元，并通过内置的资源加载规则，缩短了资源加载时间。通过OSGI框架的模块扩展机制实现了Web组件的在线扩展和维护能力。

Description

柔性Web展现框架模型架构设计方法

技术领域

本发明涉及一种用于基于JavaScript语言的柔性Web展现框架模型架构设计方法，属于信息技术领域。

背景技术

柔性展现框架是一个比较新的领域。软件柔性是指软件行为能符合用户预期，动态适应软件环境的变化。例如，对于长生命周期的大规模软件系统，软件的环境是动态变化的，它有可能超出开发阶段的预期，需要软件具备适应能力；对于开发阶段未预期的环境及停机维护代价高的系统，这种环境适应能力更需要在线调整，本文主要关注于Web在线应用开发和运行时的柔性，这种柔性体现在Web应用可预期的一些能力，包括兼容不同浏览器，界面元素展现主题的在线动态可配置，界面元素位置的在线动态可配置，本地化和国际化的动态可配置，Web资源的按需加载能力，界面视图及交互的可拖拽设计及配置能力。以及不可预期的外部环境变化时的动态调整能力、组件动态扩展能力等。

AJAX（Asynchronous JavaScript and XML）技术的运用使得在浏览器与服务端交互时，客户端的AJAX请求代替了页面刷新请求，不会打断用户思路，保障其更加流畅的完成业务操作，增强了用户体验。

但是，大量客户端脚本的应用，代码的可维护性、可扩展性、各种主流浏览器的兼容性成为了新的挑战，如何在保证用户体验的同时，增强代码的可维护性和扩展性，屏蔽主流浏览器的差异，亟需一种忽略脚本语言本身的差异性，让界面设计人员专注于界面设计、让开发人员专注于业务逻辑编码、让系统维护人员更方便升级维护的柔性展现框架。

发明内容

有鉴于此，本发明的目的在于给出一种柔性Web展现框架模型架构设计方法，有效提升基于Web的信息系统的在不同浏览器访问时的统一用户体验，提高界面交互能力，增强Web页面中JavaScript脚本的组织和管理能力，提供可视化界面定义、设计和代码生成能力，提供管理模块的脚本编译和优化功能以加速脚本的传输和展现能力，增强Web模块的自适应性和可扩展性等柔性功能，使得Web信息系统的二次开发效率和最终产品具备良好的柔性。

为实现上述目的，本发明提供了一种柔性Web展现框架模型架构设计方法，其特征在于，其包括以下步骤：

1）建立Web展现框架模型的基本层次结构，所述Web展现框架模型包括四个基本层次结构：基础层、工具层、控件层、视图层；

基础层包括JavaScript语言扩展、JavaScript运行时扩展、国际化以及主题、上下文组件、行为组件、文档节点选择器组件、AJAX组件、动画效果等基础组件。工具层包括通用工具库、安全机制和REST服务(Representational State Transfer表述性状态转移)客户端。控件层包括基础控件、编辑器控件、容器控件、数据控件以及数据实体容器。视图层包括视图、视图控制器、视图容器。

2）在Web展现框架模型的基础上增加柔性结构特征。即在基础展现框架的上层增加应用上下文组件Weblet小程序，实现Weblet小程序的注册、引用、加载、运行、销毁等完整的脚本生命周期管理机制。Weblet小程序是Web应用的最小逻辑单元，它将页面文件、脚本文件和资源文件按照一定的目录结构管理，其中脚本文件以MVC2（模型-视图-控制器）模型进行组织，每个独立的页面文件都是一个视图文件和一个视图控制器文件的组合，视图文件中包含了对数据模型的定义或引用。Weblet小程序允许多级目录嵌套，提供同模块的Weblet和跨模块的Weblet之间的引用功能。Weblet的结构示例如下:

-WebletName

-resources

Themes --当前上下文组件主题

Aero --主题名

Images --主题图片

controls.css --主题样式

Grey

Css --组件通用样式设置

Locales --本地化语言配置

zh_CN

-scripts

-controls

CustomControl.js --自定义控件

-views

DetailView.js

DetailViewController.js

MainView.js --主视图

MainViewController.js --主视图控制器

weblet.js --引用、注册、启动Weblet

展现组件中的样式通过主题定义进行管理，在全局配置文件中修改主题配置，展现组件的文字的显示是通过本地化文件以及本地化API接口实现国际化文字显示功能。

3）定义策略连接器，利用不同的组合策略形成不同所述Weblet小程序间的组合级上下文，其中主所述Weblet小程序负责监听和执行组合上下文中其他所述Weblet小程序之间的交互关系；

4）在步骤1）中基础层的JavaScript语言扩展提供了面向对象的编程能力。在此基础上，定义了展现组件的扩展实现规范。主要包含了命名空间，类，类的继承、多态，事件的定义和传播机制等的书写规范，如下所示：

package.subpackage.CustomClass = function(){ -- 包名.子包名.类名

var me = $extend(MXComponent); -- 继承自基础组件

me.on(eventname) = null; -- 类的行为的关联事件

me._protectedKey = null; -- 类的保护变量

var _privateKey = null; -- 类的私有变量

var base = {};

base.init = me.init;

me.init = function() --类的多态

{

base.init(); --父类的初始化

_initConrols(); -- 当前类的初始化

}

me.customMethod = function(){ -- 类的公有方法

var eventParam = {cancel: false} – 事件参数

me.trigger(eventname, eventParam); -- 触发事件

};

return me.endOfClass(arguments);

} ;

5)给所述Web展现组件提供在线扩展能力, 利用OSGI模块机制提供的模块的装载、卸载、启动、停止模块及动态扩展运行时的模块的扩展模块机制，实现所述Web展现组件的在线扩展能力；基于OSGI(Open Service Gateway Initiative:技术是面向Java的动态模型架构)的扩展模块提供展现框架的在线扩展能力。OSGI模块机制提供了模块的装载、卸载、启动、停止模块等运行时功能，并提供了扩展模块机制，可以动态扩展运行时的模块，基于这些功能，使用步骤4）中描述的面向对象的封装、继承、多态机制，实现展现框架的在线扩展能力。

6）定义界面资源描述规范，可视化界面设计器基于该规范对用户设计的界面进行描述和编译，生成可在Web上直接运行的代码。界面资源描述规范以通用扩展标记语言XML格式定义了界面资源组织结构，其中包含视图、数据源、权限、资源和国际化配置等描述，以及界面资源的属性、事件和行为。如下所示：

<xml version="1.0" encoding="UTF-8">

<ui:Application xmlns:ui="http://www.sgcc.com.cn/sguap/ui" title="界面示例">

<ui:views>

<ui:View uuid="" id="mainView">

<ui:component uuid="" id="compid" alias="" width="" height=""datasource="">

</ui:component>

</ui:View>

</ui:views>

<ui:datasources>

<ui:datasource uuid="" desc="" baseUrl="" primaryKey="id">

<ui:action name="" lable="" />

<ui:meta>

<ui:property name="" label="" dataType="" editor="" />

</ui:meta>

</ui:datasource>

</ui:datasources>

<ui:permissions rootIscId="" desc="界面权限标识根节点">

<ui:permission uuid="" desc="" iscId="" ControlAliases="" />

</ui:permissions>

<ui:resources>

<ui:resource uuid="" desc="资源描述" extName="" type="" embedded="false" url="" />

</ui:resources>

<ui:languages>

<ui:lang locale="" default="true">

<ui:locale key="" value="" />

</ui:lang>

</ui:languages>

</ui:Application>

即规范中以Web应用模块为根，视图为主要界面可视区域，对视图中的展现组件进行自描述和关联描述，其中涉及到展现组件相关的权限描述、界面静态资源描述、国际化配置描述。资源对象中对每种元素都定义了各自的描述属性，除了唯一标识、资源描述等基本属性外，其它描述属性相对独立。

7）实现可视化界面设计器，将Web展现组件集成到设计器的工具箱中，以可视化拖拽配置的形式提供Web展现组件的可视化设计及代码生成能力，生成的代码符合Weblet小程序结构。以MVC2模型将Weblet小程序分为视图、视图控制器、模型三部分，实现界面设计人员、业务逻辑开发人员、应用模型设计人员的合理分工、并行开发，方便二次开发人员快速构建一个Web应用。所述可视化界面设计器基于所述界面资源描述规范对用户设计的界面视图进行描述和编译，生成可在Web上直接运行代码的界面；

8）提供所述Weblet小程序的脚本文件和资源文件的模块级编译能力，在发布应用模块时，将每个所述Weblet小程序中的多个脚本文件优化编译成一个独立的脚本文件，将每个所述Weblet小程序中的多个样式文件编译成一个独立的样式文件，以减少资源的加载量。

优选的，所述Web展现框架模型包括基础层，所述基础层包括JavaScript语言扩展、JavaScript运行时扩展、国际化以及主题、文档节点选择器组件、AJAX组件、动画效果组件；所述工具层包括通用工具库、安全机制和REST服务客户端；所述控件层包括容器组件、视图组件、布局组件、常用工具类、编辑器组件、异常处理机制，本地化和国际化处理机制；所述视图层包括视图、视图控制器、视图容器。

优选的，所述Weblet小程序将页面文件、脚本文件和资源文件按照设定的目录结构管理，其中脚本文件以MVC2模型进行组织，每个独立的页面文件都是一个视图文件和一个视图控制器文件的组合，视图文件中包含了对数据模型的定义或引用。

优选的，支持不同的所述Weblet小程序组合策略形成不同所述Weblet小程序间的组合级上下文，支持所述Weblet小程序之间的依赖交互，其中主所述Weblet小程序负责监听和执行组合上下文中其他所述Weblet小程序之间的交互逻辑。

优选的，其还包括一套独立的JavaScript命名空间，类，类的继承、多态，事件的定义和传播机制的书写规范。

优选的，所述可视化界面设计器包括工具箱，所述工具箱中集成了所述Web展现框架模型中的展现组件；所述可视化界面设计器支持鼠标拖拽生成界面视图，支持对通过鼠标在界面视图中进行布局定义、支持数据模型定义、支持Web展现组件的属性定义、支持数据模型和Web展现组件的元数据匹配，支持手工修改界面描述规范的方式实现界面视图的设计，每个界面视图包括可修改的界面配置文件以及对应的视图控制器文件。

优选的，其还包括以下步骤：

编译优化应用模块中每个所述Weblet小程序的脚本和样式；发布应用模块时，在Web应用访问时可直接访问编译后生成的所述Weblet小程序的编译后脚本和样式文件。

附图说明

下面结合附图和具体实施方式对本发明作进一步详细的说明。

图1是本发明的柔性Web展现框架模型架构的框架图；

图2是发明实施例中Web组件自适应变化的原理图；

图3是发明实施例中柔性Web展现框架模型架构的设计及实现方法的工作流程图。

具体实施方式

为了使本技术领域的人员更好地理解本发明方案，并使本发明的上述目的、特征和优点能够更加明显易懂，下面结合实施例及实施例附图对本发明作进一步详细的说明。

如图1至图3所示，本发明的具体实施流程为：

1、Web展现框架模型实现，提供组件自身的柔性。

首先实现JavaScript的面向对象机制，并JavaScript原生的对象类型进行扩展。其次，对组件进行分类划分命名空间 ，避免组件命名冲突等问题。设计实现主题样式原型，为主题定义提供依据。

然后，实现基础的上下文组件、行为组件、文档节点选择器组件、AJAX组件、动画效果等基础组件。

在此基础上，进行组件应用程序接口设计，定义每个展现组件的方法、属性、事件，实现容器组件、视图组件、布局组件、常用工具类、编辑器组件、异常处理组件、数据处理组件。由于数据处理组件要和服务端交互并要对业务数据进行处理展现，这里需要规约好数据处理组件解析的数据格式和结构，并对主流数据格式进行柔性适配处理。

然后，实现本地化和国际化机制以满足国际化展现需求，实现特征检测机制以适应跨浏览器需求。

定义展现组件和主题的扩展实现规范，主要包含了命名空间，类，类的继承、多态，事件的定义和传播机制、CSS扩展的机制等书写规范。

2、开发时柔性实现，实现快速配置开发,灵活适应需求变更。

首先，在Web展现框架的基础上增加柔性开发特征。实现应用上下文组件Weblet小程序，提供Weblet的注册、引用、加载、启动、销毁等完整的脚本生命周期管理机制。定义策略连接器。在Weblet的weblet.js文件中对其它模块的Weblet或当前模块的Weblet进行按需加载，如下所示。

$import("demmos.views.MainViewController");

mx.weblets.WebletManager.register({

id: "demos",

name: "应用名称",

requires: ["amod/moduleref" ,"attrtest","testtpt/proj", "utils"],

bundleName: "appmod",

onload: function(e)

{

},

onstart: function(e)

{

var mvc = new demos.views.MainViewController();

e.context.rootViewPort.setViewController(mvc);

}

});

上面伪码中的requires属性描述了按需加载的Weblet信息，其中“模块名/Weblet名”表示跨模块的Weblet引用，“Weblet名”表示当前模块的Weblet引用。描述完当前Weblet所需的Weblet信息后，在启动事件中对自身提供的主功能视图控制器进行注册。

接着，定义界面描述规范，将界面组件及权限定义等以XML 文档的格式进行描述。

然后，实现可视化界面设计器，将Web展现框架中的组件以工具箱的形式集成在界面设计器中，用户拖拽生成的界面视图使用界面描述规范进行描述定义，并可以手工修改拖拽生成的视图配置文件进行界面设计，基于界面描述规范编译生成Weblet小程序代码结构，界面视图设计的调整仅存在于视图文件的描述中，不会影响控制器的逻辑和业务模型，实现开发时的柔性。

3、运行时柔性实现，基于OSGI的模块管理机制和Web展现组件的扩展规范，实现运行时动态组件扩展。

发布应用模块时，编译优化模块中每个Weblet的脚本和样式，在Web应用访问时直接访问编译后的脚本和样式文件。发布后生成最小化可运行的OSGI模块。

在线维护应用模块。在扩展模块中对被扩展模块中所提供的组件进行扩展和覆盖。并通过OSGI提供的模块管理机制，在应用模块运行期间实现原有模块动态更新和加载功能。Web组件自适应变化的原理如图2 所示，当运行时修改模块配置后，用户再次刷新页面时，上下文组件会自动获取最新的配置，并将配置信息通过Weblet的策略连接器传递给展现框架的行为组件，行为组件执行配置更改操作并以事件的形式通知展现组件以最新的配置要求进行展现。

4、实现后的柔性Web展现框架模型如图1所示。

以上所述，仅为本发明的具体实施方式。本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到的变化或替换，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应该以权利要求所界定的保护范围为准。

Claims (5)

1.一种柔性Web展现框架模型架构设计方法，其特征在于，其包括以下步骤：

1）建立Web展现框架模型的基本层次结构，所述Web展现框架模型包括四个基本层次结构：基础层、工具层、控件层、视图层；所述基础层包括JavaScript语言扩展、JavaScript运行时扩展、国际化以及主题、文档节点选择器组件、AJAX组件、动画效果组件；所述工具层包括通用工具库、安全机制和REST服务客户端；所述控件层包括容器组件、视图组件、布局组件、常用工具类、编辑器组件、异常处理机制，本地化和国际化处理机制；所述视图层包括视图、视图控制器、视图容器；

2）在所述Web展现框架模型的上层增加应用上下文组件的Weblet小程序，并实现所述Weblet小程序的注册、引用、加载、运行、销毁的脚本生命周期管理，一个所述Weblet小程序中能引用和组合多个Weblet小程序；

3）定义策略连接器，利用不同的组合策略形成不同所述Weblet小程序间的组合上下文，其中主所述Weblet小程序负责监听和执行组合上下文中其他所述Weblet小程序之间的交互逻辑；

4）定义Web展现组件的扩展实现规范，包括：命名空间，类，类的继承、多态，事件的定义和传播机制的书写规范；给所述Web展现框架模型中基础层的JavaScript语言扩展增加面向对象的编程能力；

5）给所述Web展现框架模型提供在线扩展能力, 利用OSGI模块机制提供的模块的装载、卸载、启动、停止模块及动态扩展运行时的模块的扩展模块机制，实现所述Web展现组件的在线扩展能力；

6）定义界面资源描述规范，所述界面资源描述规范以通用扩展标记语言XML格式定义界面资源组织结构，其中包含视图、数据源、权限、资源和国际化配置，以及界面资源的属性、事件和行为；

7）实现可视化界面设计器，所述可视化界面设计器提供了Web展现组件的可视化拖拽设计功能，提供了基于所述界面资源描述规范对用户设计的界面视图进行描述和编译功能，并且可生成在Web上直接运行预览的界面；

8）对所述Weblet小程序的脚本文件和资源文件的模块级编译能力，在发布应用模块时，将每个所述Weblet小程序中的多个脚本文件优化编译成一个独立的脚本文件，将每个所述Weblet小程序中的多个样式文件编译成一个独立的样式文件，以减少资源的加载量。

2.根据权利要求1所述的方法，其特征在于，所述Weblet小程序将页面文件、脚本文件和资源文件按照设定的目录结构管理，其中脚本文件以MVC2模型进行组织，每个独立的页面文件都是一个视图文件和一个视图控制器文件的组合，视图文件中包含了对数据模型的定义或引用。

3.根据权利要求1所述的方法，其特征在于，支持不同的所述Weblet小程序组合策略形成不同所述Weblet小程序间的组合上下文，支持所述Weblet小程序之间的依赖交互，其中主所述Weblet小程序负责监听和执行组合上下文中其他所述Weblet小程序之间的交互逻辑。

4.根据权利要求1所述的方法，其特征在于，所述可视化界面设计器包括工具箱，所述工具箱中集成了所述Web展现框架模型中的展现组件；所述可视化界面设计器支持鼠标拖拽生成界面视图，支持通过鼠标在界面视图中进行布局定义、支持数据模型定义、支持Web展现组件的属性定义、支持数据模型和Web展现组件的元数据匹配，支持手工修改界面描述规范的方式实现界面视图的设计，每个界面视图包括可修改的界面配置文件以及对应的视图控制器文件。

5.根据权利要求1所述的方法，其特征在于，其还包括以下步骤：

编译优化应用模块中每个所述Weblet小程序的脚本和样式；发布应用模块时，在Web应用访问时可直接访问编译后生成的所述Weblet小程序的编译后脚本和样式文件。