CN111309293A - 一种界面框架构建方法、装置、电子设备及存储介质 - Google Patents
一种界面框架构建方法、装置、电子设备及存储介质 Download PDFInfo
- Publication number
- CN111309293A CN111309293A CN202010125852.9A CN202010125852A CN111309293A CN 111309293 A CN111309293 A CN 111309293A CN 202010125852 A CN202010125852 A CN 202010125852A CN 111309293 A CN111309293 A CN 111309293A
- Authority
- CN
- China
- Prior art keywords
- interface
- target
- interface module
- style
- module
- 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.)
- Granted
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/20—Software design
- G06F8/24—Object-oriented
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/40—Transformation of program code
- G06F8/41—Compilation
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- Engineering & Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Stored Programmes (AREA)
Abstract
本发明提供的一种界面框架构建方法、装置、电子设备及存储介质,其中方法包括:接收针对目标数据模型的界面框架配置输入,所述界面框架配置输入至少包括:嵌套关系、配置参数,所述目标数据模型包括界面模块;根据嵌套关系建立各所述界面模块中样式属性之间的引用关系,得到目标界面模板;根据所述配置参数对所述目标界面模板进行装载,得到目标界面框架。在构建界面框架的过程中,通过在数据模型的界面模块中设置可相互引用的样式属性,得到可嵌套的界面模块,从而使得用户可以根据自身需求建立界面模块中样式属性之间的引用关系以获取各种界面样式的界面模块后进行装载,提高了数据模型中界面模块的扩展性,节省了扩充界面模块所需的开发成本。
Description
技术领域
本发明属于计算机技术领域,特别是涉及一种界面框架构建方法、装置、电子设备及存储介质。
背景技术
随着互联网的日益普及,用户可以通过电子设备中的各种应用程序得到各种服务内容,而应用程序的运维人员需要根据时下的热门流行趋势对服务内容进行组合和排版,通过应用程序的界面展示给用户。这种界面的生命周期短,对时效性的要求性高,需要运维人员频繁进行更新,耗费了大量的开发成本。
现有技术中,为了降低生成界面的开发成本,出现了各种面向非专业编程人员的界面搭建工具,像乐高积木一样,通过可复用的界面模块堆砌成一个界面框架,而界面模块对应的是代码,将这些代码进行编译生成一个完整可运行的界面框架的代码,再通过解析渲染引擎进行处理,即可生成所需的界面。
这种方式由于界面模块的复用性低,需要频繁对界面模块进行扩充,并相应对解析引擎进行修改,以适应不断变化的页面样式需求,仍然需要耗费大量的开发成本。
发明内容
有鉴于此,本发明提供一种界面框架构建方法,包括:
接收针对目标数据模型的界面框架配置输入,所述界面框架配置输入至少包括:嵌套关系、配置参数,所述目标数据模型包括界面模块;
根据所述嵌套关系建立各所述界面模块中样式属性之间的引用关系,得到目标界面模板;
根据所述配置参数对所述目标界面模板进行装载,得到目标界面框架。
可选的,所述样式属性包含引用属性,所述根据所述嵌套关系建立各所述界面模块中样式属性之间的引用关系的步骤,包括:
根据所述嵌套关系,通过各所述界面模块中的引用属性建立各样式属性之间的引用关系,得到各所述界面模块的中间样式属性;
在所述中间样式属性中包括多个层级的样式属性的情况下,将所述多个层级的样式属性中层级最低的样式属性,作为所述界面模块的目标样式属性,得到目标界面模板。
可选的,所述界面模块包括:交互界面模块,所述交互界面模块预先配置有至少一个状态属性,所述配置参数包括触发事件以及相对应的状态属性,所述根据所述配置参数对所述目标界面模板进行装载,得到目标界面框架的步骤,包括:
将所述触发事件及相对应的状态属性输入到目标界面模板中的交互界面模块,得到目标界面框架,以使得所述目标界面框架中的交互界面模块在检测到所述触发事件的情况下,将所述交互界面模块的状态属性切换为与所述触发事件相对应的状态属性。
可选的,所述目标数据模型、界面模块分别包括相对应的统计参数类。
可选的,所述目标数据模型、界面模块是采用JSON格式生成的。
可选的,所述界面模块:横向布局元素、纵向布局元素、滚动布局元素、图片元素、文字元素、按钮元素、视频元素、动画元素、进度条元素中的至少一种元素。
依据本发明的第二方面,提供了一种界面框架构建装置,包括:
接收模块,用于接收针对目标数据模型的界面框架配置输入,所述界面框架配置输入至少包括:嵌套关系、配置参数,所述目标数据模型包括界面模块;
嵌套模块,用于根据所述嵌套关系建立各所述界面模块中样式属性之间的引用关系,得到目标界面模板;
装载模块,用于根据所述配置参数对所述目标界面模板进行装载,得到目标界面框架。
可选的,所述样式属性包含引用属性,所述嵌套模块,包括:
第一嵌套子模块,用于根据所述嵌套关系,通过各所述界面模块中的引用属性建立各样式属性之间的引用关系,得到各所述界面模块的中间样式属性;
第二嵌套子模块,用于在所述中间样式属性中包括多个层级的样式属性的情况下,将所述多个层级的样式属性中层级最低的样式属性,作为所述界面模块的目标样式属性,得到目标界面模板。
可选的,所述界面模块包括:交互界面模块,所述交互界面模块预先配置有至少一个状态属性,所述配置参数包括触发事件以及相对应的状态属性,所述装载模块,包括:
装载子模块,用于将所述触发事件及相对应的状态属性输入到目标界面模板中的交互界面模块,得到目标界面框架,以使得所述目标界面框架中的交互界面模块在检测到所述触发事件的情况下,将所述交互界面模块的状态属性切换为与所述触发事件相对应的状态属性。
可选的,所述目标数据模型、界面模块分别包括相对应的统计参数类。
可选的,所述目标数据模型、界面模块是采用JSON格式生成的。
可选的,所述界面模块:横向布局元素、纵向布局元素、滚动布局元素、图片元素、文字元素、按钮元素、视频元素、动画元素、进度条元素中的至少一种元素。
依据本发明第三方面,提供一种电子设备,包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序,所述处理器执行所述计算机程序时实现上述第一方面任一所述的界面框架构建方法。
依据本发明第四方面,提供一种计算机可读存储介质,所述计算机可读存储介质上存储计算机程序,所述计算机程序被处理器执行时实现上述第一方面任一所述的界面框架构建方法。
针对现有技术,本发明具备如下优点:
本发明提供的一种界面框架构建方法、装置、电子设备及存储介质,其中方法包括:接收针对目标数据模型的界面框架配置输入,所述界面框架配置输入至少包括:嵌套关系、配置参数,所述目标数据模型包括界面模块;根据所述嵌套关系建立各所述界面模块中样式属性之间的引用关系,得到目标界面模板;根据所述配置参数对所述目标界面模板进行装载,得到目标界面框架。在构建界面框架的过程中,通过在数据模型的界面模块中设置可相互引用的样式属性,得到可嵌套的界面模块,从而使得用户可以根据自身需求建立界面模块中样式属性之间的引用关系以获取各种界面样式的界面模块后进行装载,提高了数据模型中界面模块的扩展性,节省了扩充界面模块所需的开发成本。
上述说明仅是本发明技术方案的概述,为了能够更清楚了解本发明的技术手段,而可依照说明书的内容予以实施,并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂,以下特举本发明的具体实施方式。
附图说明
通过阅读下文优选实施方式的详细描述,各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的,而并不认为是对本发明的限制。而且在整个附图中,用相同的参考符号表示相同的部件。在附图中:
图1是本发明实施例提供的第一种界面框架构建方法的步骤流程图;
图2是本发明实施例提供的第二种界面框架构建方法的步骤流程图;
图3是本发明实施例提供的一种界面模块的逻辑编码;
图4是本发明实施例提供的一种投票状态的交互逻辑编码;
图5是本发明实施例提供的一种界面框架构建装置的结构框图;
图6是本发明实施例提供的一种电子设备的结构框图。
具体实施方式
下面将参照附图更详细地描述本发明的示例性实施例。虽然附图中显示了本发明的示例性实施例,然而应当理解,可以以各种形式实现本发明而不应被这里阐述的实施例所限制。相反,提供这些实施例是为了能够更透彻地理解本发明,并且能够将本发明的范围完整的传达给本领域的技术人员。
图1是本发明实施例提供的第一种界面框架构建方法的步骤流程图,包括:
步骤101,接收针对目标数据模型的界面框架配置输入,所述界面框架配置输入至少包括:嵌套关系、配置参数,所述目标数据模型包括界面模块。
在本发明实施例中,针对现有技术中,无论粗颗粒度还是细颗粒度的界面模块,均存在难以适应实际需求的变化的问题,需要根据实际需求对界面模块进行更新,频繁修改引擎。而导致这些适应性差的根源在于界面模块不能进行嵌套,因此可以通过设置一套允许嵌套的通用性高、颗粒度小、抽象的容器对象,用于嵌套组合描述各种各样的排版,摒弃基于界面模块的类型隐式描述布局的方案,让数据模型可以完整描述界面的所有布局,从而使得所得到的解析引擎仅包含通用的布局逻辑,尽量减少因为要支持新的样式而导致解析引擎的修改。
本发明实施例中的命名规则可以采用驼峰命名,例如:flexDirection,是指混合使用大小写字母来构成变量和函数的名字,从而使得数据模型的编码更加紧凑、更易读。
具体的,设计包含两级属性的数据模型,其中:
1、一级属性包含如下属性:
id:页面ID,用于唯一识别该页面;
base:描述页面级别信息。
topBar:描述页面顶导航栏的界面,其结构是一个item对象,item对象是可被复用的界面模块,除了用来描述顶导航栏,还可以描述列表里的卡片、浮层和页脚等;
items:这是一个item对象的数据,一个基于列表的页面里的主要内容就是由这些列表里的item描述和渲染出现的;
overlays:这也是一个item对象的数据,用于描述页面所需的各种浮层;
footer:描述固定显示在页面底部的页脚,其结构也是一个item对象。
2、二级属性包含如下属性:
base pullAction:下拉属性和上拉加载的参数配置和样式;
base theme:可被继承和覆盖的页面级别的主题样式;
base style:页面容器和背景样式;
base commonStats:页面相应pingback(统计数据投递)参数;
base actions:页面级别的事件行为描述。
进一步的,针对上述item对象,每个item对象内部由一些基础界面元素组成,每个元素包含一个type属性,用于声明该元素的用途。根据这些界面元素的用途不同,又可划分为容器元素和控件元素,容器元素可以互相嵌套,也可以包含其他控件元素,容器元素通过contents属性来描述其所包含的其他元素,而控件元素是描述界面的最小单元,不可包含其他元素,通过这种方式构建一套可允许嵌套的抽象化的界面模块,从而描述界面的所有界面模板可被显性展示给用户,使得界面框架的设计和维护的更加便捷。
在实际应用中,用户可通过客户端的界面框架构建功能界面针对所需的数据模型进行配置,所述客户端通过将各界面模块根据不同的type属性进行抽象描述后,通过功能界面进行展示,用户可根据自身需求将各种界面模块进行组合操作,得到所述嵌套关系,并针对各界面模块输入相对应的配置参数,以填充各界面模块的各属性。所述嵌套关系是指界面模块中的contents类属性,用于描述的模块之间的引用关系,所述配置参数是指各界面模块中出contents类之外其他类属性。
步骤102,根据所述嵌套关系建立各所述界面模块中样式属性之间的引用关系,得到目标界面模板。
在本发明实施例中,通过将界面模块根据所述嵌套关系进行组合,可以得到包含多个界面模块样式的嵌套界面模块,该嵌套关系中包含嵌套界面模块的contents类属性,根据所述contents类属性中模块标识之间的先后关系,对原界面模块代码中contents类进行填充,从而编译生成包含多个界面模块功能的嵌套界面模块。利用这些组合后的嵌套界面模块以及其他界面模块组合生成仅包含嵌套逻辑关系,不包含样式属性的目标界面模板。
在实际应用中,用户通过客户端编辑生成界面框架时,可向用户展示抽象化描述后的界面模块进行拖动,从而根据不同界面模块所涉及的功能,对界面样式进行自由组合。并且界面模块支持嵌套,通过将各种界面模块进行叠加实现界面模块的嵌套组合,从而得到单一界面模块无法达到的界面样式。
步骤103,根据所述配置参数对所述目标界面模板进行装载,得到目标界面框架。
在本发明实施例中,所述目标界面模板仅包含模块之间的嵌套结构,其中的界面模块需要通过输入对应的配置参数对样式属性进行装载即可生成用户所需的界面样式。
在实际应用中,客户端在展示所生成目标界面框架后,可存储所述目标界面模板,在用户需要对所生成目标界面框架的样式进行变更生成相关样式的界面框架时,仅需重新输入配置参数,即可生成新的目标界面框架,无需重新编辑生成新的目标界面模板,即可实现界面框架的配置生成,减少了界面开发的工作量。
本发明提供的第一种界面框架构建方法,包括:接收针对目标数据模型的界面框架配置输入,所述界面框架配置输入至少包括:嵌套关系、配置参数,所述目标数据模型包括界面模块;根据所述嵌套关系建立各所述界面模块中样式属性之间的引用关系,得到目标界面模板;根据所述配置参数对所述目标界面模板进行装载,得到目标界面框架。在构建界面框架的过程中,通过在数据模型的界面模块中设置可相互引用的样式属性,得到可嵌套的界面模块,从而使得用户可以根据自身需求建立界面模块中样式属性之间的引用关系以获取各种界面样式的界面模块后进行装载,提高了数据模型中界面模块的扩展性,节省了扩充界面模块所需的开发成本。。
图2是本发明实施例提供的第二种界面框架构建方法的步骤流程图,包括:
步骤201,接收针对目标数据模型的界面框架配置输入,所述界面框架配置输入至少包括:嵌套关系、配置参数,所述目标数据模型包括界面模块。
在本方实施例中,所述目标数据模型的描述可参照步骤101的详细描述,此处不再赘述。由于现有技术中,所有使用数据模型描述的页面所用到的描述样式的界面模块大多采用集中管理,每次进行界面框架生成时,会全部下载到其部署的电子设备中,或预先在电子设备中缓存,由于在界面框架生成需要引用该集中管理存储的界面模块,使得存储该界面模块的文件的数据量随着界面框架的增加而急剧增加,增加了设备的存储压力,并且不同页面的样式放在一起维护带来的高度耦合性也会带来潜在的风险,增加了客户端运营维护的复杂性,并且这种扁平的样式关系也带来了大量的数据冗余。因此可以将描述界面样式信息的界面模块包含在描述界面的数据模型里,使得所生成界面样式的维护变得更加简单,并且由于所包含的界面模块支持嵌套,允许定义可复用的样式,且支持多级复用,也可减少样式信息的数据冗余。
可选的,所述界面模块包括相对应的样式属性。
步骤202,根据所述嵌套关系,通过各所述界面模块中的引用属性建立各样式属性之间的引用关系,得到各所述界面模块的中间样式属性。
在本发明实施例中,由于一个界面框架所包含的界面模块较多,如果每个界面模块都单独设置样式的话,会使得所得到的界面框架出现大量的冗余数据。因此参照图3所示的一种界面模块的逻辑编码,可以在数据模型和界面模块两个层次上支持设置theme属性,用于定义一些用小数点“.”开头命名的样式类名。这些定义好的类名可以被用在各级界面模块的style属性里的ref属性里,所述ref属性应用于theme中的样式类名,ref属性是数据类型,可以引用一组类名,且排在后面的类名对应的样式会覆盖排在前面的类名对应的样式,生成中间样式属性refStyle,然后style里定义的其他样式属性再覆盖refStyle里的样式属性,包含该样式属性的嵌套界面模块。如果引用的类名在数据模型和界面模块里的theme里已有定义,则更低层次的界面模块里的theme将会覆盖更高层次的数据模型里的theme,从而得到包含样式属性的界面模块。
可选的,所述目标数据模型、界面模块分别包括相对应的统计参数类,各所述统计参数类可相互嵌套。
在本发明实施例中,不仅是样式属性在界面框架中会出现重复定义导致数据冗余的问题,由于现有技术中定义在各界面模块中statistics属性里的pingback统计传递参数用于在界面模块每次点击交互或展示时发送引用通知信息,以便分析用户使用习惯,需要在各界面模块中进行重复定义,增加了所开发界面框架的数据体积,因此也可采用引用的机制,在数据模型和界面模块中commonStats里定义统计参数类的名称,在各级对象的statistics属性里使用ref属性来引用这些类名,并支持statistics里的参数覆盖引用到的参数,从而减少所生成界面框架中统计参数类的重复定义,减少界面框架的数据体积。
本发明实施例通过在目标数据模型和界面模块中设置可相互嵌套的统计参数类,无需再重复定义统计参数类,减少了目标界面框架的数据冗余。
步骤203,在所述中间样式属性中包括多个层级的样式属性的情况下,将所述多个层级的样式属性中层级最低的样式属性,作为所述界面模块的目标样式属性,得到目标界面模板。
在本发明实施例中,如果引用的类名在数据模型和界面模块里的theme里都有定义,则更低层次的界面模块里的样式属性将会覆盖更高层次的数据模型里的样式属性。可以理解,若所得到嵌套界面模块的样式属性为空,则将所引用的样式属性中层级最低的覆盖其他层级的样式属性,作为该嵌套界面模块的样式属性,如果该界面模块的样式属性里定义了其他样式属性,则利用该其他样式属性覆盖所引用所有层级的样式属性,作为该嵌套界面模块对应的样式属性,从而减少界面模块中重复定义样式属性所导致的数据冗余。
本发明实施例通过在界面模块的样式属性相互引用时中采用低级覆盖高级的覆盖机制,实现界面模块之间的嵌套,从而减少了界面模块中重复定义样式属性所导致的数据冗余。
可选的,所述界面模块包括:交互界面模块,所述交互界面模块预先配置有至少一个状态属性,所述配置参数包括触发事件以及相对应的状态属性。
在本发明实施例中,所述交互界面模块是指具有用户交互功能的界面模块,该交互界面模块中预置有对应不同样式属性的状态属性,依据不同的状态属性,该交互界面模块的样式属性会相应进行改变。可以通过给交互界面模块配置在触发事件发生时将该交互界面模块的状态属性切换至其他对应的状态属性,以使得交互界面模块的样式属性相应改变,从而实现用户交互功能。
步骤204,将所述触发事件及相对应的状态属性输入到目标界面模板中的交互界面模块,得到目标界面框架,以使得所述目标界面框架中的交互界面模块在检测到所述触发事件的情况下,将所述交互界面模块的状态属性切换为与所述触发事件相对应的状态属性。
在本发明实施例中,现有技术在构建界面框架过程中由于界面模块无法直观描述用户交互,导致无法灵活对界面框架中的交互逻辑进行配置,从而限制了界面开发。通常用户在界面中的交互行为会导致两种结果:一种是界面状态发生变化,另一种是发生页面跳转,页面跳转容易描述实现,仅需在界面模块中设置用于页面跳转的属性类即可,而界面状态发生变化所涉及情况复杂。针对界面状态变化,可以给支持状态变化的界面模块增加states属性,在其中定义各状态下的属性,并通过defaultState属性指定默认状态是states中的哪一个状态,然后通过界面模块的actions属性描述触发事件及在发生该触发事件时候将当前界面模块的状态属性切换到某一其他状态属性。
示例性的,例如用于投票按钮的界面模块,分为投票前后两种状态,在投票前状态点击按钮会发起投票请求,并根据投票请求的结果来决定下一个状态。
参照图4示出的一种投票状态的交互逻辑编码,通过actions对象来描述界面模块可以响应的事件类型,如上述投票按钮示例中的“click”,即点击事件,以及该时间的相应动作,即一个包含action属性的data属性的对象,action表示动作类型,data里包含任何动作所需的信息。action类型是可以是少量枚举的。data里的内容是根据action类型息息相关的。例如“state-request”,表示点击投票按钮触发的动作是一个状态请求,data里则定义了这个动作类型所需的必要信息地址和nextStates,即请求的连接url和下一个可能状态的数据,数组中每个对象的属性解释如下:
condition:切换这种状态所需满足的条件表达式,使用JavaScript语法,表达式中的result为接口请求的返回值;
name:下一个状态的名字,若condition里的表达式运算结果为true,则切换至该状态;
override:一个可包含当前UI元素任何属性的对象,表示若condition里的表达式运算结果为true,可以用这个对象里的属性值覆盖下一个状态里定义的属性值。如果投票按钮上的投票数需要显示为接口返回的投票数,从而可以灵活配置切换状态属性所需的条件,满足各种不同的应用场景。
可选的,所述目标数据模型、界面模块是采用JSON格式生成的。
在本发明实施例中,基于JSON(JavaScript Object Notation,一种轻量级的数据交换格式)数据结构来描述目标数据模型,可以使用更少的数据量描述相同的信息量,适用于泛用性更高的Java Script编程语言,可以快速且便捷地对内存对象进行转化。
可选的,所述界面模块:横向布局元素、纵向布局元素、滚动布局元素、图片元素、文字元素、按钮元素、视频元素、动画元素、进度条元素中的至少一种元素。
在本发明实施例中,为得到颗粒度更加合理的界面模块,所述界面模块中可包含以下元素,当然所述元素也可根据实际需求进行扩展:
row:横向布局容器元素;column:纵向布局容器元素;scroll:横向滚动元素,但也支持纵向的滚动布局元素;image:图片元素;text:文字元素;button:按钮元素;video:视频元素;lottie:动画元素;progress:进度条元素。
本发明实施例通过在可交互的界面模块中设置不同的状态属性,从而可通过配置参数的调整切换状态属性所需的触发事件,无需再重复定义状态属性,提高了界面模块的扩展性。
本发明提供的第二种界面框架构建方法,在构建界面框架的过程中,通过在数据模型的界面模块中设置可相互引用的样式属性,得到可嵌套的界面模块,从而使得用户可以根据自身需求建立界面模块中样式属性之间的引用关系以获取各种界面样式的界面模块后进行装载,提高了数据模型中界面模块的扩展性,节省了扩充界面模块所需的开发成本,并且通过构建合理颗粒度的界面模块,提高了界面框架开发的灵活性,通过设置可支持覆盖和继承机制的统计参数类,减少了所构建界面框架的提及,通过设置支持多种状态的交互界面模块,进一步提高了界面框架构建的适用性。
图5是本发明实施例提供的一种界面框架构建装置30的结构框图,包括:
接收模块301,用于接收针对目标数据模型的界面框架配置输入,所述界面框架配置输入至少包括:嵌套关系、配置参数,所述目标数据模型包括界面模块;
嵌套模块302,用于根据所述嵌套关系建立各所述界面模块中样式属性之间的引用关系,得到目标界面模板;
装载模块303,用于根据所述配置参数对所述目标界面模板进行装载,得到目标界面框架。
可选的,所述样式属性包含引用属性,所述嵌套模块302,包括:
第一嵌套子模块3021,用于根据所述嵌套关系,通过各所述界面模块中的引用属性建立各样式属性之间的引用关系,得到各所述界面模块的中间样式属性;
第二嵌套子模块3022,用于在所述中间样式属性中包括多个层级的样式属性的情况下,将所述多个层级的样式属性中层级最低的样式属性,作为所述界面模块的目标样式属性,得到目标界面模板。
可选的,所述界面模块包括:交互界面模块,所述交互界面模块预先配置有至少一个状态属性,所述配置参数包括触发事件以及相对应的状态属性,所述装载模块303,包括:
装载子模块3031,用于将所述触发事件及相对应的状态属性输入到目标界面模板中的交互界面模块,得到目标界面框架,以使得所述目标界面框架中的交互界面模块在检测到所述触发事件的情况下,将所述交互界面模块的状态属性切换为与所述触发事件相对应的状态属性。
可选的,所述目标数据模型、界面模块分别包括相对应的统计参数类。
可选的,所述目标数据模型、界面模块是采用JSON格式生成的。
可选的,所述界面模块:横向布局元素、纵向布局元素、滚动布局元素、图片元素、文字元素、按钮元素、视频元素、动画元素、进度条元素中的至少一种元素。
本发明提供的一种界面框架构建装置,在构建界面框架的过程中,通过在数据模型的界面模块中设置可相互引用的样式属性,得到可嵌套的界面模块,从而使得用户可以根据自身需求建立界面模块中样式属性之间的引用关系以获取各种界面样式的界面模块后进行装载,提高了数据模型中界面模块的扩展性,节省了扩充界面模块所需的开发成本。
对于上述服务器的实施例而言,由于其与方法实施例基本相似,所以描述的比较简单,相关之处参见方法实施例的部分说明即可。
本发明实施例还提供了一种电子设备,如图6所示,包括处理器401、通信接口402、存储器403和通信总线404,其中,处理器401,通信接口402,存储器403通过通信总线404完成相互间的通信,
存储器403,用于存放计算机程序;
处理器401,用于执行存储器403上所存放的程序时,实现如下步骤:
接收针对目标数据模型的界面框架配置输入,所述界面框架配置输入至少包括:嵌套关系、配置参数,所述目标数据模型包括界面模块;根据所述嵌套关系建立各所述界面模块中样式属性之间的引用关系,得到目标界面模板;根据所述配置参数对所述目标界面模板进行装载,得到目标界面框架。
上述终端提到的通信总线可以是外设部件互连标准(Peripheral ComponentInterconnect,简称PCI)总线或扩展工业标准结构(Extended Industry StandardArchitecture,简称EISA)总线等。该通信总线可以分为地址总线、数据总线、控制总线等。为便于表示,图中仅用一条粗线表示,但并不表示仅有一根总线或一种类型的总线。
通信接口用于上述终端与其他设备之间的通信。
存储器可以包括随机存取存储器(Random Access Memory,简称RAM),也可以包括非易失性存储器(non-volatile memory),例如至少一个磁盘存储器。可选的,存储器还可以是至少一个位于远离前述处理器的存储装置。
上述的处理器可以是通用处理器,包括中央处理器(Central Processing Unit,简称CPU)、网络处理器(Network Processor,简称NP)等;还可以是数字信号处理器(Digital Signal Processing,简称DSP)、专用集成电路(Application SpecificIntegrated Circuit,简称ASIC)、现场可编程门阵列(Field-Programmable Gate Array,简称FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。
在本发明提供的又一实施例中,还提供了一种计算机可读存储介质,该计算机可读存储介质中存储有指令,当其在计算机上运行时,使得计算机执行上述实施例中任一所述的界面框架构建方法。
在本发明提供的又一实施例中,还提供了一种包含指令的计算机程序产品,当其在计算机上运行时,使得计算机执行上述实施例中任一所述的界面框架构建方法。
在上述实施例中,可以全部或部分地通过软件、硬件、固件或者其任意组合来实现。当使用软件实现时,可以全部或部分地以计算机程序产品的形式实现。所述计算机程序产品包括一个或多个计算机指令。在计算机上加载和执行所述计算机程序指令时,全部或部分地产生按照本发明实施例所述的流程或功能。所述计算机可以是通用计算机、专用计算机、计算机网络、或者其他可编程装置。所述计算机指令可以存储在计算机可读存储介质中,或者从一个计算机可读存储介质向另一个计算机可读存储介质传输,例如,所述计算机指令可以从一个网站站点、计算机、服务器或数据中心通过有线(例如同轴电缆、光纤、数字用户线(DSL))或无线(例如红外、无线、微波等)方式向另一个网站站点、计算机、服务器或数据中心进行传输。所述计算机可读存储介质可以是计算机能够存取的任何可用介质或者是包含一个或多个可用介质集成的服务器、数据中心等数据存储设备。所述可用介质可以是磁性介质,(例如,软盘、硬盘、磁带)、光介质(例如,DVD)、或者半导体介质(例如固态硬盘Solid State Disk(SSD))等。
需要说明的是,在本文中,诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来,而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且,术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含,从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素,而且还包括没有明确列出的其他要素,或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下,由语句“包括一个……”限定的要素,并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。
本说明书中的各个实施例均采用相关的方式描述,各个实施例之间相同相似的部分互相参见即可,每个实施例重点说明的都是与其他实施例的不同之处。尤其,对于系统实施例而言,由于其基本相似于方法实施例,所以描述的比较简单,相关之处参见方法实施例的部分说明即可。
以上所述仅为本发明的较佳实施例而已,并非用于限定本发明的保护范围。凡在本发明的精神和原则之内所作的任何修改、等同替换、改进等,均包含在本发明的保护范围内。
Claims (10)
1.一种界面框架构建方法,其特征在于,包括:
接收针对目标数据模型的界面框架配置输入,所述界面框架配置输入至少包括:嵌套关系、配置参数,所述目标数据模型包括界面模块;
根据所述嵌套关系建立各所述界面模块中样式属性之间的引用关系,得到目标界面模板;
根据所述配置参数对所述目标界面模板进行装载,得到目标界面框架。
2.根据权利要求1所述的方法,其特征在于,所述样式属性包含引用属性,所述根据所述嵌套关系建立各所述界面模块中样式属性之间的引用关系的步骤,包括:
根据所述嵌套关系,通过各所述界面模块中的引用属性建立各样式属性之间的引用关系,得到各所述界面模块的中间样式属性;
在所述中间样式属性中包括多个层级的样式属性的情况下,将所述多个层级的样式属性中层级最低的样式属性,作为所述界面模块的目标样式属性,得到目标界面模板。
3.根据权利要求2所述的方法,其特征在于,所述界面模块包括:交互界面模块,所述交互界面模块预先配置有至少一个状态属性,所述配置参数包括触发事件以及相对应的状态属性,所述根据所述配置参数对所述目标界面模板进行装载,得到目标界面框架的步骤,包括:
将所述触发事件及相对应的状态属性输入到目标界面模板中的交互界面模块,得到目标界面框架,以使得所述目标界面框架中的交互界面模块在检测到所述触发事件的情况下,将所述交互界面模块的状态属性切换为与所述触发事件相对应的状态属性。
4.根据权利要求2所述的方法,其特征在于,所述目标数据模型、界面模块分别包括相对应的统计参数类,各所述统计参数类可相互嵌套。
5.根据权利要求4所述的方法,其特征在于,所述目标数据模型、界面模块是采用JSON格式生成的。
6.根据权利要求1至5中任一所述的方法,其特征在于,所述界面模块:横向布局元素、纵向布局元素、滚动布局元素、图片元素、文字元素、按钮元素、视频元素、动画元素、进度条元素中的至少一种元素。
7.一种界面框架构建装置,其特征在于,包括:
接收模块,用于接收针对目标数据模型的界面框架配置输入,所述界面框架配置输入至少包括:嵌套关系、配置参数,所述目标数据模型包括界面模块;
嵌套模块,用于根据所述嵌套关系建立各所述界面模块中样式属性之间的引用关系,得到目标界面模板;
装载模块,用于根据所述配置参数对所述目标界面模板进行装载,得到目标界面框架。
8.根据权利要求7所述的装置,其特征在于,所述样式属性包含引用属性,所述嵌套模块,包括:
第一嵌套子模块,用于根据所述嵌套关系,通过各所述界面模块中的引用属性建立各样式属性之间的引用关系,得到各所述界面模块的中间样式属性;
第二嵌套子模块,用于在所述中间样式属性中包括多个层级的样式属性的情况下,将所述多个层级的样式属性中层级最低的样式属性,作为所述界面模块的目标样式属性,得到目标界面模板。
9.一种电子设备,其特征在于,包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序,所述处理器执行所述计算机程序时实现权利要求1至6中任一所述的界面框架构建方法。
10.一种计算机可读存储介质,其特征在于,所述计算机可读存储介质上存储计算机程序,所述计算机程序被处理器执行时实现权利要求1至6中任一所述的界面框架构建方法。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202010125852.9A CN111309293B (zh) | 2020-02-27 | 2020-02-27 | 一种界面框架构建方法、装置、电子设备及存储介质 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202010125852.9A CN111309293B (zh) | 2020-02-27 | 2020-02-27 | 一种界面框架构建方法、装置、电子设备及存储介质 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN111309293A true CN111309293A (zh) | 2020-06-19 |
CN111309293B CN111309293B (zh) | 2023-09-05 |
Family
ID=71145405
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202010125852.9A Active CN111309293B (zh) | 2020-02-27 | 2020-02-27 | 一种界面框架构建方法、装置、电子设备及存储介质 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN111309293B (zh) |
Cited By (7)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN111258694A (zh) * | 2020-01-15 | 2020-06-09 | 广州虎牙科技有限公司 | 界面加载方法、装置、用户端及存储介质 |
CN111522545A (zh) * | 2020-07-06 | 2020-08-11 | 嘉兴太美医疗科技有限公司 | 基于Java的动态构建模型的方法、装置、系统和可读介质 |
CN111831263A (zh) * | 2020-07-20 | 2020-10-27 | 北京字节跳动网络技术有限公司 | 数据处理的方法、装置、电子设备和计算机可读介质 |
CN112068823A (zh) * | 2020-09-04 | 2020-12-11 | 苏州精易会信息技术有限公司 | 基于属性列表动态生成对象积木块的方法、装置和电子设备 |
CN112181554A (zh) * | 2020-09-08 | 2021-01-05 | 安徽鸿程光电有限公司 | 一种交互界面显示方法、设备、电子设备及存储介质 |
CN113722538A (zh) * | 2021-09-08 | 2021-11-30 | 北京奇艺世纪科技有限公司 | 一种界面动态渲染方法及装置 |
CN114398123A (zh) * | 2021-12-29 | 2022-04-26 | 深圳市英维克信息技术有限公司 | 人机界面生成方法、装置、设备和存储介质 |
Citations (6)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN101334728A (zh) * | 2008-07-28 | 2008-12-31 | 北京航空航天大学 | 一种基于xml文档描述的界面生成方法和平台 |
US20140033168A1 (en) * | 2009-09-25 | 2014-01-30 | Adobe Systems Incorporated | Method and system for providing modeled components |
CN109375975A (zh) * | 2018-09-30 | 2019-02-22 | 新华三大数据技术有限公司 | 模态框构建方法、装置、电子设备、计算机可读存储介质 |
CN109445792A (zh) * | 2018-11-05 | 2019-03-08 | 用友网络科技股份有限公司 | 界面构建方法、装置及计算机可读存储介质 |
CN110308906A (zh) * | 2019-07-04 | 2019-10-08 | 北京奇艺世纪科技有限公司 | 一种显示界面方法及装置 |
CN110727433A (zh) * | 2019-10-13 | 2020-01-24 | 吉林大学 | 一种多通道三维用户界面的生成方法 |
-
2020
- 2020-02-27 CN CN202010125852.9A patent/CN111309293B/zh active Active
Patent Citations (6)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN101334728A (zh) * | 2008-07-28 | 2008-12-31 | 北京航空航天大学 | 一种基于xml文档描述的界面生成方法和平台 |
US20140033168A1 (en) * | 2009-09-25 | 2014-01-30 | Adobe Systems Incorporated | Method and system for providing modeled components |
CN109375975A (zh) * | 2018-09-30 | 2019-02-22 | 新华三大数据技术有限公司 | 模态框构建方法、装置、电子设备、计算机可读存储介质 |
CN109445792A (zh) * | 2018-11-05 | 2019-03-08 | 用友网络科技股份有限公司 | 界面构建方法、装置及计算机可读存储介质 |
CN110308906A (zh) * | 2019-07-04 | 2019-10-08 | 北京奇艺世纪科技有限公司 | 一种显示界面方法及装置 |
CN110727433A (zh) * | 2019-10-13 | 2020-01-24 | 吉林大学 | 一种多通道三维用户界面的生成方法 |
Cited By (10)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN111258694A (zh) * | 2020-01-15 | 2020-06-09 | 广州虎牙科技有限公司 | 界面加载方法、装置、用户端及存储介质 |
CN111522545A (zh) * | 2020-07-06 | 2020-08-11 | 嘉兴太美医疗科技有限公司 | 基于Java的动态构建模型的方法、装置、系统和可读介质 |
CN111831263A (zh) * | 2020-07-20 | 2020-10-27 | 北京字节跳动网络技术有限公司 | 数据处理的方法、装置、电子设备和计算机可读介质 |
CN111831263B (zh) * | 2020-07-20 | 2023-04-25 | 抖音视界有限公司 | 数据处理的方法、装置、电子设备和计算机可读介质 |
CN112068823A (zh) * | 2020-09-04 | 2020-12-11 | 苏州精易会信息技术有限公司 | 基于属性列表动态生成对象积木块的方法、装置和电子设备 |
CN112068823B (zh) * | 2020-09-04 | 2024-06-07 | 苏州精易会信息技术有限公司 | 基于属性列表动态生成对象积木块的方法、装置和电子设备 |
CN112181554A (zh) * | 2020-09-08 | 2021-01-05 | 安徽鸿程光电有限公司 | 一种交互界面显示方法、设备、电子设备及存储介质 |
CN113722538A (zh) * | 2021-09-08 | 2021-11-30 | 北京奇艺世纪科技有限公司 | 一种界面动态渲染方法及装置 |
CN113722538B (zh) * | 2021-09-08 | 2023-09-05 | 北京奇艺世纪科技有限公司 | 一种界面动态渲染方法及装置 |
CN114398123A (zh) * | 2021-12-29 | 2022-04-26 | 深圳市英维克信息技术有限公司 | 人机界面生成方法、装置、设备和存储介质 |
Also Published As
Publication number | Publication date |
---|---|
CN111309293B (zh) | 2023-09-05 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN111309293A (zh) | 一种界面框架构建方法、装置、电子设备及存储介质 | |
CN110045894B (zh) | 用于对话框定制的系统和方法 | |
US11763076B2 (en) | Document applet generation | |
JP7366078B2 (ja) | ページのテーマを決定するための方法、装置、電子機器、コンピュータ可読記憶媒体及びコンピュータプログラム | |
CN112800370B (zh) | 业务单据的处理方法、装置、计算机设备和存储介质 | |
CN101188623B (zh) | 用于动态绑定门户组件的方法和系统 | |
CN111708537A (zh) | 基于组件模板的页面渲染方法、设备及可读存储介质 | |
CN112667330B (zh) | 一种页面显示方法及计算机设备 | |
CN112016023B (zh) | 业务处理方法、装置、终端及存储介质 | |
US20180293086A1 (en) | Cross-application content injection | |
US20150052496A1 (en) | Providing a user interface library for building web-based applications | |
CN113535165A (zh) | 界面生成方法、装置、电子设备及计算机可读存储介质 | |
CN102081595A (zh) | 程序生成装置及程序生成方法 | |
WO2013109858A1 (en) | Design canvas | |
CN106528136A (zh) | 基于微件的显示方法、装置以及终端设备 | |
CN113792208B (zh) | 基于网页的图片交互方法、装置、设备、介质及程序产品 | |
CN116931895A (zh) | 一种复合组件的处理方法、装置及设备 | |
CN117055766A (zh) | 基于Ant Design的树形数据处理方法、装置、介质及电子设备 | |
JP5049880B2 (ja) | 情報処理装置 | |
CN116088721A (zh) | 页面交互方法、装置、设备及存储介质 | |
CN114675912B (zh) | 主题皮肤切换方法、装置、计算机设备及计算机存储介质 | |
CN114048401A (zh) | 一种页面跳转方法及装置、电子设备、存储介质 | |
EP2372532A1 (en) | Method for programming a web application | |
US11093572B2 (en) | Hierarchical modeling for network sites | |
CN114895995B (zh) | 控件视图的生成方法、装置、电子设备及可读介质 |
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 |