CN104133686B

CN104133686B - 一种可快速模块化配置的web界面构建方法

Info

Publication number: CN104133686B
Application number: CN201410382849.XA
Authority: CN
Inventors: 张壮
Original assignee: Inspur General Software Co Ltd
Current assignee: Inspur General Software Co Ltd
Priority date: 2014-08-06
Filing date: 2014-08-06
Publication date: 2017-06-27
Anticipated expiration: 2034-08-06
Also published as: CN104133686A

Abstract

本发明公开了一种可快速模块化配置的WEB界面构建方法。该方法以Tag技术构建可重用的界面元素，采用虚拟事件的方式，利用事件驱动机制发送和监听事件，使产品Web界面快速构建，并可以使不同Web界面间快速交互。与现有技术相比，本发明的可快速模块化配置的WEB界面构建方法可快速实现内容丰富、业务逻辑复杂、交互频繁的Web界面构建、重组、交互，具有很好的推广应用价值。

Description

一种可快速模块化配置的WEB界面构建方法

技术领域

本发明涉及一种Web界面构建方法，具体地说是一种可快速模块化配置的WEB界面构建方法。

背景技术

随着internet的迅速发展，越来越多的工作流程，商务交易，教育、培训、会议和讲座，以及个人消费娱乐都被转移到WEB上来。与此相对应的是交互操作的复杂性越来越高，Web界面展现和交互也越来越丰富。

在多种情况下，各种元素往往需要进行互动，但是，由于其中有些元素归属于不同的界面区块，因此，直接互相操作会造成较高的耦合，后续维护成本也很高，并且当逻辑关系较复杂时容易出现程序错误。

发明内容

本发明的技术任务是针对上述现有技术的不足，提供一种结合Java Tag技术，基于Tag和Javascript EDA（事件驱动架构）的可快速模块化配置的WEB界面构建方法。

本发明的技术任务是按以下方式实现的：一种可快速模块化配置的WEB界面构建方法，其特点是以Tag技术构建可重用的界面元素，采用虚拟事件的方式，利用事件驱动机制发送和监听事件，使产品Web界面快速构建，并可以使不同Web界面间快速交互。其中Tag提供模块化元素，EDA提供交互解耦，支持产品界面快速重组定制，通过控制模块代码可直接增减界面组件及改变其特性。

上述方法的具体实现步骤为：

A、设计各系统各Web界面需要的模块化元素，并以Tag的形式表示；

B、不同的Web界面依据需要引用相应的Tag标签；

C、各Web界面设立事件广播通道，所述广播通道用于当界面元素放生变化时向广播站发送消息；

D、各Web界面设立事件监听通道，所述监听通道用于监听广播站广播的消息，以促使界面元素做出相应改变。

为了更好的实现上述方法，还可以设置广播站，所述广播站用于接收所有界面元素发生变化时发送的消息，并把这些消息全部广播出去。

上述方法中不同元素之间的交互方法为：

当一个元素发生改变时，委托事件代理触发一个虚拟事件，事件中包含这次改变的类型、名称、变量信息，触发事件后结束该元素的处理程序；注册其他界面元素监听事件代理，当上述元素触发的虚拟事件发生时，其他界面元素各自作出相应改变。

例如，假设某界面元素A发生改变时，需要若干其他界面元素B1、B2等作出相应改变：

a．A发生改变时，委托事件代理触发一个虚拟的事件，事件中包含这次改变的类型、名称、变量等信息。触发事件后结束A的处理程序。

b．注册其他界面元素监听事件代理，当A触发的虚拟事件发生时，这些界面元素各自做出相应改变。

本发明的可快速模块化配置的WEB界面构建方法与现有技术相比具有以下突出的有益效果：

（一）可快速构建内容丰富的不同Web界面；

（二）降低程序代码的耦合度，提高代码的重复利用度，但是又能使相关Web界面快速交互；

（三）降低逻辑复杂的程序代码的错误率，减低维护成本。

附图说明

附图1是本发明方法中Web界面快速重组与交互的流程图，

其中，

1.Tag1、Tag2、Tag3 是构成Web界面的元素模块；

2.Web界面A、Web界面B1、Web界面B2、Web界面B3是产品不同的Web界面；

3.元素A1、元素A2是构成Web界面A的模块化元素；

4.元素B1是构成Web界面B1的模块化元素之一；

5.元素B2是构成Web界面B2的模块化元素之一；

6.元素B3是构成Web界面B3的模块化元素之一。

具体实施方式

参照说明书附图以具体实施例对本发明的可快速模块化配置的WEB界面构建方法作以下详细地说明。

实施例：

本发明可快速模块化配置的WEB界面构建方法的实现包括以下步骤：

通过Tag实现界面元素模块化，不同的Web界面引用不同的界面元素实现Web界面的快速重组与交互。

1.创建Tag标签

Funcpub.tag

lsmenupanels.tag

favpanel.tag

searchpanel.tag

topfloatbar.tag

2.Web界面引入Tag

<mainbody:funcpub />

<mainbody:lsmenupanels />

<mainbody:favpanel />

<mainbody:searchpanel />

<mainbody:topfloatbar />

3.建立广播通道，发送消息

$eh_mf.launchevt("funcOpenRequested",iconsrc);

$eh_mb.launchevt("menubuttonclick",mf_nav);

$eh_md.launchevt("userChangedDate","wdate");

4.建立监听通道，监听虚拟事件，并快速响应

$eh_mf.catchevt("funcOpenRequested",function(e){

$("#url").show();

$("#mbody_funcpub").show();

var funcName = $("#mainfunc_funcName").val();

var funcIcon = $("#mainfunc_funcIcon").val();

var funcType = $("#mainfunc_funcType").val();

});。

如附图所示，Web界面快速重组与交互的流程如下：

当Web界面A中的元素A1、元素A2发生改变时，向广播站发送改变消息1、消息2；广播站再把消息1、消息2广播出去；Web界面B1、Web界面B2、Web界面3同时监听广播站发出的消息，当Web界面B1监听到与自己相关的消息1、消息2时，界面元素B1依据消息内容做出相应的快速响应，同时Web界面B2、Web界面B3也分别监听到与自己相关的消息1、消息2，界面元素B2、界面元素B3依据消息内容做出相应的快速响应。

Claims

1.一种可快速模块化配置的WEB界面构建方法，其特征在于：以Tag技术构建可重用的界面元素，采用虚拟事件的方式，利用事件驱动机制发送和监听事件，使产品Web界面快速构建，并可以使不同Web界面间快速交互，具体实现步骤为：

B、不同的Web界面依据需要引用相应的Tag标签；

C、各Web界面设立事件广播通道，所述广播通道用于当界面元素发生变化时向广播站发送消息；

D、各Web界面设立事件监听通道，所述监听通道用于监听广播站广播的消息，以促使界面元素发出相应响应。

2.根据权利要求1所述的可快速模块化配置的WEB界面构建方法，其特征在于，设置有广播站，所述广播站用于接收所有界面元素发生变化时发送的消息，并把这些消息全部广播出去。

3.根据权利要求1所述的可快速模块化配置的WEB界面构建方法，其特征在于，具体交互方法为：

当一个元素发生改变时，委托事件代理触发一个虚拟事件，事件中包含这次改变的类型、名称、变量信息，触发事件后结束该元素的处理程序；

注册其他界面元素监听事件代理，当上述元素触发的虚拟事件发生时，其他界面元素各自做出相应改变。