一种界面编辑方法及装置制造方法及图纸

技术编号:11757866 阅读:144 留言:0更新日期:2015-07-22 11:28
本发明专利技术公开了一种界面编辑方法及装置,涉及用户交互界面技术,所述方法包括:根据将要在文档预览窗口中显示的显示对象,生成所述显示对象的EXML文件;根据所述显示对象的EXML文件,建立一个能够用来调整所述显示对象的预览节点树;实时检测用户对所述预览节点树的调整操作;当检测到用户对预览节点树的调整操作时,按照已调整的预览节点树,在文档预览窗口中实时显示所述显示对象。本发明专利技术通过使用户的操作无延迟地实时显示,能够节省大量调试时间,从而显著提高界面编程的开发效率。

【技术实现步骤摘要】

本专利技术涉及用户交互界面技术,特别涉及一种界面编辑方法及相应的装置。
技术介绍
无论在软件还是游戏开发中,界面编程部分都占据比较大的比重。传统方式大多数是通过直接编写代码的方式来编写用户交互界面,这种模式的开发效率非常低。近些年,可视化界面编辑软件在软件或游戏开发领域逐渐兴起,这种模式能够显著提高开发人员的编码效率。软件以所见即所得的方式,通过简单的拖拽等可视化操作,能够自动生成程序运行需要的界面代码。近年来,各类编程语言都陆续推出过配套的界面编辑软件,以加速编程开发流程。但是针对新兴的超文本标记语言(HyperText MarkupLanguage,HTML) 5游戏领域还未出现过成熟的解决方案。由美国Adobe公司开发的软件Flash Builder4.6中含有成熟的可视化界面编辑功能。该软件以MXML文件来描述用户界面(User Interface, UI)结构,MXML是一种符合标准可扩展标记语言(Extensible Markup language,XML)文档规范的文件格式。开发人员在软件界面上通过拖拽控件等可视化操作即可直接生成这种MXML文件。最终由编译器将MXML文件编译为可执行的程序界面代码。Flash Builder4.6所开发的程序只能在Flash平台上运行。这套解决方案无法提供给HTML5游戏开发使用,并且Flash Builder是针对企业级应用设计的,无法对游戏开发中的界面编辑过程做优化。
技术实现思路
本专利技术的目的在于提供一种界面编辑方法及装置,能更好地解决HTML5游戏开发过程中进行实时快速地可视化界面编辑的问题。根据本专利技术的一个方面,提供了一种界面编辑方法,包括:根据将要在文档预览窗口中显示的显示对象,生成所述显示对象的EXML文件;根据所述显示对象的EXML文件,建立一个能够用来调整所述显示对象的预览节点树;实时检测用户对所述预览节点树的调整操作;当检测到用户对预览节点树的调整操作时,按照已调整的预览节点树,在文档预览窗口中实时显示所述显示对象。优选地,在按照已调整的预览节点树,在文档预览窗口中实时显示所述显示对象的同时,还包括:按照已调整的预览节点树,修改所述显示对象对应的EXML文件。优选地,还包括:实时检测用户对所述显示对象的修改操作;若检测到用户对所述显示对象的修改操作,则按照修改后的显示对象修改相应的EXML文件;按照已修改的EXML文件,重新生成预览节点树。优选地,实时检测的对所述显示对象的修改操作包括对所述显示对象的大小和/位置进行的修改操作。优选地,还包括:实时检测用户对所述显示对象对应的EMXL文件的编辑操作;若检测到用户对所述显示对象对应的EMXL文件的编辑操作,则按照已编辑的EMXL文件重新生成预览节点树;按照已重新生成的预览节点树,在所述文档预览窗口中实时显示所述显示对象。根据本专利技术的另一方面,提供了一种界面编辑装置,其特征在于,包括:EXML文件生成模块,用于根据将要在文档预览窗口中显示的显示对象,生成所述显示对象的EXML文件;预览节点树建立模块,用于根据所述显示对象的EXML文件,建立一个能够用来调整所述显示对象的预览节点树;检测模块,用于实时检测用户对所述预览节点树的调整操作;预览模块,用于当检测到用户对预览节点树的调整操作时,按照已调整的预览节点树,在文档预览窗口中实时显示所述显示对象。优选地,还包括:EXML文件修改模块,用于按照已调整的预览节点树,修改所述显示对象对应的EXML文件。优选地,所述检测模块还用于实时检测用户对所述显示对象的修改操作,并当检测到用户对所述显示对象的修改操作时,所述EXML文件修改模块按照修改后的显示对象修改相应的EXML文件,所述预览节点树建立模块按照已修改的EXML文件,重新生成预览节点树。优选地,所述检测模块实时检测用户对所述显示对象的修改操作包括对所述显示对象的大小和/位置进行的修改操作。优选地,所述检测模块实时检测用户对所述显示对象对应的EMXL文件的编辑操作,并在检测到用户对所述显示对象对应的EMXL文件的编辑操作时,所述预览节点树建立模块按照已编辑的EMXL文件重新生成预览节点树,所述预览模块按照已重新生成的预览节点树,在所述文档预览窗口中实时显示所述显示对象。与现有技术相比较,本专利技术的有益效果在于:本专利技术能够使用户的操作无延迟地实时显示,从而节省大量调试时间,显著提高界面编程的开发效率。【附图说明】图1是本专利技术第一实施例提供的界面编辑方法原理框图;图2是本专利技术实施例提供的界面编辑装置框图;图3是本专利技术实施例提供的另一界面编辑装置框图;图4是本专利技术第二实施例提供的界面编辑方法原理框图;图5是本专利技术第三实施例提供的界面编辑方法原理框图;图6是本专利技术第四实施例提供的EXML文件示例示意图;图7是本专利技术第四实施例提供的预览节点树示意图;图8是本专利技术第四实施例提供的实时预览模块示意图;图9是本专利技术第五实施例提供的创建项目示意图;图10是本专利技术第五实施例提供的包资源管理器示意图;图11是本专利技术第五实施例提供的系统资源管理器示意图;图12是本专利技术第五实施例提供的包资源管理器中的资源树示意图;图13是本专利技术第五实施例提供的文档预览窗口下打开的ButtonSkin.exml皮肤示意图;图14是本专利技术第五实施例提供的状态面板示意图;图15是本专利技术第五实施例提供的创建PanelSkinTest.exml皮肤类的示意图;图16是本专利技术第五实施例提供的包资源管理器中呈现的PanelSkinTest.exml皮肤类的示意图;图17是本专利技术第五实施例提供的拖拽Button和Label组件的示意图;图18是图17的拖拽结果示意图;图19是本专利技术第五实施例提供的按钮与皮肤的对应关系。【具体实施方式】以下结合附图对本专利技术的优选实施例进行详细说明,应当理解,以下所说明的优选实施例仅用于说明和解释本专利技术,并不用于限定本专利技术。图1是本专利技术第一实施例提供的界面编辑方法原理框图,如图1所示,步骤包括:Sll:根据将要在文档预览窗口中显示的显示对象,生成所述显示对象的EXML文件。每个显示对象都有相对应的EXML格式内容,当图片等显示对象拖拽到文档预览窗口时,该显示对象对应的EXML格式内容保存至所述显示对象的EXML文件中,并且,用户后续对该显示对象操作都会保存至EXML文件中。S12:根据所述显示对象的EXML文件,建立一个能够用来调整所述显示对象的预览节点树。通过解析所述显示对象的EXML文件,得到预览节点树。其中,所述文档预览窗口内的多个显示对象分别对应所述预览节点树的多个显示节点(即预览节点),所述多个显示节点按照多个显示对象在文档预览窗口中的依附关系以树状结构进行组合,形成所述预览节点树。S当前第1页1 2 3 本文档来自技高网...

【技术保护点】
一种界面编辑方法,其特征在于,包括:根据将要在文档预览窗口中显示的显示对象,生成所述显示对象的EXML文件;根据所述显示对象的EXML文件,建立一个能够用来调整所述显示对象的预览节点树;实时检测用户对所述预览节点树的调整操作;当检测到用户对预览节点树的调整操作时,按照已调整的预览节点树,在文档预览窗口中实时显示所述显示对象。

【技术特征摘要】

【专利技术属性】
技术研发人员:陈仁健
申请(专利权)人:北京白鹭时代信息技术有限公司
类型:发明
国别省市:北京;11

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1