一种可快速模块化配置的web界面构建方法
【专利摘要】本发明公开了一种可快速模块化配置的WEB界面构建方法。该方法以Tag技术构建可重用的界面元素，采用虚拟事件的方式，利用事件驱动机制发送和监听事件，使产品Web界面快速构建，并可以使不同Web界面间快速交互。与现有技术相比，本发明的可快速模块化配置的WEB界面构建方法可快速实现内容丰富、业务逻辑复杂、交互频繁的Web界面构建、重组、交互，具有很好的推广应用价值。
【专利说明】一种可快速模块化配置的WEB界面构建方法
[0001]
【技术领域】
[0002]本发明涉及一种Web界面构建方法，具体地说是一种可快速模块化配置的WEB界面构建方法。
【背景技术】
[0003]随着internet的迅速发展,越来越多的工作流程,商务交易，教育、培训、会议和讲座，以及个人消费娱乐都被转移到WEB上来。与此相对应的是交互操作的复杂性越来越高，Web界面展现和交互也越来越丰富。
[0004]在多种情况下，各种元素往往需要进行互动，但是，由于其中有些元素归属于不同的界面区块，因此，直接互相操作会造成较高的耦合，后续维护成本也很高，并且当逻辑关系较复杂时容易出现程序错误。
【发明内容】
[0005]本发明的技术任务是针对上述现有技术的不足，提供一种结合Java Tag技术，基于Tag和Javascript EDA (事件驱动架构)的可快速模块化配置的WEB界面构建方法。
[0006]本发明的技术任务是按以下方式实现的:一种可快速模块化配置的WEB界面构建方法，其特点是以Tag技术构建可重用的界面元素，采用虚拟事件的方式，利用事件驱动机制发送和监听事件，使产品Web界面快速构建，并可以使不同Web界面间快速交互。其中Tag提供模块化元素，EDA提供交互解耦，支持产品界面快速重组定制，通过控制模块代码可直接增减界面组件及改变其特性。
[0007]上述方法的具体实现步骤为:
A、设计各系统各Web界面需要的模块化元素，并以Tag的形式表示；
B、不同的Web界面依据需要引用相应的Tag标签；
C、各Web界面设立事件广播通道，所述广播通道用于当界面元素放生变化时向广播站发送消息；
D、各Web界面设立事件监听通道，所述监听通道用于监听广播站广播的消息，以促使界面元素做出相应改变。
[0008]为了更好的实现上述方法，还可以设置广播站，所述广播站用于接收所有界面元素发生变化时发送的消息，并把这些消息全部广播出去。
[0009]上述方法中不同元素之间的交互方法为:
当一个元素发生改变时，委托事件代理触发一个虚拟事件，事件中包含这次改变的类型、名称、变量信息，触发事件后结束该元素的处理程序；注册其他界面元素监听事件代理，当上述元素触发的虚拟事件发生时，其他界面元素各自作出相应改变。
[0010]例如，假设某界面元素A发生改变时，需要若干其他界面元素B1、B2等作出相应改变:
а.A发生改变时，委托事件代理触发一个虚拟的事件，事件中包含这次改变的类型、名称、变量等信息。触发事件后结束A的处理程序。
[0011]b.注册其他界面元素监听事件代理，当A触发的虚拟事件发生时，这些界面元素各自做出相应改变。
[0012]本发明的可快速模块化配置的WEB界面构建方法与现有技术相比具有以下突出的有益效果:
(一)可快速构建内容丰富的不同Web界面；
(二)降低程序代码的耦合度，提高代码的重复利用度，但是又能使相关Web界面快速交互；
(三)降低逻辑复杂的程序代码的错误率，减低维护成本。
【专利附图】
【附图说明】
[0013]附图1是本发明方法中Web界面快速重组与交互的流程图，
其中，
1.Tagl、Tag2、Tag3是构成Web界面的元素模块；
2.Web界面A、Web界面Bl、Web界面B2、Web界面B3是产品不同的Web界面；
3.元素Al、元素A2是构成Web界面A的模块化元素；
4.元素BI是构成Web界面BI的模块化元素之一；
5.元素B2是构成Web界面B2的模块化元素之一；
б.元素B3是构成Web界面B3的模块化元素之一。
【具体实施方式】
[0014]参照说明书附图以具体实施例对本发明的可快速模块化配置的WEB界面构建方法作以下详细地说明。
[0015]实施例:
本发明可快速模块化配置的WEB界面构建方法的实现包括以下步骤:
通过Tag实现界面元素模块化，不同的Web界面引用不同的界面元素实现Web界面的快速重组与交互。
[0016]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.1aunchevt(〃funcOpenRequested〃，iconsrc);
$eh_mb.1aunchevt(〃menubuttonclick〃，mf—nav);
$eh_md.1aunchevt(〃userChangedDate〃，〃wdate〃);
4.建立监听通道，监听虚拟事件，并快速响应
$eh_mf.catchevt(〃funcOpenRequested〃，funct1n (e) {
$ ("#url").show ();
$ (〃#mbody_funcpub〃).show ();
var funcName = $ (〃#mainfunc_funcName〃).val();
var funclcon = $(〃#mainfunc_funcIcon〃).val();
var funcType = $ (〃#mainfunc_funcType〃).val();
})；o
[0017]如附图所示，Web界面快速重组与交互的流程如下:
当Web界面A中的元素Al、元素A2发生改变时，向广播站发送改变消息1、消息2 ;广播站再把消息1、消息2广播出去；Web界面Bl、Web界面B2、Web界面3同时监听广播站发出的消息，当Web界面BI监听到与自己相关的消息1、消息2时，界面元素BI依据消息内容做出相应的快速响应，同时Web界面B2、Web界面B3也分别监听到与自己相关的消息1、消息2，界面元素B2、界面元素B3依据消息内容做出相应的快速响应。
【权利要求】
1.一种可快速模块化配置的WEB界面构建方法，其特征在于:以Tag技术构建可重用的界面元素，采用虚拟事件的方式，利用事件驱动机制发送和监听事件，使产品Web界面快速构建，并可以使不同Web界面间快速交互。
2.根据权利要求1所述的可快速模块化配置的WEB界面构建方法，其特征在于，该方法的具体实现步骤为: A、设计各系统各Web界面需要的模块化元素，并以Tag的形式表示； B、不同的Web界面依据需要引用相应的Tag标签； C、各Web界面设立事件广播通道，所述广播通道用于当界面元素放生变化时向广播站发送消息； D、各Web界面设立事件监听通道，所述监听通道用于监听广播站广播的消息，以促使界面元素发出相应响应。
3.根据权利要求2所述的可快速模块化配置的WEB界面构建方法，其特征在于，设置有广播站，所述广播站用于接收所有界面元素发生变化时发送的消息，并把这些消息全部广播出去。
4.根据权利要求2所述的可快速模块化配置的WEB界面构建方法，其特征在于，具体交互方法为: 当一个元素发生改变时，委托事件代理触发一个虚拟事件，事件中包含这次改变的类型、名称、变量信息，触发事件后结束该元素的处理程序； 注册其他界面元素监听事件代理，当上述元素触发的虚拟事件发生时，其他界面元素各自做出相应改变。
【文档编号】G06F9/44GK104133686SQ201410382849
【公开日】2014年11月5日 申请日期:2014年8月6日 优先权日:2014年8月6日
【发明者】张壮 申请人:浪潮通用软件有限公司