CN107678740A - 一种ui业务组件的封装方法及计算机设备 - Google Patents

一种ui业务组件的封装方法及计算机设备 Download PDF

Info

Publication number
CN107678740A
CN107678740A CN201711014122.6A CN201711014122A CN107678740A CN 107678740 A CN107678740 A CN 107678740A CN 201711014122 A CN201711014122 A CN 201711014122A CN 107678740 A CN107678740 A CN 107678740A
Authority
CN
China
Prior art keywords
control
data set
collection
type
packing
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
Application number
CN201711014122.6A
Other languages
English (en)
Inventor
施政
张扬嵩
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Fujian Star Software Co Ltd
Original Assignee
Fujian Star Software Co Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Fujian Star Software Co Ltd filed Critical Fujian Star Software Co Ltd
Priority to CN201711014122.6A priority Critical patent/CN107678740A/zh
Publication of CN107678740A publication Critical patent/CN107678740A/zh
Pending legal-status Critical Current

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/20—Software design
    • G06F8/24—Object-oriented
    • 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

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)
  • Mobile Radio Communication Systems (AREA)

Abstract

本发明提供一种UI业务组件的封装方法，包括：步骤1、对窗口的控件集的创建与布局进行封装，包括传入创建控件集的数据集，根据所述数据集中每一对象数据创建一个控件，并按网格风格布局，所述数据集中每一对象数据包括控件类型、控件属性、控件值、控件名称、控件标签、控件约束类型和控件事件处理回调方法名称；步骤2、在窗口界面程序代码中引入控件集的创建和布局封装方法，通过生成需要创建的控件集的数据集，并调用控件集的创建和布局封装方法把所述数据集对应的控件集创建并布局到所述窗口界面中。本发明提高粗粒度控件集代码复用率，减少窗口界面控件创建布局的程序代码，提高开发效率。

Description

一种UI业务组件的封装方法及计算机设备
技术领域
本发明涉及一种UI业务组件的封装方法。
背景技术
目前控件已经非常多，有标签、文本框、日期选择、下拉框、单多选框、树形、表格、按钮等等，并且还有很多在此基础的一些改进控件，虽然这些控件相当好用，但是直接使用这些控件来实现程序的功能，会造成很多冗余的控件程序代码，如每个窗口都有各种控件的创建、布局及对这些控件事件处理代码，就需要在每个窗口对应的程序代码里面进行控件的创建布局，会产生大量的程序代码，控件代码复用率不高。
发明内容
本发明要解决的技术问题之一，在于提供一种UI业务组件的封装方法，提高粗粒度控件集代码复用率，减少窗口界面控件创建布局的程序代码，提高开发效率。
本发明要解决的技术问题之一是这样实现的：一种UI业务组件的封装方法，包括：
步骤1、对窗口的控件集的创建与布局进行封装，包括传入创建控件集的数据集，根据所述数据集中每一对象数据创建一个控件，并按网格风格布局，所述数据集中每一对象数据包括控件类型、控件属性、控件值、控件名称、控件标签、控件约束类型和控件事件处理回调方法名称；
步骤2、在窗口界面程序代码中引入控件集的创建和布局封装方法，通过生成需要创建的控件集的数据集，并调用控件集的创建和布局封装方法把所述数据集对应的控件集创建并布局到所述窗口界面中。
进一步的，所述控件类型包括文本框、下拉框、单选框、多选框、表格列表和树形控件。
进一步的，若所述控件类型为文本框，则再处理控件约束类型，所述控件约束类型包括长度；
若所述控件类型为下拉框、单选框或多选框，则对应的控件值为一个映射集合；
若所述控件类型为表格，则对应的控件值为一个表格对象数组，所述表格对象数组中每个对象包括表列头名称、表格数据、列的渲染回调方法；
若所述控件类型为树形控件，则对应的控件值为节点对象数组，且所述节点对象数组中每个对象包括节点数据、名称、节点事件回调方法。
进一步的，在“根据所述数据集中每一对象数据创建一个控件”之前还包括：创建一个父容器控件。
本发明要解决的技术问题之二，在于提供一种计算机设备，提高粗粒度控件集代码复用率，减少窗口界面控件创建布局的程序代码，提高开发效率。
本发明要解决的技术问题之二是这样实现的：一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现以下步骤：
步骤1、对窗口的控件集的创建与布局进行封装，包括传入创建控件集的数据集，根据所述数据集中每一对象数据创建一个控件，并按网格风格布局，所述数据集中每一对象数据包括控件类型、控件属性、控件值、控件名称、控件标签、控件约束类型和控件事件处理回调方法名称；
步骤2、在窗口界面程序代码中引入控件集的创建和布局封装方法，通过生成需要创建的控件集的数据集，并调用控件集的创建和布局封装方法把所述数据集对应的控件集创建并布局到所述窗口界面中。
进一步的，所述控件类型包括文本框、下拉框、单选框、多选框、表格列表和树形控件。
进一步的，若所述控件类型为文本框，则再处理控件约束类型，所述控件约束类型包括长度；
若所述控件类型为下拉框、单选框或多选框，则对应的控件值为一个映射集合；
若所述控件类型为表格，则对应的控件值为一个表格对象数组，所述表格对象数组中每个对象包括表列头名称、表格数据、列的渲染回调方法；
若所述控件类型为树形控件，则对应的控件值为节点对象数组，且所述节点对象数组中每个对象包括节点数据、名称、节点事件回调方法。
进一步的，在“根据所述数据集中每一对象数据创建一个控件”之前还包括：创建一个父容器控件。
本发明具有如下优点：通过业务组件封装，实现控件集的粗粒度复用，提高程序开发效率，减少开发时间，窗口界面程序只需要组织数据和调用封装方法即可创建、布局控件集合在窗口界面上，大大减少了窗口界面上控件创建、布局程序代码，减少开发周期，节约开发成本。
附图说明
下面参照附图结合实施例对本发明作进一步的说明。
图1为本发明方法执行流程图。
具体实施方式
请参阅图1，一种UI业务组件的封装方法，包括：
步骤1、对窗口的控件集的创建与布局进行封装，包括传入创建控件集的数据集，根据所述数据集中每一对象数据创建一个控件，并按网格风格布局，所述数据集中每一对象数据包括控件类型、控件属性、控件值、控件名称、控件标签、控件约束类型和控件事件处理回调方法名称；
步骤2、在窗口界面程序代码中引入控件集的创建和布局封装方法，通过生成需要创建的控件集的数据集，并调用控件集的创建和布局封装方法把所述数据集对应的控件集创建并布局到所述窗口界面中。
较佳的，所述控件类型包括文本框、下拉框、单选框、多选框、表格列表和树形控件。
较佳的，若所述控件类型为文本框，则再处理控件约束类型，所述控件约束类型包括长度；
若所述控件类型为下拉框、单选框或多选框，则对应的控件值为一个映射集合；
若所述控件类型为表格，则对应的控件值为一个表格对象数组，所述表格对象数组中每个对象包括表列头名称、表格数据、列的渲染回调方法；
若所述控件类型为树形控件，则对应的控件值为节点对象数组，且所述节点对象数组中每个对象包括节点数据、名称、节点事件回调方法。
较佳的，在“根据所述数据集中每一对象数据创建一个控件”之前还包括：创建一个父容器控件。
本发明的一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现以下步骤：
步骤1、对窗口的控件集的创建与布局进行封装，包括传入创建控件集的数据集，根据所述数据集中每一对象数据创建一个控件，并按网格风格布局，所述数据集中每一对象数据包括控件类型、控件属性、控件值、控件名称、控件标签、控件约束类型和控件事件处理回调方法名称；
步骤2、在窗口界面程序代码中引入控件集的创建和布局封装方法，通过生成需要创建的控件集的数据集，并调用控件集的创建和布局封装方法把所述数据集对应的控件集创建并布局到所述窗口界面中。
较佳的，所述控件类型包括文本框、下拉框、单选框、多选框、表格列表和树形控件。
较佳的，若所述控件类型为文本框，则再处理控件约束类型，所述控件约束类型包括长度等(如必填等)；
若所述控件类型为下拉框、单选框或多选框，则对应的控件值为一个映射集合；
若所述控件类型为表格，则对应的控件值为一个表格对象数组，所述表格对象数组中每个对象包括表列头名称、表格数据、列的渲染回调方法；
若所述控件类型为树形控件，则对应的控件值为节点对象数组，且所述节点对象数组中每个对象包括节点数据、名称、节点事件回调方法。
较佳的，在“根据所述数据集中每一对象数据创建一个控件”之前还包括：创建一个父容器控件，便于下拉框等控件的创建。
下面结合一具体实施例对本发明做进一步说明：
预先对窗口的控件集的创建与布局进行封装，之后在窗口界面程序代码中引入控件集的创建和布局封装方法，只要按预先规定的格式生成创建的控件集所需的数据集，调用控件集的创建和布局封装方法把所述数据集对应的控件集创建并布局到所述窗口界面中即可。
其中，所述数据集中的每一对象信息包括：控件类型、控件属性、控件值、控件名称、控件标签、控件约束类型和控件事件处理回调方法名称；在一个窗口界面中根据数据集调用控件集的创建、布局封装方法执行如下：
先创建一个父容器控件，然后循环数据集中每一对象创建一个控件，并按网格风格进行填充，例如按每一行填充一个控件，直至创建完所有控件；
在创建一个控件时，先处理控件类型，所述控件类型包括文本框、下拉框、单选框、多选框、表格列表和树形控件(如目录等)；
再处理控件约束类型，例如必填、长度、数据类型等用于约束控件的；
当控件类型为下拉框、单选框或多选框时，对应的控件值为一个映射集合，当控件类型为表格时，对应的控件值为一个表格对象数组，表格对象数组中每个对象包括表列头名称、表格数据、列的渲染回调方法，当控件类型为树形控件，则对应的控件值为节点对象数组，且所述节点对象数组中每个对象包括节点数据、名称、节点事件回调方法；
将上述不为空的控件值展现到对应的控件中，若控件值为空时，则展现空白值；
且通过控件标签提醒用户对应控件填写的具体要求，例如当一个输入框需要被输入姓名，且要求为中文字符时，则在该输入框上标注标签内容为“<姓名>，请填写中文字符”。
开发人员只需要创建一个简单的窗口界面框架，在窗口界面的程序代码中生成实际参数的数据集并调用控件封装方法实现对所有控件的创建和布局，即根据业务数据和对业务数据进行操作的方法对控件进行创建、布局和事件处理的封装，调用其中封装方法进行控件的创建，根据回调方法对控件进行相应的操作，这样就不需要在每个窗口对应的程序代码里进行控件的创建、布局操作，减少了很多繁琐的代码，达到界面业务级重用和界面控件创建和程序业务逻辑的松耦合。
虽然以上描述了本发明的具体实施方式，但是熟悉本技术领域的技术人员应当理解，我们所描述的具体的实施例只是说明性的，而不是用于对本发明的范围的限定，熟悉本领域的技术人员在依照本发明的精神所作的等效的修饰以及变化，都应当涵盖在本发明的权利要求所保护的范围内。

Claims (8)

1.一种UI业务组件的封装方法，其特征在于：包括：
步骤1、对窗口的控件集的创建与布局进行封装，包括传入创建控件集的数据集，根据所述数据集中每一对象数据创建一个控件，并按网格风格布局，所述数据集中每一对象数据包括控件类型、控件属性、控件值、控件名称、控件标签、控件约束类型和控件事件处理回调方法名称；
步骤2、在窗口界面程序代码中引入控件集的创建和布局封装方法，通过生成需要创建的控件集的数据集，并调用控件集的创建和布局封装方法把所述数据集对应的控件集创建并布局到所述窗口界面中。
2.根据权利要求1所述的一种UI业务组件的封装方法，其特征在于：所述控件类型包括文本框、下拉框、单选框、多选框、表格列表和树形控件。
3.根据权利要求1所述的一种UI业务组件的封装方法，其特征在于：
若所述控件类型为文本框，则再处理控件约束类型，所述控件约束类型包括长度；
若所述控件类型为下拉框、单选框或多选框，则对应的控件值为一个映射集合；
若所述控件类型为表格，则对应的控件值为一个表格对象数组，所述表格对象数组中每个对象包括表列头名称、表格数据、列的渲染回调方法；
若所述控件类型为树形控件，则对应的控件值为节点对象数组，且所述节点对象数组中每个对象包括节点数据、名称、节点事件回调方法。
4.根据权利要求1所述的一种UI业务组件的封装方法，其特征在于：在“根据所述数据集中每一对象数据创建一个控件”之前还包括：创建一个父容器控件。
5.一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现以下步骤：
步骤1、对窗口的控件集的创建与布局进行封装，包括传入创建控件集的数据集，根据所述数据集中每一对象数据创建一个控件，并按网格风格布局，所述数据集中每一对象数据包括控件类型、控件属性、控件值、控件名称、控件标签、控件约束类型和控件事件处理回调方法名称；
步骤2、在窗口界面程序代码中引入控件集的创建和布局封装方法，通过生成需要创建的控件集的数据集，并调用控件集的创建和布局封装方法把所述数据集对应的控件集创建并布局到所述窗口界面中。
6.根据权利要求5所述的一种计算机设备，其特征在于：所述控件类型包括文本框、下拉框、单选框、多选框、表格列表和树形控件。
7.根据权利要求5所述的一种计算机设备，其特征在于：若所述控件类型为文本框，则再处理控件约束类型，所述控件约束类型包括长度；
若所述控件类型为下拉框、单选框或多选框，则对应的控件值为一个映射集合；
若所述控件类型为表格，则对应的控件值为一个表格对象数组，所述表格对象数组中每个对象包括表列头名称、表格数据、列的渲染回调方法；
若所述控件类型为树形控件，则对应的控件值为节点对象数组，且所述节点对象数组中每个对象包括节点数据、名称、节点事件回调方法。
8.根据权利要求5所述的一种计算机设备，其特征在于：在“根据所述数据集中每一对象数据创建一个控件”之前还包括：创建一个父容器控件。
CN201711014122.6A 2017-10-26 2017-10-26 一种ui业务组件的封装方法及计算机设备 Pending CN107678740A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201711014122.6A CN107678740A (zh) 2017-10-26 2017-10-26 一种ui业务组件的封装方法及计算机设备

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201711014122.6A CN107678740A (zh) 2017-10-26 2017-10-26 一种ui业务组件的封装方法及计算机设备

Publications (1)

Publication Number Publication Date
CN107678740A true CN107678740A (zh) 2018-02-09

Family

ID=61142287

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201711014122.6A Pending CN107678740A (zh) 2017-10-26 2017-10-26 一种ui业务组件的封装方法及计算机设备

Country Status (1)

Country Link
CN (1) CN107678740A (zh)

Cited By (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109799994A (zh) * 2019-01-14 2019-05-24 腾讯科技（武汉）有限公司 一种终端组件生成方法及装置
WO2020006910A1 (zh) * 2018-07-02 2020-01-09 平安科技（深圳）有限公司 业务组件式开发方法、装置、计算机设备及存储介质
CN111240680A (zh) * 2020-01-14 2020-06-05 广州华多网络科技有限公司 按钮创建方法、装置、计算机设备和存储介质
CN111857717A (zh) * 2020-07-29 2020-10-30 网易（杭州）网络有限公司 Ui编辑方法、装置、设备及计算机可读存储介质
CN113721812A (zh) * 2021-08-05 2021-11-30 中核武汉核电运行技术股份有限公司 基于react的核电厂数据下拉框组件创建方法及***
CN113761415A (zh) * 2020-11-24 2021-12-07 北京沃东天骏信息技术有限公司 一种页面展示方法和装置

Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102043626A (zh) * 2010-12-23 2011-05-04 中国农业银行股份有限公司 extjs组件的封装方法及装置、用户界面的生成方法及***
CN103309659A (zh) * 2013-05-24 2013-09-18 天津市天安怡和信息技术有限公司 基于富客户端的用户界面动态生成方法及其生成装置
US20130263280A1 (en) * 2012-01-09 2013-10-03 Stephen W. Cote Secure Dynamic Page Content and Layouts Apparatuses, Methods and Systems
CN103902256A (zh) * 2012-12-24 2014-07-02 航天信息股份有限公司 一种界面的生成***和方法
CN103995698A (zh) * 2014-05-05 2014-08-20 重庆斯欧信息技术有限公司 一种面向业务的应用表单敏捷开发方法及***
CN105426204A (zh) * 2015-11-05 2016-03-23 浪潮软件集团有限公司 一种基于国产CPU、操作***和浏览器的Web高速加载渲染方法
CN106201458A (zh) * 2016-06-27 2016-12-07 上海波汇科技股份有限公司 一种灵活可配的界面生成方法和***

Patent Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102043626A (zh) * 2010-12-23 2011-05-04 中国农业银行股份有限公司 extjs组件的封装方法及装置、用户界面的生成方法及***
US20130263280A1 (en) * 2012-01-09 2013-10-03 Stephen W. Cote Secure Dynamic Page Content and Layouts Apparatuses, Methods and Systems
CN103902256A (zh) * 2012-12-24 2014-07-02 航天信息股份有限公司 一种界面的生成***和方法
CN103309659A (zh) * 2013-05-24 2013-09-18 天津市天安怡和信息技术有限公司 基于富客户端的用户界面动态生成方法及其生成装置
CN103995698A (zh) * 2014-05-05 2014-08-20 重庆斯欧信息技术有限公司 一种面向业务的应用表单敏捷开发方法及***
CN105426204A (zh) * 2015-11-05 2016-03-23 浪潮软件集团有限公司 一种基于国产CPU、操作***和浏览器的Web高速加载渲染方法
CN106201458A (zh) * 2016-06-27 2016-12-07 上海波汇科技股份有限公司 一种灵活可配的界面生成方法和***

Cited By (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2020006910A1 (zh) * 2018-07-02 2020-01-09 平安科技（深圳）有限公司 业务组件式开发方法、装置、计算机设备及存储介质
CN109799994A (zh) * 2019-01-14 2019-05-24 腾讯科技（武汉）有限公司 一种终端组件生成方法及装置
CN111240680A (zh) * 2020-01-14 2020-06-05 广州华多网络科技有限公司 按钮创建方法、装置、计算机设备和存储介质
CN111240680B (zh) * 2020-01-14 2023-06-06 广州华多网络科技有限公司 按钮创建方法、装置、计算机设备和存储介质
CN111857717A (zh) * 2020-07-29 2020-10-30 网易（杭州）网络有限公司 Ui编辑方法、装置、设备及计算机可读存储介质
CN111857717B (zh) * 2020-07-29 2023-09-12 网易（杭州）网络有限公司 Ui编辑方法、装置、设备及计算机可读存储介质
CN113761415A (zh) * 2020-11-24 2021-12-07 北京沃东天骏信息技术有限公司 一种页面展示方法和装置
CN113721812A (zh) * 2021-08-05 2021-11-30 中核武汉核电运行技术股份有限公司 基于react的核电厂数据下拉框组件创建方法及***

Similar Documents

Publication Publication Date Title
CN107678740A (zh) 一种ui业务组件的封装方法及计算机设备
US20130238982A1 (en) Methods and apparatus for editing an application webpage
CN104685466B (zh) 用于提供多个视图的浏览器级背景页面
CN108984172B (zh) 一种界面文件的生成方法及装置
CN102495735A (zh) web 端UI组件应用框架***
CN105354237A (zh) 一种业务数据展示方法
CN108228288A (zh) 一种组件***及其调用方法和装置
CN105637478A (zh) 原生移动应用代码的计算机辅助开发
CN104750472B (zh) 一种终端应用的资源包管理方法和装置
CN115712413B (zh) 低代码开发方法、装置、设备及存储介质
CN105701183A (zh) 一种用户个性化模板的实现方法及装置
CN107943455A (zh) 一种基于json数据格式的表单渲染***
CN106528115A (zh) 界面的可视化开发方法及装置
WO2024066825A1 (zh) 页面项目开发方法、装置、设备、介质及产品
CN113641719A (zh) 数据处理方法、装置、计算机及存储介质
CN113407254A (zh) 表单生成方法、装置、电子设备及存储介质
CN106293658A (zh) 一种界面组件生成方法及其设备
CN108241491A (zh) 一种图文混排方法及装置
CN117075893A (zh) 一种基于vue的移动端页面生成方法及***
CN101595470A (zh) 用于管理***规范的方法和装置
CN105808236B (zh) Hmi画面元素组成设计及代码生成方法
CN106484413A (zh) 文档编辑器及文档编辑方法
CN109800368A (zh) H5导航栏按钮配置方法、装置、计算机设备及存储介质
CN106843819A (zh) 对象序列化的方法及装置
CN113688141B (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