CN103488479A - 客户端界面动态生成装置和客户端界面动态生成方法 - Google Patents

Abstract

本发明提供了一种客户端界面动态生成装置和一种客户端界面动态生成方法，其中客户端界面生成装置包括：配置单元，预置界面元素结构树；主界面生成单元，用于根据读取的界面元素结构树的根节点和子节点的属性信息，在新建的空白主界面上分别生成标题区和导航区；子页面生成单元，用于读取界面元素结构树的子节点下的叶子节点属性信息，根据叶子节点属性信息生成客户端界面的至少一个子页面；关联单元，用于将每个子页面与导航区进行关联，组装生成客户端界面。本发明无需编码动态即可生成导航式的客户端界面，生成的界面结构清晰，层次明了，便于大信息数据的呈现，并且界面控件和实体数据能够自动绑定，并且各子面实现自动布局。

Description

客户端界面动态生成装置和客户端界面动态生成方法

技术领域

本发明涉及计算机技术领域，具体而言，涉及一种客户端界面动态生成装置和一种客户端界面动态生成方法。

背景技术

随着计算机软件技术的发展，各行业都开始应用信息化软件进行企业管理，界面是信息化软件的窗口，是用户得到各种数据信息的最直接来源，当然，通过界面的操作还能达到许多其它的目的。因此，用户对于界面的要求也会越来越高，不仅表现在界面的美观上，更希望界面能够更多的展示各种关联信息。当关联信息量比较大时，传统的做法是开发人员先开发一个个子页面，在每个界面上增加各式控件，然后用多页签控件将这些子页面关联起来，在每个页签中加入各种控件组成当前的子页签，然后再将这些这种方式会存在很多的局限性：一方面开发人员需要花大量的时间去开发大量的界面，另一个方面是界面的维护非常麻烦，增加或减少控件都需要改变现有的代码。

当然，一些软件中通过定义界面的控件元素表来实现界面的自动生成，但是即使这样也存在一些问题，我们需要先自动生成一个个子页面，还要再画一个主界面，写代码将这些子页面关联起来，子页面控件元素表比较单一，就是各个控件属性集合的，通过子页面的控件元素表无法看出整个界面的层次结构和子页面之间的关联情况，如果想修改两个子页面间的显示顺序，上下级关系还需要再修改现有的代码，无法做到整个界面的统一生成和管理。

发明内容

本发明正是基于上述技术问题，提出了一种新的客户端界面动态生成技术，界面元素分层管理，能够有序有层次地管理整个界面的所有元素，并且无需编码可自动生成整个界面。

有鉴于此，根据本发明的一个方面，提供了一种客户端界面动态生成装置，包括：配置单元，预置界面元素结构树；主界面生成单元，用于根据读取的所述界面元素结构树的根节点和子节点的属性信息，在新建的空白主界面上分别生成标题区和导航区；子页面生成单元，用于读取所述界面元素结构树的所述子节点下的叶子节点属性信息，根据叶子节点属性信息生成所述客户端界面的至少一个子页面；关联单元，用于将每个所述子页面与所述导航区进行关联，组装生成客户端界面。

在该技术方案中，通过预制界面元素结构树即可能够动态生成一组带有导航风格的客户端界面，包括界面的标题区、导航区和批量生成界面中需要展示的若干个子页面，并自动实现界面的组装和实体数据的绑定，使用本发明开发的界面非常便于大信息的数据展示，结构清晰，并且界面易于维护。

在上述技术方案中，优选的，所述子页面生成单元包括：判断单元，用于判断所述导航区是否需要关联所述子页面；新建单元，用于在确定需要关联所述子页面时，增加空白页面；控件生成单元，用于从所述界面元素结构树中读取当前叶子节点下的显示元素信息，根据所述显示元素信息生成对应的控件，并将所述控件添加至所述空白页面；数据绑定单元，用于对所述控件的属性进行赋值并将所述控件与数据库实体数据进行绑定，以及从所述数据库中读取与所述控件绑定的数据，并将所述数据加载到所述控件中；调整单元，用于对添加有所述控件的空白页面进行自动布局，以生成所述子页面。

导航区可以关联至少一个子页面，根据配置的界面元素结构树中的叶子节点的显示元素信息，生成子页面的控件，该界面控件和实体数据能够自动绑定，并且各子面实现自动布局。

在上述技术方案中，优选的，所述主界面生成单元还用于根据所述子节点在所述界面元素结构树上的层级关系生成所述导航区的多级导航。

子节点可以有多个，并且子节点也可以有层级关系，这样导航区中就可以有多级导航，例如根据第一级子节点生成导航区的一级导航，根据第二级子节点生成导航区的二级导航。

在上述任一技术方案中，优选的，所述关联单元还用于根据所述叶子节点属性信息中的子页面层级信息将生成的至少一个子页面分别关联至所述导航区的对应层级导航上。

每个子节点有对应的叶子节点，因此将根据叶子节点属性信息生成的子页面关联至导航区的对应层级上，这样就形成了清晰地层级管理。

在上述任一技术方案中，优选的，所述配置单元还用于通过XML文档或界面信息表搭建所述界面元素结构树。通过更改界面元素结构树就能够方便的客户端界面中的子页面的控件属性、子页面之间的显示顺序、显示风格等，无需修改现有的代码，即可实现整个界面的统一生成和管理。

根据本发明的另一方面，还提供了一种客户端界面动态生成方法，包括：预置界面元素结构树；根据读取的所述界面元素结构树的根节点和子节点的属性信息，在新建的空白主界面上分别生成标题区和导航区；读取所述界面元素结构树的所述子节点下的叶子节点属性信息，根据叶子节点属性信息生成所述客户端界面的至少一个子页面；将每个所述子页面与所述导航区进行关联，组装生成客户端界面。

在该技术方案中，通过预制界面元素结构树即可能够动态生成一组带有导航风格的客户端界面，包括界面的标题区、导航区和批量生成界面中需要展示的若干个子页面，并自动实现界面的组装和实体数据的绑定，使用本发明开发的界面非常便于大信息的数据展示，结构清晰，并且界面易于维护。

在上述技术方案中，优选的，所述根据叶子节点属性信息生成所述客户端界面的至少一个子页面的步骤具体包括：判断所述导航区是否需要关联所述子页面；在确定需要关联所述子页面时，增加空白页面；从所述界面元素结构树中读取当前叶子节点下的显示元素信息，根据所述显示元素信息生成对应的控件，并将所述控件添加至所述空白页面；对所述控件的属性进行赋值并将所述控件与数据库实体数据进行绑定；对添加有所述控件的空白页面进行自动布局，以生成所述子页面；从所述数据库中读取与所述控件绑定的数据，并将所述数据加载到所述控件中。

导航区可以关联至少一个子页面，根据配置的界面元素结构树中的叶子节点的显示元素信息，生成子页面的控件，该界面控件和实体数据能够自动绑定，并且各子面实现自动布局。

在上述任一技术方案中，优选的，根据所述子节点在所述界面元素结构树上的层级关系生成所述导航区的多级导航。

子节点可以有多个，并且子节点也可以有层级关系，这样导航区中就可以有多级导航，例如根据第一级子节点生成导航区的一级导航，根据第二级子节点生成导航区的二级导航。

在上述任一技术方案中，优选的，根据所述叶子节点属性信息中的子页面层级信息将生成的至少一个子页面分别关联至所述导航区的对应层级导航上。

每个子节点有对应的叶子节点，因此将根据叶子节点属性信息生成的子页面关联至导航区的对应层级上，这样就形成了清晰地层级管理。

在上述任一技术方案中，优选的，还可以包括：所述界面元素结构树通过XML文档或界面信息表搭建。通过更改界面元素结构树就能够方便的客户端界面中的子页面的控件属性、子页面之间的显示顺序、显示风格等，无需修改现有的代码，即可实现整个界面的统一生成和管理。

附图说明

图1示出了根据本发明的实施例的客户端界面动态生成装置的框图；

图2示出了根据本发明的实施例的界面元素结构树的元素示意图；

图3示出了根据本发明的实施例的客户端界面动态生成方法的流程图；

图4示出了根据本发明的实施例的生成的客户端界面中标题区和导航区的示意图；

图5示出了根据本发明的实施例的控件分类示意图；

图6示出了根据本发明的实施例的子页面生成单元的处理过程的示意图；

图7示出了根据本发明的实施例的子页面生成过程的流程图；

图8示出了根据本发明的实施例的控件与数据绑定的示意图；

图9示出了根据本发明的实施例的组装后的客户端界面示意图；

图10示出了根据本发明的实施例的界面元素结构树的示意图；

图11A示出了根据本发明的实施例的生成的标题区示意图；

图11B示出了根据本发明的实施例的生成的导航区示意图；

图12A出了根据本发明的实施例的生成的子页面示意图；

图12B出了根据本发明的实施例的生成的子页面示意图；

图13示出了根据本发明的实施例的子页面与导航区关联后的客户端界面示意图。

具体实施方式

为了能够更清楚地理解本发明的上述目的、特征和优点，下面结合附图和具体实施方式对本发明进行进一步的详细描述。需要说明的是，在不冲突的情况下，本申请的实施例及实施例中的特征可以相互组合。

在下面的描述中阐述了很多具体细节以便于充分理解本发明，但是，本发明还可以采用其他不同于在此描述的其他方式来实施，因此，本发明的保护范围并不受下面公开的具体实施例的限制。

图1示出了根据本发明的实施例的客户端界面动态生成装置的框图。

如图1所示，根据本发明的实施例的客户端界面动态生成装置100包括：配置单元102，预置界面元素结构树；主界面生成单元104，用于根据读取的所述界面元素结构树的根节点和子节点的属性信息，在新建的空白主界面上分别生成标题区和导航区；子页面生成单元106，用于读取所述界面元素结构树的所述子节点下的叶子节点属性信息，根据叶子节点属性信息生成所述客户端界面的至少一个子页面；关联单元108，用于将每个所述子页面与所述导航区进行关联，组装生成客户端界面。

在该技术方案中，通过预制界面元素结构树即可能够动态生成一组带有导航风格的客户端界面，包括界面的标题区、导航区和批量生成界面中需要展示的若干个子页面，并自动实现界面的组装和实体数据的绑定，使用本发明开发的界面非常便于大信息的数据展示，结构清晰，并且界面易于维护。

在上述技术方案中，优选的，所述子页面生成单元106包括：判断单元1062，用于判断所述导航区是否需要关联所述子页面；新建单元1064，用于在确定需要关联所述子页面时，增加空白页面；控件生成单元1066，用于从所述界面元素结构树中读取当前叶子节点下的显示元素信息，根据所述显示元素信息生成对应的控件，并将所述控件添加至所述空白页面；数据绑定单元1068，用于对所述控件的属性进行赋值并将所述控件与数据库实体数据进行绑定，以及从所述数据库中读取与所述控件绑定的数据，并将所述数据加载到所述控件中；调整单元10610，用于对添加有所述控件的空白页面进行自动布局，以生成所述子页面。

导航区可以关联至少一个子页面，根据配置的界面元素结构树中的叶子节点的显示元素信息，生成子页面的控件，该界面控件和实体数据能够自动绑定，并且各子面实现自动布局。

在上述技术方案中，优选的，所述主界面生成单元104还用于根据所述子节点在所述界面元素结构树上的层级关系生成所述导航区的多级导航。

子节点可以有多个，并且子节点也可以有层级关系，这样导航区中就可以有多级导航，例如根据第一级子节点生成导航区的一级导航，根据第二级子节点生成导航区的二级导航。

在上述任一技术方案中，优选的，所述关联单元108还用于根据所述叶子节点属性信息中的子页面层级信息将生成的至少一个子页面分别关联至所述导航区的对应层级导航上。

每个子节点有对应的叶子节点，因此将根据叶子节点属性信息生成的子页面关联至导航区的对应层级上，这样就形成了清晰地层级管理。

在上述任一技术方案中，优选的，所述配置单元102还用于通过XML文档或界面信息表搭建所述界面元素结构树。通过更改界面元素结构树就能够方便的客户端界面中的子页面的控件属性、子页面之间的显示顺序、显示风格等，无需修改现有的代码，即可实现整个界面的统一生成和管理。

根据本发明的客户端界面生成装置基于分层界面元素生成客户端界面，界面元素分层管理，能够有序有层次地管理整个界面的所有元素；无需编码可自动生成整个界面（包含界面的导航区和各子页面）；各子页面的控件能实现自动数据绑定，自动布局以及和区自动关联；改变界面元素可自动更新到对应界面（如子页面的控件属性、子页面之间的显示顺序、显示风格等）。

根据本发明的实施例的客户端界面动态生成方法可以包括以下步骤（图中未示出）：预置界面元素结构树；根据读取的所述界面元素结构树的根节点和子节点的属性信息，在新建的空白主界面上分别生成标题区和导航区；读取所述界面元素结构树的所述子节点下的叶子节点属性信息，根据叶子节点属性信息生成所述客户端界面的至少一个子页面；将每个所述子页面与所述导航区进行关联，组装生成客户端界面。

在该技术方案中，通过预制界面元素结构树即可能够动态生成一组带有导航风格的客户端界面，包括界面的标题区、导航区和批量生成界面中需要展示的若干个子页面，并自动实现界面的组装和实体数据的绑定，使用本发明开发的界面非常便于大信息的数据展示，结构清晰，并且界面易于维护。

在上述技术方案中，优选的，所述根据叶子节点属性信息生成所述客户端界面的至少一个子页面的步骤具体包括：判断所述导航区是否需要关联所述子页面；在确定需要关联所述子页面时，增加空白页面；从所述界面元素结构树中读取当前叶子节点下的显示元素信息，根据所述显示元素信息生成对应的控件，并将所述控件添加至所述空白页面；对所述控件的属性进行赋值并将所述控件与数据库实体数据进行绑定；对添加有所述控件的空白页面进行自动布局，以生成所述子页面；从所述数据库中读取与所述控件绑定的数据，并将所述数据加载到所述控件中。

导航区可以关联至少一个子页面，根据配置的界面元素结构树中的叶子节点的显示元素信息，生成子页面的控件，该界面控件和实体数据能够自动绑定，并且各子面实现自动布局。

在上述任一技术方案中，优选的，根据所述子节点在所述界面元素结构树上的层级关系生成所述导航区的多级导航。

子节点可以有多个，并且子节点也可以有层级关系，这样导航区中就可以有多级导航，例如根据第一级子节点生成导航区的一级导航，根据第二级子节点生成导航区的二级导航。

在上述任一技术方案中，优选的，根据所述叶子节点属性信息中的子页面层级信息将生成的至少一个子页面分别关联至所述导航区的对应层级导航上。

每个子节点有对应的叶子节点，因此将根据叶子节点属性信息生成的子页面关联至导航区的对应层级上，这样就形成了清晰地层级管理。

在上述任一技术方案中，优选的，还可以包括：所述界面元素结构树通过XML文档或界面信息表搭建。通过更改界面元素结构树就能够方便的客户端界面中的子页面的控件属性、子页面之间的显示顺序、显示风格等，无需修改现有的代码，即可实现整个界面的统一生成和管理。

界面元素结构树：用以生成整个客户端界面所需预置的数据结构，记录了生成界面的各种信息，可以通过XML文档或界面信息表搭建，数据结构根据不同类型界面元素进行组织，是一个树状的结构图。如图2所示，界面元素结构树中的元素主要包括以下三种元素：主题描述元素、界面导航元素和控件元素。

图3示出了根据本发明的实施例的客户端界面动态生成方法的流程图。

如图3所示，步骤302，预置界面元素结构树。步骤304，读取界面元素结构树状图的非叶子节点（根节点和子节点），生成带界面的主题曲和导航区。步骤306，判断是否需要生成子页面，若是，进入步骤308，否则结束该流程。步骤308，读取子页面节点的详细信息，获取属于该子页面的所有显示元素的信息，生成对应的控件。

步骤310，在该子页面上增加生成的控件。步骤312，对控件属性进行赋值并将其与实体数据进行绑定。步骤314，对添加有此控件的子页面进行自动布局。

步骤316，将子页面加入到主界面，并建立导航区域子页面的对应关系。步骤318，从数据库中读取数据，加载到界面的控件中。

更详细的，动态生成客户端界面的过程为：

a)界面元素结构树的构建

开发人员或者用户需要先配置组成界面的界面元素结构树，按图2所示的界面元素结构树的三种元素组成进行构建。

每个界面元素结构树对应一个主题描述元素（根节点），可设置界面对应的标题等信息，如界面需要生成导航区，则需设置该节点的显示属性，如下表所示：

UIID	界面标识ID
		UIName	界面名称
UIDescription	界面标识
		Title	标题
Style	界面风格：0左侧带有导航 1不带导航 2其它

树的非叶子节点（即子节点）描述了界面导航区的组成元素，可按照实际需要以及界面需要展示具体内容的层级关系并依次进行设置，特别可设置该节点是否需要生成子页面（导航区是否需要关联子页面）以及子页面和父页面之间的各种展示风格（如嵌入式、上下式、单据打开等），主要包含下表中的属性。

树的叶子节点描述了组成父节点（导航区）对应的子页面是由哪些控件组成的，需要配置控件的各种属性（类型、名称、大小、坐标、显示顺序）、对应实体字段、备注信息等，主要包含下表的属性：

b)界面标题区和导航区的生成

动态增加一个空白的主页面，读取界面元素结构树的根节点（主题描述元素）在界面中加入标题区，根据跟节点的属性给标题区赋值。如根节点的属性需要显示导航区，则读取树的所有非叶子节点（根节点除外）按照层次由低到高关系，先生成导航区所有第一级的业务标题区，然后给一级标题增加对应的所有二级子标题、三级子标题等。生成的界面如图4所示。

c)批量生成子页面

如图6所示，图1中的子界面生成单元的处理过程为：判断界面元素结构树对应的导航区节点是否需要生成子页面，如需要则新增一个空白子页面（UseControl），并读取属于该节点下的控件元素节点，生成所有控件，将生成的控件条件到空白子页面中，将控件与实体数据进行动态绑定，最后对添加有控件的子页面进行自动布局。

具体的，在生成控件时需要判断当前的控件类型（控件类型如图5所示）生成对应的控件，控件有可能是简单控件，也有可能是列表控件，如是列表控件，则需先判断是否已增加控件对应的列表(没有则先增加列表控件)，然后在列表中加入一列（具体类型对应控件中的属性）并填加到当前子页面，具体流程如图7所示。

步骤702，判断是否需要增加子页面，若是则进入步骤704，否则结束该流程。步骤704，增加空白子页面。步骤706，判断是否是最后一个叶子节点，若是，则进入步骤716，否则，进入步骤708。

步骤708，判断是否是列表控件，若是，则进入步骤710，否则，进入步骤712，增加控件。

步骤710，增加列表控件。步骤714，将确定的控件条件到子页面中。

步骤716，将子页面中的控件与数据实体进行绑定。

d)子页面中控件的属性设置及数据绑定

属性设置主要为子页面中控件的一些属性，根据界面元素结构树对应的控件元素的值来赋值，如某个下拉框控件可选择的值，控件默认显示的值等等，如图8所示，数据绑定是将控件和数据库实体对象的某个字段进行关联。

e)界面的组装

界面组装主要将生成的子页面和导航区进行关联，建立导航和子页面的关联事件（通过点击导航按钮来加载右边内容区的子页面），子页面的展示方式和对应导航节点元素设置的显示属性相关，生成界面如图9所示。

下面以人员档案为例来详细说明上述客户端界面生成过程。

人员档案是企业管理系统中HR模块中的一个基础档案，虽然只是一个档案，但要在界面中呈现的信息非常多。在整个人员档案的界面中要展现的信息的数据表多达几十个甚至上百个。而每个表对应的子页面有一个或多个，因此，为了展示所有信息需要非常多的子页面才能完成。

如果按照以往的做法，需要先开发所有的子页面，然后再对所有的子页面进行数据绑定，最后将界面整合，这样需要占用开发人员大量的时间，并且后期再改动界面也需要再次修改很多代码才能完成，随着子页面越来越多，维护管理也更加麻烦。

为了能够在不需要编写代码就能自动生成所有子页面并完成子页面和主界面的关联，并且使整个界面层次明显，结构清晰，需要在如图10所示的界面中配置人员档案的界面元素结构树。

按照界面元素结构树的根节点动态生成人员档案的标题区，如图11A所示。按照界面元素结构树的非叶子节点（即子节点）动态生成人员档案的导航区，如图11B所示。按照界面元素结构树的叶子节点动态生成人员档案的各子界面，分别如图12A和图12B所示。对子页面和导航区进行自动关联，最后页面的显示效果如图13所示，图13示出了生成的层次清晰的客户端界面。在此说明一下，图中的文字只是一种示例，重要的是按照界面元素结构树动态生成界面的方法。

因此根据本发明的客户端界面生成方法，对开发人员开发大信息量展示界面提供了极大的方便，节省了大量开发时间，提升了开发效率，无需编码动态即可生成导航式的客户端界面，生成的界面结构清晰，层次明了，便于大信息数据的呈现，并且界面控件和实体数据能够自动绑定，并且各子面实现自动布局，界面维护也较为方便，通过修改界面元素结构树即可更新界面的各种展现方式。

以上所述仅为本发明的优选实施例而已，并不用于限制本发明，对于本领域的技术人员来说，本发明可以有各种更改和变化。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (10)

1.一种客户端界面动态生成装置，其特征在于，包括：

配置单元，预置界面元素结构树；

主界面生成单元，用于根据读取的所述界面元素结构树的根节点和子节点的属性信息，在新建的空白主界面上分别生成标题区和导航区；

子页面生成单元，用于读取所述界面元素结构树的所述子节点下的叶子节点属性信息，根据叶子节点属性信息生成所述客户端界面的至少一个子页面；

关联单元，用于将每个所述子页面与所述导航区进行关联，组装生成客户端界面。

2.根据权利要求1所述的客户端界面动态生成装置，其特征在于，所述子页面生成单元包括：

判断单元，用于判断所述导航区是否需要关联所述子页面；

新建单元，用于在确定需要关联所述子页面时，增加空白页面；

控件生成单元，用于从所述界面元素结构树中读取当前叶子节点下的显示元素信息，根据所述显示元素信息生成对应的控件，并将所述控件添加至所述空白页面；

数据绑定单元，用于对所述控件的属性进行赋值并将所述控件与数据库实体数据进行绑定，以及从所述数据库中读取与所述控件绑定的数据，并将所述数据加载到所述控件中；

调整单元，用于对添加有所述控件的空白页面进行自动布局，以生成所述子页面。

3.根据权利要求1所述的客户端界面动态生成装置，其特征在于，所述主界面生成单元还用于根据所述子节点在所述界面元素结构树上的层级关系生成所述导航区的多级导航。

4.根据权利要求3所述的客户端界面动态生成装置，其特征在于，所述关联单元还用于根据所述叶子节点属性信息中的子页面层级信息将生成的至少一个子页面分别关联至所述导航区的对应层级导航上。

5.根据权利要求1至4中任一项所述的客户端界面动态生成装置，其特征在于，所述配置单元还用于通过XML文档或界面信息表搭建所述界面元素结构树。

6.一种客户端界面动态生成方法，其特征在于，包括：

预置界面元素结构树；

根据读取的所述界面元素结构树的根节点和子节点的属性信息，在新建的空白主界面上分别生成标题区和导航区；

读取所述界面元素结构树的所述子节点下的叶子节点属性信息，根据叶子节点属性信息生成所述客户端界面的至少一个子页面；

将每个所述子页面与所述导航区进行关联，组装生成客户端界面。

7.根据权利要求6所述的客户端界面动态生成方法，其特征在于，所述根据叶子节点属性信息生成所述客户端界面的至少一个子页面的步骤具体包括：

判断所述导航区是否需要关联所述子页面；

在确定需要关联所述子页面时，增加空白页面；

从所述界面元素结构树中读取当前叶子节点下的显示元素信息，根据所述显示元素信息生成对应的控件，并将所述控件添加至所述空白页面；

对所述控件的属性进行赋值并将所述控件与数据库实体数据进行绑定；

对添加有所述控件的空白页面进行自动布局，以生成所述子页面；

从所述数据库中读取与所述控件绑定的数据，并将所述数据加载到所述控件中。

8.根据权利要求6所述的客户端界面动态生成方法，其特征在于，根据所述子节点在所述界面元素结构树上的层级关系生成所述导航区的多级导航。

9.根据权利要求8所述的客户端界面动态生成方法，其特征在于，根据所述叶子节点属性信息中的子页面层级信息将生成的至少一个子页面分别关联至所述导航区的对应层级导航上。

10.根据权利要求6至9中任一项所述的客户端界面动态生成方法，其特征在于，还包括：

所述界面元素结构树通过XML文档或界面信息表搭建。

Images