CN111736834A - 一种基于dsl的用户界面生成方法、装置及存储介质 - Google Patents

Abstract

本发明公开了一种基于DSL的用户界面生成方法、装置及存储介质，该方法包括：获取根据领域定制语言文法定义的用户界面需求描述；根据用户界面需求描述进行解析得到用户的界面定义；根据用户的界面定义、外部用户界面库以及内置的领域知识生成用户界面。通过实施本发明，针对用户界面设计了一种DSL，可以用于编写用户界面需求，并根据用户界面需求，结合当前领域知识如HTML、JS与CSS等和外部用户界面库，最终生成完整的用户界面。因此，本发明实施例提供的基于DSL的用户界面生成方法，通过一种语言，完成HTML、JS与CSS三种格式文件的编写，可以避免模糊不清带来的错误，并最终完成对整个用户界面的开发工作。

Description

一种基于DSL的用户界面生成方法、装置及存储介质

技术领域

本发明涉及计算机技术领域，具体涉及一种基于DSL的用户界面生成方法、装置及存储介质。

背景技术

目前，在服务端基本都是使用一种编程语言，完成所有的逻辑开发，例如Java、Python等；而与服务器端不同，完成用户界面的设计至少需要采用HTML、JavaScript与CSS三部分内容，并且至少需要靠三种不同的语法形式完成这三部分内容，此外还有基于这三部分的一些高级开发框架，例如VUE、AngularJS、React等，同时高级开发框架仍然离不开编写HTML、JavaScript与CSS的内容，还增加了需要学习的高级语法，开发者需要反复根据用户界面对这三部分进行调整，直至完成整个用户界面的开发，如何利用现有的领域知识，简化工作流程，避免重复工作，是一个亟待解决的问题。

发明内容

有鉴于此，本发明实施例提供了一种基于DSL的用户界面生成方法、装置及存储介质，以解决现有用户界面设计中工作流程较为复杂的技术问题。

本发明提出的技术方案如下：

本发明实施例第一方面提供一种基于DSL的用户界面生成方法，该用户界面生成方法包括：获取根据领域定制语言文法定义的用户界面需求描述；根据所述用户界面需求描述进行解析得到用户的界面定义；根据所述用户的界面定义、外部用户界面库以及内置的领域知识生成用户界面。

进一步地，所述领域定制语言文法包括：用户界面、页面、组件、组件的样式、位置和内容、组件的动作以及工作流；所述用户界面包括多个所述页面，所述页面包括多个组件及组件的样式、位置和内容，所述组件的内容包括多个组件和字符串，所述组件的动作包括组件、组件触发的时间以及工作流，所述工作流包括顺序、分支和条件三种结构。

进一步地，所述内置的领域知识包括：CSS、HTML以及JavaScript。

进一步地，所述工作流中的语法包括：start、end、fork、join、append以及select。

进一步地，所述工作流中的函数参数和返回值均为JSON格式。

进一步地，根据所述用户的界面定义、外部库以及内置的领域知识生成用户界面，包括：根据所述CSS、HTML以及用户的界面定义中的组件生成页面样式和页面DOM；根据所述工作流生成JavaScript中的工作流，所述JavaScript中的工作流与页面组件中的相应动作绑定；根据外部用户界面库、页面样式、页面组件以及JavaScript中的工作流生成用户界面。

本发明实施例第二方面提供一种基于DSL的用户界面生成装置，该用户界面生成装置包括：定义模块，用于获取根据领域定制语言文法定义的用户界面需求描述；解析模块，用于根据所述用户界面需求描述进行解析得到用户的界面定义；界面生成模块，用于根据所述用户的界面定义、外部用户界面库以及内置的领域知识生成用户界面。

进一步地，所述界面生成模块包括：样式组件生成模块，用于根据CSS、HTML以及用户的界面定义中的组件生成页面样式和页面DOM；绑定模块，用于根据工作流生成JavaScript中的工作流，JavaScript中的工作流与页面组件中的相应动作绑定；用户界面生成模块，用于根据外部用户界面库、页面样式、页面组件以及JavaScript中的工作流生成用户界面。

本发明实施例第三方面提供一种计算机可读存储介质，所述计算机可读存储介质存储有计算机指令，所述计算机指令用于使所述计算机执行如本发明实施例第一方面及第一方面任一项所述的基于DSL的用户界面生成方法。

本发明实施例第四方面提供一种电子设备，包括：存储器和处理器，所述存储器和所述处理器之间互相通信连接，所述存储器存储有计算机指令，所述处理器通过执行所述计算机指令，从而执行如本发明实施例第一方面及第一方面任一项所述的基于DSL的用户界面生成方法。

本发明提供的技术方案，具有如下效果：

本发明实施例提供的基于DSL的用户界面生成方法、装置及存储介质，针对用户界面设计了一种DSL，可以用于编写用户界面需求，并根据用户界面需求，结合当前领域知识如HTML、JavaScript与CSS等和外部用户界面库，最终生成完整的用户界面。因此，本发明实施例提供的基于DSL的用户界面生成方法，通过一种语言，完成HTML、JavaScript与CSS三种格式文件的编写，可以避免模糊不清带来的错误，并最终完成对整个用户界面的开发工作。

附图说明

为了更清楚地说明本发明具体实施方式或现有技术中的技术方案，下面将对具体实施方式或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施方式，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是根据本发明实施例的基于DSL的用户界面生成方法的流程图；

图2是根据本发明实施例的工作流语法中fork的示意图；

图3是根据本发明实施例的工作流语法中join的示意图；

图4是根据本发明实施例的工作流语法中append的示意图；

图5是根据本发明实施例的工作流语法中select的示意图；

图6是根据本发明另一实施例的基于DSL的用户界面生成方法的流程图；

图7是根据本发明实施例的基于DSL的用户界面生成装置的结构框图；

图8是根据本发明另一实施例的基于DSL的用户界面生成装置的结构框图；

图9是根据本发明实施例提供的计算机可读存储介质的结构示意图；

图10是根据本发明实施例提供的电子设备的结构示意图。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

本发明实施例提供一种基于DSL的用户界面生成方法，如图1所示，该用户界面生成方法包括如下步骤：

步骤S101：获取根据领域定制语言文法定义的用户界面需求描述；具体地，可以采用领域定制语言(DSL，Domain Specified Language)的语法结构编写用户界面的需求。该领域定制语言的语法结构包括：用户界面、页面、组件、组件的样式、位置和内容、组件的动作以及工作流；用户界面包括多个页面，页面包括多个组件及组件的样式、位置和内容，组件的内容包括多个组件和字符串，组件的动作包括组件、组件触发的时间以及工作流，工作流包括顺序、分支和条件三种结构。

具体地，对于该领域定制语言的语法结构可以由以下结构实现：

UI：＝Page+

Page：＝[Component(Style，Position，Content)]+

Component：＝Dialog|Form|Table|Menu|Page|...

Content：＝[Component|String]+

Action：＝[bind(Component，event，UIFlow)]+

UIFlow：＝[Sequential|Branch|Select]+

在一实施例中，当采用DSL对用户界面需求进行编写的过程中，可以包括对用户界面进行定义，即对用户界面中所有页面的定义；对页面进行定义，包括对页面中所有组件的定义；对组件的定义，包括对组件的样式、布局、内容的定义；对工作流的定义，包含对工作流中的数据处理流程的定义；对组件触发条件和响应动作绑定的定义，包含触发事件和被绑定的工作流的引用的定义。

在一实施例中，由于前端动作所触发的事件可能比较复杂，相互之间有依赖关系，不能够通过简单绑定控件函数完成，因此通过在DSL中定义工作流过程，可以将一系列对于组件的操作封装在工作流中，这样组件仅需绑定一个函数就可完成所有操作。因此，工作流可以用于表示触发某事件的组件的动作，将工作流、组件和触发事件进行绑定，绑定后当组件触发某事件时可以按照绑定的工作流进行处理。

在一实施例中，工作流中的节点可以由一个个函数表示。对于函数的处理过程即工作流中的语法可以包括：start、end、fork、join、append以及select等等。start表示工作流函数的入口参数传给哪个函数；end表示工作流最后的返回值是哪个函数；fork、join、append以及select的表示意义可以分别用图2、图3、图4和图5所示。

具体地，fork对应的代码可以表示为：

//a，b，c，d，e为函数名

uiflow1＝UIFLOW([“a”，“b”，“c”])

uiflow1.fork(“a”，[“d”，“e”])

join对应的代码可以表示为：

//a，b，c，d，e，f，g，h为函数名

uiflow1＝UIFLOW([“a”，“b”，“c”])

uiflow1.fork(“a”，[“d”，“e”])

Uiflow1.join([“b”，“d”]，

[“f”，“g”，“h”])

append对应的代码可以表示为：

//a，b，c，d，e为函数名

uiflow1＝UIFLOW([“a”，“b”，“c”])

uiflow1.append(“a”，“d”，“e”)

select对应的代码可以表示为：

//a，b，c，d，e，f为函数名

uiflow1＝UIFLOW([“a”，“b”]，

[“c”，“d”]，

[“e”，“f”])

其中，图中箭头表示将起始节点函数的返回值交给终止节点作为参数。可选地，工作流中的函数参数和返回值均为JSON格式。

步骤S102：根据用户界面需求描述进行解析得到用户的界面定义；具体地，可以采用编译器解析用户界面需求描述得到用户的界面定义。

在一实施例中，对于解析得到的用户界面定义，方便用配置文件的直接用配置文件表达，方便用DSL的直接用DSL表示。具体地，可以以表格为例，其可选的属性包含width、attr、colname、kind、loadAction、rmAction等等，每个属性可能含多个配置项，每个配置项内部又可能有二次配置项。多个配置项之间用逗号分隔，二次配置项之间以分号分隔，width属性表示表格中这一列的宽度，attr属性表示这一列对应数据的属性名，colname属性表示表头所展示的这一列的列名，kind表示这一列的类型，例如普通文本、iconfont(矢量图标)、progress(进度条)、超链接、开关、扩展行、下拉列表、复选框等等，部分类型的列有二次配置项，这时对应attr属性的配置项包含多个二次配置项，第一个二次配置项仍为这一列对应数据的属性名，其他二次配置项为该类型特有的配置内容，loadAction表示表格初始化时请求数据的地址。

步骤S103：根据用户的界面定义、外部用户界面库以及内置的领域知识生成用户界面。具体地，编译器在解析得到用户的界面定义后，可以结合内置的领域知识以及外部的用户界面库生成整套用户界面。对于内置的领域知识，可以包括：CSS、HTML以及JavaScript。

本发明实施例提供的基于DSL的用户界面生成方法，针对用户界面设计了一种DSL，可以用于编写用户界面需求，并根据用户界面需求，结合当前领域知识如HTML、JavaScript与CSS等和外部用户界面库，最终生成完整的用户界面。因此，本发明实施例提供的基于DSL的用户界面生成方法，通过一种语言，完成HTML、JavaScript与CSS三种格式文件的编写，可以避免模糊不清带来的错误，并最终完成对整个用户界面的开发工作。

作为本发明实施例一种可选的实施方式，如图6所示，步骤S103根据用户的界面定义、外部库以及内置的领域知识生成用户界面，包括：

步骤S201：根据CSS、HTML以及用户的界面定义中的组件生成页面样式和页面DOM；具体地，在用户界面长期的开发过程中，积累了大量的界面素材与布局方式，这些内容均写在CSS内部，在页面样式设置时，可以直接将其拷贝到目标代码中进行引用，同时可以结合DSL中定义的样式生成页面样式。在页面组件设置时，可以基于用户的界面中定义的组件生成HTML。

在一实施例中，DSL中内置了一系列的组件，例如Horizontal类表示水平布局，Vertical类表示垂直布局，Grid类表示网格布局，这三种布局可以嵌套使用。Div类表示div元素，Page类表示一个页面，List类表示一个表格，Form类表示一个表单，Input类表示输入框，Button类表示按钮等等，有的是一个单独的DOM元素，有的是由多个DOM组成的一个元件，这些元素或元件都已经在DSL中定义好，设置属性后可以直接调用，在生成时会自动生成html代码，并生成对应的JS控制实例，可以在对象的定义时引用其他已定义的组件作为其内容，对应生成时被引用组件将作为对象的子DOM，对一些样式效果可能随位置不同的组件，自动化生成***会根据组件位置的上下文，自动匹配对应的样式效果。

步骤S202：根据工作流生成JavaScript中的工作流，JavaScript中的工作流与页面组件中的相应动作绑定；具体地，在用户的界面定义中设置了工作流，可以根据该工作流生成JS，同时在JS中将工作流绑定到相应组件的动作上。

在一实施例中，前端DOM有相应的控制器，例如表格有ListCtrl，表单有FormCtrl，树有TreeCtrl，这些控制器都是JavaScript中的类，这些JS类封装了对应DOM的诸如请求数据、读、写、显示、隐藏等操作的基本方法，需要结合HTML生成器，生成一个HTML的DOM后，也在HTML的js部分生成一段代码，将该DOM的配置项和DOM的ID传给对应js中的类，并实例化一个js对象，js对象引用方式会在DSL内部进行存储，确保其唯一性，可以在DSL中对该对象进行操作绑定，对该DOM进行操作。

步骤S203：根据外部用户界面库、页面样式、页面组件以及JavaScript中的工作流生成用户界面。具体地，在生成用户界面时，可以采用写在CSS内部的界面素材及布局方式、定义的HTML组件生成的HTML以及定义的工作流生成的JS，并结合外部的用户界面库实现。因此，该用户界面生成方法可以由DSL定义准确的获取用户界面需求，同时结合领域知识CSS、JS以及HTML确定布局、控件、样式、效果、功能和流程，避免模糊不清带来的错误，并最终生成用户界面。

作为本发明实施例的一种可选的实施方式，本发明实施例提供的基于DSL的用户界面生成方法中的一些实现方式可以采用以下代码实现。

例如，从配置文件中取到名字为moreDeftList的list组件配置，并设置高度为501px，纵向溢出增加滚动条。

labelList＝List(name＝＂moreDeftList＂，height＝＂501px＂，style＝＂overflow－y：auto；＂)

例如，resultForm是定义好的表单，labelList为上述代码实施方式中定义的表格，可以将组件作为另一组件的内容放入另一组件。

new＿def＿right＝Vertical(resultForm，def＿right＿header2，labelList，Div(Button(＂增加标签＂)，Button(＂删除标签＂)，Button(＂标签详情＂，width＝＂170px＂)))

例如，一个简单的垂直布局示例可以采用以下代码实现

container＝Vertical(Div(height＝＂164px＂)，Div(height＝＂calc(100％－164px)＂))

作为本发明实施例的一种可选的实施方式，对于绑定的工作流(UIFlow)、事件以及组件绑定到一起时，可以采用以下代码实现。

例如，analysis是一个page类型的组件，表示一个页面，在页面初始化加载时调用一个UIFlow(此处为UIFlow的简要写法，自动开发工具会自动判定类型，生成UIFlow对象)，组件的p函数会自动根据自动开发工具存储的js中该组件实例化后的控制器的名字，生成相应的函数名。

例如，点击对话框保存按钮之后，读取表单中数据，并提交服务端，然后隐藏对话框，重新拉取ana＿main(ana＿main是一个list组件，表示表格)中数据，并进行显示。

例如，当点击userlist中属性为edit的图标(iconfont)时触发对话框动作。

userlist.bind(＂edit＂，userEditDialog)

上一条语句相当于下两条语句的便捷写法。

本发明实施例还提供一种基于DSL的用户界面生成装置，如图7所示，该用户界面生成装置包括：

定义模块10，用于获取根据领域定制语言文法定义的用户界面需求描述；详细内容参见上述方法实施例中步骤S101的相关描述。

解析模块20，用于根据用户界面需求描述进行解析得到用户的界面定义；详细内容参见上述方法实施例中步骤S102的相关描述。

界面生成模块30，用于根据用户的界面定义、外部用户界面库以及内置的领域知识生成用户界面。详细内容参见上述方法实施例中步骤S103的相关描述。

本发明实施例提供的基于DSL的31用户界面生成方法，针对用户界面设计了一种DSL，可以用于编写用户界面需求，并根据用户界面需求，结合当前领域知识如HTML、JavaScript与CSS等和外部用户界面库，最终生成完整的用户界面。因此，本发明实施例提供的基于DSL的用户界面生成方法，通过一种语言，完成HTML、JavaScript与CSS三种格式文件的编写，可以避免模糊不清带来的错误，并最终完成对整个用户界面的开发工作。

作为本发明实施例的一种可选的实施方式，如图8所示，界面生成模块30包括：

样式组件生成模块31，用于根据CSS、HTML以及用户的界面定义中的组件生成页面样式和页面DOM；详细内容参见上述方法实施例中步骤S201的相关描述。

绑定模块32，用于根据工作流生成JavaScript中的工作流，JavaScript中的工作流与页面组件中的相应动作绑定；详细内容参见上述方法实施例中步骤S202的相关描述。

用户界面生成模块33，用于根据外部用户界面库、页面样式、页面组件以及JavaScript中的工作流生成用户界面。详细内容参见上述方法实施例中步骤S203的相关描述。

本发明实施例提供的基于DSL的用户界面生成装置的功能描述详细参见上述实施例中基于DSL的用户界面生成方法描述。

本发明实施例还提供一种存储介质，如图9所示，其上存储有计算机程序601，该指令被处理器执行时实现上述实施例中基于DSL的用户界面生成的步骤。该存储介质上还存储有实时音视频流数据，特征帧数据、交互请求信令、加密数据以及预设数据大小等。其中，存储介质可为磁碟、光盘、只读存储记忆体(Read－Only Memory，ROM)、随机存储记忆体(Random Access Memory，RAM)、快闪存储器(Flash Memory)、硬盘(Hard Disk Drive，缩写：HDD)或固态硬盘(Solid－State Drive，SSD)等；所述存储介质还可以包括上述种类的存储器的组合。

本领域技术人员可以理解，实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的程序可存储于一计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，所述存储介质可为磁碟、光盘、只读存储记忆体(Read－Only Memory，ROM)、随机存储记忆体(Random AccessMemory，RAM)、快闪存储器(FlashMemory)、硬盘(Hard Disk Drive，缩写：HDD)或固态硬盘(Solid－State Drive，SSD)等；所述存储介质还可以包括上述种类的存储器的组合。

本发明实施例还提供了一种电子设备，如图10所示，该电子设备可以包括处理器51和存储器52，其中处理器51和存储器52可以通过总线或者其他方式连接，图10中以通过总线连接为例。

处理器51可以为中央处理器(Central Processing Unit，CPU)。处理器51还可以为其他通用处理器、数字信号处理器(Digital Signal Processor，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现场可编程门阵列(Field－Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等芯片，或者上述各类芯片的组合。

存储器52作为一种非暂态计算机可读存储介质，可用于存储非暂态软件程序、非暂态计算机可执行程序以及模块，如本发明实施例中的对应的程序指令/模块。处理器51通过运行存储在存储器52中的非暂态软件程序、指令以及模块，从而执行处理器的各种功能应用以及数据处理，即实现上述方法实施例中的基于DSL的用户界面生成方法。

存储器52可以包括存储程序区和存储数据区，其中，存储程序区可存储操作***、至少一个功能所需要的应用程序；存储数据区可存储处理器100所创建的数据等。此外，存储器52可以包括高速随机存取存储器，还可以包括非暂态存储器，例如至少一个磁盘存储器件、闪存器件、或其他非暂态固态存储器件。在一些实施例中，存储器52可选包括相对于处理器51远程设置的存储器，这些远程存储器可以通过网络连接至处理器51。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

所述一个或者多个模块存储在所述存储器52中，当被所述处理器51执行时，执行如图1－6所示实施例中的基于DSL的用户界面生成方法。

上述电子设备具体细节可以对应参阅图1至图6所示的实施例中对应的相关描述和效果进行理解，此处不再赘述。

虽然结合附图描述了本发明的实施例，但是本领域技术人员可以在不脱离本发明的精神和范围的情况下做出各种修改和变型，这样的修改和变型均落入由所附权利要求所限定的范围之内。

Claims (10)

1.一种基于DSL的用户界面生成方法，其特征在于，包括：

获取根据领域定制语言文法定义的用户界面需求描述；

根据所述用户界面需求描述进行解析得到用户的界面定义；

根据所述用户的界面定义、外部用户界面库以及内置的领域知识生成用户界面。

2.根据权利要求1所述的基于DSL的用户界面生成方法，其特征在于，所述领域定制语言文法包括：用户界面、页面、组件、组件的样式、位置和内容、组件的动作以及工作流；

所述用户界面包括多个所述页面，所述页面包括多个组件及组件的样式、位置和内容，所述组件的内容包括多个组件和字符串，所述组件的动作包括组件、组件触发的时间以及工作流，所述工作流包括顺序、分支和条件三种结构。

3.根据权利要求2所述的基于DSL的用户界面生成方法，其特征在于，所述内置的领域知识包括：CSS、HTML以及JavaScript。

4.根据权利要求2所述的基于DSL的用户界面生成方法，其特征在于，所述工作流中的语法包括：start、end、fork、join、append以及select。

5.根据权利要求2所述的基于DSL的用户界面生成方法，其特征在于，所述工作流中的函数参数和返回值均为JSON格式。

6.根据权利要求3所述的基于DSL的用户界面生成方法，其特征在于，根据所述用户的界面定义、外部库以及内置的领域知识生成用户界面，包括：

根据所述CSS、HTML以及用户的界面定义中的组件生成页面样式和页面DOM；

根据所述工作流生成JavaScript中的工作流，所述JavaScript中的工作流与页面组件中的相应动作绑定；

根据外部用户界面库、页面样式、页面组件以及JavaScript中的工作流生成用户界面。

7.一种基于DSL的用户界面生成装置，其特征在于，包括：

定义模块，用于获取根据领域定制语言文法定义的用户界面需求描述；

解析模块，用于根据所述用户界面需求描述进行解析得到用户的界面定义；

界面生成模块，用于根据所述用户的界面定义、外部用户界面库以及内置的领域知识生成用户界面。

8.根据权利要求7所述的基于DSL的用户界面生成装置，其特征在于，所述界面生成模块包括：

样式组件生成模块，用于根据CSS、HTML以及用户的界面定义中的组件生成页面样式和页面DOM；

绑定模块，用于根据工作流生成JavaScript中的工作流，JavaScript中的工作流与页面组件中的相应动作绑定；

用户界面生成模块，用于根据外部用户界面库、页面样式、页面组件以及JavaScript中的工作流生成用户界面。

9.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有计算机指令，所述计算机指令用于使所述计算机执行如权利要求1－6任一项所述的基于DSL的用户界面生成方法。

10.一种电子设备，其特征在于，包括：存储器和处理器，所述存储器和所述处理器之间互相通信连接，所述存储器存储有计算机指令，所述处理器通过执行所述计算机指令，从而执行如权利要求1－6任一项所述的基于DSL的用户界面生成方法。

Images