CN108958735A - 一种终端组件化应用的ui重构方法 - Google Patents

一种终端组件化应用的ui重构方法 Download PDF

Info

Publication number
CN108958735A
CN108958735A CN201810775257.2A CN201810775257A CN108958735A CN 108958735 A CN108958735 A CN 108958735A CN 201810775257 A CN201810775257 A CN 201810775257A CN 108958735 A CN108958735 A CN 108958735A
Authority
CN
China
Prior art keywords
sub
block
terminal
template data
information
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
CN201810775257.2A
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.)
Shandong Well Data Co Ltd
Original Assignee
Shandong Well Data 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 Shandong Well Data Co Ltd filed Critical Shandong Well Data Co Ltd
Priority to CN201810775257.2A priority Critical patent/CN108958735A/zh
Publication of CN108958735A publication Critical patent/CN108958735A/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/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)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Information Transfer Between Computers (AREA)
  • Stored Programmes (AREA)

Abstract

本发明公开了一种终端组件化应用的UI重构方法，步骤包括：（A）将终端的显示区域划分为若干等尺寸矩形单元，并设计用于展示信息的UI组件；（B）将所述显示区域划分为若干子区块，每个子区块由一个矩形单元或两个以上相连的矩形单元组成；（C）为每个子区块设置所要显示的UI组件，并对UI组件所显示的信息和形式进行配置，得到各子区块的UI组件配置信息；（D）将各子区块所对应的矩形单元信息和所对应的子区块的UI组件配置信息汇总为模板数据，并将该模板数据上传至服务器；（E）将模板数据下发至终端，终端根据模板数据生成UI。本发明实现了UI布局、显示风格的灵活配置以及模板的持久化存储，提高了终端显示配置效率和UI开发、维护效率。

Description

一种终端组件化应用的UI重构方法
技术领域
本发明涉及一种UI重构方法。
背景技术
目前Android终端界面开发需要通过底层编程实现，用户及开发者无法灵活布局显示界面，造成生产力的严重不足。传统的Android终端UI开发方法为通过工具重新编写代码，限制UI元素的位置和效果，进行编译后安装应用，具有固定的显示格局和风格展示，无法灵活展示信息。即便是像进行字体颜色这样小的调整也需要重新编写开发才能生效。
发明内容
本发明提出了一种终端组件化应用的UI重构方法，其目的是：实现UI布局和显示风格的灵活配置，方便UI的调整和重构。
一种终端组件化应用的UI重构方法，其特征在于步骤为：
(A)将终端的显示区域划分为若干等尺寸矩形单元，并设计用于展示信息的UI组件；
(B)将所述显示区域划分为若干子区块，每个子区块由一个矩形单元或两个以上相连的矩形单元组成；
(C)为每个子区块设置所要显示的UI组件，并对UI组件所显示的信息和形式进行配置，得到各子区块的UI组件配置信息；
(D)将各子区块所对应的矩形单元信息和所对应的子区块的UI组件配置信息汇总为模板数据，并将该模板数据上传至服务器；
(E)将模板数据下发至终端，终端根据模板数据生成UI。
作为本发明的进一步改进：设置有管理端，所述管理端通过鼠标拖拽和点击操作进行子区块的划分。
作为本发明的进一步改进：所述管理端还用于读取服务器的模板数据，根据模板数据生成UI，以可视化方式对UI进行修改，并根据修改后UI生成新的模板数据上传到服务器。
作为本发明的进一步改进：所述子区块为矩形，所述子区块对应的矩形单元信息包括子区块左上角的矩形单元的位置信息和子区块右下角的矩形单元的位置信息。
作为本发明的进一步改进：所述模板数据以JSON格式文件下发。
作为本发明的进一步改进：所述子区块的UI组件配置信息包括UI组件ID、UI组件类型和UI组件布局信息。
相对于现有技术，本发明具有以下积极效果：(1)本发明针对多媒体终端的复杂UI开发提供了简单的实现方案，方便终端UI的组件化开发；(2)本发明将显示区域划分为若干小的矩形单元，再用矩形单元组成子区块，实现界面的高自由度布局，灵活性强，可实现不同风格的展示；(3)采用BS架构，将模板数据持久化存储在服务端，通过模板下发快速实现多个终端的界面的统一配置，效率高；(4)通过对模板数据进行修改，或通过管理端进行可视化操作，都能对UI进行自定义调整，无需编写底层代码，操作简单，维护方便，同时提高了开发效率。
具体实施方式
下面详细说明本发明的技术方案：
一种Android终端组件化应用的UI重构方法，步骤为：
(A)将终端的显示区域划分为若干等尺寸矩形单元，如设置为三行四列的十二宫格形式；并设计用于展示信息的UI组件，所述UI组件为多种类型，可用于显示：文字、图片、表格或图文组合，类似于web组件，所述UI组件还能够适配不同的显示尺寸；
(B)将所述显示区域划分为若干子区块，每个子区块由一个矩形单元或两个以上相连的矩形单元组成；优选的，所述子区块为矩形；
(C)为每个子区块设置所要显示的UI组件，并对UI组件所显示的信息和形式进行配置，得到各子区块的UI组件配置信息；UI组件配置信息包括UI组件ID、UI组件类型和UI组件布局信息，还包括UI组件所要显示的图文等信息的数据源，显示的字体大小、颜色、背景颜色、边框宽度等；所述UI组件布局信息，指的是UI组件的位置信息，即坐标信息；
(D)将各子区块所对应的矩形单元信息和所对应的子区块的UI组件配置信息汇总为模板数据，并将该模板数据上传至服务器的数据库中；
本实施例中，子区块为矩形，所述子区块对应的矩形单元信息包括子区块左上角的矩形单元的位置信息和子区块右下角的矩形单元的位置信息，即根据对角坐标位置确定子区块在显示区域中的位置；
所述数据库为关系型数据库，分别有模版表，组件表，模板和组件关系表。
模版表配置如下：
组件表配置如下：
模板和组件关系表配置如下：
字段名称 注释
ID 自增编号
Mid 模板id
Zid 组件id
Zpositionstart 组件开始坐标
Zpositionend 组件结束坐标
Zbackgroud 组件背景颜色
Zfontsytle 组件字体
Zfontsize 组件字体大小
Zfontcolor 组件文字颜色
(E)将模板数据通过网络下发至终端，终端根据模板数据生成UI：根据子区块的矩形单元信息完成显示区域的划分和布局，然后根据UI组件配置信息将UI组件显示在各子区块中，即可完成终端UI的统一快速配置。
优选的，所述模板数据以JSON格式文件下发。
具体的，下发模版到终端设备采用的方式为：从数据库读取模板信息、组件信息以及二者间的关系后，根据其关联将上述信息组织成json文件，然后下发到设备。终端设备将json文件作为界面配置文件，采用java反射机制完成界面显示。
进一步的，还设置有管理端，所述管理端通过鼠标拖拽和点击操作进行子区块的划分，鼠标拖拽可以调整子区块的大小，也可以挪动子区块的位置，大小的调整和子区块的移动均以矩形单元的尺寸为单位，位置和大小确定后，自动记录向子区块所覆盖的矩形单元，尤其是左上角和右下角的矩形单元，以确定子区块的位置。
所述管理端还用于读取服务器的模板数据，根据模板数据生成UI，以可视化方式对UI进行修改，并根据修改后UI生成新的模板数据上传到服务器，从而完成模板的自定义修改。

Claims (6)

1.一种终端组件化应用的UI重构方法，其特征在于步骤为：
（A）将终端的显示区域划分为若干等尺寸矩形单元，并设计用于展示信息的UI组件；
（B）将所述显示区域划分为若干子区块，每个子区块由一个矩形单元或两个以上相连的矩形单元组成；
（C）为每个子区块设置所要显示的UI组件，并对UI组件所显示的信息和形式进行配置，得到各子区块的UI组件配置信息；
（D）将各子区块所对应的矩形单元信息和所对应的子区块的UI组件配置信息汇总为模板数据，并将该模板数据上传至服务器；
（E）将模板数据下发至终端，终端根据模板数据生成UI。
2.如权利要求1所述的终端组件化应用的UI重构方法，其特征在于：设置有管理端，所述管理端通过鼠标拖拽和点击操作进行子区块的划分。
3.如权利要求2所述的终端组件化应用的UI重构方法，其特征在于：所述管理端还用于读取服务器的模板数据，根据模板数据生成UI，以可视化方式对UI进行修改，并根据修改后UI生成新的模板数据上传到服务器。
4.如权利要求1所述的终端组件化应用的UI重构方法，其特征在于：所述子区块为矩形，所述子区块对应的矩形单元信息包括子区块左上角的矩形单元的位置信息和子区块右下角的矩形单元的位置信息。
5.如权利要求1所述的终端组件化应用的UI重构方法，其特征在于：所述模板数据以JSON格式文件下发。
6.如权利要求1至5任一所述的终端组件化应用的UI重构方法，其特征在于：所述子区块的UI组件配置信息包括UI组件ID、UI组件类型和UI组件布局信息。
CN201810775257.2A 2018-07-16 2018-07-16 一种终端组件化应用的ui重构方法 Pending CN108958735A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201810775257.2A CN108958735A (zh) 2018-07-16 2018-07-16 一种终端组件化应用的ui重构方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201810775257.2A CN108958735A (zh) 2018-07-16 2018-07-16 一种终端组件化应用的ui重构方法

Publications (1)

Publication Number Publication Date
CN108958735A true CN108958735A (zh) 2018-12-07

Family

ID=64481298

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201810775257.2A Pending CN108958735A (zh) 2018-07-16 2018-07-16 一种终端组件化应用的ui重构方法

Country Status (1)

Country Link
CN (1) CN108958735A (zh)

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111694568A (zh) * 2019-03-15 2020-09-22 阿里巴巴集团控股有限公司 一种ui卡片文档的生成方法和装置
CN114442973A (zh) * 2020-11-04 2022-05-06 南方电网电动汽车服务有限公司 屏幕显示方法、装置、计算机设备和存储介质
CN115981588A (zh) * 2023-03-16 2023-04-18 中国邮电器材集团有限公司 一种多终端数据显示方法、设备和系统

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103336691A (zh) * 2013-06-29 2013-10-02 安科智慧城市技术（中国）有限公司 一种基于Android的动态布局方法及系统
CN105760146A (zh) * 2014-12-16 2016-07-13 上海天脉聚源文化传媒有限公司 一种用户界面布局方法及系统
CN105824517A (zh) * 2015-01-07 2016-08-03 阿里巴巴集团控股有限公司 一种桌面的实现方法和装置
CN106708484A (zh) * 2015-11-13 2017-05-24 阿里巴巴集团控股有限公司 一种建立页面的方法和装置

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103336691A (zh) * 2013-06-29 2013-10-02 安科智慧城市技术（中国）有限公司 一种基于Android的动态布局方法及系统
CN105760146A (zh) * 2014-12-16 2016-07-13 上海天脉聚源文化传媒有限公司 一种用户界面布局方法及系统
CN105824517A (zh) * 2015-01-07 2016-08-03 阿里巴巴集团控股有限公司 一种桌面的实现方法和装置
CN106708484A (zh) * 2015-11-13 2017-05-24 阿里巴巴集团控股有限公司 一种建立页面的方法和装置

Cited By (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111694568A (zh) * 2019-03-15 2020-09-22 阿里巴巴集团控股有限公司 一种ui卡片文档的生成方法和装置
CN111694568B (zh) * 2019-03-15 2023-04-07 阿里巴巴集团控股有限公司 一种ui卡片文档的生成方法和装置
CN114442973A (zh) * 2020-11-04 2022-05-06 南方电网电动汽车服务有限公司 屏幕显示方法、装置、计算机设备和存储介质
CN115981588A (zh) * 2023-03-16 2023-04-18 中国邮电器材集团有限公司 一种多终端数据显示方法、设备和系统
CN115981588B (zh) * 2023-03-16 2023-09-26 中国邮电器材集团有限公司 一种多终端数据显示方法、设备和系统

Similar Documents

Publication Publication Date Title
CN108958735A (zh) 一种终端组件化应用的ui重构方法
CN104090979B (zh) 一种网页编辑方法及装置
CN108228119A (zh) 基于hxml的打印方法、终端设备及存储介质
CN105446744A (zh) 基于互联网的展示物料系统及展示物料制作方法
CN105045775A (zh) 一种指定格式的Excel文档生成方法及装置
CN104142826A (zh) 页面的构建方法、装置及系统
CN103279454A (zh) 文档自动生成方法、装置及系统
CN109388396A (zh) 页面生成方法、装置、计算机设备和存储介质
CN102663103A (zh) 可配置的自动化生成数据库和数据访问的方法
CN104267964B (zh) 一种模板生成装置
CN104797084B (zh) 印制电路板布局的方法及装置
CN103197932B (zh) 一种开发无模式文档型数据库应用的业务组件模型
CN107133001A (zh) 一种面单打印方法、装置及客户端
CN110969004B (zh) 图文自动排版方法及系统、服务器及介质
CN103778201A (zh) 基于流程模型配置的大屏可视化展示系统及方法
CN108090037A (zh) 自动排版方法和装置
CN108153919A (zh) Dbf数据导出平台及其导出方法
CN102521551B (zh) 一种实现ic卡个人化发行装置及方法
CN110766369A (zh) 一种可视化网页智能仓储库位编排系统
CN114896691A (zh) 一种基于mbd设备模型的三维标注方法
CN103034623A (zh) 页面切分的方法和装置
CN104217170A (zh) 一种文档只读方法及装置
CN104063545A (zh) 一种动态展示流程跟踪图的方法及系统
CN101131712A (zh) 一种印刷电路板器件高度的输出方法及装置
CN105573769A (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
WD01 Invention patent application deemed withdrawn after publication
WD01 Invention patent application deemed withdrawn after publication

Application publication date: 20181207