CN106843904B

CN106843904B - 界面动态布局方法及其系统

Info

Publication number: CN106843904B
Application number: CN201710089243.0A
Authority: CN
Inventors: 曲宝林; 戴相昆; 蔡博宁; 黄玉荣; 杨涛; 牛宝龙; 马娜; 马林; 冯林春; 吴雄波; 唐逃旺
Original assignee: Shenzhen Yino Intelligence Technology Co ltd
Current assignee: Shenzhen Yino Intelligence Technology Co ltd
Priority date: 2017-02-20
Filing date: 2017-02-20
Publication date: 2020-06-09
Anticipated expiration: 2037-02-20
Also published as: CN106843904A

Abstract

本发明公开了一种界面动态布局方法及其系统，方法包括：获取目标界面以及所述目标界面的布局配置文件；根据所述布局配置文件中的控件信息，创建控件列表以及与控件一一对应的属性列表；对所述控件列表和/或属性列表进行编辑操作；根据编辑后的控件列表和/或属性列表，调整所述目标界面。可用于Winform应用程序的动态布局，用户可根据自身需要对控件列表和属性列表进行相应的编辑，操作简单，能快速实现和充分满足用户对目标界面自定义的需求。

Description

界面动态布局方法及其系统

技术领域

本发明涉及互联网技术领域，尤其涉及一种界面动态布局方法及其系统。

背景技术

在Winform应用程序开发领域，当用户浏览或编辑数据记录时，大多通过窗体界面浏览，而窗体上的界面控件及控件的数据绑定大多是固定的，当用户出现新的需求或者对原有需求需要修改时，就需要对窗体界面进行重新设计开发，会大大增加设计人员的工作量，而这些工作在很大程度上又都是重复的，造成人力资源的浪费，也不利于提高应用程序的开发效率。

近年来，出现了一些自定义用户界面的方法，但大多数停留在对界面的调整上，没有对控件数据的绑定提出很好的解决方案。也有一些自定义表单的方法，也只是在布局上进行简单的排列，不能充分满足用户对窗体界面自定义的需求。

发明内容

本发明所要解决的技术问题是：提供一种可用于Winform应用程序并且能够满足用户自定义需求的界面动态布局方法及其系统。

为了解决上述技术问题，本发明采用的技术方案为：

一种界面动态布局方法，包括：

获取目标界面以及所述目标界面的布局配置文件；

根据所述布局配置文件中的控件信息，创建控件列表以及与控件一一对应的属性列表；

对所述控件列表和/或属性列表进行编辑操作；

根据编辑后的控件列表和/或属性列表，调整所述目标界面。

本发明提供的另一技术方案为：

一种界面动态布局系统，包括：

第一获取模块，用于获取目标界面以及所述目标界面的布局配置文件；

创建模块，用于根据所述布局配置文件中的控件信息，创建控件列表以及与控件一一对应的属性列表；

编辑模块，用于对所述控件列表和/或属性列表进行编辑操作；

调整模块，用于根据编辑后的控件列表和/或属性列表，调整所述目标界面。

本发明的有益效果在于：用户可以根据控件列表和属性列表对当前的目标界面进行编辑，根据自身需要添加、移除控件或者修改控件的属性，直到满足用户自身需求为止，布局完成后即可展示新的目标界面。本发明的控件动态布局方法简单，可以充分满足用户对目标界面自定义的需求。

附图说明

图1为本发明的界面动态布局方法的流程图；

图2为本发明实施例二的界面动态布局方法的流程图；

图3为本发明的界面动态布局系统的结构示意图；

图4为本发明实施例四的界面动态布局系统的结构示意图。

标号说明：

1、第一获取模块；2、创建模块；3、编辑模块；4、调整模块；

5、添加模块；6、第二获取模块；7、关联模块；8、预览模块；

9、保存模块；41、实例化单元；42、创建单元；43、移除单元；

44、修改单元；441、匹配单元；442、显示单元。

具体实施方式

为详细说明本发明的技术内容、所实现目的及效果，以下结合实施方式并配合附图予以说明。

本发明最关键的构思在于：用户可以根据控件列表和属性列表对当前的目标界面进行编辑，实现对目标界面自定义的需求。

请参照图1，一种界面动态布局方法，包括：

获取目标界面以及所述目标界面的布局配置文件；

对所述控件列表和/或属性列表进行编辑操作；

根据编辑后的控件列表和/或属性列表，调整所述目标界面。

从上述描述可知，本发明的有益效果在于：首先获取目标界面的布局配置文件，然后创建相关的控件列表和属性列表，用户可根据自身需要对控件列表和属性列表进行编辑以达到界面动态布局的目的，本发明的界面动态布局方法简单，能充分满足用户自定义需求，例如视觉上更加符合用户自身的审美，或者操作上更加符合用户自身的习惯等。

进一步的，所述“根据编辑后的控件列表和/或属性列表，调整所述目标界面”具体为：

若所述编辑操作为在所述控件列表中添加控件，则在所述目标界面中将所述添加的控件进行实例化；

创建与所述添加的控件一一对应的属性列表；

若所述编辑操作为在所述控件列表中删除控件，则在所述目标界面中移除所述删除的控件；

若所述编辑操作为在所述属性列表中修改属性值，则根据修改后的属性值，对应调整所述属性列表对应的控件。

由上述描述可知，可以根据当前的控件增加用户需要的其他控件，增加控件后需要进行实例化和创建对应的属性列表；另外还可以将不需要的控件进行移除以及修改当前属性列表的属性值，可以满足用户的多种需求。

进一步的，所述“根据所述布局配置文件中的控件信息，创建控件列表以及与控件一一对应的属性列表”之后，还包括：

在属性列表中添加扩展字段；

获取记录有展示数据的展示数据表；

将所述展示数据表中的数据字段与预设的属性值进行关联，得到关联关系，所述关联关系中，不同数据字段对应的属性值不同。

由上述描述可知，属性列表中可根据需要添加扩展字段，并且属性列表的属性值与展示数据表中的数据字段存在关联关系，不同的数据字段对应的属性值不同，避免重复显示和进行数据展示时出现冲突。

进一步的，所述“若所述编辑操作为在所述属性列表中修改属性值，则根据修改后的属性值，对应调整所述属性列表对应的控件”具体为：

若所述编辑操作为修改所述属性列表的扩展字段的属性值，则将所述修改后的属性值在所述关联关系中进行匹配；

若所述扩展字段的属性值与所述关联关系中的一属性值匹配成功，则所述属性列表对应的控件显示所述一属性值对应的数据字段下的展示数据。

由上述描述可知，当修改扩展字段的属性值之后需要与关联关系中的属性值进行匹配，当匹配成功后控件即可显示属性值对应的数据字段下的展示数据。

进一步的，所述“调整所述目标界面”之后还包括：

预览调整后的目标界面；

保存调整后的目标界面。

由上述描述可知，在对控件列表和属性列表进行编辑操作之后用户可以进行预览，以观察目标界面是否达到预期的要求，若否，则还可以进行相应的编辑操作，直到用户完全满意为止再进行相应的保存。

请参照图3，本发明的另一技术方案为：

一种界面动态布局系统，包括：

进一步的，所述调整模块具体包括：

实例化单元，用于若所述编辑操作为在所述控件列表中添加控件，则在所述目标界面中将所述添加的控件进行实例化；

创建单元，用于创建与所述添加的控件一一对应的属性列表；

移除单元，用于若所述编辑操作为在所述控件列表中删除控件，则在所述目标界面中移除所述删除的控件；

修改单元，用于若所述编辑操作为在所述属性列表中修改属性值，则根据修改后的属性值，对应调整所述属性列表对应的控件。

进一步的，还包括：

添加模块，用于在属性列表中添加扩展字段；

第二获取模块，用于获取记录有展示数据的展示数据表；

关联模块，用于将所述展示数据表中的数据字段与预设的属性值进行关联，得到关联关系，所述关联关系中，不同数据字段对应的属性值不同。

进一步的，所述修改单元具体包括：

匹配单元，用于若所述编辑操作为修改所述属性列表的扩展字段的属性值，则将所述修改后的属性值在所述关联关系中进行匹配；

显示单元，用于若所述扩展字段的属性值与所述关联关系中的一属性值匹配成功，则所述属性列表对应的控件显示所述一属性值对应的数据字段下的展示数据。

进一步的，还包括：

预览模块，用于预览调整后的目标界面；

保存模块，用于保存调整后的目标界面。

实施例一

请参照图1，本发明的实施例一为：一种界面动态布局方法，可用于Winform应用程序的界面动态布局，布局方法简单，可充分满足用户自定义的需要。包括如下步骤：

S1、获取目标界面以及所述目标界面的布局配置文件。目标界面可根据用户自身的需要进行选定，选定后可以获得选取的目标界面的布局配置文件。

S2、根据所述布局配置文件中的控件信息，创建控件列表以及与控件一一对应的属性列表。创建完控件列表和属性列表后，当在动态布局模式下即可显示，所述属性列表为当前选中的控件对应的属性列表，控件列表中的每一个控件都对应创建有一个属性列表，当选中的控件不同时出现的属性列表也发生相应的变化。

S3、对所述控件列表和/或属性列表进行编辑操作。选定控件之后，可以对控件进行编辑，例如增加或者移除，也可以对控件对应的属性列表进行编辑，属性列表中的属性数据字段可以包括字体、颜色、尺寸和位置等等。

S4、根据编辑后的控件列表和/或属性列表，调整所述目标界面。编辑完成后，用户可以对调整后的目标界面进行预览操作，若预览时显示的目标界面没有达到预期效果，则可以重新执行步骤S3，直到用户满意为止，当用户不需要再进行修改时，保存调整后的目标界面。

本实施例中，通过创建相关的控件列表和属性列表，用户可根据自身需要对控件列表和属性列表进行编辑以达到界面动态布局的目的，本发明的界面动态布局方法简单，能充分满足用户自定义需求，例如视觉上更加符合用户自身的审美，或者操作上更加符合用户自身的习惯等。

实施例二

请参照图2，本发明的实施例二为上述实施例一的进一步扩展，相同之处不再赘述，区别在于，在步骤S2之后还包括：

S201、在属性列表中添加扩展字段。扩展字段为重点设置的对象，可根据用户的喜好相应设置。例如时间、价格、性别等等。

S202、获取记录有展示数据的展示数据表。

S203、将所述展示数据表中的数据字段与预设的属性值进行关联，得到关联关系，所述关联关系中，不同数据字段对应的属性值不同。展示数据表中记录了控件可以进行展示的所有数据，每一个数据字段对应不同的属性值。假设预设的属性值为1、2、3，展示数据表中预设的数据字段为日期、价格和类别，其中将属性值1与日期建立有关联关系，属性值2与价格建立有关联关系，属性值3与类别建立有关联关系。那么当控件A的扩展字段的属性值设为1时，对应展示数据表中的“日期”这个数据字段，当控件A的扩展字段的属性值设为2时，对应展示数据表中的“价格”这个数据字段，当控件A的扩展字段的属性值设为3时，对应展示数据表中的“类别”这个数据字段。假设目标界面中还有一控件B，控件B的扩展字段的属性值可以设为与控件A相同，也可以设为与控件B不同。

步骤S4具体包括：

S41、若所述编辑操作为在所述控件列表中添加控件，则在所述目标界面中将所述添加的控件进行实例化。可以在控件列表中添加相应的控件，对添加的控件需要逐项进行实例化，实例化之后才能被使用。

S42、创建与所述添加的控件一一对应的属性列表。对于新增加的控件，需要创建对应的属性列表，以便用户进行新控件的属性编辑，当然新创建的属性列表中扩展字段的属性值对应的数据字段与其他控件扩展字段的属性值对应的数据字段不同。

S43、若所述编辑操作为在所述控件列表中删除控件，则在所述目标界面中移除所述删除的控件。

S44、若所述编辑操作为在所述属性列表中修改属性值，则根据修改后的属性值，对应调整所述属性列表对应的控件。这里所说的修改属性值是指修改属性列表中的扩展字段的属性值。当然，也可以修改属性列表中的其他属性，例如修改控件的位置，即控件的坐标，在调整后的界面中控件显示修改后的坐标位置。

步骤S44具体包括：

S441、若所述编辑操作为修改所述属性列表的扩展字段的属性值，则将所述修改后的属性值在所述关联关系中进行匹配。

S442、若所述扩展字段的属性值与所述关联关系中的一属性值匹配成功，则所述属性列表对应的控件显示所述一属性值对应的数据字段下的展示数据。若是匹配失败，则用户对属性列表的编辑不成功，需要重新进行相应的编辑。以控件A为例，假设原来控件扩展字段的属性值为1，用户对属性值进行了修改，选择了属性值2，此时扩展字段的属性值与关联关系中的一属性值是可以匹配成功的，那么控件展示的数据就从数据字段“日期”所对应的数据变为“价格”所对应的数据。如果用户将属性值修改为了5，而此时展示数据表中没有对应属性值为5的数据字段，那么就不能匹配成功，用户操作失败，需要重新进行设置。

本实施例中，在用户修改控件的属性值之后还需要对用户编辑的属性值进行匹配，以免用户错误操作，当匹配成功之后才将用户编辑的结果展示在目标界面中。

实施例三

本发明的实施例三为上述实施例的一具体应用场景，具体为一种Winform应用程序的界面动态布局方法，包括：

用户在选定目标界面后，进行动态布局操作，即进入动态布局模式。在动态布局模式下，弹出一个可调整大小的窗口A，窗口A包括两个列表，一个为控件列表(列表1)，另一个为属性列表(列表2)，还包括一个下拉选择框，下拉选择框提供新增控件的下拉列表。还设有操作按钮，包括一个增加按钮和一个移除按钮。

当用户需要增加控件时，点击增加按钮即可增加想要的控件，添加控件之后需要对新增加的控件进行实例化，并将其添加到目标界面中，新增加的控件也会出现在列表1中。当用户需要移除控件时，从列表1中选定一个控件，点击移除按钮即可，随后该控件将会从目标界面中移除，同时也从列表1中移除。当用户需要修改控件属性时，从列表1中选中一个控件，列表2会显示该控件的属性，此时可以对属性列表的属性值进行修改，例如位置、字体、颜色等，修改的属性值可以是控件的扩展字段的属性值，也可以是其他属性值。当然，扩展字段的属性值是用户需要重点设置的，不同控件属性值相同时对应的展示数据表中的数据字段也是不一样的。用户可以反复进行修改，直到页面布局满足要求为止。

布局完成之后，会进行控件数据绑定。即，逐一检索界面中的所有控件，检查控件中是否存在扩展字段，若存在，则检查扩展字段的属性值，将所述属性值与展示数据表中的数据字段进行匹配，若匹配成功，则将展示数据表中对应的数据赋给控件进行显示，此过程成为控件的数据绑定。当所有控件的所有扩展字段都完成数据绑定后，操作完成。

实施例四

请参照图4，本发明的实施例四与上述实施例的方法相对应，为一种界面动态布局系统，包括：

第一获取模块1，用于获取目标界面以及所述目标界面的布局配置文件；

创建模块2，用于根据所述布局配置文件中的控件信息，创建控件列表以及与控件一一对应的属性列表；

编辑模块3，用于对所述控件列表和/或属性列表进行编辑操作；

调整模块4，用于根据编辑后的控件列表和/或属性列表，调整所述目标界面。

进一步的，所述调整模块4具体包括：

实例化单元41，用于若所述编辑操作为在所述控件列表中添加控件，则在所述目标界面中将所述添加的控件进行实例化；

创建单元42，用于创建与所述添加的控件一一对应的属性列表；

移除单元43，用于若所述编辑操作为在所述控件列表中删除控件，则在所述目标界面中移除所述删除的控件；

修改单元44，用于若所述编辑操作为在所述属性列表中修改属性值，则根据修改后的属性值，对应调整所述属性列表对应的控件。

进一步的，还包括：

添加模块5，用于在属性列表中添加扩展字段；

第二获取模块6，用于获取记录有展示数据的展示数据表；

关联模块7，用于将所述展示数据表中的数据字段与预设的属性值进行关联，得到关联关系，所述关联关系中，不同数据字段对应的属性值不同。

进一步的，所述修改单元44具体包括：

匹配单元441，用于若所述编辑操作为修改所述属性列表的扩展字段的属性值，则将所述修改后的属性值在所述关联关系中进行匹配；

显示单元442，用于若所述扩展字段的属性值与所述关联关系中的一属性值匹配成功，则所述属性列表对应的控件显示所述一属性值对应的数据字段下的展示数据。

进一步的，还包括:

预览模块8，用于预览调整后的目标界面；

保存模块9，用于保存调整后的目标界面。

综上所述，本发明提供的一种界面动态布局方法及其系统，可用于Winform应用程序的动态布局，用户可根据自身需要对控件列表和属性列表进行相应的编辑，操作简单，能快速实现和充分满足用户对目标界面自定义的需求。

以上所述仅为本发明的实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等同变换，或直接或间接运用在相关的技术领域，均同理包括在本发明的专利保护范围内。

Claims

1.一种界面动态布局方法，其特征在于，包括：

获取目标界面以及所述目标界面的布局配置文件；

对所述控件列表和/或属性列表进行编辑操作；

根据编辑后的控件列表和/或属性列表，调整所述目标界面；

所述“根据编辑后的控件列表和/或属性列表，调整所述目标界面”具体为：

创建与所述添加的控件一一对应的属性列表；

若所述编辑操作为在所述属性列表中修改属性值，则根据修改后的属性值，对应调整所述属性列表对应的控件；

所述“根据所述布局配置文件中的控件信息，创建控件列表以及与控件一一对应的属性列表”之后，还包括：

在属性列表中添加扩展字段；不同的扩展字段预设不同的属性值；

获取记录有展示数据的展示数据表；所述展示数据表中记录了控件可以进行展示的所有数据；

2.根据权利要求1所述的界面动态布局方法，其特征在于，所述“若所述编辑操作为在所述属性列表中修改属性值，则根据修改后的属性值，对应调整所述属性列表对应的控件”具体为：

3.根据权利要求1或2所述的界面动态布局方法，其特征在于，所述“调整所述目标界面”之后还包括：

预览调整后的目标界面；

保存调整后的目标界面。

4.一种界面动态布局系统，其特征在于，包括：

调整模块，用于根据编辑后的控件列表和/或属性列表，调整所述目标界面；

所述调整模块具体包括：

修改单元，用于若所述编辑操作为在所述属性列表中修改属性值，则根据修改后的属性值，对应调整所述属性列表对应的控件；

还包括：

添加模块，用于在属性列表中添加扩展字段；不同的扩展字段预设不同的属性值；

第二获取模块，用于获取记录有展示数据的展示数据表；所述展示数据表中记录了控件可进行展示的所有数据；

5.根据权利要求4所述的界面动态布局系统，其特征在于，所述修改单元具体包括：

6.根据权利要求4或5所述的界面动态布局系统，其特征在于，还包括：

预览模块，用于预览调整后的目标界面；

保存模块，用于保存调整后的目标界面。