CN108304183A - 一种用户界面生成方法、装置及电子设备 - Google Patents
一种用户界面生成方法、装置及电子设备 Download PDFInfo
- Publication number
- CN108304183A CN108304183A CN201810159763.9A CN201810159763A CN108304183A CN 108304183 A CN108304183 A CN 108304183A CN 201810159763 A CN201810159763 A CN 201810159763A CN 108304183 A CN108304183 A CN 108304183A
- Authority
- CN
- China
- Prior art keywords
- user interface
- attribute
- description file
- code
- design drawing
- 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
Links
- 238000000034 method Methods 0.000 title claims abstract description 49
- 238000013461 design Methods 0.000 claims abstract description 66
- 238000013515 script Methods 0.000 claims description 18
- 238000004590 computer program Methods 0.000 claims description 16
- 238000003909 pattern recognition Methods 0.000 claims description 3
- 230000006870 function Effects 0.000 description 5
- 238000005516 engineering process Methods 0.000 description 4
- 238000010168 coupling process Methods 0.000 description 3
- 238000005859 coupling reaction Methods 0.000 description 3
- 238000011161 development Methods 0.000 description 3
- 230000000694 effects Effects 0.000 description 3
- 230000015572 biosynthetic process Effects 0.000 description 2
- 238000004891 communication Methods 0.000 description 2
- 230000008878 coupling Effects 0.000 description 2
- 238000012545 processing Methods 0.000 description 2
- 241000208340 Araliaceae Species 0.000 description 1
- 235000005035 Panax pseudoginseng ssp. pseudoginseng Nutrition 0.000 description 1
- 235000003140 Panax quinquefolius Nutrition 0.000 description 1
- 238000004422 calculation algorithm Methods 0.000 description 1
- 238000004364 calculation method Methods 0.000 description 1
- 238000012938 design process Methods 0.000 description 1
- 235000008434 ginseng Nutrition 0.000 description 1
- 238000002360 preparation method Methods 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/40—Transformation of program code
- G06F8/41—Compilation
- G06F8/42—Syntactic analysis
- G06F8/427—Parsing
Landscapes
- Engineering & Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Stored Programmes (AREA)
Abstract
本发明提供一种用户界面生成方法、装置及电子设备，该方法包括：获取用户界面的设计图中所采用的每个元素和每个元素的属性；根据所获取的每个元素和每个元素的属性生成所述用户界面的描述文件；根据所述描述文件生成所述用户界面的代码。通过本发明提供的用户界面生成方法，可以基于用户界面的设计图自动生成用户界面的描述文件，并可以基于描述文件自动生成用户界面的代码，相比于现有技术中软件开发人员基于用户界面设计图编写用户界面代码，可以提高用户界面代码生成的效率。
Description
技术领域
本发明涉及计算机技术领域，尤其涉及一种用户界面生成方法、装置及电子设备。
背景技术
随着移动互联网和移动终端技术的发展，移动终端支持的功能越来越多，应用程序也越来越多，相应的，应用程序中用于与用户交互的用户界面也越来越多。
目前，用户界面开发的流程通常为由界面设计师先设计用户界面的布局，得到用户界面设计图，再由软件开发人员基于上述用户界面设计图，编写用户界面代码。上述用户界面代码生成方式不仅对开发人员要求较高，需要其掌握编程语言，用户界面代码生成的效率也较低。
在现有技术中，针对用户界面代码生成效率较低的问题，目前尚未提出有效的解决方法。
发明内容
本发明实施例提供一种用户界面生成方法、装置及电子设备，以解决现有技术中用户界面代码生成效率较低的问题。
第一方面，本发明实施例提供了一种用户界面生成方法，该方法包括：
获取用户界面的设计图中所采用的每个元素和每个元素的属性；
根据所获取的每个元素和每个元素的属性生成所述用户界面的描述文件；
根据所述描述文件生成所述用户界面的代码。
可选的，所述获取用户界面的设计图中所采用的每个元素和每个元素的属性，包括：
在采用设计软件生成用户界面的设计图的过程中，记录所述用户界面的设计图中所采用的每个元素和每个元素的属性；或者
采用图像识别方法识别所述用户界面的设计图中所采用的每个元素和每个元素的属性。
可选的，所述根据所获取的每个元素和每个元素的属性生成所述用户界面的描述文件，包括：
调用预设脚本程序生成所述用户界面的描述文件，其中，所述描述文件存储有所述每个元素、每个元素的属性以及所述元素之间的关系。
可选的，所述根据所述描述文件生成所述用户界面的代码，包括：
解析所述描述文件，得到所述用户界面的元素集合、所述元素集合中各个元素的属性和所述元素集合中元素之间的关系；
根据所述用户界面的元素集合、所述元素集合中各个元素的属性和所述元素集合中元素之间的关系，生成所述用户界面的代码。
可选的，所述根据所述描述文件生成所述用户界面的代码，包括：
确定目标配置参数，其中，所述目标配置参数包括用户界面类型、移动终端型号、分辨率、语言类型中的至少一项；
根据所述描述文件和所述目标配置参数，生成所述用户界面的代码。
第二方面，本发明实施例还提供一种用户界面生成装置，该装置包括：
获取模块，用于获取用户界面的设计图中所采用的每个元素和每个元素的属性；
第一生成模块，用于根据所获取的每个元素和每个元素的属性生成所述用户界面的描述文件；
第二生成模块，用于根据所述描述文件生成所述用户界面的代码。
可选的，所述获取模块具有用于：
在采用设计软件生成用户界面的设计图的过程中，记录所述用户界面的设计图中所采用的每个元素和每个元素的属性；或者
采用图像识别装置识别所述用户界面的设计图中所采用的每个元素和每个元素的属性。
可选的，所述第一生成模块具体用于：
调用预设脚本程序生成所述用户界面的描述文件，其中，所述描述文件存储有所述每个元素、每个元素的属性以及所述元素之间的关系。
可选的，所述第二生成模块包括：
解析单元，用于解析所述描述文件，得到所述用户界面的元素集合、所述元素集合中各个元素的属性和所述元素集合中元素之间的关系；
第一生成单元，用于根据所述用户界面的元素集合、所述元素集合中各个元素的属性和所述元素集合中元素之间的关系，生成所述用户界面的代码。
可选的，所述第二生成模块包括：
确定单元，用于确定目标配置参数，其中，所述目标配置参数包括用户界面类型、移动终端型号、分辨率、语言类型中的至少一项；
第二生成单元，用于根据所述描述文件和所述目标配置参数，生成所述用户界面的代码。
第三方面，本发明实施例还提供一种电子设备，包括处理器、存储器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述计算机程序被所述处理器执行时实现上述的用户界面生成方法的步骤。
第四方面，本发明实施例还提供一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现上述的用户界面生成方法的步骤。
本发明实施例中，获取用户界面的设计图中所采用的每个元素和每个元素的属性；根据所获取的每个元素和每个元素的属性生成所述用户界面的描述文件；根据所述描述文件生成所述用户界面的代码。本发明实施例可以基于用户界面的设计图自动生成用户界面的描述文件，并可以基于描述文件自动生成用户界面的代码，相比于现有技术中软件开发人员基于用户界面设计图编写用户界面代码，可以提高用户界面代码生成的效率。
附图说明
为了更清楚地说明本发明实施例的技术方案，下面将对本发明实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。
图1是本发明实施例提供的用户界面生成方法的流程图；
图2是本发明又一实施例提供的用户界面生成方法的流程图；
图3是本发明实施例提供的用户界面生成装置的结构图；
图4是本发明又一实施例提供的用户界面生成装置的结构图；
图5是本发明又一实施例提供的用户界面生成装置的结构图；
图6是本发明实施例提供的电子设备的结构图。
具体实施方式
下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
本发明实施例提供一种用户界面生成方法。参见图1，图1是本发明实施例提供的用户界面生成方法的流程图，如图1所示，包括以下步骤：
步骤101、获取用户界面的设计图中所采用的每个元素和每个元素的属性。
本发明实施例中，用户界面的设计图可以是包含用户界面各个元素的排版、布局等信息的设计图，用户界面的元素可以包括容器、菜单栏、滚动条、按钮、列表、文本框、图标等控件，上述元素的属性可以包括大小、颜色、形状、所处位置信息等。
步骤102、根据所获取的每个元素和每个元素的属性生成所述用户界面的描述文件。
本发明实施例中，上述描述文件可以是按照某一预设规则存储所获取的每个元素和每个元素的属性的文件，例如，描述文件可以是基于用户界面的设计图中所采用的每个元素和每个元素的属性所创建的树形数据结构文件、XML(Extensible Markup Language，可扩展标记语言)文件等。可以理解的是，描述文件中可以通过唯一标识分别标识每个元素。
步骤103、根据所述描述文件生成所述用户界面的代码。
本发明实施例中，由于描述文件中存储有用户界面的设计图中所采用的每个元素和每个元素的属性，因此可以通过解析上述描述文件得到用户界面的设计图中所采用的每个元素和每个元素的属性，从而可以基于解析得到的每个元素和每个元素的属性自动生成用户界面的代码。可选的，上述用户界面的代码可以是适用于网页的用户界面的代码(例如，超级文本标记语言代码)、适用于安卓操作***的用户界面的代码和/或适用于IOS操作***的用户界面的代码等。
本发明实施例的用户界面生成方法，获取用户界面的设计图中所采用的每个元素和每个元素的属性；根据所获取的每个元素和每个元素的属性生成所述用户界面的描述文件；根据所述描述文件生成所述用户界面的代码。本发明实施例可以基于用户界面的设计图自动生成用户界面的描述文件，并可以基于描述文件自动生成用户界面的代码，相比于现有技术中软件开发人员基于用户界面设计图编写用户界面代码，可以提高用户界面代码生成的效率，而且可以降低用户界面代码开发的复杂度。
参见图2，图2是本发明又一实施例提供的用户界面生成方法的流程图。本发明实施例与上一实施例的区别主要在于对上述步骤102的进一步限定。本发明实施中，所述根据所获取的每个元素和每个元素的属性生成所述用户界面的描述文件，包括：调用预设脚本程序生成所述用户界面的描述文件，其中，所述描述文件存储有所述每个元素、每个元素的属性以及所述元素之间的关系。
如图2所示，本发明实施例提供的用户界面生成方法包括以下步骤：
步骤201、获取用户界面的设计图中所采用的每个元素和每个元素的属性。
本发明实施例中，用户界面的设计图可以是包含用户界面各个元素的排版、布局等信息的设计图，用户界面的元素可以包括容器、菜单栏、滚动条、按钮、列表、文本框、图标等控件，上述元素的属性可以包括大小、颜色、形状、所处位置信息等。
可选的，上述步骤201，也即所述获取用户界面的设计图中所采用的每个元素和每个元素的属性，可以包括：
在采用设计软件生成用户界面的设计图的过程中，记录所述用户界面的设计图中所采用的每个元素和每个元素的属性；或者
采用图像识别方法识别所述用户界面的设计图中所采用的每个元素和每个元素的属性。
本发明实施例中，上述设计软件可以是用于辅助用户进行用户界面设计的软件，用户可以通过上述设计软件设置用户界面所需包含的元素、各个元素的属性、各个元素的排版和布局等信息。具体的，可以在用户采用设计软件生成用户界面的设计图的过程中实时记录用户所选择的元素、该元素的属性等信息，例如，若用户界面上添加一个按钮，则可以记录该按钮的形状、大小、颜色、按钮上文本、按钮所处位置等信息。
本发明实施例通过在用户设计用户界面的设计图的过程中实时记录用户界面的设计图中所采用的每个元素和每个元素的属性，可以较为准确、快速的得到用户界面的每个元素和每个元素的属性。
可选的，本发明实施例也可以在得到用户界面的设计图之后，采用图像识别方法识别所述用户界面的设计图中所采用的每个元素和每个元素的属性，例如，可以基于预先训练的分类器识别所述用户界面的设计图中所采用的每个元素和每个元素的属性。通过图像识别方法获取用户界面的设计图中所采用的每个元素和每个元素的属性，可以使得用户界面的设计过程和用户界面的代码生成过程相分离，降低用户界面开发的不同过程之间的依赖性。
步骤202、调用预设脚本程序生成所述用户界面的描述文件，其中，所述描述文件存储有所述每个元素、每个元素的属性以及所述元素之间的关系。
本发明实施例中，上述预设脚本程序可以是用于按照预设规则存储所述每个元素、每个元素的属性以及所述元素之间的关系的可执行程序，例如，JavaScript脚本程序。上述元素之间的关系可以是指元素之间的包含关系，例如，按钮A位于容器A中，则容器A包含按钮A。
可以理解的是，上述预设规则可以根据具体所采用的数据存储结构进行设置，例如，当上述描述文件为树形数据结构文件时，则上述预设规则可以是树形数据结构的生成规则，例如，按照元素之间的关系创建树形结构的根节点和子节点，根据各个元素的属性标记树形结构的各个节点的属性等。
步骤203、根据所述描述文件生成所述用户界面的代码。
本发明实施例中，由于描述文件中存储有用户界面的设计图中所采用的每个元素和每个元素的属性，因此可以通过解析上述描述文件得到用户界面的每个元素和每个元素的属性。
可选的，上述步骤203，也即所述根据所述描述文件生成所述用户界面的代码，可以包括：
解析所述描述文件，得到所述用户界面的元素集合、所述元素集合中各个元素的属性和所述元素集合中元素之间的关系；
根据所述用户界面的元素集合、所述元素集合中各个元素的属性和所述元素集合中元素之间的关系，生成所述用户界面的代码。
本发明实施例中，可以基于预先存储的控件生成脚本程序分别生成所述元素集合中各个元素对应的控件，并基于所述元素集合中各个元素的属性设置各个元素对应的控件的属性，将生成的各个控件按照上述元素集合中元素之间的关系进行组合，以得到所述用户界面的代码。
可选的，由于每种类型用户界面(例如，适用于网页的用户界面、适用于安卓操作***的用户界面、适用于IOS操作***的用户界面等)均存在其自身的编程规则，因此可以预先存储多种用户界面类型对应的控件生成脚本程序，从而可以根据用户所需生成的用户界面类型，选择其对应的控件生成脚本程序以自动生成该用户界面类型对应的用户界面代码。
可选的，上述控件生成脚本程序可以包括多个控件对应的绘制脚本程序和填充脚本程序，通过调用绘制脚本程序可以生成控件，通过调用填充脚本程序可以设置控件的属性。
本发明实施例通过解析所述描述文件，得到所述用户界面的元素集合、所述元素集合中各个元素的属性和所述元素集合中元素之间的关系，并根据所述用户界面的元素集合、所述元素集合中各个元素的属性和所述元素集合中元素之间的关系，生成所述用户界面的代码，可以提高所生成的用户界面的代码的准确性和生成用户界面的代码的效率。
可选的，上述步骤203，也即所述根据所述描述文件生成所述用户界面的代码，可以包括：
确定目标配置参数，其中，所述目标配置参数包括用户界面类型、移动终端型号、分辨率、语言类型中的至少一项；
根据所述描述文件和所述目标配置参数，生成所述用户界面的代码。
本发明实施例中，上述用户界面类型可以包括适用于网页的用户界面、适用于安卓操作***的用户界面和/或适用于IOS操作***的用户界面等，上述移动终端型号可以包括不同厂商的不同移动终端型号，具体的，用户可以通过配置参数设置界面设置目标配置参数。
具体的，可以解析上述描述文件，得到所述用户界面的元素集合、所述元素集合中各个元素的属性和所述元素集合中元素之间的关系，再根据所述用户界面的元素集合、所述元素集合中各个元素的属性、所述元素集合中元素之间的关系以及目标配置参数，生成所述用户界面的代码。例如，当目标配置参数中的用户界面类型为适用于安卓操作***的用户界面时，可以基于预先存储的适用于安卓操作***的用户界面的控件生成脚本程序分别生成所述元素集合中各个元素对应的控件，在基于所述元素集合中各个元素的属性和上述目标配置参数中除用户界面类型之外的配置参数设置各个元素对应的控件的属性，最后按照上述元素集合中元素之间的关系进行组合，以得到所述用户界面的代码。
可以理解的是，对于用户未设置的配置参数，可以根据其默认值生成用户界面的代码，例如，用户未设置移动终端型号和语言类型，则可以采用默认的移动终端型号和默认的语音类型生成用户界面的代码。
本发明实施例可以接收用户设置的目标配置参数，并根据描述文件和目标配置参数生成所述用户界面的代码，提高了用户界面的代码生成的灵活性，从而可以满足用户多样化的用户界面的代码生成需求。
可以理解的是，本发明实施例的上述步骤可以通过分别调用不同的脚本程序实现。
参见图3，图3是本发明实施例提供的用户界面生成装置的结构图。如图3所示，用户界面生成装置300包括：获取模块301、第一生成模块302和第二生成模块303，其中：
获取模块301，用于获取用户界面的设计图中所采用的每个元素和每个元素的属性；
第一生成模块302，用于根据所获取的每个元素和每个元素的属性生成所述用户界面的描述文件；
第二生成模块303，用于根据所述描述文件生成所述用户界面的代码。
可选的，所述获取模块301具有用于：
在采用设计软件生成用户界面的设计图的过程中，记录所述用户界面的设计图中所采用的每个元素和每个元素的属性；或者
采用图像识别装置识别所述用户界面的设计图中所采用的每个元素和每个元素的属性。
可选的，所述第一生成模块302具体用于：
调用预设脚本程序生成所述用户界面的描述文件，其中，所述描述文件存储有所述每个元素、每个元素的属性以及所述元素之间的关系。
可选的，参见图4，所述第二生成模块303包括：
解析单元3031，用于解析所述描述文件，得到所述用户界面的元素集合、所述元素集合中各个元素的属性和所述元素集合中元素之间的关系；
第一生成单元3032，用于根据所述用户界面的元素集合、所述元素集合中各个元素的属性和所述元素集合中元素之间的关系，生成所述用户界面的代码。
可选的，参见图5，所述第二生成模块303包括：
确定单元3033，用于确定目标配置参数，其中，所述目标配置参数包括用户界面类型、移动终端型号、分辨率、语言类型中的至少一项；
第二生成单元3034，用于根据所述描述文件和所述目标配置参数，生成所述用户界面的代码。
用户界面生成装置300能够实现图1至图2的方法实施例的用户界面生成方法的各个过程，并达到相同的效果为避免重复，这里不再赘述。
本发明实施例的用户界面生成装置300，获取模块301，用于获取用户界面的设计图中所采用的每个元素和每个元素的属性；第一生成模块302，用于根据所获取的每个元素和每个元素的属性生成所述用户界面的描述文件；第二生成模块303，用于根据所述描述文件生成所述用户界面的代码。本发明实施例可以基于用户界面的设计图自动生成用户界面的描述文件，并可以基于描述文件自动生成用户界面的代码，相比于现有技术中软件开发人员基于用户界面设计图编写用户界面代码，可以提高用户界面代码生成的效率。
本发明实施例还提供一种用户界面生成装置，包括处理器、存储器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述计算机程序被所述处理器执行时实现上述任一方法实施例的用户界面生成方法的各个过程，且能达到相同的技术效果，为避免重复，这里不再赘述。
本发明实施例还提供一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现上述的用户界面生成方法的各个过程，且能达到相同的技术效果，为避免重复，这里不再赘述。其中，所述的计算机可读存储介质，如只读存储器(Read-Only Memory，简称ROM)、随机存取存储器(Random AccessMemory，简称RAM)、磁碟或者光盘等。
参见图6，图6是本发明实施提供的电子设备的结构图，如图6所示，电子设备600包括：处理器601、存储器602及存储在所述存储器602上并可在所述处理器上运行的计算机程序，电子设备600中的各个组件通过总线接口603耦合在一起，所述计算机程序被所述处理器601执行时实现如下步骤：
获取用户界面的设计图中所采用的每个元素和每个元素的属性；
根据所获取的每个元素和每个元素的属性生成所述用户界面的描述文件；
根据所述描述文件生成所述用户界面的代码。
可选的，所述计算机程序被所述处理器601执行时还用于：
在采用设计软件生成用户界面的设计图的过程中，记录所述用户界面的设计图中所采用的每个元素和每个元素的属性；或者
采用图像识别方法识别所述用户界面的设计图中所采用的每个元素和每个元素的属性。
可选的，所述计算机程序被所述处理器601执行时还用于：
调用预设脚本程序生成所述用户界面的描述文件，其中，所述描述文件存储有所述每个元素、每个元素的属性以及所述元素之间的关系。
可选的，所述计算机程序被所述处理器601执行时还用于：
解析所述描述文件，得到所述用户界面的元素集合、所述元素集合中各个元素的属性和所述元素集合中元素之间的关系；
根据所述用户界面的元素集合、所述元素集合中各个元素的属性和所述元素集合中元素之间的关系，生成所述用户界面的代码。
可选的，所述计算机程序被所述处理器601执行时还用于：
确定目标配置参数，其中，所述目标配置参数包括用户界面类型、移动终端型号、分辨率、语言类型中的至少一项；
根据所述描述文件和所述目标配置参数，生成所述用户界面的代码。
本发明实施例提供的电子设备，可以基于用户界面的设计图自动生成用户界面的描述文件，并可以基于描述文件自动生成用户界面的代码，相比于现有技术中软件开发人员基于用户界面设计图编写用户界面代码，可以提高用户界面代码生成的效率，而且可以降低用户界面代码开发的复杂度。
本领域普通技术人员可以意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、或者计算机软件和电子硬件的结合来实现。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本发明的范围。
所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的***、装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。
在本申请所提供的实施例中，应该理解到，所揭露的装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个***，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。
所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本发明实施例方案的目的。
另外，在本发明各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。
所述功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、ROM、RAM、磁碟或者光盘等各种可以存储程序代码的介质。
以上所述，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应以权利要求的保护范围为准。
Claims (12)
1.一种用户界面代码生成方法，其特征在于，包括：
获取用户界面的设计图中所采用的每个元素和每个元素的属性；
根据所获取的每个元素和每个元素的属性生成所述用户界面的描述文件；
根据所述描述文件生成所述用户界面的代码。
2.根据权利要求1所述的方法，其特征在于，所述获取用户界面的设计图中所采用的每个元素和每个元素的属性，包括：
在采用设计软件生成用户界面的设计图的过程中，记录所述用户界面的设计图中所采用的每个元素和每个元素的属性；或者
采用图像识别方法识别所述用户界面的设计图中所采用的每个元素和每个元素的属性。
3.根据权利要求1或2所述的方法，其特征在于，所述根据所获取的每个元素和每个元素的属性生成所述用户界面的描述文件，包括：
调用预设脚本程序生成所述用户界面的描述文件，其中，所述描述文件存储有所述每个元素、每个元素的属性以及所述元素之间的关系。
4.根据权利要求1或2所述的方法，其特征在于，所述根据所述描述文件生成所述用户界面的代码，包括：
解析所述描述文件，得到所述用户界面的元素集合、所述元素集合中各个元素的属性和所述元素集合中元素之间的关系；
根据所述用户界面的元素集合、所述元素集合中各个元素的属性和所述元素集合中元素之间的关系，生成所述用户界面的代码。
5.根据权利要求1或2所述的方法，其特征在于，所述根据所述描述文件生成所述用户界面的代码，包括：
确定目标配置参数，其中，所述目标配置参数包括用户界面类型、移动终端型号、分辨率、语言类型中的至少一项；
根据所述描述文件和所述目标配置参数，生成所述用户界面的代码。
6.一种用户界面代码生成装置，其特征在于，包括：
获取模块，用于获取用户界面的设计图中所采用的每个元素和每个元素的属性；
第一生成模块，用于根据所获取的每个元素和每个元素的属性生成所述用户界面的描述文件；
第二生成模块，用于根据所述描述文件生成所述用户界面的代码。
7.根据权利要求6所述的装置，其特征在于，所述获取模块具有用于：
在采用设计软件生成用户界面的设计图的过程中，记录所述用户界面的设计图中所采用的每个元素和每个元素的属性；或者
采用图像识别装置识别所述用户界面的设计图中所采用的每个元素和每个元素的属性。
8.根据权利要求6或7所述的装置，其特征在于，所述第一生成模块具体用于：
调用预设脚本程序生成所述用户界面的描述文件，其中，所述描述文件存储有所述每个元素、每个元素的属性以及所述元素之间的关系。
9.根据权利要求6或7所述的装置，其特征在于，所述第二生成模块包括：
解析单元，用于解析所述描述文件，得到所述用户界面的元素集合、所述元素集合中各个元素的属性和所述元素集合中元素之间的关系；
第一生成单元，用于根据所述用户界面的元素集合、所述元素集合中各个元素的属性和所述元素集合中元素之间的关系，生成所述用户界面的代码。
10.根据权利要求6或7所述的装置，其特征在于，所述第二生成模块包括：
确定单元，用于确定目标配置参数，其中，所述目标配置参数包括用户界面类型、移动终端型号、分辨率、语言类型中的至少一项；
第二生成单元，用于根据所述描述文件和所述目标配置参数，生成所述用户界面的代码。
11.一种电子设备，其特征在于，包括处理器、存储器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述计算机程序被所述处理器执行时实现如权利要求1至5中任一项所述的用户界面生成方法的步骤。
12.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现如权利要求1至5中任一项所述的用户界面生成方法的步骤。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810159763.9A CN108304183A (zh) | 2018-02-26 | 2018-02-26 | 一种用户界面生成方法、装置及电子设备 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810159763.9A CN108304183A (zh) | 2018-02-26 | 2018-02-26 | 一种用户界面生成方法、装置及电子设备 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN108304183A true CN108304183A (zh) | 2018-07-20 |
Family
ID=62848832
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201810159763.9A Pending CN108304183A (zh) | 2018-02-26 | 2018-02-26 | 一种用户界面生成方法、装置及电子设备 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN108304183A (zh) |
Cited By (23)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109117228A (zh) * | 2018-08-01 | 2019-01-01 | 浙江口碑网络技术有限公司 | 图形界面的生成方法及装置 |
| CN109189390A (zh) * | 2018-08-20 | 2019-01-11 | 福建天泉教育科技有限公司 | 自动生成布局文件的方法、存储介质 |
| CN109240687A (zh) * | 2018-08-01 | 2019-01-18 | 浙江口碑网络技术有限公司 | 图形界面描述文件的生成方法及装置 |
| CN109614097A (zh) * | 2018-12-07 | 2019-04-12 | 北京金山云网络技术有限公司 | 平台代码的生成方法、装置及服务器 |
| CN109656552A (zh) * | 2018-11-01 | 2019-04-19 | 中交第二航务工程局有限公司 | 一种基于盒子模型的设计图自动转换成网页的方法 |
| CN109783094A (zh) * | 2018-12-15 | 2019-05-21 | 深圳壹账通智能科技有限公司 | 前端页面生成方法、装置、计算机设备及存储介质 |
| CN109871205A (zh) * | 2018-12-15 | 2019-06-11 | 中国平安人寿保险股份有限公司 | 界面代码调整方法、装置、计算机装置及存储介质 |
| CN109885298A (zh) * | 2019-02-20 | 2019-06-14 | 百度在线网络技术（北京）有限公司 | 一种ui组件生成方法、装置和终端设备 |
| CN110147516A (zh) * | 2019-04-15 | 2019-08-20 | 深圳壹账通智能科技有限公司 | 页面设计中前端代码的智能识别方法及相关设备 |
| CN110275754A (zh) * | 2019-06-28 | 2019-09-24 | 百度在线网络技术（北京）有限公司 | 用于用户界面呈现的交互方法、装置、设备及存储介质 |
| CN110297685A (zh) * | 2019-06-28 | 2019-10-01 | 百度在线网络技术（北京）有限公司 | 用户界面描述文件生成方法、装置、设备及存储介质 |
| CN110321126A (zh) * | 2019-07-08 | 2019-10-11 | 北京三快在线科技有限公司 | 生成页面代码的方法和装置 |
| CN110618811A (zh) * | 2019-03-18 | 2019-12-27 | 北京无限光场科技有限公司 | 信息呈现方法和装置 |
| CN111124398A (zh) * | 2018-10-31 | 2020-05-08 | ***通信集团重庆有限公司 | 用户界面生成方法、装置、设备及存储介质 |
| CN111338733A (zh) * | 2020-02-25 | 2020-06-26 | 珠海格力电器股份有限公司 | 用户界面适配方法和*** |
| CN111414165A (zh) * | 2019-01-06 | 2020-07-14 | 阿里巴巴集团控股有限公司 | 界面代码的生成方法及设备 |
| CN111562915A (zh) * | 2020-06-15 | 2020-08-21 | 厦门大学 | 前端代码生成模型的生成方法和装置 |
| CN111831279A (zh) * | 2019-04-22 | 2020-10-27 | 华为技术有限公司 | 界面代码生成方法及装置 |
| CN112286523A (zh) * | 2020-02-21 | 2021-01-29 | 京东安联财产保险有限公司 | 用户界面图像处理方法、装置、介质及电子设备 |
| CN112527292A (zh) * | 2020-12-07 | 2021-03-19 | 江汉大学 | 一种基于界面自动生成的方法、存储介质及*** |
| CN112634397A (zh) * | 2019-09-24 | 2021-04-09 | 华为技术有限公司 | 数据处理方法、装置、计算机设备和计算机可读存储介质 |
| CN113094044A (zh) * | 2019-12-23 | 2021-07-09 | 福建天泉教育科技有限公司 | 一种编写ppt ui插件代码的方法及终端 |
| CN114089985A (zh) * | 2021-11-17 | 2022-02-25 | 南斗六星***集成有限公司 | 一种用于智能座舱的自动化代码生成图形化方法及*** |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| JP2000259302A (ja) * | 1999-03-09 | 2000-09-22 | Hitachi Business Solution Kk | 画面生成方法 |
| CN1867894A (zh) * | 2003-10-15 | 2006-11-22 | 皇家飞利浦电子股份有限公司 | 通过草拟自动生成用户界面描述 |
| CN104484171A (zh) * | 2014-12-11 | 2015-04-01 | 深圳市路通网络技术有限公司 | 终端界面设计***、方法及相关设备 |
| CN105930159A (zh) * | 2016-04-20 | 2016-09-07 | 中山大学 | 一种基于图像的界面代码生成的方法及*** |
| CN107168705A (zh) * | 2017-05-11 | 2017-09-15 | 电子科技大学 | 图形界面语义描述***及其建立方法和操作路径生成方法 |
-
2018
- 2018-02-26 CN CN201810159763.9A patent/CN108304183A/zh active Pending
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| JP2000259302A (ja) * | 1999-03-09 | 2000-09-22 | Hitachi Business Solution Kk | 画面生成方法 |
| CN1867894A (zh) * | 2003-10-15 | 2006-11-22 | 皇家飞利浦电子股份有限公司 | 通过草拟自动生成用户界面描述 |
| CN104484171A (zh) * | 2014-12-11 | 2015-04-01 | 深圳市路通网络技术有限公司 | 终端界面设计***、方法及相关设备 |
| CN105930159A (zh) * | 2016-04-20 | 2016-09-07 | 中山大学 | 一种基于图像的界面代码生成的方法及*** |
| CN107168705A (zh) * | 2017-05-11 | 2017-09-15 | 电子科技大学 | 图形界面语义描述***及其建立方法和操作路径生成方法 |
Cited By (27)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109117228A (zh) * | 2018-08-01 | 2019-01-01 | 浙江口碑网络技术有限公司 | 图形界面的生成方法及装置 |
| CN109240687A (zh) * | 2018-08-01 | 2019-01-18 | 浙江口碑网络技术有限公司 | 图形界面描述文件的生成方法及装置 |
| CN109189390A (zh) * | 2018-08-20 | 2019-01-11 | 福建天泉教育科技有限公司 | 自动生成布局文件的方法、存储介质 |
| CN109189390B (zh) * | 2018-08-20 | 2021-09-07 | 福建天泉教育科技有限公司 | 自动生成布局文件的方法、存储介质 |
| CN111124398A (zh) * | 2018-10-31 | 2020-05-08 | ***通信集团重庆有限公司 | 用户界面生成方法、装置、设备及存储介质 |
| CN109656552A (zh) * | 2018-11-01 | 2019-04-19 | 中交第二航务工程局有限公司 | 一种基于盒子模型的设计图自动转换成网页的方法 |
| CN109614097A (zh) * | 2018-12-07 | 2019-04-12 | 北京金山云网络技术有限公司 | 平台代码的生成方法、装置及服务器 |
| CN109783094A (zh) * | 2018-12-15 | 2019-05-21 | 深圳壹账通智能科技有限公司 | 前端页面生成方法、装置、计算机设备及存储介质 |
| CN109871205A (zh) * | 2018-12-15 | 2019-06-11 | 中国平安人寿保险股份有限公司 | 界面代码调整方法、装置、计算机装置及存储介质 |
| CN111414165B (zh) * | 2019-01-06 | 2024-04-02 | 阿里巴巴集团控股有限公司 | 界面代码的生成方法及设备 |
| CN111414165A (zh) * | 2019-01-06 | 2020-07-14 | 阿里巴巴集团控股有限公司 | 界面代码的生成方法及设备 |
| CN109885298A (zh) * | 2019-02-20 | 2019-06-14 | 百度在线网络技术（北京）有限公司 | 一种ui组件生成方法、装置和终端设备 |
| CN110618811A (zh) * | 2019-03-18 | 2019-12-27 | 北京无限光场科技有限公司 | 信息呈现方法和装置 |
| CN110618811B (zh) * | 2019-03-18 | 2023-10-13 | 北京有竹居网络技术有限公司 | 信息呈现方法和装置 |
| CN110147516A (zh) * | 2019-04-15 | 2019-08-20 | 深圳壹账通智能科技有限公司 | 页面设计中前端代码的智能识别方法及相关设备 |
| CN111831279A (zh) * | 2019-04-22 | 2020-10-27 | 华为技术有限公司 | 界面代码生成方法及装置 |
| CN110297685A (zh) * | 2019-06-28 | 2019-10-01 | 百度在线网络技术（北京）有限公司 | 用户界面描述文件生成方法、装置、设备及存储介质 |
| CN110275754A (zh) * | 2019-06-28 | 2019-09-24 | 百度在线网络技术（北京）有限公司 | 用于用户界面呈现的交互方法、装置、设备及存储介质 |
| CN110321126A (zh) * | 2019-07-08 | 2019-10-11 | 北京三快在线科技有限公司 | 生成页面代码的方法和装置 |
| CN112634397A (zh) * | 2019-09-24 | 2021-04-09 | 华为技术有限公司 | 数据处理方法、装置、计算机设备和计算机可读存储介质 |
| CN113094044B (zh) * | 2019-12-23 | 2023-09-15 | 福建天泉教育科技有限公司 | 一种编写ppt ui插件代码的方法及终端 |
| CN113094044A (zh) * | 2019-12-23 | 2021-07-09 | 福建天泉教育科技有限公司 | 一种编写ppt ui插件代码的方法及终端 |
| CN112286523A (zh) * | 2020-02-21 | 2021-01-29 | 京东安联财产保险有限公司 | 用户界面图像处理方法、装置、介质及电子设备 |
| CN111338733A (zh) * | 2020-02-25 | 2020-06-26 | 珠海格力电器股份有限公司 | 用户界面适配方法和*** |
| CN111562915A (zh) * | 2020-06-15 | 2020-08-21 | 厦门大学 | 前端代码生成模型的生成方法和装置 |
| CN112527292A (zh) * | 2020-12-07 | 2021-03-19 | 江汉大学 | 一种基于界面自动生成的方法、存储介质及*** |
| CN114089985A (zh) * | 2021-11-17 | 2022-02-25 | 南斗六星***集成有限公司 | 一种用于智能座舱的自动化代码生成图形化方法及*** |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN108304183A (zh) | 一种用户界面生成方法、装置及电子设备 | |
| EP3011444B1 (en) | Method and apparatus for code virtualization and remote process call generation | |
| KR101314949B1 (ko) | 통합 환경 생성기 | |
| US6393425B1 (en) | Diagramming real-world models based on the integration of a database, such as models of a computer network | |
| CN105739983B (zh) | 脚本程序编辑装置及其实现方法 | |
| US20170192877A1 (en) | Mobile application development and deployment | |
| CN109582909A (zh) | 网页自动生成方法、装置、电子设备和存储介质 | |
| CN109408042A (zh) | 机器人可视化脚本配置方法、装置及计算机存储介质 | |
| CN109086114A (zh) | 一种生成web前端交互界面的方法、装置及终端 | |
| CN108376073A (zh) | 一种测试软件包生成方法及终端 | |
| CN103812948A (zh) | 智能手机操作***云端交互定制***与方法 | |
| CN106033336B (zh) | 解决Maven依赖冲突的方法、装置和*** | |
| CN110580174B (zh) | 应用组件生成方法、服务器及终端 | |
| CN112214210A (zh) | 后勤业务规则引擎及其配置方法、装置、设备和存储介质 | |
| CN110297671A (zh) | 客户端插件化实现方法、装置、计算机设备及存储介质 | |
| US11656601B2 (en) | Method and electronic generation device for generating at least one configuration file for an automation tool, related computer program | |
| CN111782184A (zh) | 执行定制化人工智能生产线的装置和方法、设备和介质 | |
| CN110097464B (zh) | 智能合约的生成方法、装置、电子设备与存储介质 | |
| CN104081347A (zh) | 运算次序的图形表示 | |
| CN116304442A (zh) | 页面代码生成方法、装置、电子设备以及存储介质 | |
| CN109800368A (zh) | H5导航栏按钮配置方法、装置、计算机设备及存储介质 | |
| CN110110299A (zh) | 文本变换方法、装置以及服务器 | |
| CN113254830A (zh) | 网页配置方法、装置、电子设备与存储介质 | |
| CN103890721B (zh) | 计算机程序接口 | |
| CN107451167A (zh) | 站内点击位的点击数据获取方法和*** |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| RJ01 | Rejection of invention patent application after publication | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20180720 |