基于XML的UI框架实现方法、系统、装置及存储介质与流程

    专利2022-07-08  95


    本发明涉及ui设计领域,尤其涉及一种基于xml的ui框架实现方法、系统、装置及存储介质。



    背景技术:

    随着it技术的快速发展,ui(userinterface,用户界面)一直承载着计算机与用户交互的职能。ui界面的设计既要满足用户的使用要求,也要满足美感要求。因此,如何快速且低成本的开发出一款满足用户需求的ui显得极其重要。

    传统的ui框架采用拖控件式编程或面向对象编写代码,其中,面向对象编写代码需要大量的时间和精力;拖控件式编程的ui框架封装很封闭,导致其灵活性大大降低,想扩展自定义功能比较困难,区别于拖拉简单控件,如果想定制化实现一些特定的ui组件则需要编写大量的代码及了解大量的底层逻辑,开发难度大、时间长且成本高。



    技术实现要素:

    有鉴于此,本发明实施例的目的是提供一种基于xml的ui框架实现方法、系统、装置及存储介质。该发明可以根据设计图快速开发ui界面,灵活性好、使用相对简单且成本低。

    第一方面,本发明实施例提供了一种基于xml的ui框架实现方法,包括步骤:

    存储层获取源文件并进行存储;其中,所述源文件包括xml文件;

    解析层解析所述源文件得到基础控件节点;

    控件构造层获取构件属性,并根据所述基础控件节点及所述构件属性构造控件;

    绘制层根据所述控件及容器绘制ui以用于界面呈现。

    可选地,所述源文件包括压缩包文件、资源文件或xml文件。

    可选地,所述基础控件节点包括控件节点、错误节点或风格节点。

    可选地,所述绘制层采用双缓冲区绘制ui。

    可选地,所述控件分类包括内置控件或自定义控件。

    可选地,上述方法还包括步骤:

    更新ui,其中,更新只对有变化的控件进行区域性重绘。

    第二方面,本发明实施例提供了一种基于xml的ui框架实现系统,包括:

    存储层,用于获取源文件并进行存储;其中,所述源文件包括xml文件;

    解析层,用于解析所述源文件得到基础控件节点;

    控件构造层,用于获取构件属性,并根据所述基础控件节点及所述构件属性构造控件;

    绘制层,用于根据所述控件及容器绘制ui以用于界面呈现。

    第三方面,本发明实施例提供了一种基于xml的ui框架实现装置,包括:

    至少一个处理器;

    至少一个存储器,用于存储至少一个程序;

    当所述至少一个程序被所述至少一个处理器执行,使得所述至少一个处理器实现上述的基于xml的ui框架实现方法。

    第四方面,本发明实施例提供了一种存储介质,其中存储有处理器可执行的指令,所述处理器可执行的指令在由处理器执行时用于执行上述的基于xml的ui框架实现方法。

    第五方面,本发明实施例提供了一种基于xml的ui框架实现系统,包括显示设备以及与所述显示设备连接的计算机设备;其中,

    所述显示设备,用于显示呈现绘制后的ui;

    所述计算机设备包括:

    至少一个处理器;

    至少一个存储器,用于存储至少一个程序;

    当所述至少一个程序被所述至少一个处理器执行,使得所述至少一个处理器实现上述的基于xml的ui框架实现方法。

    实施本发明实施例包括以下有益效果:本发明实施例通过存储层获取包括xml的源文件并进行存储,解析层解析存储的源文件得到基础控件节点,控件构造层根据构件属性信息及基础控件节点构造控件,绘制层根据控件及生命周期等信息绘制ui界面,这种松耦合的结构灵活性好、方便扩展和升级,同时使用xml语言作为控件和信息载体具有良好的可读性,开发难度小,提高计算机开发效率。

    附图说明

    图1是本发明实施例提供的一种基于xml的ui框架实现方法的步骤流程示意图;

    图2是本发明实施例提供的一种基于xml的ui框架实现框架的结构框图;

    图3是本发明实施例提供的一种解析器的解析流程图;

    图4是本发明实施例提供的一种控件构造流程图;

    图5是本发明实施例提供的一种绘制器绘制流程图;

    图6是本发明实施例提供的一种控件继承关系图;

    图7是本发明实施例提供的一种基于xml的ui框架实现系统的结构框图;

    图8是本发明实施例提供的一种基于xml的ui框架实现装置的结构框图;

    图9是本发明实施例提供的另一种基于xml的ui框架实现系统的结构框图;

    图10是本发明实施例提供的一种设计ui界面。

    具体实施方式

    下面结合附图和具体实施例对本发明做进一步的详细说明。对于以下实施例中的步骤编号,其仅为了便于阐述说明而设置,对步骤之间的顺序不做任何限定,实施例中的各步骤的执行顺序均可根据本领域技术人员的理解来进行适应性调整。

    如图1所示,本发明实施例提供了一种基于xml的ui框架实现方法,其包括的步骤如下所示。

    s1、存储层获取源文件并进行存储;其中,所述源文件包括xml文件。

    s2、解析层解析所述源文件得到基础控件节点。

    s3、控件构造层获取构件属性,并根据所述基础控件节点及所述构件属性构造控件。

    s4、绘制层根据所述控件及容器绘制ui以用于界面呈现。

    如图2所示,存储层的xml配置设计器对xml进行编辑设计ui,设计文件可以存储到不同的存储格式中,并由存储层读取后获得源信息;解析层中的解析器则对存储层提供的元字符进行解析得到基础控件节点;控件构造层的控件构造器则根据这些基础控件节点信息构造出控件与其他节点存储到内存中,其中,控件构造器包含有基础控件;最后再由绘制层的绘制器根据控件绘制出用户界面呈现给用户,其中,绘制器包括基础渲染引擎,基础渲染引擎负责绘制线、矩形、图片等基础绘制。

    如图3所示的解析器的解析流程,解析层的解析器从缩包文件、资源文件或xml文件等读取xml文件,对xml文件中的元字符进行解析得到基础控件节点,基础控件节点包括控件节点、错误节点及风格节点。其中,错误节点输出到开发人员错误信息;风格节点作为类似css的常用样式表,再把这些所有的节点缓存成为一个映射表,流传到下个处理器进行处理。

    如图4所示的控件构造活动图,控件构造层通过xml解析器形成的基础控件节点及映射表来构建各控件对象并形成控件树。为了实现强大的灵活性,构造的过程开发人员既可以使用内置控件,也可以自定义控件,再加入绘制流程。为提供良好的扩展性,常用的自定义控件,也能加入到基础控件中形成生态。

    如图5所示的绘制器的绘制流程图,绘制层的绘制器完成大部分的绘制工作、控件消息的分发处理以及控件生命周期的管理。基础渲染引擎负责绘制线、矩形、图片等基础绘制,同时,各控件对象使用的字体及风格组等也通过基础渲染引擎完成绘制。最终通过控件对象及容器实现整个窗体ui界面制作,容器包括对ui界面的布局。此外,采用双缓冲区绘制界面以避免闪烁。ui更新的过程中只对更新的控件对象进行区域性的重绘,极大的减少绘制开销。

    需要说明的是,如图6所示控件关系图,控件的继承关系如下:所有控件都继承于一个基础控件,基础控件主要负责控件对象相关属性设置,如文本、图形、位置、菜单、位置计算等;容器控件则像一个容器一样包含其他的控件或容器。

    实施本发明实施例包括以下有益效果:本发明实施例通过存储层获取包括xml的源文件并进行存储,解析层解析存储的源文件得到基础控件节点,控件构造层根据构件属性信息及基础控件节点构造控件,绘制层根据控件及生命周期等信息绘制ui界面,这种松耦合的结构灵活性好、方便扩展和升级,同时使用xml语言作为控件和信息载体具有良好的可读性,开发难度小,提高计算机开发效率。

    如图7所示,本发明实施例提供了一种基于xml的ui框架实现系统,包括:

    存储层,用于获取源文件并进行存储;其中,所述源文件包括xml文件;

    解析层,用于解析所述源文件得到基础控件节点;

    控件构造层,用于获取构件属性,并根据所述基础控件节点及所述构件属性构造控件;

    绘制层,用于根据所述控件及容器绘制ui以用于界面呈现。

    可见,上述方法实施例中的内容均适用于本系统实施例中,本系统实施例所具体实现的功能与上述方法实施例相同,并且达到的有益效果与上述方法实施例所达到的有益效果也相同。

    如图8所示,本发明实施例提供了一种基于xml的ui框架实现装置,包括:

    至少一个处理器;

    至少一个存储器,用于存储至少一个程序;

    当所述至少一个程序被所述至少一个处理器执行,使得所述至少一个处理器实现上述的基于xml的ui框架实现方法。

    可见,上述方法实施例中的内容均适用于本装置实施例中,本装置实施例所具体实现的功能与上述方法实施例相同,并且达到的有益效果与上述方法实施例所达到的有益效果也相同。

    本发明实施例提供了一种存储介质,其中存储有处理器可执行的指令,所述处理器可执行的指令在由处理器执行时用于执行上述的基于xml的ui框架实现方法。同样地,上述方法实施例中的内容均适用于本存储介质实施例中,本存储介质实施例所具体实现的功能与上述方法实施例相同,并且达到的有益效果与上述方法实施例所达到的有益效果也相同。

    如图9所示,本发明实施例提供了一种基于xml的ui框架实现系统,包括显示设备以及与所述显示设备连接的计算机设备;其中,

    所述显示设备,用于显示呈现绘制后的ui;

    所述计算机设备包括:

    至少一个处理器;

    至少一个存储器,用于存储至少一个程序;

    当所述至少一个程序被所述至少一个处理器执行,使得所述至少一个处理器实现上述的基于xml的ui框架实现方法。

    具体地,对于所述显示设备,其主要通过显示屏器件实现;而对于所述计算机设备,其可为不同类型的电子设备,包含但不限于有台式电脑、手提电脑等终端。

    可见,上述方法实施例中的内容均适用于本系统实施例中,本系统实施例所具体实现的功能与上述方法实施例相同,并且达到的有益效果与上述方法实施例所达到的有益效果也相同。

    下面以一个xml文件说明ui的生成过程。具体xml文件如下:

    上述xml文件生成的ui界面如图10所示。首先,存储层读取后得到源信息。其次,解析层则对存储层提供的元字符进行解析得到如button及label等的基础控件节点,和horizontallayout容器,其中,容器主要用于对ui进行布局;define为风格节点,风格节点的作用是复用相同的ui样式;如图10中的“确定”及“取消”按钮的ui样式一样,文本不一样。然后,控件构造层通过这些节点构造出控件对象、风格节点、其他自定义节点进行缓存下来。所有的内置控件、布局继承于基础控件;基础控件负责实现常用的位置定位、宽度及高度这些基础功能,再在基础上衍生出一系列的button及label等控件。最后,绘制层通过控件对象的属性进行绘制,如width宽度、textcolor字体颜色等。用户对控件的点击由绘制管理器把点击消息发送到控件。还对控件的删除添加进行生命周期管理。这一系列的基础布局、控件的自定义组合成了一个窗口ui。

    以上是对本发明的较佳实施进行了具体说明,但本发明创造并不限于所述实施例,熟悉本领域的技术人员在不违背本发明精神的前提下还可做作出种种的等同变形或替换,这些等同的变形或替换均包含在本申请权利要求所限定的范围内。


    技术特征:

    1.一种基于xml的ui框架实现方法,其特征在于,包括步骤:

    存储层获取源文件并进行存储;其中,所述源文件包括xml文件;

    解析层解析所述源文件得到基础控件节点;

    控件构造层获取构件属性,并根据所述基础控件节点及所述构件属性构造控件;

    绘制层根据所述控件及容器绘制ui以用于界面呈现。

    2.根据权利要求1所述的基于xml的ui框架实现方法,其特征在于,所述源文件包括压缩包文件、资源文件或xml文件。

    3.根据权利要求1所述的基于xml的ui框架实现方法,其特征在于,所述基础控件节点包括控件节点、错误节点或风格节点。

    4.根据权利要求1所述的基于xml的ui框架实现方法,其特征在于,所述绘制层采用双缓冲区绘制ui。

    5.根据权利要求1所述的基于xml的ui框架实现方法,其特征在于,所述控件分类包括内置控件或自定义控件。

    6.根据权利要求1所述的基于xml的ui框架实现方法,其特征在于,还包括步骤:

    更新ui,其中,更新只对有变化的控件进行区域性重绘。

    7.一种基于xml的ui框架实现系统,其特征在于,包括:

    存储层,用于获取源文件并进行存储;其中,所述源文件包括xml文件;

    解析层,用于解析所述源文件得到基础控件节点;

    控件构造层,用于获取构件属性,并根据所述基础控件节点及所述构件属性构造控件;

    绘制层,用于根据所述控件及容器绘制ui以用于界面呈现。

    8.一种基于xml的ui框架实现装置,其特征在于,包括:

    至少一个处理器;

    至少一个存储器,用于存储至少一个程序;

    当所述至少一个程序被所述至少一个处理器执行,使得所述至少一个处理器实现如权利要求1-6任一项所述的基于xml的ui框架实现方法。

    9.一种存储介质,其中存储有处理器可执行的指令,其特征在于,所述处理器可执行的指令在由处理器执行时用于执行如权利要求1-6任一项所述的基于xml的ui框架实现方法。

    10.一种基于xml的ui框架实现系统,其特征在于,包括显示设备以及与所述显示设备连接的计算机设备;其中,

    所述显示设备,用于显示呈现绘制后的ui;

    所述计算机设备包括:

    至少一个处理器;

    至少一个存储器,用于存储至少一个程序;

    当所述至少一个程序被所述至少一个处理器执行,使得所述至少一个处理器实现如权利要求1-6任一项所述的基于xml的ui框架实现方法。

    技术总结
    本发明公开了一种基于XML的UI框架实现方法、系统、装置及存储介质,该方法包括步骤:存储层获取源文件并进行存储;其中,文件包括XML文件;解析层解析源文件得到基础控件节点;控件构造层获取构件属性,并根据基础控件节点及构件属性构造控件;绘制层根据控件及容器绘制UI以用于界面呈现。本发明实施例通过存储层获取包括XML的源文件,并由解析层解析得到基础控件节点,控件构造层根据构件属性信息及基础控件节点构造控件,绘制层根据控件及生命周期等信息绘制UI界面,这种松耦合的结构灵活性好、方便扩展和升级,XML语言具有良好的可读性,开发难度小,提高计算机开发效率。本发明实施例可广泛应用于UI设计领域。

    技术研发人员:曾赞达;罗文杰;柯年军;卢树文;周伟杰
    受保护的技术使用者:广州经传多赢投资咨询有限公司
    技术研发日:2020.11.23
    技术公布日:2021.03.12

    转载请注明原文地址:https://wp.8miu.com/read-23431.html

    最新回复(0)