CN105528206A - 基于网页的界面生成方法 - Google Patents

基于网页的界面生成方法 Download PDF

Info

Publication number
CN105528206A
CN105528206A CN201510868085.XA CN201510868085A CN105528206A CN 105528206 A CN105528206 A CN 105528206A CN 201510868085 A CN201510868085 A CN 201510868085A CN 105528206 A CN105528206 A CN 105528206A
Authority
CN
China
Prior art keywords
interface element
interface
instruction
rule
play
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.)
Pending
Application number
CN201510868085.XA
Other languages
English (en)
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 University of Posts and Telecommunications
Original Assignee
Beijing University of Posts and Telecommunications
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 University of Posts and Telecommunications filed Critical Beijing University of Posts and Telecommunications
Priority to CN201510868085.XA priority Critical patent/CN105528206A/zh
Publication of CN105528206A publication Critical patent/CN105528206A/zh
Pending legal-status Critical Current

Links

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
    • G06F9/00Arrangements for program control, e.g. control units
    • G06F9/06Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44Arrangements for executing specific programs
    • G06F9/4401Bootstrapping
    • G06F9/4416Network booting; Remote initial program loading [RIPL]

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • Computer Security & Cryptography (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本发明提供一种基于网页的界面生成方法,包括:接收用户输入的界面调用请求,所述界面调用请求包括:界面元素子集的标识以及排布规则指示和渲染规则指示,所述界面元素子集包括:至少一个界面元素的标识、排布规则以及渲染规则;根据所述界面调用请求从界面元素库中调用所述界面元素子集,并将所述界面元素子集中的所述至少一个界面元素按照所述排布规则指示和所述排布规则进行排布,以及按照所述渲染规则指示和所述渲染规则进行渲染,获取初始网页界面。本发明提供的基于网页的界面生成方法使得界面开发者的劳动成果可以积累,提高了界面生成地效率。

Description

基于网页的界面生成方法
技术领域
本发明提供一种网页界面生成技术,尤其涉及一种基于网页的界面生成方法。
背景技术
随着互联网和通信技术的发展,用户界面的开发显得尤为重要。现有技术中,界面开发通常都是基于网页(Web)的界面开发,在Web界面开发过程中,界面开发者必须对每个界面提供完整的界面描述和界面行为描述,其中界面描述是指对每一个界面元素进行的解释描述,界面行为描述是指对界面元素所执行的动作进行的解释描述。例如一个分数查询系统界面,界面业务开发者要设定好该网页需要显示的内容,比如查分登录窗口,成绩单显示窗口等,界面开发者根据界面业务开发者的要求具体对界面进行分配和描述,例如将整个用户界面分成三部分,对这三部分所处的位置和显示的内容进行具体的描述,通常上述工作由界面业务开发者或界面开发者独立完成。
但是,采用现有的web界面开发方法,由于浏览器本身的功能不能扩展,在界面开发过程中,界面开发者必须对每一个界面中的元素进行完整的描述,例如上述的分数查询系统的界面是分成了三部分并对该三部分的具体位置进行了详细的描述,现在开发者又想开发一个由三部分组成的界面,那么开发者必须对该界面中的三个部分的具体位置再重新进行详细的描述。因此,现有的web界面开发方法会给开发者造成巨大的工作量,且开发效率低下。
发明内容
本发明提供一种基于网页的界面生成方法,使得界面开发者的劳动成果可以积累,提高了界面生成地效率。
本发明提供一种基于网页的界面生成方法,包括:
接收用户输入的界面调用请求,所述界面调用请求包括:界面元素子集的标识以及排布规则指示和渲染规则指示,所述界面元素子集包括:至少一个界面元素的标识、排布规则以及渲染规则;
根据所述界面调用请求从界面元素库中调用所述界面元素子集,并将所述界面元素子集中的所述至少一个界面元素按照所述排布规则指示和所述排布规则进行排布,以及按照所述渲染规则指示和所述渲染规则进行渲染,获取初始网页界面;
接收所述用户输入的排布调整指令和渲染调整指令;
根据所述排布调整指令将所述初始网页界面上全部或部分界面元素的排布进行调整,并根据所述渲染调整指令调整所述初始网页界面上全部或部分界面元素的渲染方式,获取新的网页界面。
进一步地,本发明提供一种基于网页的界面生成方法,还包括:
建立所述界面元素库;
其中,所述界面元素库中包括至少一个界面元素子集。
进一步的,界面元素子集中还包括:动作规则;相应地,所述界面调用请求还包括:动作规则指示;
所述根据所述界面调用请求从界面元素库中调用所述界面元素子集,并将所述界面元素子集中的所述至少一个界面元素按照所述排布规则指示进行排布,以及按照所述渲染指示进行渲染之后,还包括:
按照所述动作规则指示和所述动作规则为所述至少一个界面元素添加动作。
其中,所述排布调整指令包括下述至少一种或其任意组合:添加界面元素指令、删除界面元素指令、界面元素位置变化指令、界面元素大小变化指令。
其中,所述界面元素位置变化指令包括:所述界面元素在原始排布方式中所占比例增大或缩小预设值;
所述界面元素大小变化指令包括:所述界面元素按照原始排布方式增大或缩小预设比例。
其中,所述渲染调整指令包括下述至少一种或其任意组合:图片绘制指令、线条绘制指令、文字绘制指令。
进一步地,所述根据所述界面调用请求从界面元素库中调用所述界面元素子集,并将所述界面元素子集中的所述至少一个界面元素按照所述排布规则指示和所述排布规则进行排布,以及按照所述渲染规则指示和所述渲染规则进行渲染,获取初始网页界面,包括:
将所述界面调用请求转换为所述界面元素库可识别指令;
根据所述界面元素库可识别指令从界面元素库中调用所述界面元素子集,并将所述界面元素子集中的所述至少一个界面元素按照所述排布规则指示和所述排布规则进行排布,以及按照所述渲染规则指示和所述渲染规则进行渲染,获取初始网页界面。
由上述技术方案可知,本发明的一种基于网页的界面生成方法,接收用户输入的界面调用请求,所述界面调用请求包括:界面元素子集的标识以及排布规则指示和渲染规则指示,所述界面元素子集包括:至少一个界面元素的标识、排布规则以及渲染规则;根据所述界面调用请求从界面元素库中调用所述界面元素子集,并将所述界面元素子集中的所述至少一个界面元素按照所述排布规则指示和所述排布规则进行排布,以及按照所述渲染规则指示和所述渲染规则进行渲染,获取初始网页界面,使得界面开发者的劳动成果可以积累,提高了界面生成地效率。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案,下面将对实施例或现有技术描述中所需要使用的附图作一简单地介绍,显而易见地,下面描述中的附图是本发明的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动性的前提下,还可以根据这些附图获得其他的附图。
图1为本发明实施例一提供的一种基于网页的界面生成方法的流程图;
图2位本发明实施例二提供的一种基于网页的界面生成装置结构图。
具体实施方式
为使本发明实施例的目的、技术方案和优点更加清楚,下面将结合本发明实施例中的附图,对本发明实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例是本发明一部分实施例,而不是全部的实施例。基于本发明中的实施例,本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例,都属于本发明保护的范围。
本发明提供一种基于网页的界面生成方法,该方法主要是基于直接在父窗口上绘图系统(Paintonparentdcdirectly,简称DirectUI)实现的,一般安装有DirectUI系统的用户设备均可以实现本发明所述的方法,通过本发明所提供的方法用户可以容易的生成网页界面,使得网页界面开发工作容易积累,提高开发效率,但并不以此为限。
在用户界面生成过程中DirectUI系统是直接建立在图形输出硬件驱动和用户输入硬件驱动上的图形用户接口系统(GraphicalUserInterface,简称GUI)。在整个界面生成过程中它是作为界面描述和界面输出的中间层,向上解释界面描述和界面行为,向下输出界面,并在中间层对界面描述和界面行为的控制起到扩展的作用。目前典型的DirectUI系统包括各种浏览器引擎,以及以安卓(Android)UI为代表的用于快速应用开发的UI系统和众多开源项目。
图1为本发明实施例一提供的基于网页的界面生成方法的流程图,如图1所示,本实施例的方法可以包括:
步骤101、接收用户输入的界面调用请求,所述界面调用请求包括:界面元素子集的标识以及排布规则指示和渲染规则指示,所述界面元素子集包括:至少一个界面元素的标识、排布规则以及渲染规则。
本实施例中的界面元素子集是保存在界面元素库中,其中界面元素子集包括了至少一个界面元素以及该界面元素的排布规则和渲染规则,而界面元素库中包括了至少一个上述的界面元素子集。
具体的,用户首先将定义好的界面调用请求输入到用户设备端,用户设备端接收用户输入的界面调用请求,该界面调用请求包括了用户想要调用的界面元素子集的标识,以及界面元素的排布规则指示和渲染规则指示。
例如,界面开发者将一个由A、B和C三个界面元素组成的网页界面作为一个界面元素子集保存在界面元素库中,该界面元素子集中还具体包括这三个界面元素的排布规则和渲染规则,其中A、B和C三个界面元素具体可以是网页界面的三个分栏。如果用户想生成一个包括三个分栏的网页界面,则用户可以直接在用户设备端输入界面调用请求,该界面调用请求包括界面元素子集标识3以及排布规则指示和渲染规则指示,具体地,排布规则指示可以具体为针对界面元素子集中排布规则输入的相关参数,渲染规则指示也是针对界面元素子集中渲染规则输入相关参数。例如,排布规则包括长、宽、高,那么排布规则指示中就可以包括长、宽、高的具体数值。在此不作限制。
其中,上述界面元素的排布规则是指至少一个界面元素的具体排布方式,例如包括:界面元素的位置信息和大小信息等,具体地,可以采用坐标表示。
其中,界面元素的渲染规则是指将界面元素按照预先定义好的方式画出来,呈现在用户界面中,该渲染规则可以包括对图片的绘制,对文本的绘制以及对线条的绘制等。比如用户希望有一个按钮元素,该按钮元素是一个正方形的、红色的,这时该界面元素的渲染规则根据用户的渲染规则指示对该界面元素进行渲染,并输出到网页界面中,呈现在用户面前的就是一个正方形的红色按钮。
步骤102、根据所述界面调用请求从界面元素库中调用所述界面元素子集,并将所述界面元素子集中的所述至少一个界面元素按照所述排布规则指示和所述排布规则进行排布,以及按照所述渲染规则指示和所述渲染规则进行渲染,获取初始网页界面。
具体的,用户设备接收到上述用户输入的界面调用请求后,用户设备在自己已经建立好的界面元素库中寻找用户输入的界面元素子集标识所指的界面元素子集,同时用户设备根据用户输入的该界面元素的排布规则指示和界面元素子集中固有的排布规则对该界面元素子集中的界面元素进行排布,根据用户输入的该界面元素的渲染规则指示和界面元素子集固有的渲染规则对该界面元素子集中的界面元素进行渲染,并将排布和渲染好的界面元素输出到用户界面,形成一个初始网页界面。
步骤103、接收所述用户输入的排布调整指令和渲染调整指令。
步骤104、根据所述排布调整指令将所述初始网页界面上全部或部分界面元素的排布进行调整,并根据所述渲染调整指令调整所述初始网页界面上全部或部分界面元素的渲染方式,获取新的网页界面。
具体的,如果用户对初始网页界面中界面的排布和渲染不满意时,用户可以在用户设备提供的界面上输入排布调整指令和渲染调整指令,具体地该排布调整指令可以调整界面元素在初始网页界面中的位置、或者在初始网页界面中增加新的界面元素、删除界面元素等。
该渲染调整指令可以对初始网页界面中的界面元素的重新绘制,或者是对初始网页界面中的界面元素进行部分调整,例如调整线条、颜色等。
需要说明的是,排布调整指令对初始网页界面上的界面元素调整位置和大小后,可能导致界面元素部分渲染变化,因此一般先进行排布调整、再进行渲染调整。
本实施例提供的基于网页的界面生成方法,通过接收用户输入的界面调用请求,所述界面调用请求包括:界面元素子集的标识以及排布规则指示和渲染规则指示,所述界面元素子集包括:至少一个界面元素的标识、排布规则以及渲染规则;根据所述界面调用请求从界面元素库中调用所述界面元素子集,并将所述界面元素子集中的所述至少一个界面元素按照所述排布规则指示和所述排布规则进行排布,以及按照所述渲染规则指示和所述渲染规则进行渲染,获取初始网页界面;接收所述用户输入的排布调整指令和渲染调整指令;根据所述排布调整指令将所述初始网页界面上全部或部分界面元素的排布进行调整,并根据所述渲染调整指令调整所述初始网页界面上全部或部分界面元素的渲染方式,获取新的网页界面,实现了在生成网页界面时只需要输入调用请求,无需每次建立网页界面时都再重新建立界面元素、排布规则等,使得界面开发者的劳动成果可以积累,也提高了界面生成地效率。
在上述实施例的基础上,基于网页的界面生成方法还包括:建立上述界面元素库。
可选地,界面元素库包括至少一个界面元素子集,该界面元素集包括至少一个界面元素、界面元素的排布规则、界面元素的渲染规则。
本实施例所述界面元素库可以由界面开发者建立,界面开发者将定义好的一些界面元素描述以及这些界面元素的排布规则和渲染规则作为一个界面元素集添加到界面元素库中等待用户调用,该界面元素集中存放的界面元素描述及其排布规则和渲染规则都是计算机可以识别的机器语言和代码。
进一步地,本实施例的界面元素子集中还可以包括:动作规则。
相应地,界面调用请求还包括:动作规则指示。那么,根据上述界面调用请求从界面元素库中调用所述界面元素子集,并将所述界面元素子集中的所述至少一个界面元素按照所述排布规则指示进行排布,以及按照所述渲染指示进行渲染之后,还包括:按照所述动作规则指示和所述动作规则为所述至少一个界面元素添加动作。
也就是说,用户向用户设备输入界面调用请求,该界面调用请求除上述所述的界面元素子集标识、排布规则指示和渲染规则指示外还包括对调用的界面元素的动作规则指示,用户设备接收到界面调用请求后在已经建立好的界面元素库中调用界面元素子集标识所对应的界面元素子集,并根据用户输入的排布规则指示和界面元素子集固有的排布规则对界面元素进行排布,根据用户输入的渲染布规则指示和界面元素子集固有的渲染规则对界面元素进行渲染,进而还根据动作规则指示和界面元素子集固有的动作规则对调用的界面元素添加动作,以获取初始网页界面。
其中,上述界面元素的动作主要是指用户在使用网页界面时,用户执行某些操作所引起的界面元素执行的相应地动作,例如用户执行的操作可以包括:鼠标左键按下、鼠标移动、鼠标双击、鼠标滚轮滚动、键盘按键、定时器、鼠标进入某个界面元素的区域等,相应地,例如,用户鼠标滚轮滚动,对应的界面元素执行的动作就是在网页界面上上下滑动,或者,用户鼠标左键按下,对应的界面元素执行的动作就是显示被选中。用户设备根据界面调用请求对界面元素添加相应的动作,使得生成的网页界面是可交互的。
本实施例建立的界面元素库包括至少一个界面元素子集,界面调用请求还包括动作规则指示,用户通过界面调用请求从界面元素库中调用界面元素子集,并将界面元素子集中的至少一个界面元素按照排布规则指示进行排布,以及按照渲染指示进行渲染之后,再按照动作规则指示和动作规则为至少一个界面元素添加动作,实现了用户与网页界面之间的交互。
进一步地,本实施例的界面元素排布调整指令包括下述至少一种或其任意组合:添加界面元素指令、删除界面元素指令、界面元素位置变化指令、界面元素大小变化指令。
可选的,上述界面元素位置变化指令包括:界面元素在原始排布方式中所占比例增大或缩小预设值;上述界面元素大小变化指令包括:界面元素按照原始排布方式增大或缩小预设比例。
举例来说,用户想建立一个包括三个分栏的网页界面,该三个分栏分别为界面元素A、界面元素B和界面元素C,用户输入界面调用请求,调用包括三个分栏的网页界面对应的界面元素子集,用户设备根据用户调用的界面元素子集生成三个分栏的网页界面后,用户想对生成的网页界面中的第一分栏即界面元素A进行放大,这时用户只需要再次输入排布调整指令要求将第一分栏增大到预设比例,比如1.2,由于界面元素A的大小和位置的变化引起了界面元素B和C的大小和位置的变化,这时由界面元素A、B和C构成的网页界面要进行重新排布。
同理,用户还可以对网页界面中界面元素A、B和C所占整个网页界面的比例进行重新分配,其原理同上,此处不再赘述。
上述的界面排布调整指令会引起界面元素的位置和大小的变化,需要对界面元素进行重新排布,本实施例中提供了两种界面元素排布方法,一种是对整个界面元素集中的界面元素进行全部重排,一种是对位置和大小发生改变的界面元素进行局部重排。此外,本发明还包括了其他的界面元素排布方式,对此本发明不做限制。
举例说明,在该界面元素子集中的界面元素可以以界面元素树的形式存在,界面元素树的根节点负责整个排布过程的控制,其它每个节点表示一个界面元素,这些界面元素完成实际的排布工作。界面元素开发者定义好不同类界面元素的排布规则,即先排谁,后排谁,以及排布过程中各界面元素之间怎样进行信息交换,接着将该排布规则存放在界面元素子集中。具体的,根节点三次遍历它所在的界面元素树,完成界面元素树的排布。在排布过程中每个节点与排布相关的三个重要参数是宽度参数(measureWidth)、高度参数(measureHeight)和构图(layout),其中measureWidth完成以调用元素为根的界面元素(子)树中所有元素的宽度的确定、measureHeight完成以调用元素为根的界面元素(子)树中所有元素的高度的确定,layout完成以调用元素为根的界面元素(子)树中所有元素的位置的确定。这三个方法的实现是递归的,即每一个方法中会用到子节点中的这个方法。根节点依次调用这三个方法,完成它所在的界面元素树的排布过程。
在界面元素树的内容发生变化时,对整个界面元素树进行重新排布的效率是低下的。事实上,在界面元素树的内容发生变化时,并不是所有界面元素的位置和大小都会发生变化,排布系统只需要对依赖于界面元素树变化的部分进行重新排布。
具体的,当界面元素树中某个元素被加入或被移除或位置和大小的描述发生变化时,首先发生变化的界面元素的父节点对其目前的位置和大小做一标记,比如m_layout_invalid标志,然后该父节点将重新排布请求逐级向上汇报,直到界面元素树的根节点收到该请求,接着根节点的measureWidth、measureHeight和layout检查上述父节点保存的m_layout_invalid标志与最后一次排布过程中父节点传递下来的策略是否相同,该策略可以是界面元素的位置和大小,如果不同则进行递归排布,对发生变化的界面元素所对应的父树进行重新排布,没有发生变化的界面元素所对应的父树不需要重新排布。
本实施例提供的局部调整排布法针对发生变化的界面元素进行重新排布,这样大大减少了排布的时间提高了排布效率。
需要说明的是,本发明中的界面元素子集中的界面元素还可以是线型等其他的简单形式存在,本发明对此不做限制。
进一步地,本实施例的的渲染调整指令包括下述至少一种或其任意组合:图片绘制指令、线条绘制指令、文字绘制指令。
图片绘制指令具体可以包括:图片缩放(正常、居中、拉伸、9官格拉伸,3官格拉伸)、图片缓存(缓存已完成缩放的图片,再次绘制时不必再进行缩放)、图片裁剪、图片透明度控制和图片解析(从图片中读取拉伸参数等信息)等。文字绘制指令可以包括:文字外观控制、文字位置控制(居中、左对齐、右对齐等)、文字大小测量等。线条绘制指令可以包括:线条绘制、线条外观控制等。
举例说明,在该界面元素子集中的界面元素可以以界面元素树的形式存在,具体地,界面元素树的根节点负责控制渲染过程。根节点持有用于界面渲染的整个画布,并在画布上绘制界面元素的背景。其它的节点,即界面元素首先绘制自己(除背景外)的内容,然后递归地调用子节点完成绘制。在调用子节点时,根据子节点的坐标,通过变换和裁剪,在画布上取出子节点使用的画布,并将这个画布传递给子节点,以此类推,直到界面元素树中的所有界面元素渲染完成。
但在实际应用中界面元素树可能被多次修改,对界面元素树的每一次修改进行一次界面元素树的重新绘制的效率是低下的,例如,一个文字元素的文字颜色先被改为红色,又被改为蓝色,这种情况下,前一次修改完成后进行的界面元素树的重绘是没有意义的。具体实现时,可以用一个矩形区域表示发生变化的界面元素所在的区域,该矩形区域可以用坐标值表示,并将该矩形区域作为参数输入到界面元素重绘列表中等待重绘。
当界面元素由于某种原因(例如位置发生变化,内容发生变化等)需要被重新绘制时,界面元素重绘列表中的界面元素进行重绘。
本实施例中用户输入的渲染调整指令包括图片绘制指令、线条绘制指令、文字绘制指令中的至少一种或其任意组合,根据用户输入的渲染调整指令对界面元素树中的全部界面元素或者部分界面元素进行重新渲染绘制,从而得到用户想要的界面渲染效果。
进一步地,本实施例的基于网页的界面生成方法还包括根据所述界面调用请求从界面元素库中调用所述界面元素子集,并将所述至少一个界面元素按照所述排布规则指示进行排布,以及按照所述渲染指示进行渲染,获取初始网页界面,包括:将所述界面调用请求转换为所述界面元素库可识别指令;根据所述界面元素库可识别指令从界面元素库中调用所述至少一个界面元素的标识对应的至少一个界面元素,并将所述至少一个界面元素按照所述排布规则指示进行排布,以及按照所述渲染指示进行渲染,获取初始网页界面。
本发明中界面调用请求是用户以界面描述的形式输入给用户设备的,本实施例所述的界面描述语言为XML语言,本发明还可以是任何一种界面描述语言,对此本发明不做限制。
界面元素库可识别指令
举例说明,典型的界面描述形式为:
</按钮>
<按钮样式=“鼠标悬停亮高”大小=“高度50像素,宽度和父节点相同”>
<图标样式=“前进”大小=“高度父节点相同,宽度和图标宽度相同”位置=“垂直居中,水平居中”/>
<文字内容=“前进”大小=“高度父节点相同,宽度和文字宽度相同”位置=“垂直居中,水平居中”/>
本实施例中如果用户输入的界面调用请求是用XML语言的界面描述,则可以用XML解析器将用户输入的界面调用请求转换为计算机可识别的语言和代码,本发明还可以使用其他的解析器,对此本发明不做限制。其中,XML解析器是一个用于对网页进行数据抓取的工具,它能够有效的对不规范的标记进行处理,生成剖析树。
例如,首先XML解析器将用户输入的界面调用请求XML文档解析为XML文档树。接着,XML解析器将上述XML文档树的根节点传递给界面元素工厂(XFrameXMLFactory)。然后界面元素工厂根据传递来的XML文档树的根节点的名字,在界面元素库中查找对应的界面元素产生器(X.buildFromXML),并利用查找的界面元素产生器形成新的实例化的界面元素。之后,界面元素工厂把传递给它的XML文档树的根节点传递给新的实例化的界面元素,该新的实例化的界面元素使用XML文档树的根节点的属性完成自身的初始化,并将XML文档树的根节点中的每一个子节点传递给界面元素工厂,递归地进行这个过程。最后,界面元素将XML文档树中的所有子节点构造成自己的子树。
本实施例通过界面调用请求从界面元素库中调用界面元素子集,并将界面元素子集中的至少一个界面元素按照排布规则指示和排布规则进行排布,以及按照渲染规则指示和渲染规则进行渲染,获取初始网页界面,实现了将界面调用请求转换为界面元素库可识别指令,减少了用户开发网页界面的难度。
图2是本发明实施例二提供的一种基于网页的界面生成装置结构图,如图2所示,本实施例的基于网页的界面生成装置包括:第一接收模块201、调用模块202、第二接收模块203和生成模块204。
其中,第一接收模块201,用于接收用户输入的界面调用请求,所述界面调用请求包括:界面元素子集的标识以及排布规则指示和渲染规则指示,所述界面元素子集包括:至少一个界面元素的标识、排布规则以及渲染规则。
调用模块202,用于根据所述界面调用请求从界面元素库中调用所述界面元素子集,并将所述界面元素子集中的所述至少一个界面元素按照所述排布规则指示和所述排布规则进行排布,以及按照所述渲染规则指示和所述渲染规则进行渲染,获取初始网页界面。
第二接收模块203,用于接收所述用户输入的排布调整指令和渲染调整指令。
生成模块204,用于根据所述排布调整指令将所述初始网页界面上全部或部分界面元素的排布进行调整,并根据所述渲染调整指令调整所述初始网页界面上全部或部分界面元素的渲染方式,获取新的网页界面。
本实施例提供的基于网页的界面生成装置可以实现图1对应的实施例中的基于网页的界面生成方法,其实现原理基本相同,在此不再赘述。
最后应说明的是:以上各实施例仅用以说明本发明的技术方案,而非对其限制;尽管参照前述各实施例对本发明进行了详细的说明,本领域的普通技术人员应当理解:其依然可以对前述各实施例所记载的技术方案进行修改,或者对其中部分或者全部技术特征进行等同替换;而这些修改或者替换,并不使相应技术方案的本质脱离本发明各实施例技术方案的范围。

Claims (7)

1.一种基于网页的界面生成方法,其特征在于,包括:
接收用户输入的界面调用请求,所述界面调用请求包括:界面元素子集的标识以及排布规则指示和渲染规则指示,所述界面元素子集包括:至少一个界面元素的标识、排布规则以及渲染规则;
根据所述界面调用请求从界面元素库中调用所述界面元素子集,并将所述界面元素子集中的所述至少一个界面元素按照所述排布规则指示和所述排布规则进行排布,以及按照所述渲染规则指示和所述渲染规则进行渲染,获取初始网页界面;
接收所述用户输入的排布调整指令和渲染调整指令;
根据所述排布调整指令将所述初始网页界面上全部或部分界面元素的排布进行调整,并根据所述渲染调整指令调整所述初始网页界面上全部或部分界面元素的渲染方式,获取新的网页界面。
2.根据权利要求1所述的方法,其特征在于,所述方法还包括:
建立所述界面元素库;
其中,所述界面元素库中包括至少一个界面元素子集。
3.根据权利要求2所述的方法,其特征在于,所述界面元素子集中还包括:动作规则;相应地,所述界面调用请求还包括:动作规则指示;
所述根据所述界面调用请求从界面元素库中调用所述界面元素子集,并将所述界面元素子集中的所述至少一个界面元素按照所述排布规则指示进行排布,以及按照所述渲染指示进行渲染之后,还包括:
按照所述动作规则指示和所述动作规则为所述至少一个界面元素添加动作。
4.根据权利要求1-3任一项所述的方法,其特征在于,所述排布调整指令包括下述至少一种或其任意组合:添加界面元素指令、删除界面元素指令、界面元素位置变化指令、界面元素大小变化指令。
5.根据权利要求4所述的方法,其特征在于,所述界面元素位置变化指令包括:所述界面元素在原始排布方式中所占比例增大或缩小预设值;
所述界面元素大小变化指令包括:所述界面元素按照原始排布方式增大或缩小预设比例。
6.根据权利要求1-3任一项所述的的方法,其特征在于,所述渲染调整指令包括下述至少一种或其任意组合:图片绘制指令、线条绘制指令、文字绘制指令。
7.根据权利要求1-3任一项所述的的方法,其特征在于,所述根据所述界面调用请求从界面元素库中调用所述界面元素子集,并将所述界面元素子集中的所述至少一个界面元素按照所述排布规则指示和所述排布规则进行排布,以及按照所述渲染规则指示和所述渲染规则进行渲染,获取初始网页界面,包括:
将所述界面调用请求转换为所述界面元素库可识别指令;
根据所述界面元素库可识别指令从界面元素库中调用所述界面元素子集,并将所述界面元素子集中的所述至少一个界面元素按照所述排布规则指示和所述排布规则进行排布,以及按照所述渲染规则指示和所述渲染规则进行渲染,获取初始网页界面。
CN201510868085.XA 2015-12-02 2015-12-02 基于网页的界面生成方法 Pending CN105528206A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201510868085.XA CN105528206A (zh) 2015-12-02 2015-12-02 基于网页的界面生成方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201510868085.XA CN105528206A (zh) 2015-12-02 2015-12-02 基于网页的界面生成方法

Publications (1)

Publication Number Publication Date
CN105528206A true CN105528206A (zh) 2016-04-27

Family

ID=55770455

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201510868085.XA Pending CN105528206A (zh) 2015-12-02 2015-12-02 基于网页的界面生成方法

Country Status (1)

Country Link
CN (1) CN105528206A (zh)

Cited By (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN108037922A (zh) * 2017-12-26 2018-05-15 携程计算机技术(上海)有限公司 商品网页界面配置方法及系统
CN108628629A (zh) * 2018-05-21 2018-10-09 网易(杭州)网络有限公司 Ui更新方法、装置、设备及存储介质
CN108664244A (zh) * 2017-04-02 2018-10-16 田雪松 基于位置编码的界面生成方法及系统
CN109324796A (zh) * 2018-08-01 2019-02-12 浙江口碑网络技术有限公司 界面布局方法及装置
CN110764757A (zh) * 2019-10-22 2020-02-07 成都九洲电子信息系统股份有限公司 一种基于html5的交互式图形绘制引擎

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20070006095A1 (en) * 2005-07-01 2007-01-04 Liangkui Feng Auto layout of user interface elements in a window
CN103577229A (zh) * 2013-10-28 2014-02-12 北京奇虎科技有限公司 一种网页游戏的加载方法及网页浏览器
CN104898914A (zh) * 2014-03-05 2015-09-09 腾讯科技(深圳)有限公司 多页面展示的方法及装置
CN104978317A (zh) * 2014-04-02 2015-10-14 腾讯科技(北京)有限公司 网页生成方法及装置、网站生成方法及建站服务器

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20070006095A1 (en) * 2005-07-01 2007-01-04 Liangkui Feng Auto layout of user interface elements in a window
CN103577229A (zh) * 2013-10-28 2014-02-12 北京奇虎科技有限公司 一种网页游戏的加载方法及网页浏览器
CN104898914A (zh) * 2014-03-05 2015-09-09 腾讯科技(深圳)有限公司 多页面展示的方法及装置
CN104978317A (zh) * 2014-04-02 2015-10-14 腾讯科技(北京)有限公司 网页生成方法及装置、网站生成方法及建站服务器

Non-Patent Citations (2)

* Cited by examiner, † Cited by third party
Title
焦晓冬: "图形用户界面系统中元素排布算法的分析与改进", 《中国科技论文在线》 *
焦晓冬: "基于Web的Direct UI技术的研究与实现", 《中国优秀硕士学位论文全文数据库(信息科技辑)》 *

Cited By (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN108664244A (zh) * 2017-04-02 2018-10-16 田雪松 基于位置编码的界面生成方法及系统
CN108664244B (zh) * 2017-04-02 2021-06-25 北京拓思德科技有限公司 基于位置编码的界面生成方法及系统
CN108037922A (zh) * 2017-12-26 2018-05-15 携程计算机技术(上海)有限公司 商品网页界面配置方法及系统
CN108628629A (zh) * 2018-05-21 2018-10-09 网易(杭州)网络有限公司 Ui更新方法、装置、设备及存储介质
CN109324796A (zh) * 2018-08-01 2019-02-12 浙江口碑网络技术有限公司 界面布局方法及装置
CN109324796B (zh) * 2018-08-01 2022-09-09 浙江口碑网络技术有限公司 界面布局方法及装置
CN110764757A (zh) * 2019-10-22 2020-02-07 成都九洲电子信息系统股份有限公司 一种基于html5的交互式图形绘制引擎
CN110764757B (zh) * 2019-10-22 2023-06-09 成都九洲电子信息系统股份有限公司 一种基于html5的交互式图形绘制引擎

Similar Documents

Publication Publication Date Title
CN105528206A (zh) 基于网页的界面生成方法
CN110007917B (zh) 一种基于浏览器的可视化页面生成和浏览方法
CN101587438A (zh) Arp框架下的图形化流程模板绘制方法
CN104007967B (zh) 一种基于可扩展标记语言的用户界面生成方法和装置
CN103092612B (zh) 实现安卓操作系统3d桌面贴图的方法及电子装置
US20110167336A1 (en) Gesture-based web site design
US20060224607A1 (en) Method and system for aggregating rules that define values for the same property associated with the same document element
CN107992301A (zh) 用户界面实现方法、客户端及存储介质
CN101739251A (zh) 一种界面控件生成方法及其系统
CN109597613A (zh) 一种拖拽式组合报表的大屏展示系统及方法
CN102663056A (zh) 一种图片元素显示方法和装置
CN108108194B (zh) 用户界面编辑方法以及用户界面编辑器
CN103955367A (zh) 一种生成页面的方法及装置
CN106610826A (zh) 在线场景应用的制作方法及装置
CN103631877A (zh) 网页表格的处理方法
CN105335410A (zh) 一种基于合成渲染加速的网页更新方法和装置
CN107438194A (zh) 一种智能电视ui对象绘制方法及智能电视
CN109783097A (zh) 绘制web频率图插件的实现方法
KR102184162B1 (ko) 반응형 웹툰 제작 시스템 및 방법
CN102262530A (zh) 一种基于生成式视框结构的云计算视窗桌面的架构方法
CN112015410A (zh) 网页编辑方法、装置、系统以及计算机存储介质
CN105975259A (zh) 一种3d空间用户界面的实现方法及其装置
CN105242926A (zh) Web前端开发平台
CN102789379B (zh) 搭建用户界面的方法和装置
CN107450917A (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
RJ01 Rejection of invention patent application after publication

Application publication date: 20160427

RJ01 Rejection of invention patent application after publication