CN104133686B - 一种可快速模块化配置的web界面构建方法 - Google Patents
一种可快速模块化配置的web界面构建方法 Download PDFInfo
- Publication number
- CN104133686B CN104133686B CN201410382849.XA CN201410382849A CN104133686B CN 104133686 B CN104133686 B CN 104133686B CN 201410382849 A CN201410382849 A CN 201410382849A CN 104133686 B CN104133686 B CN 104133686B
- Authority
- CN
- China
- Prior art keywords
- event
- interface
- web interface
- web
- elements
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
- 238000010276 construction Methods 0.000 title claims abstract description 13
- 238000000034 method Methods 0.000 claims abstract description 10
- 230000003993 interaction Effects 0.000 claims abstract description 8
- 230000007246 mechanism Effects 0.000 claims abstract description 3
- 238000012544 monitoring process Methods 0.000 claims description 8
- 230000008859 change Effects 0.000 claims description 7
- 230000001960 triggered effect Effects 0.000 claims description 5
- 238000005516 engineering process Methods 0.000 claims description 3
- 230000004044 response Effects 0.000 claims description 3
- KZSNJWFQEVHDMF-UHFFFAOYSA-M valinate Chemical compound CC(C)C(N)C([O-])=O KZSNJWFQEVHDMF-UHFFFAOYSA-M 0.000 description 3
- 230000008878 coupling Effects 0.000 description 2
- 238000010168 coupling process Methods 0.000 description 2
- 238000005859 coupling reaction Methods 0.000 description 2
- 230000002452 interceptive effect Effects 0.000 description 2
- 238000012423 maintenance Methods 0.000 description 2
- 230000006798 recombination Effects 0.000 description 2
- 238000005215 recombination Methods 0.000 description 2
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000003247 decreasing effect Effects 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 238000011161 development Methods 0.000 description 1
- 230000008521 reorganization Effects 0.000 description 1
- 238000012549 training Methods 0.000 description 1
Landscapes
- User Interface Of Digital Computer (AREA)
- Stored Programmes (AREA)
Abstract
本发明公开了一种可快速模块化配置的WEB界面构建方法。该方法以Tag技术构建可重用的界面元素,采用虚拟事件的方式,利用事件驱动机制发送和监听事件,使产品Web界面快速构建,并可以使不同Web界面间快速交互。与现有技术相比,本发明的可快速模块化配置的WEB界面构建方法可快速实现内容丰富、业务逻辑复杂、交互频繁的Web界面构建、重组、交互,具有很好的推广应用价值。
Description
技术领域
本发明涉及一种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 (3)
1.一种可快速模块化配置的WEB界面构建方法,其特征在于:以Tag技术构建可重用的界面元素,采用虚拟事件的方式,利用事件驱动机制发送和监听事件,使产品Web界面快速构建,并可以使不同Web界面间快速交互,具体实现步骤为:
A、设计各系统各Web界面需要的模块化元素,并以Tag的形式表示;
B、不同的Web界面依据需要引用相应的Tag标签;
C、各Web界面设立事件广播通道,所述广播通道用于当界面元素发生变化时向广播站发送消息;
D、各Web界面设立事件监听通道,所述监听通道用于监听广播站广播的消息,以促使界面元素发出相应响应。
2.根据权利要求1所述的可快速模块化配置的WEB界面构建方法,其特征在于,设置有广播站,所述广播站用于接收所有界面元素发生变化时发送的消息,并把这些消息全部广播出去。
3.根据权利要求1所述的可快速模块化配置的WEB界面构建方法,其特征在于,具体交互方法为:
当一个元素发生改变时,委托事件代理触发一个虚拟事件,事件中包含这次改变的类型、名称、变量信息,触发事件后结束该元素的处理程序;
注册其他界面元素监听事件代理,当上述元素触发的虚拟事件发生时,其他界面元素各自做出相应改变。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201410382849.XA CN104133686B (zh) | 2014-08-06 | 2014-08-06 | 一种可快速模块化配置的web界面构建方法 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201410382849.XA CN104133686B (zh) | 2014-08-06 | 2014-08-06 | 一种可快速模块化配置的web界面构建方法 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN104133686A CN104133686A (zh) | 2014-11-05 |
CN104133686B true CN104133686B (zh) | 2017-06-27 |
Family
ID=51806372
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN201410382849.XA Active CN104133686B (zh) | 2014-08-06 | 2014-08-06 | 一种可快速模块化配置的web界面构建方法 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN104133686B (zh) |
Families Citing this family (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN110298153B (zh) * | 2018-03-21 | 2022-12-27 | 阿里巴巴集团控股有限公司 | 指纹识别方法、移动设备、指纹识别系统 |
CN110297718B (zh) * | 2018-03-22 | 2023-05-26 | 阿里巴巴集团控股有限公司 | 界面元素联动处理方法、装置和设备 |
CN110069302A (zh) * | 2019-03-15 | 2019-07-30 | 平安普惠企业管理有限公司 | 页面配置方法、装置、计算机设备及存储介质 |
Citations (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN101101603A (zh) * | 2006-07-07 | 2008-01-09 | 国际商业机器公司 | 配置针对合作网页的命令的方法与系统 |
CN103164226A (zh) * | 2013-03-15 | 2013-06-19 | 成都三零凯天通信实业有限公司 | 一种机顶盒人机界面自动生成方法 |
CN103677788A (zh) * | 2012-09-25 | 2014-03-26 | 深圳市金正方科技股份有限公司 | 基于j2ee分布式架构的重用框架生成方法、装置及应用系统 |
Family Cites Families (1)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US8706871B2 (en) * | 2012-07-20 | 2014-04-22 | Blue Kai, Inc. | Tag latency monitoring and control system for enhanced web page performance |
-
2014
- 2014-08-06 CN CN201410382849.XA patent/CN104133686B/zh active Active
Patent Citations (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN101101603A (zh) * | 2006-07-07 | 2008-01-09 | 国际商业机器公司 | 配置针对合作网页的命令的方法与系统 |
CN103677788A (zh) * | 2012-09-25 | 2014-03-26 | 深圳市金正方科技股份有限公司 | 基于j2ee分布式架构的重用框架生成方法、装置及应用系统 |
CN103164226A (zh) * | 2013-03-15 | 2013-06-19 | 成都三零凯天通信实业有限公司 | 一种机顶盒人机界面自动生成方法 |
Non-Patent Citations (3)
Title |
---|
事件驱动在web开发中的应用;李步升等;《福建电脑》;20051231;第2005年卷(第10期);第55-56页 * |
利用jQuery操作HTML元素;王晶等;《农业网络信息》;20081231;第2008年卷(第4期);第98-99,101页 * |
基于事件驱动的Web应用框架研究与应用;缪海波;《万方学位论文》;20060831;第20、26、42、43页 * |
Also Published As
Publication number | Publication date |
---|---|
CN104133686A (zh) | 2014-11-05 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN104133686B (zh) | 一种可快速模块化配置的web界面构建方法 | |
CN107193674B (zh) | 在线推送消息的处理方法及装置 | |
CN104519408A (zh) | 一种基于智能电视的广告数据监测系统和方法 | |
CN103064732A (zh) | 通过消息管理器对第三方应用消息接管的方法 | |
CN107741884B (zh) | 一种分层状态机实现消息推送的方法和装置 | |
CN111813676A (zh) | 机器人软件测试方法、设备及存储介质 | |
CN107247763A (zh) | 业务数据统计方法、装置、系统、存储介质及电子设备 | |
CN104679888A (zh) | 一种数据同步的装置及方法 | |
CN110297944A (zh) | 分布式xml数据处理方法及系统 | |
CN102007495A (zh) | 用于转换对于修改关于发布/订阅主题串的订阅的集合的自然语言请求的方法、装置和软件 | |
CN111880948A (zh) | 数据刷新方法、装置、电子设备及计算机可读存储介质 | |
CN103150682A (zh) | 一种车间信息智能交互系统 | |
US8892762B2 (en) | Multi-granular stream processing | |
CN116382943A (zh) | 顺序消息处理方法、总线系统、计算机设备及存储介质 | |
CN105224327B (zh) | 一种嵌入式装置变量交换传输地址离线分配方法 | |
CN103648027A (zh) | 一种数字媒体终端及媒体文件播放方法 | |
CN107808299B (zh) | 一种便于接入外部系统的营销系统以及营销方法 | |
CN102810065A (zh) | 用于加载程序模块的方法和系统 | |
CN109034894A (zh) | 广告页面浏览量统计方法、装置、电子设备及存储介质 | |
CN105338104A (zh) | 业务请求响应方法、解析方法和系统 | |
CN102685155A (zh) | 内容传送的方法、内容传送服务器及内容传送代理服务器 | |
CN104503748A (zh) | 一种基于事件驱动的编辑器系统及方法 | |
Wang et al. | An enhanced message distribution mechanism for northbound interfaces in the SDN environment | |
CN107276821A (zh) | 用户行为监测系统和方法 | |
CN105323225B (zh) | 跨终端的交互通讯协议适配方法及系统 |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
C06 | Publication | ||
PB01 | Publication | ||
C10 | Entry into substantive examination | ||
SE01 | Entry into force of request for substantive examination | ||
GR01 | Patent grant | ||
GR01 | Patent grant |