CN113778403A - 前端代码生成方法和装置 - Google Patents
前端代码生成方法和装置 Download PDFInfo
- Publication number
- CN113778403A CN113778403A CN202110056755.3A CN202110056755A CN113778403A CN 113778403 A CN113778403 A CN 113778403A CN 202110056755 A CN202110056755 A CN 202110056755A CN 113778403 A CN113778403 A CN 113778403A
- Authority
- CN
- China
- Prior art keywords
- view
- dom tree
- view element
- sub
- elements
- 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 54
- 238000009795 derivation Methods 0.000 claims description 19
- 230000015654 memory Effects 0.000 claims description 17
- 239000000126 substance Substances 0.000 claims 1
- 238000011161 development Methods 0.000 abstract description 7
- 238000010586 diagram Methods 0.000 description 11
- 239000011159 matrix material Substances 0.000 description 11
- 238000004891 communication Methods 0.000 description 8
- 229910052739 hydrogen Inorganic materials 0.000 description 7
- 238000004590 computer program Methods 0.000 description 5
- 230000008569 process Effects 0.000 description 4
- 238000013461 design Methods 0.000 description 3
- 230000000694 effects Effects 0.000 description 3
- 238000005516 engineering process Methods 0.000 description 3
- 230000006870 function Effects 0.000 description 3
- 230000004048 modification Effects 0.000 description 3
- 238000012986 modification Methods 0.000 description 3
- 230000003993 interaction Effects 0.000 description 2
- 239000004973 liquid crystal related substance Substances 0.000 description 2
- 238000012545 processing Methods 0.000 description 2
- 230000000007 visual effect Effects 0.000 description 2
- 206010063385 Intellectualisation Diseases 0.000 description 1
- 108010001267 Protein Subunits Proteins 0.000 description 1
- 230000003044 adaptive effect Effects 0.000 description 1
- 230000001413 cellular effect Effects 0.000 description 1
- 238000010276 construction Methods 0.000 description 1
- 239000000835 fiber Substances 0.000 description 1
- 230000006872 improvement Effects 0.000 description 1
- 238000010295 mobile communication Methods 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 230000009467 reduction Effects 0.000 description 1
- 230000004044 response Effects 0.000 description 1
- 230000001953 sensory effect Effects 0.000 description 1
- 239000007787 solid Substances 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
Images
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/34—Graphical or visual programming
-
- 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/70—Software maintenance or management
- G06F8/73—Program documentation
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Library & Information Science (AREA)
- User Interface Of Digital Computer (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
Abstract
本申请公开了前端代码生成方法和装置，涉及计算机软件技术领域。该方法的一具体实施方式包括：获取目标UI视图界面中各视图元素的属性信息；基于各视图元素的属性信息，确定出对应于同一父视图元素的子视图元素；交替依据子视图元素之间的行相关性信息和列相关性信息，确定父视图元素对应的DOM树除根节点之外的不同层级的节点，直至叶节点为单独的子视图元素，得到DOM树；基于所述DOM树生成目标UI视图界面对应的完整的前端代码。该实施方式使得生成的前端代码更加符合开发习惯，可读性更高。
Description
技术领域
本申请涉及计算机技术领域，具体涉及计算机软件技术领域，尤其涉及一种前端代码生成方法和装置。
背景技术
随着互联网技术的发展，前端智能化成为必然趋势。构建将UI(User Interface，用户界面)稿自动转化为代码的平台，不仅能提高前端开发的效率，而且能够解放前端生产力，降低人工成本。但如何智能、高效、保质保真地将UI图稿一键生成可维护的UI视图代码，其中，精确还原页面布局尤为重要。
现有的布局推导算法局限不仅推导过程逻辑复杂，推导效率差，代码可读性差，而且在样式推导过程使用外边距maigin实现相对定位，对于布局样式没有较好的推导方式。在实际的应用场景中，页面中元素的布局结构复杂，层层嵌套，导致现有的页面布局推导方法生层的页面还原度低。并且不够规范的视觉设计稿，直接影响页面布局推导的结果，所以需要提前制定UI设计规则，或强制性增加布局等，但这些限制性条件导致布局推导方法通用性能差，不能自适应复杂的应用场景。
发明内容
本申请实施例提供了一种前端代码生成方法、装置、设备以及存储介质。
根据第一方面，本申请实施例提供了一种前端代码生成方法，该方法包括：获取目标UI视图界面中各视图元素的属性信息；基于各视图元素的属性信息，确定出对应于同一父视图元素的子视图元素；交替依据子视图元素之间的行相关性信息和列相关性信息，确定父视图元素对应的DOM树除根节点之外的不同层级的节点，直至叶节点为单独的子视图元素，得到DOM树；基于所述DOM树生成目标UI视图界面对应的完整的前端代码。
根据第二方面，本申请实施例提供了一种前端代码生成装置，该装置包括：获取模块，被配置成获取目标UI视图界面中各视图元素的属性信息；确定模块，被配置成基于各视图元素的属性信息，确定出对应于同一父视图元素的子视图元素；构建模块，被配置成交替依据所述子视图元素之间的行相关性信息和列相关性信息，确定父视图元素对应的DOM树除根节点之外的不同层级的节点，直至叶节点为单独的子视图元素，得到DOM树；生成模块，被配置成基于DOM树生成所述目标UI视图界面对应的完整的前端代码。
根据第三方面，本申请实施例提供了一种电子设备，该电子设备包括一个或多个处理器；存储装置，其上存储有一个或多个程序，当一个或多个程序被该一个或多个处理器执行，使得一个或多个处理器实现如第一方面的任一实施例的前端代码生成方法。
根据第四方面，本申请实施例提供了一种计算机可读介质，其上存储有计算机程序，该程序被处理器执行时实现如第一方面的任一实施例的前端代码生成方法。
本申请通过获取目标UI视图界面中各视图元素的属性信息；基于各视图元素的属性信息，确定出对应于同一父视图元素的子视图元素；交替依据子视图元素之间的行相关性信息和列相关性信息，确定父视图元素对应的DOM树除根节点之外的不同层级的节点，直至叶节点为单独的子视图元素，得到DOM树；基于所述DOM树生成目标UI视图界面对应的完整的前端代码，也即根据视图元素的属性信息，分析节点关系，生成具有行列结构DOM树，最终根据DOM树生成前端代码，使得生成的前端代码更符合前端代码开发的规范，可读性更高。
应当理解，本部分所描述的内容并非旨在标识本公开的实施例的关键或重要特征，也不用于限制本公开的范围。本公开的其他特征将通过以下的说明书而变得容易理解。
附图说明
图1是本申请可以应用于其中的示例性系统架构图；
图2是根据本申请的前端代码生成方法的一个实施例的流程图；
图3是根据本申请的前端代码生成方法的另一个实施例的流程图；
图4是根据本申请的前端代码生成方法的一个应用场景的示意图；
图5是根据本申请的前端代码生成方法的又一个实施例的流程图；
图6是根据本申请的前端代码生成装置的一个实施例的示意图；
图7是适于用来实现本申请实施例的服务器的计算机系统的结构示意图。
具体实施方式
以下结合附图对本申请的示范性实施例做出说明，其中包括本申请实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本申请的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。
需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互组合。下面将参考附图并结合实施例来详细说明本申请。
图1示出了可以应用本申请的前端代码生成方法的实施例的示例性系统架构100。
如图1所示，系统架构100可以包括终端设备101、102、103，网络104和服务器105。网络104用以在终端设备101、102、103和服务器105之间提供通信链路的介质。网络104可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。
终端设备101、102、103通过网络104与服务器105交互，以接收或发送消息等。终端设备101、102、103上可以安装有各种通讯客户端应用，例如，购物类应用、通讯类应用等。
终端设备101、102、103可以是硬件，也可以是软件。当终端设备101、102、103为硬件时，可以是具有显示屏的各种电子设备，包括但不限于手机和笔记本电脑。当终端设备101、102、103为软件时，可以安装在上述所列举的电子设备中。其可以实现成多个软件或软件模块(例如用来提供前端代码生成服务)，也可以实现成单个软件或软件模块。在此不做具体限定。
服务器105可以是提供各种服务的服务器，例如，获取目标UI视图界面中各视图元素的属性信息；基于各视图元素的属性信息，确定出对应于同一父视图元素的子视图元素，子视图元素之间不存在局部叠加关系；交替依据子视图元素之间的行相关性信息和列相关性信息，确定父视图元素对应的DOM树除根节点之外的不同层级的节点，直至叶节点为单独的子视图元素，得到DOM树；基于DOM树生成目标UI视图界面对应的完整的前端代码。
需要说明的是，服务器105可以是硬件，也可以是软件。当服务器105为硬件时，可以实现成多个服务器组成的分布式服务器集群，也可以实现成单个服务器。当服务器为软件时，可以实现成多个软件或软件模块(例如用来提供前端代码生成服务)，也可以实现成单个软件或软件模块。在此不做具体限定。
需要指出的是，本公开的实施例所提供的前端代码生成方法可以由服务器105执行，也可以由终端设备101、102、103执行，还可以由服务器105和终端设备101、102、103彼此配合执行。相应地，前端代码生成装置包括的各个部分(例如各个单元、子单元、模块、子模块)可以全部设置于服务器105中，也可以全部设置于终端设备101、102、103中，还可以分别设置于服务器105和终端设备101、102、103中。
应该理解，图1中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。
图2示出了可以应用于本申请的前端代码生成方法的实施例的流程示意图200。在本实施例中，前端代码生成方法包括以下步骤：
步骤201，获取目标UI视图界面中各视图元素的属性信息。
在本实施例中，执行主体(如图1中所示的服务器105或终端设备101、102、103)可以直接获取待生成前端代码的UI视图界面，即目标UI视图界面中各视图元素的属性信息，也可以先将UI视图界面转换为JSON数据，再由JSON数据获取各视图元素的属性信息，本申请对此不作限定。
其中，视图元素的属性信息可以包括以下至少一项：视图元素的标识、绝对定位信息(x，y)、宽度width和高度height。
具体地，执行主体可以首先将目标UI视图界面转换为JSON数据，UI视图界面中每一视图元素对应的JSON数据可以包含有该视图元素的标识、绝对定位信息(x，y)、宽度width和高度height等属性信息。
这里，绝对定位信息通常用于指示视图元素相对于目标UI视图界面左上角的定位信息。
步骤202，基于各视图元素的属性信息，确定出对应于同一父视图元素的子视图元素。
在本实施例中，执行主体可以直接将各视图元素中的两两视图元素的绝对定位信息、高度、宽度进行比对，确定出对应于同一父视图元素的子视图元素；也可以按照各视图元素的面积由大到小的顺序，对各视图元素中两两视图元素的绝对定位信息、高度、宽度进行比对，确定出对应于同一父视图元素的子视图元素，本申请对此不作限定。
需要指出的是，确定出的对应于同一父视图元素的子视图元素之间不存在局部叠加关系。
这里，子视图元素之间的叠加关系可根据子视图元素之间叠加的像素点数量是否大于等于预设的像素点数量阈值确定。其中，像素点数量阈值可根据经验、实际需求和具体的应用场景确定，本申请对此不作限定。
具体地，子视图元素A和子视图元素B的像素点数量均为1000，而叠加的像素点数量为1，像素点数量阈值为50，叠加的像素点数量小于像素点数量阈值，则子视图元素A和子视图元素B之间不存在局部叠加关系。
此外，对于存在全部叠加关系的子视图元素，即两个子视图元素的绝对定位信息、宽度、高度均相同，则将两个子视图元素合并为一个子视图元素。
步骤203，交替依据子视图元素之间的行相关性信息和列相关性信息，确定父视图元素对应的DOM树除根节点之外的不同层级的节点，直至叶节点为单独的子视图元素，得到DOM树。
在本实施例中，执行主体在获取到对应同一父视图元素的子视图元素后，可以首先依据各子视图之间的行相关性信息确定父视图元素对应的DOM树除根节点(第一层级)之外的第二层级的节点，然后再依据各子视图之间的列相关性信息确定DOM树除父节点之外的第三层级的节点，依此类推，直至叶节点为单独的子视图元素，得到DOM树；也可以首先依据各子视图之间的列相关性信息确定父视图元素对应的DOM树除根节点之外的第二层级的节点，然后再依据各子视图之间的行相关性信息确定DOM树除根节点之外的第三层级的节点，依此类推，直至叶节点为单独的子视图元素，得到DOM树，本申请对此不作限定。
其中，子视图元素之间的行相关性信息用于指示对应于同一父视图的各子视图元素在行方向上的相对位置关系。子视图元素之间的列相关性信息用于指示对应于同一父视图的各子视图元素在列方向上的相对位置关系。
这里，执行主体在根据子视图元素之间的行相关性信息确定当前层级的节点时，上一层级父节点对应的子视图元素中处于同一行的子视图元素归类为该层级的一个节点，执行主体在根据视图元素之间的列相关性信息确定当前层级的节点时，可将上一层级父节点对应的子视图元素中处于同一列的子视图元素归类为该层级的一个节点，直至叶节点为单独的子视图元素。
具体地，如图3所示，执行主体获取到目标UI视图界面中对应于同一父视图元素301的子视图元素A、B、C、D、E、F、G、H，其中，各子视图元素之间的行相关性信息302为{H:G，A:C，D:C，B:C，E:C}(H:G表示子视图元素H位于子视图元素G所在行，A:C，D:C，B:C，E:C表示子视图元素A、B、D、E均位于子视图元素C所在行)；各子视图元素之间的列相关性信息303为{G:F，H:F，C:F，B:G，A:B，E:H，D:E}(G:F，H:F，C:F表示子视图元素G、H、C位于子视图元素F所在列，B:G表示子视图元素B位于子视图元素G所在列，A:B表示子视图元素A位于子视图元素B所在列，E:H表示子视图元素E位于子视图元素H所在列，D:E表示子视图元素D位于子视图元素E所在列)。
进一步地，执行主体将父视图元素301确定为DOM树304的第一层级的根节点，并根据子视图元素之间的行相关性信息302{H:G，A:C，D:C，B:C，E:C}，确定DOM树304第二层级的节点，即节点ABCDE、节点F和节点GH，其中，节点ABCDE由处于同一行的子视图元素A、B、C、D、E归类得到，节点F由单独位于一行的子视图元素F归类得到，节点GH由处于同一行的子视图元素G、H归类得到。执行主体继续根据子视图元素之间的列相关性信息303{G:F，H:F，C:F，B:G，A:B，E:H，D:E}确定DOM树304第三层级的节点。这里，第二层级的非叶节点为第三层级节点的父节点。执行主体依据子视图元素之间的列相关性信息303和上一层级的父节点确定第三层级的节点AB、节点C、节点DE、节点G和节点H。其中，节点AB、节点C、节点DE为节点ABCDE的子节点，节点AB由位于同一列的子视图元素A、B归类得到，节点DE由位于同一列的子视图元素D、E归类得到，节点G和节点H为节点GH的子节点，节点G由单独位于一列的子视图元素G归类得到，节点H由单独位于一列的子视图元素H归类得到。
进一步地，执行主体根据第三层级的非叶节点和子视图元素之间的行相关性信息302确定DOM树304第四层级的节点A、节点B、节点C和节点D。至此，DOM树304的叶节点均为单独的子视图元素。
需要指出的是，行相关性信息可以直接依据对各子视图元素的绝对定位信息的纵坐标、高度进行比对得到；也可以按照各子视图元素的高度由大到小的顺序，对各子视图元素的绝对定位信息的纵坐标、高度进行比对得到，本申请对此不作限定。
列相关性信息可以直接依据对各子视图元素的绝对定位信息的横坐标、宽度进行比对得到；也可以按照各子视图元素的宽度由大到小的顺序，对各子视图元素的绝对定位信息的横坐标、宽度进行比对得到，本申请对此不作限定。
在一些可选的方式中，行相关性信息通过以下方式得到：按照各子视图元素的高度由大到小的顺序，对各子视图元素的绝对定位信息中的纵坐标、高度进行比对，得到各子视图元素之间的行相关性信息。
在本实现方式中，属性信息包括：视图元素的绝对定位信息中的纵坐标和高度，执行主体可以按照各视图元素的高度由大到小的顺序，分别比较两两子视图元素的绝对定位信息中的纵坐标和高度，得到各子视图元素之间的行相关性信息。
具体地，执行主体可以构建一个与目标UI视图界面的高度相同的一维列矩阵H*1，并对各子视图元素按照高度height由大到小进行排序，并按照排序结果将各子视图元素依据绝对定位信息中的纵坐标、高度依次填充进一维矩阵中，并记录矩阵中各子视图元素的高度上的相对位置信息。例如，子视图元素M的属性信息为{id:M y:5h:30}，子视图元素N的属性信息为{id:N y:10h:20}，将子视图元素M、N按照高度进行排序为子视图元素M>子视图元素N，按照上述排序依次对各子视图元素的绝对定位信息中的纵坐标和高度进行比对，得到N:{M:20}，即子视图元素N占据子视图元素M高度上的20个像素点，也即子视图元素M和子视图元素N位于同一行。
该实现方式通过按照各子视图元素的高度由大到小的顺序，对各子视图元素的绝对定位信息中的纵坐标、高度进行比对，得到各子视图元素之间的行相关性信息，避免了循环遍历比较每个子视图元素之间的高度上的相对位置关系，减少了代码递归循环次数，降低了算法的时间复杂度。
在一些可选的方式中，列相关性信息通过以下方式得到：按照各子视图元素的宽度由大到小的顺序，对各子视图元素的绝对定位信息中的横坐标、宽度进行比对，得到各子视图元素之间的列相关性信息。
在本实现方式中，属性信息包括：视图元素的绝对定位信息中的横坐标和宽度，执行主体可以按照各视图元素的宽度由大到小的顺序，分别比较两两子视图元素的绝对定位信息中的横坐标和宽度，得到各子视图元素之间的列相关性信息。
具体地，执行主体可以构建一个与目标UI视图界面的宽度相同的一维行矩阵1*W，并对各子视图元素按照宽度Width由大到小进行排序，并按照排序结果将各子视图元素依据绝对定位信息中的横坐标、宽度依次填充进一维行矩阵中，并记录矩阵中各子视图元素的宽度的相对位置信息。例如，子视图元素P的属性信息为{id:M x:5w:20}，子视图元素Q的属性信息为{id:Q x:5w:10}，将子视图元素P、Q按照宽度进行排序为子视图元素P>子视图元素Q，按照上述排序依次对各子视图元素的绝对定位信息中的横坐标和宽度进行比对，得到Q:{P:10}，即子视图元素Q占据子视图元素P宽度上的10个像素点，也即子视图元素M和子视图元素N位于同一列。
该实现方式通过按照各视图元素的宽度由大到小的顺序，对各视图元素的绝对定位信息中的横坐标和宽度进行比对，得到各子视图元素之间的列相关性信息，避免了循环遍历比较每个子视图元素之间的宽度上的相对位置关系，减少了代码递归循环次数，降低了算法的时间复杂度。
步骤203，基于DOM树生成目标UI视图界面对应的完整的前端代码。
在本实施例中，执行主体在获得DOM树后，可以直接基于DOM树进行样式推导，以生成目标UI视图界面对应的完整的前端代码；也可以基于DOM树进一步确定出与DOM树的叶节点存在局部叠加关系的子视图元素，并根据DOM树和与DOM树的叶节点存在局部叠加关系的子视图元素进行样式推导，生成目标UI视图界面对应的完整前端代码，本申请对此不作限定。
这里，执行主体可以采用现有技术或未来发展技术中的视图布局方法进行样式推导，例如，CSS(Cascading Style Sheets，层叠样式表)中的Flex布局、外边距margin布局等，本申请对此不作限定。
其中，Flex即FlexiableBox弹性盒，主要用来进行弹性布局。
在一些可选的方式中，基于DOM树生成目标UI视图界面对应的完整的前端代码，包括：采用Flex布局对DOM树进行样式推导，得到推导后DOM树；基于推导后DOM树生成目标UI视图界面对应的完整的前端代码。
在本实现方式中，执行主体可以采用Flex布局对DOM树进行样式推导，在主轴的对齐方式可以分为三种：start、center、end。在得到推导后DOM树后，进一步基于推导后DOM树生成目标UI视图界面对应的完整的前端代码。
具体地，采用Flex布局，以行结构为例，计算父视图元素和子视图元素的行中心线m＝(2y+h)/2(y用于指示视图元素的上边距，h用于指示视图元素的高度)，若子视图元素的m值小于父视图元素的m值，则采用start对齐方式，若子视图元素的m值大于父视图元素的m值则采用end对齐方式，若子视图元素的m值约等于父视图元素的m值则采用center对齐方式。
该实现方式通过对具有行列结构的DOM树，采用Flex布局进行样式推导，即采用行布局div(flex-directive：row)和列布局div(flex-dierctive：column)实现样式控制，相较于外边距margin样式，不仅可以简便、完整地实现复杂页面样式，而且可以响应式的适应不同大小的屏幕。
在一些可选的方式中，基于所述DOM树生成目标UI视图界面对应的完整的前端代码，包括：基于DOM树和与DOM树的叶节点存在局部叠加关系的子视图元素进行样式推导，生成目标UI视图界面对应的完整前端代码。
在本实现方式中，执行主体在获取到具有行列结构的DOM树之后，可进一步确定出与DOM树的叶节点存在局部叠加关系的子视图元素的相对定位信息，并根据DOM树和与DOM树的叶节点存在局部叠加关系的子视图元素的相对定位信息进行样式推导，生成目标UI视图界面对应的完整前端代码。
该实现方式通过基于DOM树和与DOM树的叶节点存在局部叠加关系的子视图元素进行样式推导，生成目标UI视图界面对应的完整前端代码，充分考虑了与子视图元素存在叠加关系的子视图元素，保障了生成的前端代码的完整性。
继续参见图4，图4是根据本实施例的前端代码生成方法的应用场景的一个示意图。
在图4的应用场景中，执行主体401获取目标UI视图界面中各视图元素的属性信息；基于各视图元素的属性信息，确定出对应于同一父视图元素402的子视图元素U、子视图元素V和子视图元素W。进一步地，执行主体依据各子视图元素之间的列相关性信息，将处于同一列的子视图元素U和子视图元素V归类为父视图元素对应的DOM树除根节点(第一层级)之外的第二层级的节点UV，将单独处于一列的子视图元素W归类为第二层级的节点W。执行主体继续根据子视图元素之间的行相关性信息，将处于不同行的子视图元素U和子视图元素V分别归类为第三层级的节点U和节点V，这里，节点UV为节点U和节点V的父节点。此时，叶节点为单独的子视图元素，得到DOM树403。执行主体基于DOM树403生成目标UI视图界面对应的完整前端代码404。
本公开的前端代码生成方法，通过获取目标UI视图界面中各视图元素的属性信息；基于各视图元素的属性信息，确定出对应于同一父视图元素的子视图元素；交替依据子视图元素之间的行相关性信息和列相关性信息，确定父视图元素对应的DOM树除根节点之外的不同层级的节点，直至叶节点为单独的子视图元素，得到DOM树；基于所述DOM树生成目标UI视图界面对应的完整的前端代码，使得生成的前端代码更加符合开发习惯，可读性更高。
进一步参考图5，其示出了图2所示的前端代码生成方法的又一个实施例的流程500。在本实施例中，属性信息包括：视图元素的绝对定位信息、高度和宽度。本实施例的前端代码生成方法的流程500，可包括以下步骤：
步骤501，获取目标UI视图界面中各视图元素的属性信息。
在本实施例中，步骤501的实现细节和技术效果，可以参考对步骤201的描述，在此不再赘述。
步骤502，按照各视图元素的面积由大到小的顺序，对各视图元素的绝对定位信息、长度和宽度进行比对，确定出对应于同一父视图元素的子视图元素。
在本实施例中，执行主体可以按照各视图元素的面积由大到小的顺序，分别比较两两视图元素的绝对定位信息、长度和宽度，确定出对应于同一父视图元素的子视图元素。
具体地，执行主体可以构建一个与目标UI视图界面大小一致的矩阵，例如，目标UI视图界面为1280*980，则构建一个1280*980的矩阵，并根据目标UI视图界面中视图元素的面积width*height，由大到小排序，按照排序结果将各子视图元素依据绝对定位信息、宽度和高度依次填充进矩阵中，并记录矩阵中各子视图元素的相对位置信息。例如，视图元素A的属性信息为{id:A x:0y:0w:100h:20}，视图元素B的属性信息为{id:B x:10y:5w:80h:10}，视图元素C的属性信息为{id:C x:10y:17w:5h:3}，将视图元素A、B、C按照面积进行排序为视图元素A>视图元素B>视图元素C，按照各视图元素的面积的大小分别进行两两比对，得到B:{A:800}，即视图元素B为视图元素A的子视图且占据了视图元素A的800个像素点，以及C:{A:15}即视图元素C为视图元素A的子视图且占据了视图元素A的15个像素点，进一步地，可确定视图元素B和视图元素C均为父视图元素A的子视图，且视图元素B和视图元素C之间不存在局部叠加关系。
步骤503，提取用户关系图的节点的结构特征和内容特征。
在本实施例中，步骤503的实现细节和技术效果，可以参考对步骤203的描述，在此不再赘述。
步骤504，将所述结构特征和内容特征输入预设的用户家庭关系预测模型，获得所述用户对是否为家庭关系的分类结果。
在本实施例中，步骤504的实现细节和技术效果，可以参考对步骤204的描述，在此不再赘述。
从图5中可以看出，与图2对应的实施例相比，本实施例中的前端代码生成方法的流程500体现了按照各视图元素的面积由大到小的顺序，对各视图元素的绝对定位信息、长度和宽度进行比对，确定出对应于同一父视图元素的子视图元素，以及基于对应于同一父视图元素的子视图元素以生成DOM树并进一步生成前端代码，避免了循环遍历比较每个视图元素之间的相对位置关系，减少了代码递归循环次数，降低了算法的时间复杂度，进而提升了生成前端代码的效率。
进一步参考图6，作为对上述各图所示方法的实现，本申请提供了一种前端代码生成装置的一个实施例，该装置实施例与图1所示的方法实施例相对应，该装置具体可以应用于各种电子设备中。
如图6所示，本实施例的前端代码生成装置600包括：获取模块601、确定模块602、构建模块603和生成模块604。
其中，获取模块601，可被配置成获取获取目标UI视图界面中各视图元素的属性信息。
确定模块602，可被配置成基于所述各视图元素的属性信息，确定出对应于同一父视图元素的子视图元素。
构建模块603，可被配置成交替依据所述子视图元素之间的行相关性信息和列相关性信息，确定父视图元素对应的DOM树除根节点之外的不同层级的节点，直至叶节点为单独的子视图元素，得到DOM树。
生成模块604，可被配置成基于DOM树生成所述目标UI视图界面对应的完整的前端代码。
在本实施例的一些可选的方式中，确定模块进一步被配置成：按照各视图元素的面积由大到小的顺序，对各视图元素的绝对定位信息、长度和宽度进行比对，确定出对应于同一父视图元素的子视图元素点。
在本实施例的一些可选的方式中，行相关性信息通过以下方式得到：按照各子视图元素的高度由大到小的顺序，对各子视图元素的绝对定位信息中的纵坐标、高度进行比对，得到各子视图元素之间的行相关性信息。
在本实施例的一些可选的方式中，列相关性信息通过以下方式得到：按照各子视图元素的宽度由大到小的顺序，对各子视图元素的绝对定位信息中的横坐标、宽度进行比对，得到各子视图元素之间的列相关性信息。
在本实施例的一些可选的方式中，生成模块进一步被配置成：采用Flex布局对DOM树进行样式推导，得到推导后DOM树；基于推导后DOM树生成目标UI视图界面对应的完整的前端代码。
在本实施例的一些可选的方式中，基于DOM树和与DOM树的叶节点存在局部叠加关系的子视图元素进行样式推导，生成目标UI视图界面对应的完整前端代码。
根据本申请的实施例，本申请还提供了一种电子设备和一种可读存储介质。
如图7所示，是根据本申请实施例的前端代码生成方法的电子设备的框图。
700是根据本申请实施例的前端代码生成方法的电子设备的框图。电子设备旨在表示各种形式的数字计算机，诸如，膝上型计算机、台式计算机、工作台、个人数字助理、服务器、刀片式服务器、大型计算机、和其它适合的计算机。电子设备还可以表示各种形式的移动装置，诸如，个人数字处理、蜂窝电话、智能电话、可穿戴设备和其它类似的计算装置。本文所示的部件、它们的连接和关系、以及它们的功能仅仅作为示例，并且不意在限制本文中描述的和/或者要求的本申请的实现。
如图7所示，该电子设备包括：一个或多个处理器701、存储器702，以及用于连接各部件的接口，包括高速接口和低速接口。各个部件利用不同的总线互相连接，并且可以被安装在公共主板上或者根据需要以其它方式安装。处理器可以对在电子设备内执行的指令进行处理，包括存储在存储器中或者存储器上以在外部输入/输出装置(诸如，耦合至接口的显示设备)上显示GUI的图形信息的指令。在其它实施方式中，若需要，可以将多个处理器和/或多条总线与多个存储器和多个存储器一起使用。同样，可以连接多个电子设备，各个设备提供部分必要的操作(例如，作为服务器阵列、一组刀片式服务器、或者多处理器系统)。图7中以一个处理器701为例。
存储器702即为本申请所提供的非瞬时计算机可读存储介质。其中，所述存储器存储有可由至少一个处理器执行的指令，以使所述至少一个处理器执行本申请所提供的前端代码生成方法。本申请的非瞬时计算机可读存储介质存储计算机指令，该计算机指令用于使计算机执行本申请所提供的前端代码生成方法。
存储器702作为一种非瞬时计算机可读存储介质，可用于存储非瞬时软件程序、非瞬时计算机可执行程序以及模块，如本申请实施例中的前端代码生成方法对应的程序指令/模块(例如，附图6所示的获取模块601、确定模块602、构建模块603和生成模块604)。处理器701通过运行存储在存储器702中的非瞬时软件程序、指令以及模块，从而执行服务器的各种功能应用以及数据处理，即实现上述方法实施例中的前端代码生成方法。
存储器702可以包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需要的应用程序；存储数据区可存储前端代码生成的电子设备的使用所创建的数据等。此外，存储器702可以包括高速随机存取存储器，还可以包括非瞬时存储器，例如至少一个磁盘存储器件、闪存器件、或其他非瞬时固态存储器件。在一些实施例中，存储器702可选包括相对于处理器701远程设置的存储器，这些远程存储器可以通过网络连接至前端代码生成的电子设备。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。
前端代码生成方法的电子设备还可以包括：输入装置703和输出装置704。处理器701、存储器702、输入装置703和输出装置704可以通过总线或者其他方式连接，图7中以通过总线连接为例。
输入装置703可接收输入的数字或字符信息，例如触摸屏、小键盘、鼠标、轨迹板、触摸板、指示杆、一个或者多个鼠标按钮、轨迹球、操纵杆等输入装置。输出装置704可以包括显示设备、辅助照明装置(例如，LED)和触觉反馈装置(例如，振动电机)等。该显示设备可以包括但不限于，液晶显示器(LCD)、发光二极管(LED)显示器和等离子体显示器。在一些实施方式中，显示设备可以是触摸屏。
此处描述的系统和技术的各种实施方式可以在数字电子电路系统、集成电路系统、专用ASIC(专用集成电路)、计算机硬件、固件、软件、和/或它们的组合中实现。这些各种实施方式可以包括：实施在一个或者多个计算机程序中，该一个或者多个计算机程序可在包括至少一个可编程处理器的可编程系统上执行和/或解释，该可编程处理器可以是专用或者通用可编程处理器，可以从存储系统、至少一个输入装置、和至少一个输出装置接收数据和指令，并且将数据和指令传输至该存储系统、该至少一个输入装置、和该至少一个输出装置。
这些计算程序(也称作程序、软件、软件应用、或者代码)包括可编程处理器的机器指令，并且可以利用高级过程和/或面向对象的编程语言、和/或汇编/机器语言来实施这些计算程序。如本文使用的，术语“机器可读介质”和“计算机可读介质”指的是用于将机器指令和/或数据提供给可编程处理器的任何计算机程序产品、设备、和/或装置(例如，磁盘、光盘、存储器、可编程逻辑装置(PLD))，包括，接收作为机器可读信号的机器指令的机器可读介质。术语“机器可读信号”指的是用于将机器指令和/或数据提供给可编程处理器的任何信号。
为了提供与用户的交互，可以在计算机上实施此处描述的系统和技术，该计算机具有：用于向用户显示信息的显示装置(例如，CRT(阴极射线管)或者LCD(液晶显示器)监视器)；以及键盘和指向装置(例如，鼠标或者轨迹球)，用户可以通过该键盘和该指向装置来将输入提供给计算机。其它种类的装置还可以用于提供与用户的交互；例如，提供给用户的反馈可以是任何形式的传感反馈(例如，视觉反馈、听觉反馈、或者触觉反馈)；并且可以用任何形式(包括声输入、语音输入或者、触觉输入)来接收来自用户的输入。
可以将此处描述的系统和技术实施在包括后台部件的计算系统(例如，作为数据服务器)、或者包括中间件部件的计算系统(例如，应用服务器)、或者包括前端部件的计算系统(例如，具有图形用户界面或者网络浏览器的用户计算机，用户可以通过该图形用户界面或者该网络浏览器来与此处描述的系统和技术的实施方式交互)、或者包括这种后台部件、中间件部件、或者前端部件的任何组合的计算系统中。可以通过任何形式或者介质的数字数据通信(例如，通信网络)来将系统的部件相互连接。通信网络的示例包括：局域网(LAN)、广域网(WAN)和互联网。
计算机系统可以包括客户端和服务器。客户端和服务器一般远离彼此并且通常通过通信网络进行交互。通过在相应的计算机上运行并且彼此具有客户端-服务器关系的计算机程序来产生客户端和服务器的关系。
根据本申请实施例的技术方案，使得生成的前端代码更加符合开发习惯，可读性更高。
应该理解，可以使用上面所示的各种形式的流程，重新排序、增加或删除步骤。例如，本发申请中记载的各步骤可以并行地执行也可以顺序地执行也可以不同的次序执行，只要能够实现本申请公开的技术方案所期望的结果，本文在此不进行限制。
上述具体实施方式，并不构成对本申请保护范围的限制。本领域技术人员应该明白的是，根据设计要求和其他因素，可以进行各种修改、组合、子组合和替代。任何在本申请的精神和原则之内所作的修改、等同替换和改进等，均应包含在本申请保护范围之内。
Claims (14)
1.一种前端代码生成方法，所述方法包括：
获取目标UI视图界面中各视图元素的属性信息；
基于所述各视图元素的属性信息，确定出对应于同一父视图元素的子视图元素，所述子视图元素之间不存在局部叠加关系；
交替依据所述子视图元素之间的行相关性信息和列相关性信息，确定所述父视图元素对应的DOM树除根节点之外的不同层级的节点，直至叶节点为单独的子视图元素，得到DOM树；
基于所述DOM树生成所述目标UI视图界面对应的完整的前端代码。
2.根据权利要求1所述的方法，其中，所述属性信息包括：视图元素的绝对定位信息、高度和宽度，以及所述基于所述各视图元素的属性信息，确定出对应于同一父视图元素的子视图元素，包括：
按照各视图元素的面积由大到小的顺序，对各视图元素的绝对定位信息、长度和宽度进行比对，确定出对应于同一父视图元素的子视图元素。
3.根据权利要求1所述的方法，其中，所述属性信息包括：视图元素的绝对定位信息中的纵坐标和高度，以及所述行相关性信息通过以下方式得到：
按照各子视图元素的高度由大到小的顺序，对各子视图元素的绝对定位信息中的纵坐标、高度进行比对，得到各子视图元素之间的行相关性信息。
4.根据权利要求1所述的方法，其中，所述属性信息包括：视图元素的绝对定位信息中的横坐标和宽度，所述列相关性信息通过以下方式得到：
按照各子视图元素的宽度由大到小的顺序，对各子视图元素的绝对定位信息中的横坐标、宽度进行比对，得到各子视图元素之间的列相关性信息。
5.根据权利要求1-4任一所述的方法，其中，所述基于所述DOM树生成所述目标UI视图界面对应的完整的前端代码，包括：
采用Flex布局对所述DOM树进行样式推导，得到推导后DOM树；
基于所述推导后DOM树生成目标UI视图界面对应的完整的前端代码。
6.根据权利要求1-4任一所述的方法，其中，所述基于所述DOM树生成所述目标UI视图界面对应的完整的前端代码包括：
基于所述DOM树和与所述DOM树的叶节点存在局部叠加关系的子视图元素进行样式推导，生成目标UI视图界面对应的完整前端代码。
7.一种前端代码生成装置，所述装置包括：
获取模块，被配置成获取目标UI视图界面中各视图元素的属性信息；
确定模块，被配置成基于所述各视图元素的属性信息，确定出对应于同一父视图元素的子视图元素，所述子视图元素之间不存在局部叠加关系；
构建模块，被配置成交替依据所述子视图元素之间的行相关性信息和列相关性信息，确定所述父视图元素对应的DOM树除根节点之外的不同层级的节点，直至叶节点为单独的子视图元素，得到DOM树；
生成模块，被配置成基于所述DOM树生成所述目标UI视图界面对应的完整的前端代码。
8.根据权利要求7所述的装置，其中，所述确定模块进一步被配置成：
按照各视图元素的面积由大到小的顺序，对各视图元素的绝对定位信息、长度和宽度进行比对，确定出对应于同一父视图元素的子视图元素点。
9.根据权利要求7所述的装置，其中，所述属性信息包括：视图元素的绝对定位信息中的纵坐标和高度，以及所述行相关性信息通过以下方式得到：
按照各子视图元素的高度由大到小的顺序，对各子视图元素的绝对定位信息中的纵坐标、高度进行比对，得到各子视图元素之间的行相关性信息。
10.根据权利要求7所述的装置，其中，所述属性信息包括：视图元素的绝对定位信息中的横坐标和宽度，所述列相关性信息通过以下方式得到：
按照各子视图元素的宽度由大到小的顺序，对各子视图元素的绝对定位信息中的横坐标、宽度进行比对，得到各子视图元素之间的列相关性信息。
11.根据权利要求7-10任一所述的装置，其中，所述生成模块进一步被配置成：
采用Flex布局对所述DOM树进行样式推导，得到推导后DOM树；
基于所述推导后DOM树生成目标UI视图界面对应的完整的前端代码。
12.根据权利要求7-10任一所述的装置，其中，所述生成模块进一步被配置成：
基于所述DOM树和与所述DOM树的叶节点存在局部叠加关系的子视图元素进行样式推导，生成目标UI视图界面对应的完整前端代码。
13.一种电子设备，其特征在于，包括：
至少一个处理器；以及
与所述至少一个处理器通信连接的存储器；其中，
所述存储器存储有可被所述至少一个处理器执行，以使所述至少一个处理器能够执行权利要求1-6中任一项所述的方法。
14.一种存储有计算机指令的非瞬时计算机可读存储介质，其特征在于，所述计算机指令用于使所述计算机执行权利要求1-6中任一项所述的方法。
Priority Applications (4)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110056755.3A CN113778403A (zh) | 2021-01-15 | 2021-01-15 | 前端代码生成方法和装置 |
| US18/272,523 US20240069876A1 (en) | 2021-01-15 | 2022-01-05 | Front-end code generation method and apparatus |
| EP22738896.4A EP4280049A1 (en) | 2021-01-15 | 2022-01-05 | Front-end code generation method and apparatus |
| PCT/CN2022/070248 WO2022152015A1 (zh) | 2021-01-15 | 2022-01-05 | 前端代码生成方法和装置 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110056755.3A CN113778403A (zh) | 2021-01-15 | 2021-01-15 | 前端代码生成方法和装置 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN113778403A true CN113778403A (zh) | 2021-12-10 |
Family
ID=78835442
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110056755.3A Pending CN113778403A (zh) | 2021-01-15 | 2021-01-15 | 前端代码生成方法和装置 |
Country Status (4)
| Country | Link |
|---|---|
| US (1) | US20240069876A1 (zh) |
| EP (1) | EP4280049A1 (zh) |
| CN (1) | CN113778403A (zh) |
| WO (1) | WO2022152015A1 (zh) |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2022152015A1 (zh) * | 2021-01-15 | 2022-07-21 | 北京沃东天骏信息技术有限公司 | 前端代码生成方法和装置 |
| CN114821610A (zh) * | 2022-05-16 | 2022-07-29 | 三峡高科信息技术有限责任公司 | 一种基于树状神经网络的从图像生成网页代码的方法 |
| CN115185503A (zh) * | 2022-05-17 | 2022-10-14 | 贝壳找房(北京)科技有限公司 | 前端低代码开发方法、装置、电子设备、介质及程序产品 |
Families Citing this family (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111752540B (zh) * | 2020-06-28 | 2023-06-20 | 北京百度网讯科技有限公司 | 树组件生成方法、装置、设备和计算机存储介质 |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20180024850A1 (en) * | 2016-07-21 | 2018-01-25 | Red Hat, Inc. | Providing a layered image using a hierarchical tree |
| CN109343845A (zh) * | 2018-08-14 | 2019-02-15 | 北京奇艺世纪科技有限公司 | 一种代码文件生成方法和装置 |
| CN111414165A (zh) * | 2019-01-06 | 2020-07-14 | 阿里巴巴集团控股有限公司 | 界面代码的生成方法及设备 |
| CN111857704A (zh) * | 2020-07-31 | 2020-10-30 | 北京爱奇艺科技有限公司 | 一种布局关系的代码生成方法及装置 |
Family Cites Families (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113778403A (zh) * | 2021-01-15 | 2021-12-10 | 北京沃东天骏信息技术有限公司 | 前端代码生成方法和装置 |
-
2021
- 2021-01-15 CN CN202110056755.3A patent/CN113778403A/zh active Pending
-
2022
- 2022-01-05 US US18/272,523 patent/US20240069876A1/en active Pending
- 2022-01-05 EP EP22738896.4A patent/EP4280049A1/en active Pending
- 2022-01-05 WO PCT/CN2022/070248 patent/WO2022152015A1/zh active Application Filing
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20180024850A1 (en) * | 2016-07-21 | 2018-01-25 | Red Hat, Inc. | Providing a layered image using a hierarchical tree |
| CN109343845A (zh) * | 2018-08-14 | 2019-02-15 | 北京奇艺世纪科技有限公司 | 一种代码文件生成方法和装置 |
| CN111414165A (zh) * | 2019-01-06 | 2020-07-14 | 阿里巴巴集团控股有限公司 | 界面代码的生成方法及设备 |
| CN111857704A (zh) * | 2020-07-31 | 2020-10-30 | 北京爱奇艺科技有限公司 | 一种布局关系的代码生成方法及装置 |
Cited By (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2022152015A1 (zh) * | 2021-01-15 | 2022-07-21 | 北京沃东天骏信息技术有限公司 | 前端代码生成方法和装置 |
| CN114821610A (zh) * | 2022-05-16 | 2022-07-29 | 三峡高科信息技术有限责任公司 | 一种基于树状神经网络的从图像生成网页代码的方法 |
| CN114821610B (zh) * | 2022-05-16 | 2022-11-29 | 三峡高科信息技术有限责任公司 | 一种基于树状神经网络的从图像生成网页代码的方法 |
| CN115185503A (zh) * | 2022-05-17 | 2022-10-14 | 贝壳找房(北京)科技有限公司 | 前端低代码开发方法、装置、电子设备、介质及程序产品 |
| CN115185503B (zh) * | 2022-05-17 | 2023-11-14 | 贝壳找房(北京)科技有限公司 | 前端低代码开发方法、装置、电子设备、介质 |
Also Published As
| Publication number | Publication date |
|---|---|
| US20240069876A1 (en) | 2024-02-29 |
| WO2022152015A1 (zh) | 2022-07-21 |
| EP4280049A1 (en) | 2023-11-22 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| EP3869403A2 (en) | Image recognition method, apparatus, electronic device, storage medium and program product | |
| CN113778403A (zh) | 前端代码生成方法和装置 | |
| CN111708520B (zh) | 应用构建方法、装置、电子设备及存储介质 | |
| US20210406295A1 (en) | Method, electronic device, and storage medium for generating relationship of events | |
| CN111950254B (zh) | 搜索样本的词特征提取方法、装置、设备以及存储介质 | |
| CN111967568A (zh) | 深度学习模型的适配方法、装置及电子设备 | |
| CN110889056B (zh) | 页面标记的方法及装置 | |
| CN111275190A (zh) | 神经网络模型的压缩方法及装置、图像处理方法及处理器 | |
| US11068328B1 (en) | Controlling operation of microservices utilizing association rules determined from microservices runtime call pattern data | |
| CN111158666B (zh) | 实体归一化处理方法、装置、设备及存储介质 | |
| CN111756832B (zh) | 推送信息的方法、装置、电子设备及计算机可读存储介质 | |
| CN111340219A (zh) | 神经网络模型搜索方法及装置、图像处理方法及处理器 | |
| CN111598131A (zh) | 图像处理方法、装置、电子设备及存储介质 | |
| CN111259090B (zh) | 关系数据的图生成方法、装置、电子设备和存储介质 | |
| CN111832070B (zh) | 数据的掩码方法、装置、电子设备和存储介质 | |
| CN111966767B (zh) | 轨迹热力图生成方法、装置、电子设备和存储介质 | |
| CN111680599B (zh) | 人脸识别模型处理方法、装置、设备和存储介质 | |
| CN113656533A (zh) | 一种树形控件处理方法、装置及电子设备 | |
| CN111026916B (zh) | 文本描述的转换方法、装置、电子设备及存储介质 | |
| CN111738325A (zh) | 图像识别方法、装置、设备以及存储介质 | |
| CN111680628B (zh) | 文字框融合方法、装置、设备以及存储介质 | |
| CN111340222B (zh) | 神经网络模型搜索方法、装置以及电子设备 | |
| CN114661274A (zh) | 用于生成智能合约的方法和装置 | |
| CN111865683B (zh) | 虚拟网关版本灰度发布方法、装置、设备以及存储介质 | |
| CN114143109A (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 |