CN110990010A - 一种软件界面代码的生成方法及装置 - Google Patents

Abstract

本发明提供了一种软件界面代码的生成方法及装置，其中，所述生成方法包括：获取软件界面的设计图片；识别所述设计图片，获得所述设计图片的控件信息和文本信息，其中，所述控件信息用于标识相应的控件，所述文本信息用于标识相应的文本；根据所述控件信息和所述文本信息，生成用于表征所述设计图片中各个控件和各个文本间的关联关系的领域特定语言DSL文件；解析所述DSL文件，生成表征所述DSL文件中各关联控件间的相对位置关系的布局结构树，其中，各关联控件中的任一关联控件由任一控件和所关联的文本组成；根据所述布局结构树生成预设主题的软件界面代码。用于提高软件界面的研发效率。

Description

一种软件界面代码的生成方法及装置

技术领域

本发明涉及计算机技术领域，尤其涉及一种软件界面代码的生成方法及装置。

背景技术

伴随社会经济的数字化转型，市场对软件产品的需求日益旺盛。

目前，关于软件用户界面(User Interface，UI)研发往往需要经历低保真设计、高保真设计、人工编码等数个阶段。由于整个过程主要依靠人工编码，从而导致开发流程长，产品交付周期长，时效不能达到市场要求，资源投入大等问题。

那么，如何提高软件界面的研发效率，是本领域技术人员亟待解决的技术问题。

发明内容

本发明实施例提供了一种软件界面代码的生成方法及装置，用于提高软件界面的研发效率。

第一方面，本发明实施例提供了一种软件界面代码的生成方法，包括：

获取软件界面的设计图片；

识别所述设计图片，获得所述设计图片的控件信息和文本信息，其中，所述控件信息用于标识相应的控件，所述文本信息用于标识相应的文本；

根据所述控件信息和所述文本信息，生成用于表征所述设计图片中各个控件和各个文本间的关联关系的领域特定语言DSL文件；

解析所述DSL文件，生成表征所述DSL文件中各关联控件间的相对位置关系的布局结构树，其中，各关联控件中的任一关联控件由任一控件和所关联的文本组成；

根据所述布局结构树生成预设主题的软件界面代码。

可选地，所述解析所述DSL文件，生成表征所述DSL文件中各关联控件间的相对位置关系的布局结构树，包括：

解析所述DSL文件，确定各关联控件间的嵌套关系和行关系；

根据所述嵌套关系和所述行关系，确定出各关联控件间的相对位置关系；

生成表征所述相对位置关系的布局结构树。

可选地，所述根据所述布局结构树生成预设主题的软件界面代码，包括：

根据所述布局结构树生成超级文本标记语言html文件；

将所述关联控件所引用的用于表征所述预设主题的直译式脚本语言js文件和层叠样式表css文件与所述html文件进行关联；

生成包括所述html文件、所述js文件和所述css文件的所述软件界面代码。

可选地，所述识别所述设计图片，获得所述设计图片的控件信息和文本信息，包括：

根据控件识别模型从所述设计图片中识别出各个所述控件对应的控件信息，所述控件信息包括控件类型、控件坐标位置和所述控件所处的矩形区域的大小；

根据文字识别模型从所述设计图片中识别出各个文本对应的文本信息，所述文本信息包括文字内容、文字坐标位置和文字所处的矩形区域的大小。

可选地，所述根据所述控件信息和所述文本信息，生成用于表征所述设计图片中各个控件和各个文本间的关联关系的DSL文件，包括：

根据各个控件所处的控件坐标位置以及所处的矩形区域的大小，确定出各个控件所处的矩形区域；

根据各个文本中各个文字所处的文字坐标位置以及所处的矩形区域的大小，确定出各个文本所处的矩形区域；

从各个文本所处的矩形区域中确定出与各个控件所处的矩形区域间重叠度大于预设阈值的文本，其中，所述文本为相应控件的关联文本；

建立各个控件与相应关联文本间的关联关系；

生成用于表征所述关联关系的所述DSL文件。

可选地，所述软件界面设计稿包括高保真原型和低保真原型中的至少一种。

第二方面，本发明实施例提供了一种软件界面代码的生成装置，包括：

获取模块，用于获取软件界面的设计图片；

识别模块，用于识别所述设计图片，获得所述设计图片的控件信息和文本信息，其中，所述控件信息用于标识相应的控件，所述文本信息用于标识相应的文本；

关联模块，用于根据所述控件信息和所述文本信息，生成用于表征所述设计图片中各个控件和各个文本间的关联关系的领域特定语言DSL文件；

布局模块，用于解析所述DSL文件，生成表征所述DSL文件中各关联控件间的相对位置关系的布局结构树，其中，各关联控件中的任一关联控件由任一控件和所关联的文本组成；

生成模块，根据所述布局结构树生成预设主题的软件界面代码。

可选地，所述布局模块用于：

解析所述DSL文件，确定各关联控件间的嵌套关系和行关系；

根据所述嵌套关系和所述行关系，确定出各关联控件间相对位置关系；

生成表征所述相对位置关系的布局结构树。

可选地，所述生成模块用于：

根据所述布局结构树生成超级文本标记语言html文件；

将各关联控件所引用的用于表征所述预设主题的直译式脚本语言js文件和层叠样式表css文件与所述html文件进行关联；

生成包括所述html文件、所述js文件和所述css文件的所述软件界面代码。

可选地，所述识别模块用于：

根据控件识别模型从所述设计图片中识别出各个控件对应的控件信息，所述控件信息包括控件类型、控件坐标位置和相应控件所处的矩形区域的大小；

根据文字识别模型从所述设计图片中识别出各个文本对应的文本信息，所述文本信息包括文字内容、文字坐标位置和相应文字所处的矩形区域的大小。

可选地，所述关联模块用于：

根据各个控件所处的控件坐标位置以及所处的矩形区域的大小，确定出各个控件所处的矩形区域；

根据各个文本中各个文字所处的文字坐标位置以及所处的矩形区域的大小，确定出各个文本所处的矩形区域；

从各个文本所处的矩形区域中确定出与各个控件所处的矩形区域间重叠度大于预设阈值的文本，其中，所述文本为相应控件的关联文本；

建立各个控件与相应关联文本间的关联关系；

生成用于表征所述关联关系的所述DSL文件。

第三方面，本发明实施例还提供了一种计算机装置，包括：处理器和存储器；其中，所述存储器存储有计算机程序，所述处理器用于读取所述存储器中的程序，执行上述软件界面代码的生成方法所述的步骤。

第四方面，本发明实施例还提供了一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行上述软件界面代码的生成方法所述的步骤。

本发明的有益效果如下：

在本发明实施例的技术方案中，直接识别出软件界面的设计图片中的控件信息和文本信息，然后根据该控件信息和文本信息，生成表征该设计图片中各个控件和各个文本间的关联关系的领域特定语言DSL文件，然后对该DSL文件进行解析，生成表征该DSL文件中各关联控件间的相对位置关系的布局结构树，然后根据该布局结构树生成预设主题的软件界面代码。整个过程根据软件界面的设计图片便可以自动生成相应的软件界面代码，从而提高了软件界面的研发的效率。

附图说明

图1为本发明实施例提供的一种软件界面代码的生成方法的流程图；

图2为本发明实施例提供的一种软件界面代码的生成方法中对低保真原型截图后的其中一种图片示意图；

图3为本发明实施例提供的一种软件界面代码的生成方法中步骤S104的方法流程图；

图4为本发明实施例提供的一种软件界面代码的生成方法中软件界面设计稿的图片的其中一种示意图；

图5为本发明实施例提供的一种软件界面代码的生成方法中步骤S105的方法流程图；

图6为本发明实施例提供的一种软件界面代码的生成方法中步骤S102的方法流程图；

图7为本发明实施例提供的一种软件界面代码的生成方法中步骤S103的方法流程图；

图8为本发明实施例提供的一种软件界面代码的生成装置的结构框图。

具体实施方式

本发明的说明书和权利要求书中术语“包括”以及它们的任何变形，意图在于覆盖不排他的包含。例如包含了一系列步骤或单元的过程、方法、系统、产品或设备没有限定于已列出的步骤或单元，而是可选地还包括没有列出的步骤或单元，或可选地还包括对于这些过程、方法、产品或设备固有的其它步骤或单元。

在本文中提及“实施例”意味着，结合实施例描述的特定特征、结构或特性可以包含在本发明的至少一个实施例中。在说明书中的各个位置出现该短语并不一定均是指相同的实施例，也不是与其它实施例互斥的独立的或备选的实施例。本领域技术人员显式地和隐式地理解的是，本文所描述的实施例可以与其它实施例相结合。

为了更好的理解上述技术方案，下面通过附图以及具体实施例对本发明技术方案做详细的说明，应当理解本发明实施例以及实施例中的具体特征是对本发明技术方案的详细的说明，而不是对本发明技术方案的限定，在不冲突的情况下，本发明实施例以及实施例中的技术特征可以相互结合。

现有软件界面研发，要么采用组件化的方式进行软件界面开发，具体由开发人员在编码过程中直接调用UI组件库中相关UI组件来生成相应代码，进而生成相应的软件界面。要么采用可视化编辑器来进行软件界面开发，具体通过人工拖拉组件的方式构建软件界面，经拖拉后生成软件界面的代码。前者不仅UI组件库建设成本高，而且软件界面的代码主要由人工编码实现。后者仍需要人工参与截面构建。可见，软件界面代码生成效率低。

鉴于此，本发明实施例提供了一种软件界面代码的生成方法及装置，用于提高软件界面代码的生成效率，进而提高软件界面研发的效率。

具体地，请参考图1，为本发明实施例提供的一种软件界面代码的生成方法的流程图，该流程图描述如下：

S101：获取软件界面的设计图片；

在具体实施过程中，软件界面的设计图片可以是基于高保真原型所获取的图片，还可以是基于低保真原型所获取的图片。在实际应用中，该设计图片可以是用户通过对高保真原型进行截图的图片，还可以是用户通过对低保真原型进行截图的图片，在此不做限定。如图2所示为对低保真原型截图后的其中一种图片示意图。其中，图2中，“添加”、“批量导入”、“配置下发”、“终端应用管理”、“管理LoRa升级业务”和“查询”为按钮，“终端地址：”、“版本”和“备注：”右侧的矩形框为文本输入框。加粗的“升级所选终端”、“升级查询到的终端”和“删除所选终端”为链接。“□”为复选框。此外，图2中还包括有表格。

S102：识别所述设计图片，获得所述设计图片的控件信息和文本信息，其中，所述控件信息用于标识相应的控件，所述文本信息用于标识相应的文本；

在具体实施过程中，对所述设计图片进行识别，识别出设计图片中各个控件的控件信息，以及设计图片中各个文本的文本信息。其中，控件信息用于标识相应的控件，控件信息具体可以是相应控件的控件类型、坐标位置以及所处的矩形区域的大小等等。文本信息用于标识相应的文本，文本信息具体可以是相应文字的文字内容、坐标位置和所处的矩形区域的大小等等。

S103：根据所述控件信息和所述文本信息，生成用于表征所述设计图片中各个控件和各个文本间的关联关系的领域特定语言DSL文件；

S104：解析所述DSL文件，生成表征所述DSL文件中各关联控件间的相对位置关系的布局结构树，其中，各关联控件中的任一关联控件由任一控件和所关联的文本组成；

在具体实施过程中，各关联控件中的任一关联控件具体为DSL文件中任一控件和所关联的文字所组成的控件。

S105：根据所述布局结构树生成预设主题的软件界面代码。

在具体实施过程中，预设主题包括控件布局、色彩、图标样式等内容。其中，所生成的软件界面代码同时支持扩展多种样式主题。在实际应用中，具体可以是根据用户实际需求来限定预设主题，从而限定出其所需要的软件界面代码，在此不做限定。

在本发明实施例中，直接识别出软件界面的设计图片中的控件信息和文本信息，然后根据该控件信息和文本信息，生成表征该设计图片中各个控件和各个文本间的关联关系的领域特定语言DSL文件，然后对该DSL文件进行解析，生成表征该DSL文件中各关联控件间的相对位置关系的布局结构树，然后根据该布局结构树生成预设主题的软件界面代码。整个过程根据软件界面的设计图片便可以自动生成相应的软件界面代码，从而提高了软件界面研发的效率。

在本发明实施例中，请参考图3，步骤S104：解析所述DSL文件，生成表征所述DSL文件中各关联控件间相对位置关系的布局结构树，包括：

S201：解析所述DSL文件，确定各关联控件间的嵌套关系和行关系；

S202：根据所述嵌套关系和所述行关系，确定出各关联控件间的相对位置关系；

S203：生成表征所述相对位置关系的布局结构树。

在具体实施过程中，步骤S201至步骤S203的具体实现过程如下：

首先，对DSL文件进行解析，确定出各关联控件间的嵌套关系和行关系；该嵌套关系也就是表征各关联控件间的父子关系。具体地，从DSL文件中解析出所有的关联控件，并确定出各关联控件间的嵌套关系和行关系。以图4所示的软件界面的设计图片为例，通过解析DSL文件，确定该设计图片为左右布局结构，具体来讲，该设计图片包括位于左侧的面板1和位于右侧的面板2。其中，面板1包括有内部嵌套了“创建区域”按钮、“搜索区域名称”输入框和“全局”树结构的嵌套关系。而且“创建区域”按钮、“搜索区域名称”输入框和“全局”树结构这三个控件位于设计图片的不同行上，通过解析DSL文件，可以确定出这三个控件之间具体的行关系。然后，根据解析出的嵌套关系和行关系，计算各个关联控件的相对位置关系。具体地根据解析出来的嵌套关系，确定出嵌套关系中各个关联控件间的相对位置关系；根据解析出来的行关系，确定出嵌套关系中各个关联控件的行间的相对位置关系。最终确定出所有的关联控件间的相对位置关系，然后生成表征该相对位置关系的布局结构树。仍然以图4为例，根据关联控件间的嵌套关系，确定出“创建区域”按钮这一控件相较于面板1的上边距和左边距。根据“创建区域”按钮与“搜索区域名称”输入框这一控件间的嵌套关系和行关系，确定出“搜索区域名称”输入框这一控件相较于面板1的左边距，和相较于“创建区域”按钮这一控件的上边距。同理，根据“全局”树这一控件与“搜索区域名称”输入框这一控件间的嵌套关系和行关系，确定出“全局”树这一控件相较于面板1的左边距，和相较于“搜索区域名称”输入框这一控件的上边距。其中，控件对应的上边距和左边距就是控件的相对位置，从而确定出了面板1中各关联控件间的相对位置关系，实现了对各关联控件由绝对位置到相对位置的转换。基于相同的处理过程，同样可以实现对面板2中各关联控件间相对位置的确定，在此不做详述。这样的话，根据关联控件的相对位置关系所生成的布局结构树，能够自适应各种尺寸的前端界面，如此一来，所生成的前端界面代码的自适应更好，用户体验更佳。

在本发明实施例中，如图5所示，步骤S105：根据所述布局结构树生成预设主题的软件界面代码，包括：

S301：根据所述布局结构树生成超级文本标记语言html文件；

S302：将所述关联控件所引用的用于表征所述预设主题的直译式脚本语言js文件和层叠样式表css文件与所述html文件进行关联；

S303：生成包括所述html文件、所述js文件和所述css文件的所述软件界面代码。

在具体实施过程中，步骤S301至步骤S303的具体实现过程如下：

首先，根据软件产品需求预先对所需要的UI组件库进行扩展，即预先搭建好UI组件库。然后，结合搭建好的UI组件库解析该布局结构树，生成相应的html(Hyper TextMarkup Language)文件，即html代码。然后，将所有的关联控件所引用的用于表征预设主题的直译式脚本语言js文件和层叠样式表css文件与所述html文件进行关联。这样的话，在用户通过浏览器打开页面时，就能对相应的页面进行渲染从而为用户呈现出预设主题的软件界面。然后，生成包括html文件、js文件和css文件的所述软件界面代码。

在具体实施过程中，如图6所示，步骤S102：识别所述设计图片，获得所述设计图片的控件信息和文本信息，包括：

S401：根据控件识别模型从所述设计图片中识别出各个控件对应的控件信息，所述控件信息包括控件类型、控件坐标位置和相应控件所处的矩形区域的大小；

S402：根据文字识别模型从所述设计图片中识别出各个文本对应的文本信息，所述文本信息包括文字内容、文字坐标位置和相应文字所处的矩形区域的大小。

在本发明实施例中，步骤S401和步骤S402二者间无执行的先后顺序限定，可以是先执行步骤S401，然后再执行步骤S402；还可以是先执行步骤S402，然后再执行步骤S401；还可以是同时执行步骤S401和步骤S402，在此不做限定。如图5所示为先执行步骤S401再执行步骤S402的示意图。

在具体实施过程中，步骤S401至步骤S402的具体实现过程如下：

首先，可以根据控件识别模型从设计图片中识别出各个控件对应的控件信息，比如，可以是基于单步多框检测SSD(Single Shot multibox Detection)模型,从设计图片中识别出各个控件对应的控件信息。在用SSD模型对设计图片中的控件进行识别前，采集大量的软件界面的设计图片，将这些设计图片作为训练数据对SSD模型进行训练，获得符合软件界面控件识别所需要的目标检测模型，后续用该目标检测模型对待识别的设计图片中的各个控件进行识别，从而从相应的图片中识别出各个控件对应的控件信息。由于目标检测模型是经过大量软件界面的设计图片所对应的数据训练所得的软件界面的控件识别模型，从而提高了设计图片中控件识别的精度。在具体实施过程中，该控件信息包括控件类型、控件坐标位置和控件所处的矩形区域的大小。其中，控件类型可以是输入框、按钮、连接、表格、单选框、复选框等。控件坐标位置可以是控件在设计图片所在的图像坐标系中位置，比如，控件坐标位置为(x,y)。控件所处的矩形区域的大小可以是控件所处的矩形区域在图像坐标系中的宽和高所决定的区域大小，比如，矩形区域大小为(width，height)。此外，在实际应用中还可以采用除SSD模型外的其它控件识别方法，来对设计图片中的各个控件进行识别，在此不做限定。

在具体实施过程中，可以是根据文字识别模型从设计图片中识别出各个文本对应的文本信息，比如，可以是采用Tesseract-OCR(Optical Character Recognition)光学字符识别模型从设计图片中识别出各个文本对应的文本信息。在对设计图片中的文本进行识别前，采集大量的软件界面的设计图片，将这些设计图片作为训练数据对OCR模型进行训练，获得符合软件界面的文本识别所需要的目标识别模型，后续用该目标识别模型对待识别的设计图片中的各个文本进行识别，从而从相应的设计图片中识别出各个文本对应的文本信息。由于目标识别模型是经过大量软件界面的设计图片所对应的数据训练所得的文本识别模型，从而提高了图片中文本识别的精度。在具体实施过程中，该文本信息包括文字内容、文字坐标位置和文字所处的矩形区域的大小。其中，文字内容可以是数字、字母、汉字等。文字坐标位置可以是文字在图片所在的图像坐标系中位置，比如，文字坐标位置为(x,y)。文字所处的矩形区域的大小可以是文字所处的矩形区域在图像坐标系中的宽和高所决定的区域大小，比如，矩形区域大小为(width，height)。此外，在实际应用中还可以采用除Tesseract-OCR模型外的其它文字识别方法，来对软件界面的设计图片中的各个文字进行识别，在此不做限定。

在本发明实施例中，请参考图7，步骤S103：根据所述控件信息和所述文本信息，生成用于表征所述设计图片中各个控件和各个文本间的关联关系的DSL文件，包括：

S501：根据各个控件所处的控件坐标位置以及所处的矩形区域的大小，确定出各个控件所处的矩形区域；

S502：根据各个文本中各个文字所处的文字坐标位置以及所处的矩形区域的大小，确定出各个文本所处的矩形区域；

S503：从各个文本所处的矩形区域中确定出与各个控件所处的矩形区域间重叠度大于预设阈值的文本，其中，所述文本为相应控件的关联文本；

S504：建立各个控件与相应关联文本间的关联关系；

S505：生成用于表征所述关联关系的所述DSL文件。

在本发明实施例中，步骤S501和步骤S502二者间无执行的先后顺序限定，可以是先执行步骤S501，然后再执行步骤S502；还可以是先执行步骤S502，然后再执行步骤S501；还可以是同时执行步骤S501和步骤S502，在此不做限定。如图7所示为先执行步骤S501再执行步骤S502的示意图。

在具体实施过程中，步骤S501至步骤S505的具体实现过程如下：

首先，根据各个控件所处的控件坐标位置以及所处的矩形区域的大小，确定出各个控件所处的矩形区域。比如，在控件A的所处的控件坐标位置为(x,y)，所处的矩形区域的大小为宽为a，长为b时，控件A所处的矩形区域为坐标位置(x,y)、(x+a,y)、(x+a,y+b)、(x,y+b)所围成的区域。

然后，根据各个文本中各个文字所处的文字坐标位置以及所处的矩形区域的大小，确定出各个文本所处的矩形区域。在具体实施过程中，首先确定出各个文字的文字内容，基于文字内容确定出与之相关的短语，进而确定出相应的文本，根据各个文字所处的坐标位置，确定出相应文本所处坐标位置；并根据各个文字所处的矩形区域的大小，确定出相应文本所处的矩形区域的大小进而确定出该文本所处的矩形区域。由文本所处的坐标位置以及所处的矩形区域的大小，来确定该文本所处的矩形区域的具体实现过程同控件所处的矩形区域的过程原理相同，在此不再详述。

然后，从各个文本所处的矩形区域中确定出与各个控件所处的矩形区域间重叠度大于预设阈值的文本，该文本为相应控件的关联文本。其中预设阈值为根据实际应用场景所设定的数值，比如，预设阈值可以为98％，预设阈值可以为95％。在预设阈值为95％时，当文本T所处的矩形区域t与控件C所处的矩形区域c之间的重叠度为97％时，表明文本T与控件C之间存在关联关系，文本T为控件C的关联文本。基于相同的处理过程，确定出每个控件所关联的文本。然后，建立各个控件与相应关联文本间的关联关系。然后，生成用于表征该关联关系的DSL文件。

基于同样的发明构思，请参考图8，本发明实施例提供了一种软件界面代码的生成装置，包括：

获取模块10，用于获取软件界面的设计图片；

识别模块20，用于识别所述设计图片，获得所述设计图片的控件信息和文本信息，其中，所述控件信息用于标识相应的控件，所述文本信息用于标识相应的文本关联模块30，用于根据所述控件信息和所述文本信息，生成用于表征所述设计图片中各个控件和各个文本间的关联关系的领域特定语言DSL文件；

布局模块40，用于解析所述DSL文件，生成表征所述DSL文件中各关联控件间的相对位置关系的布局结构树，其中，各关联控件中的任一关联控件由任一控件和所关联的文本组成；

生成模块50，根据所述布局结构树生成预设主题的软件界面代码。

在本发明实施例中，布局模块40用于：

解析所述DSL文件，确定各所述关联控件间的嵌套关系和行关系；

根据所述嵌套关系和所述行关系，确定出各所述关联控件间相对位置关系；

生成表征所述相对位置关系的布局结构树。

在本发明实施例中，生成模块50用于：

根据所述布局结构树生成超级文本标记语言html文件；

将各关联控件所引用的用于表征所述预设主题的直译式脚本语言js文件和层叠样式表css文件与所述html文件进行关联；

生成包括所述html文件、所述js文件和所述css文件的所述软件界面代码。

在本发明实施例中，识别模块20用于：

根据控件识别模型从所述设计图片中识别出各个控件对应的控件信息，所述控件信息包括控件类型、控件坐标位置和相应控件所处的矩形区域的大小；

根据文字识别模型从所述设计图片中识别出各个文本对应的文本信息，所述文本信息包括文字内容、文字坐标位置和相应文字所处的矩形区域的大小。

在本发明实施例中，关联模块30用于：

根据各个控件所处的控件坐标位置以及所处的矩形区域的大小，确定出各个控件所处的矩形区域；

根据各个文本中各个文字所处的文字坐标位置以及所处的矩形区域的大小，确定出各个文本所处的矩形区域；

从各个文本所处的矩形区域中确定出与各个控件所处的矩形区域间重叠度大于预设阈值的文本，其中，所述文本为相应控件的关联文本；

建立各个控件与相应关联文本间的关联关系；

生成用于表征所述关联关系的所述DSL文件。

本发明实施例提供的一种软件界面代码的生成方法及装置，直接识别出软件界面的设计图片中的控件信息和文本信息，然后根据该控件信息和文本信息，生成表征该设计图片中各个控件和各个文本间的关联关系的领域特定语言DSL文件，然后对该DSL文件进行解析，生成表征该DSL文件中各关联控件间的相对位置关系的布局结构树，然后根据该布局结构树生成预设主题的软件界面代码。整个过程根据软件界面的设计图片便可以自动生成相应的软件界面代码，从而提高了软件界面研发的效率。

基于同一发明构思，本发明实施例还提供了一种计算机装置，所述计算机装置包括处理器，所述处理器用于执行存储器中存储的计算机程序时实现如本发明实施例提供的软件界面代码的生成方法的步骤。

可选的，处理器具体可以是中央处理器、特定应用集成电路(英文：ApplicationSpecific Integrated Circuit，简称：ASIC)，可以是一个或多个用于控制程序执行的集成电路。

可选的，该计算机装置还包括与处理器连接的存储器，存储器可以包括只读存储器(英文：Read Only Memory，简称：ROM)、随机存取存储器(英文：Random Access Memory，简称：RAM)和磁盘存储器。存储器用于存储处理器运行时所需的数据，即存储有可被处理器执行的指令，处理器通过执行存储器存储的指令，执行如图1所示的软件界面代码的生成方法。其中，存储器的数量为一个或多个。其中，存储器不是必选的功能模块。

其中，该计算机装置可以用于执行图1所示的实施例所提供的软件界面代码的生成方法。因此关于该设备中各功能模块所能够实现的功能，可参考图1所示的实施例中的相应描述，不多赘述。

本发明实施例还提供一种计算机可读存储介质，其中，计算机可读存储介质存储有计算机程序，当计算机程序在计算机上运行时，使得计算机执行如图1所述的软件界面代码的生成方法。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，仅以上述各功能模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能模块完成，即将装置的内部结构划分成不同的功能模块，以完成以上描述的全部或者部分功能。上述描述的系统，装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

在本发明所提供的几个实施例中，应该理解到，所揭露的装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，所述模块或单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本申请各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)或处理器(processor)执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：通用串行总线闪存盘(Universal Serial Bus flash disk)、移动硬盘、只读存储器(Read-Only Memory，ROM)、随机存取存储器(Random Access Memory，RAM)、磁碟或者光盘等各种可以存储程序代码的介质。

尽管已描述了本发明的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例作出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本发明范围的所有变更和修改。

显然，本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围。这样，倘若本发明的这些修改和变型属于本发明权利要求及其等同技术的范围之内，则本发明也意图包含这些改动和变型在内。

Claims (10)

1.一种软件界面代码的生成方法，其特征在于，包括：

获取软件界面的设计图片；

识别所述设计图片，获得所述设计图片的控件信息和文本信息，其中，所述控件信息用于标识相应的控件，所述文本信息用于标识相应的文本；

根据所述控件信息和所述文本信息，生成用于表征所述设计图片中各个控件和各个文本间的关联关系的领域特定语言DSL文件；

解析所述DSL文件，生成表征所述DSL文件中各关联控件间的相对位置关系的布局结构树，其中，各关联控件中的任一关联控件由任一控件和所关联的文本组成；

根据所述布局结构树生成预设主题的软件界面代码。

2.如权利要求1所述的方法，其特征在于，所述解析所述DSL文件，生成表征所述DSL文件中各关联控件间的相对位置关系的布局结构树，包括：

解析所述DSL文件，确定各关联控件间的嵌套关系和行关系；

根据所述嵌套关系和所述行关系，确定出各关联控件间的相对位置关系；

生成表征所述相对位置关系的布局结构树。

3.如权利要求1所述的方法，其特征在于，所述根据所述布局结构树生成预设主题的软件界面代码，包括：

根据所述布局结构树生成超级文本标记语言html文件；

将各关联控件所引用的用于表征所述预设主题的直译式脚本语言js文件和层叠样式表css文件与所述html文件进行关联；

生成包括所述html文件、所述js文件和所述css文件的所述软件界面代码。

4.如权利要求1所述的方法，其特征在于，所述识别所述设计图片，获得所述设计图片的控件信息和文本信息，包括：

根据控件识别模型从所述设计图片中识别出各个控件对应的控件信息，所述控件信息包括控件类型、控件坐标位置和相应控件所处的矩形区域的大小；

根据文字识别模型从所述设计图片中识别出各个文本对应的文本信息，所述文本信息包括文字内容、文字坐标位置和相应文字所处的矩形区域的大小。

5.如权利要求4所述的方法，其特征在于，所述根据所述控件信息和所述文本信息，生成用于表征所述设计图片中各个控件和各个文本间的关联关系的DSL文件，包括：

根据各个控件所处的控件坐标位置以及所处的矩形区域的大小，确定出各个控件所处的矩形区域；

根据各个文本中各个文字所处的文字坐标位置以及所处的矩形区域的大小，确定出各个文本所处的矩形区域；

从各个文本所处的矩形区域中确定出与各个控件所处的矩形区域间重叠度大于预设阈值的文本，其中，所述文本为相应控件的关联文本；

建立各个控件与相应关联文本间的关联关系；

生成用于表征所述关联关系的所述DSL文件。

6.一种软件界面代码的生成装置，其特征在于，包括：

获取模块，用于获取软件界面的设计图片；

识别模块，用于识别所述设计图片，获得所述设计图片的控件信息和文本信息，其中，所述控件信息用于标识相应的控件，所述文本信息用于标识相应的文本；

关联模块，用于根据所述控件信息和所述文本信息，生成用于表征所述设计图片中各个控件和各个文本间的关联关系的领域特定语言DSL文件；

布局模块，用于解析所述DSL文件，生成表征所述DSL文件中各关联控件间的相对位置关系的布局结构树，其中，各关联控件中的任一关联控件由任一控件和所关联的文本组成；

生成模块，根据所述布局结构树生成预设主题的软件界面代码。

7.如权利要求6所述的生成装置，其特征在于，所述布局模块用于：

解析所述DSL文件，确定各关联控件间的嵌套关系和行关系；

根据所述嵌套关系和所述行关系，确定出各关联控件间相对位置关系；

生成表征所述相对位置关系的布局结构树。

8.如权利要求6所述的生成装置，其特征在于，所述生成模块用于：

根据所述布局结构树生成超级文本标记语言html文件；

将各关联控件所引用的用于表征所述预设主题的直译式脚本语言js文件和层叠样式表css文件与所述html文件进行关联；

生成包括所述html文件、所述js文件和所述css文件的所述软件界面代码。

9.如权利要求6所述的生成装置，其特征在于，所述识别模块用于：

根据控件识别模型从所述设计图片中识别出各个控件对应的控件信息，所述控件信息包括控件类型、控件坐标位置和相应控件所处的矩形区域的大小；

根据文字识别模型从所述设计图片中识别出各个文本对应的文本信息，所述文本信息包括文字内容、文字坐标位置和相应文字所处的矩形区域的大小。

10.如权利要求9所述的生成装置，其特征在于，所述关联模块用于：

根据各个控件所处的控件坐标位置以及所处的矩形区域的大小，确定出各个控件所处的矩形区域；

根据各个文本中各个文字所处的文字坐标位置以及所处的矩形区域的大小，确定出各个文本所处的矩形区域；

从各个文本所处的矩形区域中确定出与各个控件所处的矩形区域间重叠度大于预设阈值的文本，其中，所述文本为相应控件的关联文本；

建立各个控件与相应关联文本间的关联关系；

生成用于表征所述关联关系的所述DSL文件。

Images