CN108664242B - 生成可视化界面的方法、装置、电子设备和可读存储介质 - Google Patents

生成可视化界面的方法、装置、电子设备和可读存储介质 Download PDF

Info

Publication number
CN108664242B
CN108664242B CN201710211834.0A CN201710211834A CN108664242B CN 108664242 B CN108664242 B CN 108664242B CN 201710211834 A CN201710211834 A CN 201710211834A CN 108664242 B CN108664242 B CN 108664242B
Authority
CN
China
Prior art keywords
component
interceptor
calling
interface
fine
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
Application number
CN201710211834.0A
Other languages
English (en)
Other versions
CN108664242A (zh
Inventor
田野
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beijing Jingdong Century Trading Co Ltd
Beijing Jingdong Shangke Information Technology Co Ltd
Original Assignee
Beijing Jingdong Century Trading Co Ltd
Beijing Jingdong Shangke Information Technology Co Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Beijing Jingdong Century Trading Co Ltd, Beijing Jingdong Shangke Information Technology Co Ltd filed Critical Beijing Jingdong Century Trading Co Ltd
Priority to CN201710211834.0A priority Critical patent/CN108664242B/zh
Publication of CN108664242A publication Critical patent/CN108664242A/zh
Application granted granted Critical
Publication of CN108664242B publication Critical patent/CN108664242B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/38Creation or generation of source code for implementing user interfaces
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/20Software design
    • G06F8/24Object-oriented
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/31Programming languages or programming paradigms
    • G06F8/315Object-oriented languages

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • Computing Systems (AREA)
  • Stored Programmes (AREA)

Abstract

本发明提供一种生成可视化界面的方法、装置、电子设备和可读存储介质,能够快速生成可视化界面,节省前台开发时间,统一编程风格,并节约维护成本。该方法包括:生产组件,从而定义组件的基类;调用组件,其中利用后台代码处理逻辑来调用组件;以及微调组件的属性信息。

Description

生成可视化界面的方法、装置、电子设备和可读存储介质
技术领域
本发明涉及一种通信技术领域,尤其涉及一种生成可视化界面的方法、装置、电子设备和可读存储介质。
背景技术
系统的最基本功能是为用户提供数据浏览和数据录入。对于数据录入来说,需要关注两个重点:数据来源和数据操作。数据来源有两个方面,一部分数据来源于对系统本身的数据的引用,一部分数据则来源于用户自己的录入。数据操作则很简单,本质上就是对数据的新增,数据的删除,数据的修改,以及数据的查找,而万千系统的数据的操作无非是这四种以及在这四种上边进行的变种。
在实现本发明过程中,发明人发现现有技术中至少存在如下问题:
现有的界面生成是开发人员用html,css,js(库)自己手工写前台界面,或利用开源的前台开发工具如jQueryUI,BOOTSTRAP工具包,调用其控件进行开发。目前的前台技术,必须由开发人员手工开发调用,然后反复调试并修正,效率不高,而且带有个人编程习惯,无法统一编程风格,维护成本高。
发明内容
有鉴于此,本发明实施例提供一种生成可视化界面的方法、装置、电子设备和可读存储介质,能够快速生成可视化界面,节省前台开发时间,统一编程风格,并节约维护成本。
为实现上述目的,根据本发明的一个方面,提供了一种生成可视化界面的方法。
本发明实施例一种生成可视化界面的方法主要包括:生产组件,从而定义组件的基类;调用组件,其中利用后台代码处理逻辑来调用组件;以及微调组件的属性信息。
可选地,生产组件,从而定义组件的基类可以包括:将组件的共同属性抽象成组件父类Java接口,并且在编写组件时继承所述组件父类Java接口,然后扩展自定义组件的个性化属性。
可选地,所述组件可以包括:组件ID,组件父类ID,组件名称,组件尺寸,组件定位,组件外补白,组件内补白,组件边框,以及组件背景。
可选地,调用组件,其中利用后台代码处理逻辑来调用组件可以包括:调用smartMenu菜单插件;和注册并显示自定义组件名称。
可选地,调用组件,其中利用后台代码处理逻辑来调用组件可以包括:调用组件的请求经过过滤器、组件分发器和拦截器,从而完成组件实例参数的填充,其中,在所述组件分发器中,容器被注册,而组件代理实例调用所述容器中的组件实例;和组件代理实例调用界面加工逻辑。
可选地,所述拦截器可以包括:组件尺寸拦截器、组件定位拦截器、组件外补白拦截器、组件内补白拦截器、组件边框拦截器以及组件背景拦截器。
可选地,微调组件的属性信息可以包括:微调组件的位置和大小。
可选地,微调组件的属性信息可以包括:注册鼠标事件,所述鼠标事件包括鼠标右键事件、鼠标左键事件,以及鼠标左键双击事件。
为实现上述目的,根据本发明实施例的另一方面,提供了一种生成可视化界面的装置。
本发明的一种生成可视化界面的装置主要包括:生产模块,用于生产组件,从而定义组件的基类;调用模块,用于调用组件,其中利用后台代码处理逻辑来调用组件;以及微调模块,用于微调组件的属性信息。
可选地,所述生产模块还可用于:将组件的共同属性抽象成组件父类Java接口,并且在编写组件时继承所述组件父类Java接口,然后扩展自定义组件的个性化属性。
可选地,所述组件可以包括:组件ID,组件父类ID,组件名称,组件尺寸,组件定位,组件外补白,组件内补白,组件边框,以及组件背景。
可选地,所述调用模块还可用于:调用smartMenu菜单插件;和注册并显示自定义组件名称。
可选地,所述调用模块还可用于:调用组件的请求经过过滤器、组件分发器和拦截器,从而完成组件实例参数的填充,其中,在所述组件分发器中,容器被注册,而组件代理实例调用所述容器中的组件实例;和组件代理实例调用界面加工逻辑。
可选地,所述拦截器可以包括:组件尺寸拦截器、组件定位拦截器、组件外补白拦截器、组件内补白拦截器、组件边框拦截器以及组件背景拦截器。
可选地,所述微调模块还可用于:微调组件的位置和大小。
可选地,所述微调模块还可用于:注册鼠标事件,所述鼠标事件包括鼠标右键事件、鼠标左键事件,以及鼠标左键双击事件。
为实现上述目的,根据本发明实施例的再一方面,提供了一种实现生成可视化界面的方法的电子设备。
本发明实施例的一种电子设备包括:
一个或多个处理器;
存储装置,用于存储一个或多个程序,
当所述一个或多个程序被所述一个或多个处理器执行,使得所述一个或多个处理器实现本发明实施例的生成可视化界面的方法。
为实现上述目的,根据本发明实施例的又一方面,提供了一种计算机可读介质。
本发明实施例的一种计算机可读介质,其上存储有计算机程序,所述程序被处理器执行时实现本发明实施例的生成可视化界面的方法。
上述发明中的一个实施例具有如下优点或有益效果:因为采用以内置的原子组件为基本单元,以鼠标事件驱动业务代码的执行,并生产前台界面代码,将生产组件,调用组件,微调组件三步组成一条责任链,用来完成界面的开发技术手段,其中不需要自己编写前台代码,鼠标拖拽生成界面组件,将前台开发作为一种逻辑剥离,功能模块化,封装js控制,利用程序控制前台的开发,所以克服了开发人员手工开发调用的效率不高、编程风格不统一的技术问题,进而达到快速生成可视化界面、节省前台开发时间,统一编程风格,并节约维护成本,同时达到前台界面组件化、标准化、工厂化,统一修改和维护而统一管理标准的技术效果,而且在不使用平台的情况下可以手工前台调试代码,实现了统一标准和个性化的技术效果。
上述的非惯用的可选方式所具有的进一步效果将在下文中结合具体实施方式加以说明。
附图说明
附图用于更好地理解本发明,不构成对本发明的不当限定。其中:
图1是根据本发明实施例的生成可视化界面的方法的主要步骤的示意图;
图2是根据本发明实施例的生成可视化界面的方法中的组件父类java接口的示意图;
图3是根据本发明实施例的生成可视化界面的方法中的组件父类java接口的具体表格组件实现方式的示意图;
图4是根据本发明实施例的生成可视化界面的方法中注册自定义组件名称后的组件列表的示意图;
图5是根据本发明实施例的生成可视化界面的方法中的后台代码生成规则所利用的整体架构图的示意图;
图6是根据本发明实施例的生成可视化界面的方法中弹出自定义菜单后的组件列表的示意图;
图7是根据本发明实施例的生成可视化界面的方法中组件移动展示的示意图;
图8是根据本发明实施例的生成可视化界面的方法中微调组件界面展示的示意图;
图9是根据本发明实施例的生成可视化界面的装置的主要模块的示意图;以及
图10是用来实现本发明实施例的生成可视化界面的方法的电子设备的硬件结构示意图。
具体实施方式
以下结合附图对本发明的示范性实施例做出说明,其中包括本发明实施例的各种细节以助于理解,应当将它们认为仅仅是示范性的。因此,本领域普通技术人员应当认识到,可以对这里描述的实施例做出各种改变和修改,而不会背离本发明的范围和精神。同样,为了清楚和简明,以下的描述中省略了对公知功能和结构的描述。
本发明的快速生成可视化界面的技术方案可以使用到:JS技术(jQuery库),CSS,以及HTML。例如,Js:JavaScript可以是一种直译式脚本语言,一种动态类型、弱类型、基于原型的语言,可以属于内置支持类型。它的解释器可以被称为JavaScript引擎,可以为浏览器的一部分,并广泛用于客户端的脚本语言。jQuery:JQuery可以是优秀的兼容多浏览器的Javascript库,也就是JavaScript和查询(Query),即可以是辅助JavaScript开发的库。CSS:层叠样式表(Cascading StyleSheet)。在网页制作时采用层叠样式表技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和格式。Html:超文本标记语言,标准通用标记语言下的应用。“超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。
本发明的技术方案提供单独的模块开发,以内置的原子组件为基本单元,以鼠标事件驱动业务代码的执行,并生产前台界面代码,把生产组件,调用组件,微调组件三步组成一条责任链,用来完成界面的开发。本发明不需要自己编写前台代码,鼠标拖拽生成界面组件,将前台开发作为一种逻辑剥离,功能模块化,封装js控制,利用程序控制前台的开发,将前台界面组件化,标准化,工厂化,统一修改和维护,降低前台开发时间,节约时间成本。
图1是根据本发明实施例的生成可视化界面的方法的主要步骤的示意图。
如图1所示,本发明实施例的一种生成可视化界面的方法主要包括如下步骤:
步骤S11:可以生产组件,从而定义组件的基类。在该步骤中,可以将组件的共同属性抽象成组件父类Java接口,并且在编写组件时继承所述组件父类Java接口,然后扩展自定义组件的个性化属性。组件可以但不限于包括组件ID,组件父类ID,组件名称,组件尺寸,组件定位,组件外补白,组件内补白,组件边框,以及组件背景。
步骤S12:可以调用组件,其中利用后台代码处理逻辑来调用组件。在该步骤中,可以调用smartMenu菜单插件;和注册并显示自定义组件名称。而且,调用组件的请求可以经过过滤器、组件分发器和拦截器,从而完成组件实例参数的填充,其中,在所述组件分发器中,容器可以被注册,而组件代理实例可以调用所述容器中的组件实例;和组件代理实例可以调用界面加工逻辑。其中,拦截器可以但不限于包括:组件尺寸拦截器、组件定位拦截器、组件外补白拦截器、组件内补白拦截器、组件边框拦截器以及组件背景拦截器。
步骤S13:可以微调组件的属性信息。在该步骤,可以微调组件的位置和大小,并且可以注册鼠标事件。鼠标事件可以但不限于包括鼠标右键事件、鼠标左键事件,以及鼠标左键双击事件。
下面,在本发明的实施例中,将结合图2和图3对上述步骤S11中生产组件进行具体举例说明和描述,其中以内置的原子组件为基本单元,生产组件时主要利用编写java具体的组件类来继承组件Java父类接口。
图2是根据本发明实施例的生成可视化界面的方法中的组件父类java接口的示意图。
如图2可以看出,前台组件作为界面外观的最小原子单元,有一些属性是共性的,将这些组件的共有属性抽象出来,抽象成组件父类Java接口,云状物则是父类Java接口的属性。例如,前台组件可以包括但不限于:组件ID,组件父类ID,组件名称,组件尺寸,组件定位,组件外补白,组件内补白,组件边框,组件背景等。
图3是根据本发明实施例的生成可视化界面的方法中的组件父类java接口的具体表格组件实现方式的示意图。
例如,如图3所示,本发明利用java技术编写组件的时候,可以先继承此图2所示的组件父类java接口,然后可以扩展一下自定义组件的个性化属性,最后展现出图3所示出的具体表格组件实现方式。例如,在设计表格组件时,可以利用额外的添加属性:表格布局算法属性和表格边框属性。其中,表格布局算法属性可能的具体形式可以但不限于包括以下两种:默认自动算法和固定布局算法。当利用默认自动算法时,表格的宽度可以随着表格字数的多少变化。而当固定布局算法时,表格的宽度可以不变。此外,表格边框属性可以控制边框独立还是合并。
以下,将具体举例说明和描述上述步骤S12中调用组件,从而对调用组件进行进一步具体的阐述。
在本发明的具体实施例中,在组件的基类定义出来后,前台界面操作可以调用系统中预制的smartMenu菜单插件,smartMenu菜单插件是jQuery发布的智能生成菜单插件,可以在界面上内置此插件,并在此插件上登记上自定义的组件名称,调用此组件用于发送请求和后台交互。
在本发明的具体实施例中,基类继承父类,并实例化。此自定义的组件名称可以是上述图2中的父类java接口中的组件名称属性,当每个基类实例化的时候,组件名称属性可以被赋值。
此外,在本发明的具体实施例中,smartMenu菜单内容可以但不限于包括如下几部分:
1. 内置的原子级别的组件生产部分:文本输入框,提交按钮,单选按钮,多选按钮,导航栏,工具栏,表单,表格;
2. 自定义的组合组件有:div框。
在本发明的具体实施例中,在调用smartMenu菜单插件时,展现出以下图4的组件列表,可以显示自定义后的组件的名称。当点击图4中图片上的组件名称时,就可以调用以下图5中架构的代码生成所需要的组件。
以下,可以参照图4和图5进行详细的说明和阐述。
图4是根据本发明实施例的生成可视化界面的方法中注册自定义组件名称后的组件列表的示意图。
如图4所示,在注册自定义组件名称后,组件列表如图4所示。
进一步地,例如,当点击表格选项时,弹出输入表格信息的弹框。此设计利用smartMenu菜单的第二个参数func。此func参数的意思则是:在点击选项时,可以触发的方法。在表格组件中,可以在此方法中定义弹出框,用于输入创建表格所需的信息,比如表格的列数,表格的行数,表格的标题,表格是否需要浮动展现,以及表格展现的SQL(Structured Query Language,即结构化查询语言)等,然后点击确定按钮,将表格请求发送到后台进行交互。
图5是根据本发明实施例的生成可视化界面的方法中的后台代码生成规则所利用的整体架构图的示意图。
如图5的架构所示,在本发明的实施例中,后台代码处理逻辑可以如下:
第一步,请求经过一系列过滤器(Filters),到达组件分发器(WidgetDispatcher)。在本发明的实施例中,组件分发器也是过滤器,但它是特殊的过滤器,它在整个逻辑架构中处在核心地位,当请求达到组件分发器时,它需要分析请求命令,初始化日志和参数,加载配置文件,以及装配和注册容器。
第二步,在容器注册完成以后,根据请求命令,调用相应的组件代理(WidgetProxy)实例,此组件代理实例调用容器中的组件实例,并把请求发送给一系列的拦截器(Interceptor),各个拦截器根据请求中的参数,分别处理组件的参数。
在第二步中,具体拦截器功能可以主要如下,但不限于此:
(A)组件尺寸拦截器:此拦截器主要设置组件的大小,如组件宽度,组件高度,组件最小宽度,组件最小高度,组件最大宽度,以及组件最小宽度;
(B)组件定位拦截器:此拦截器主要设置组件的位置,如定位机制,是正常排版、浮动还是定位。其中,如果定位机制是浮动的话,则确定是左浮动,还是右浮动,并且确定浮动数值是多少;以及如果定位机制是定位的话,是确定绝对定位,还是相对定位,并且确定定位边距是多少;
(C)组件外补白拦截器:此拦截器主要设置组件上、下、左、右外补白的数值;
(D)组件内补白拦截器:此拦截器主要设置组件上、下、左、右内补白的数值;
(E)组件边框拦截器:此拦截器主要设置组件边框宽度,边框颜色和边框风格,如是无轮廓风格、点状轮廓风格还是实线轮廓风格;以及
(F)组件背景拦截器:此拦截器主要设置组件背景颜色,背景图片,以及背景图片填充风格。
第三步,经过一系列拦截器后,组件实例参数已经填充完毕,请求走到界面(Template)处理阶段。组件代理实例调用界面加工程序(TemplateProcesstor),将填充好参数的组件实例的属性和值加工成css层叠样式表和html页面显示,用流的形式插入到定义好的界面文件中。
在第三步中,加工逻辑可以主要如下,但不限于此:
(A)将界面文件制作成输入输出流,根据组件实例中的父类组件id属性,获得父类组件的位置,遍历父类组件中所有的子组件,并根据每个组件的定位和大小,排版当前组件在父类组件中的位置。需要说明的是,每个组件都有各自的id属性。
(B)将组件实例的各个属性和属性值,利用java反射技术,转化成css层叠样式表,并根据请求判断是插入组件还是更新组件:如果是插入组件的话,将组件插入到界面流中,同时创建组件,同时根据排版,插入到界面文件流中;以及如果是更新组件,根据组件的id,在界面文件流中寻找该组件,并更新该组件的信息;以及
(C)请求返回修改完毕的界面。
从上述内容可以看出,在本发明的具体实施例中,调用组件的关键主要在于后台代码处理逻辑(也即后台代码生成规则),解析前台请求命令,从而生成跨平台的前台代码,进而不用手工编写前台界面,大大节约了时间,消除不同人员编写前台界面的代码习惯。这也是本发明的主要关键点和主要技术效果所在。需要值得说明的是,此步骤S12调用组件中生成的前台代码是前台界面的代码,与上述步骤S11中生产组件的java代码是不同的。而且,上述步骤S11中生产组件不需要调用此后台代码处理逻辑,而是利用编写java具体的组件类来继承组件Java父类接口。
接下来,在本发明的具体实施例中,将结合图6至图7对上述步骤S13中微调组件进行具体的实例描述和说明。其中,图6是根据本发明实施例的生成可视化界面的方法中弹出自定义菜单后的组件列表的示意图;图7是根据本发明实施例的生成可视化界面的方法中组件移动展示的示意图;图8是根据本发明实施例的生成可视化界面的方法中微调组件界面展示的示意图。
在完成生产组件和调用组件之后,组件已经显示到前台界面。此时,如果对显示的组件不满意或者有其它后续的要求,可以在前台界面上微调组件的位置,大小等一系列属性信息。
在微调组件的过程中,可以注册鼠标的几个事件。例如,鼠标需要注册的事件可以如下,但不限于此:
(A)鼠标右键事件:可以在前台界面空白处点击鼠标右键,弹出自定义菜单,此菜单可以是调用组件中的smartMenu (例如,可以如图6所示);
(B)鼠标左击事件:此鼠标左击事件可以用于拖动组件,当组件生成后,单击鼠标左键,并在选中组件后,鼠标移动到开发者需要组件移动的位置,发送组件移动的http请求,后台Java代码修改组件在界面的显示位置,然后将修改好的页面发送到客户端,从而移动位置的组件便展现出来(例如,可以如图7所示);
(C)鼠标左键双击事件:此鼠标左键双击事件可以用于弹出组件的属性信息,在选中组件后,双击鼠标左键,发送请求组件大小,位置的http请求,后台接收到请求后,核心分发器分析请求,在界面右侧插入组件属性信息弹框,更新界面文件后发送到前台,之后开发者可以通过前台调整其位置,并把数据发送到后台来调整组件的各个属性(例如,可以如图8所示)。
从上述内容可以看出,根据本发明实施例的生成可视化界面的方法,不需要自己编写前台代码,鼠标拖拽则生成界面组件,将前台开发作为一种逻辑剥离,功能模块化,封装js控制,利用程序控制前台的开发,将前台界面组件化,标准化,工厂化,统一修改和维护,降低前台开发时间,节约时间成本。而且,将生产组件、调用组件以及微调组件模块化迭代成平台后,有利于公司统一管理标准,同时生成跨平台的前台代码,在不使用平台的情况下可以手工前台调试代码。将统一标准和个性化完美的结合起来。
从以上描述可以看出,根据本发明的实施例因为采用以内置的原子组件为基本单元,以鼠标事件驱动业务代码的执行,并生产前台界面代码,将生产组件,调用组件,微调组件三步组成一条责任链,用来完成界面的开发技术手段,其中不需要自己编写前台代码,鼠标拖拽生成界面组件,将前台开发作为一种逻辑剥离,功能模块化,封装js控制,利用程序控制前台的开发,所以克服了开发人员手工开发调用的效率不高、编程风格不统一的技术问题,进而达到快速生成可视化界面、节省前台开发时间,统一编程风格,并节约维护成本,同时达到前台界面组件化、标准化、工厂化,统一修改和维护而统一管理标准的技术效果,而且在不使用平台的情况下可以手工前台调试代码,实现了统一标准和个性化的技术效果。
图9是根据本发明实施例的生成可视化界面的装置的主要模块的示意图。
如图9所示,本发明实施例的生成可视化界面的装置90主要包括:生产模块901、调用模块902以及微调模块903。其中:
生产模块901可用于生产组件,从而定义组件的基类;调用模块902,可用于调用组件,其中利用后台代码处理逻辑来调用组件;以及微调模块903,可用于微调组件的属性信息。
此外,生产模块901还可用于:将组件的共同属性抽象成组件父类Java接口,并且在编写组件时继承所述组件父类Java接口,然后扩展自定义组件的个性化属性。在本发明的实施例中,所述组件可以但不限于包括组件ID,组件父类ID,组件名称,组件尺寸,组件定位,组件外补白,组件内补白,组件边框,以及组件背景。
需要说明的是,调用模块902还可用于:调用smartMenu菜单插件;和注册并显示自定义组件名称。进一步地,调用模块还可用于:调用组件的请求经过过滤器、组件分发器和拦截器,从而完成组件实例参数的填充,其中,在所述组件分发器中,容器被注册,而组件代理实例调用所述容器中的组件实例;和组件代理实例调用界面加工逻辑。
在本发明的实施例中,拦截器可以但不限于包括:组件尺寸拦截器、组件定位拦截器、组件外补白拦截器、组件内补白拦截器、组件边框拦截器以及组件背景拦截器。
需要进一步说明的是,微调模块903还可用于:微调组件的位置和大小。
需要再进一步说明的是,调模块903还可用于:注册鼠标事件,鼠标事件可以但不限于包括鼠标右键事件、鼠标左键事件,以及鼠标左键双击事件。
从以上描述可以看出,因为采用以内置的原子组件为基本单元,以鼠标事件驱动业务代码的执行,并生产前台界面代码,将生产组件,调用组件,微调组件三步组成一条责任链,用来完成界面的开发技术手段,其中不需要自己编写前台代码,鼠标拖拽生成界面组件,将前台开发作为一种逻辑剥离,功能模块化,封装js控制,利用程序控制前台的开发,所以克服了开发人员手工开发调用的效率不高、编程风格不统一的技术问题,进而达到快速生成可视化界面、节省前台开发时间,统一编程风格,并节约维护成本,同时达到前台界面组件化、标准化、工厂化,统一修改和维护而统一管理标准的技术效果,而且在不使用平台的情况下可以手工前台调试代码,实现了统一标准和个性化的技术效果。
根据本发明的实施例,本发明还提供了一种电子设备和一种可读存储介质。
本发明的电子设备包括:至少一个处理器;以及,与所述至少一个处理器通信连接的存储器;其中,所述存储器存储有可被所述一个处理器执行的指令,所述指令被所述至少一个处理器执行,以使所述至少一个处理器执行本发明所提供的生成可视化界面的方法。
本发明的非暂态计算机可读存储介质,所述非暂态计算机可读存储介质存储计算机指令,所述计算机指令用于使所述计算机执行本发明所提供的生成可视化界面的方法。
如图10所示,是用来实现本发明实施例的生成可视化界面的方法的电子设备的硬件结构示意图。如图10,该电子设备包括:一个或多个处理器101以及存储器102,图10中以一个处理器101为例。其中,存储器102即为本发明所提供的非暂态计算机可读存储介质。
生成可视化界面的方法的电子设备还可以包括:输入装置103和输出装置104。
处理器101、存储器102、输入装置103和输出装置104可以通过总线或者其他方式连接,图10中以通过总线连接为例。
存储器102作为一种非暂态计算机可读存储介质,可用于存储非暂态软件程序、非暂态计算机可执行程序以及模块,如本发明实施例中的生成可视化界面的方法对应的程序指令/模块(例如,附图9所示的生产模块901、调用模块902和微调模块903)。处理器101通过运行存储在存储器102中的非暂态软件程序、指令以及模块,从而执行服务器的各种功能应用以及数据处理,即实现上述方法实施例中的生成可视化界面的方法。
存储器102可以包括存储程序区和存储数据区,其中,存储程序区可存储操作系统、至少一个功能所需要的应用程序;存储数据区可存储根据生成可视化界面的装置的使用所创建的数据等。此外,存储器102可以包括高速随机存取存储器,还可以包括非暂态存储器,例如至少一个磁盘存储器件、闪存器件、或其他非暂态固态存储器件。在一些实施例中,存储器102可选包括相对于处理器101远程设置的存储器,这些远程存储器可以通过网络连接至生成可视化界面的装置。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。
输入装置103可接收输入的数字或字符信息,以及产生与生成可视化界面的装置的用户设置以及功能控制有关的键信号输入。输出装置104可包括显示屏等显示设备。
所述一个或者多个模块存储在所述存储器102中,当被所述一个或者多个处理器101执行时,执行上述任意方法实施例中的生成可视化界面的方法。
上述产品可执行本发明实施例所提供的方法,具备执行方法相应的功能模块和有益效果。未在本实施例中详尽描述的技术细节,可参见本发明实施例所提供的方法。
根据本发明实施例的技术方案,因为采用以内置的原子组件为基本单元,以鼠标事件驱动业务代码的执行,并生产前台界面代码,将生产组件,调用组件,微调组件三步组成一条责任链,用来完成界面的开发技术手段,其中不需要自己编写前台代码,鼠标拖拽生成界面组件,将前台开发作为一种逻辑剥离,功能模块化,封装js控制,利用程序控制前台的开发,所以克服了开发人员手工开发调用的效率不高、编程风格不统一的技术问题,进而达到快速生成可视化界面、节省前台开发时间,统一编程风格,并节约维护成本,同时达到前台界面组件化、标准化、工厂化,统一修改和维护而统一管理标准的技术效果,而且在不使用平台的情况下可以手工前台调试代码,实现了统一标准和个性化的技术效果。
上述具体实施方式,并不构成对本发明保护范围的限制。本领域技术人员应该明白的是,取决于设计要求和其他因素,可以发生各种各样的修改、组合、子组合和替代。任何在本发明的精神和原则之内所作的修改、等同替换和改进等,均应包含在本发明保护范围之内。

Claims (12)

1.一种生成可视化界面的方法,其特征在于,包括:
生产组件,从而定义组件的基类,包括:将组件的共同属性抽象成组件父类Java接口,并且在编写组件时继承所述组件父类Java接口,然后扩展自定义组件的个性化属性;
利用后台代码处理逻辑调用组件,以及微调组件的属性信息;
其中,所述调用组件包括:调用smartMenu菜单插件;注册并显示自定义组件名称;利用smartMenu菜单的第二个参数触发的方法,输入创建所述自定义组件所需的属性信息;
其中,利用后台代码处理逻辑调用组件包括:调用组件的请求经过过滤器、组件分发器和拦截器,从而完成组件实例参数的填充;其中,在所述组件分发器中,容器被注册,而组件代理实例调用所述容器中的组件实例;和组件代理实例调用界面加工逻辑。
2.根据权利要求1所述的方法,其特征在于,所述组件包括:组件ID,组件父类ID,组件名称,组件尺寸,组件定位,组件外补白,组件内补白,组件边框,以及组件背景。
3.根据权利要求1所述的方法,其特征在于,所述拦截器包括:组件尺寸拦截器、组件定位拦截器、组件外补白拦截器、组件内补白拦截器、组件边框拦截器以及组件背景拦截器。
4.根据权利要求1所述的方法,其特征在于,微调组件的属性信息包括:微调组件的位置和大小。
5.根据权利要求1所述的方法,其特征在于,微调组件的属性信息包括:注册鼠标事件,所述鼠标事件包括鼠标右键事件、鼠标左键事件,以及鼠标左键双击事件。
6.一种生成可视化界面的装置,其特征在于,包括:
生产模块,用于生产组件,从而定义组件的基类;
所述生产模块用于将组件的共同属性抽象成组件父类Java接口,并且在编写组件时继承所述组件父类Java接口,然后扩展自定义组件的个性化属性;
调用模块,用于利用后台代码处理逻辑来调用组件,以及微调模块,用于微调组件的属性信息;
所述调用模块,用于调用smartMenu菜单插件;和注册并显示自定义组件名称;利用smartMenu菜单的第二个参数触发的方法,输入创建所述自定义组件所需的属性信息;
所述调用模块,用于利用后台代码处理逻辑来调用组件,包括:调用组件的请求经过过滤器、组件分发器和拦截器,从而完成组件实例参数的填充;其中,在所述组件分发器中,容器被注册,而组件代理实例调用所述容器中的组件实例;和组件代理实例调用界面加工逻辑。
7.根据权利要求6所述的装置,其特征在于,所述组件包括:组件ID,组件父类ID,组件名称,组件尺寸,组件定位,组件外补白,组件内补白,组件边框,以及组件背景。
8.根据权利要求6所述的装置,其特征在于,所述拦截器包括:组件尺寸拦截器、组件定位拦截器、组件外补白拦截器、组件内补白拦截器、组件边框拦截器以及组件背景拦截器。
9.根据权利要求6所述的装置,其特征在于,所述微调模块还用于:微调组件的位置和大小。
10.根据权利要求6所述的装置,其特征在于,所述微调模块还用于:注册鼠标事件,所述鼠标事件包括鼠标右键事件、鼠标左键事件,以及鼠标左键双击事件。
11.一种电子设备,其特征在于,包括:
一个或多个处理器;
存储装置,用于存储一个或多个程序,
当所述一个或多个程序被所述一个或多个处理器执行,使得所述一个或多个处理器实现如权利要求1-5中任一所述的方法。
12.一种计算机可读介质,其上存储有计算机程序,其特征在于,所述程序被处理器执行时实现如权利要求1-5中任一项所述的方法。
CN201710211834.0A 2017-04-01 2017-04-01 生成可视化界面的方法、装置、电子设备和可读存储介质 Active CN108664242B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201710211834.0A CN108664242B (zh) 2017-04-01 2017-04-01 生成可视化界面的方法、装置、电子设备和可读存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201710211834.0A CN108664242B (zh) 2017-04-01 2017-04-01 生成可视化界面的方法、装置、电子设备和可读存储介质

Publications (2)

Publication Number Publication Date
CN108664242A CN108664242A (zh) 2018-10-16
CN108664242B true CN108664242B (zh) 2022-02-01

Family

ID=63784103

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201710211834.0A Active CN108664242B (zh) 2017-04-01 2017-04-01 生成可视化界面的方法、装置、电子设备和可读存储介质

Country Status (1)

Country Link
CN (1) CN108664242B (zh)

Families Citing this family (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109992268B (zh) * 2019-03-29 2022-12-20 携程旅游信息技术(上海)有限公司 弹框实现方法、装置、电子设备、存储介质
CN111045653B (zh) * 2019-12-16 2022-01-07 京东科技控股股份有限公司 系统生成方法、装置、计算机可读介质及电子设备
CN112148287B (zh) * 2020-08-21 2022-05-27 烽火通信科技股份有限公司 一种表格动态显示方法、装置以及电子设备
CN114443029A (zh) * 2020-11-04 2022-05-06 武汉斗鱼鱼乐网络科技有限公司 一种引导界面组件的生成方法及相关装置
CN112367535B (zh) * 2020-11-18 2022-10-04 广州博冠信息科技有限公司 活动的用户界面的生成方法及装置

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101197812A (zh) * 2006-12-08 2008-06-11 华为技术有限公司 一种实现页面调用的系统及方法
CN103809975A (zh) * 2014-02-19 2014-05-21 浪潮软件股份有限公司 智能云表单的实现方法
CN104484189A (zh) * 2014-12-31 2015-04-01 北京拼图科技有限公司 一种应用界面的构建及设计方法
CN106096049A (zh) * 2016-06-29 2016-11-09 江苏中威科技软件系统有限公司 一种可视化生成网页模板的方法及系统

Family Cites Families (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US9804756B2 (en) * 2013-09-27 2017-10-31 Iteris, Inc. Comparative data analytics and visualization tool for analyzing traffic performance data in a traffic management system

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101197812A (zh) * 2006-12-08 2008-06-11 华为技术有限公司 一种实现页面调用的系统及方法
CN103809975A (zh) * 2014-02-19 2014-05-21 浪潮软件股份有限公司 智能云表单的实现方法
CN104484189A (zh) * 2014-12-31 2015-04-01 北京拼图科技有限公司 一种应用界面的构建及设计方法
CN106096049A (zh) * 2016-06-29 2016-11-09 江苏中威科技软件系统有限公司 一种可视化生成网页模板的方法及系统

Also Published As

Publication number Publication date
CN108664242A (zh) 2018-10-16

Similar Documents

Publication Publication Date Title
CN108664242B (zh) 生成可视化界面的方法、装置、电子设备和可读存储介质
US9904522B2 (en) Web development system
US10949381B2 (en) Reusable transformation mechanism to allow mappings between incompatible data types
US7694271B2 (en) Rendering GUI widgets with generic look and feel
DE202020105389U1 (de) Front-End-Framework, Speichermedium und elektronische Vorrichtung
US20110258534A1 (en) Declarative definition of complex user interface state changes
US9646103B2 (en) Client-side template engine and method for constructing a nested DOM module for a website
US11677807B2 (en) System and method to standardize and improve implementation efficiency of user interface content
US20160012144A1 (en) Javascript-based, client-side template driver system
WO2016005885A2 (en) Asynchronous initialization of document object model (dom) modules
CN115982266A (zh) 基于自定义配置属性字段的页面动态渲染方法及系统
US10095528B2 (en) Interfacing systems and methods
WO2024066825A1 (zh) 页面项目开发方法、装置、设备、介质及产品
EP3080692B1 (en) User interface framework
WO2016005886A2 (en) Self-referencing of running script elements in asychronously loaded dom modules
US20150067480A1 (en) System and methods for designing artifacts associated with a webpage
US10460015B1 (en) Assimilation in multi model webpage composition
WO2021069905A1 (en) User interface generation
US20160012146A1 (en) Client Web Browser and Method for Constructing a Website DOM Module With Client-Side Functional Code
CN111694723B (zh) 产品在h5下运行时对节点及组件编辑的方法、存储介质
Sundar et al. Content Management System and Automation of Model Cloning Scalable EAV Model in GNEISYS Framework
CN116204175A (zh) Ui模型驱动的前端无代码开发框架、方法、介质及设备
CN117270847A (zh) 前端页面的生成方法及装置、设备、存储介质
WO2024039477A1 (en) Bridging ui elements across multiple operating systems
Zhao WEB DEVELOPMENT BASED ON ADOBE EXPERIENCE MANAGER (AEM) IN A WEB PROJECT

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant