CN109144506A - 一种可配置的ui界面生成方法 - Google Patents
一种可配置的ui界面生成方法 Download PDFInfo
- Publication number
- CN109144506A CN109144506A CN201810732166.0A CN201810732166A CN109144506A CN 109144506 A CN109144506 A CN 109144506A CN 201810732166 A CN201810732166 A CN 201810732166A CN 109144506 A CN109144506 A CN 109144506A
- Authority
- CN
- China
- Prior art keywords
- interface
- json
- configuration file
- initial configuration
- 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.)
- Withdrawn
Links
- 238000000034 method Methods 0.000 title claims abstract description 16
- 238000004891 communication Methods 0.000 claims abstract description 13
- 238000012986 modification Methods 0.000 claims abstract description 4
- 230000004048 modification Effects 0.000 claims abstract description 4
- 238000005516 engineering process Methods 0.000 claims description 7
- 230000003139 buffering effect Effects 0.000 claims description 2
- 230000002452 interceptive effect Effects 0.000 claims 1
- 238000011161 development Methods 0.000 description 3
- 230000006870 function Effects 0.000 description 2
- 241000208340 Araliaceae Species 0.000 description 1
- 235000005035 Panax pseudoginseng ssp. pseudoginseng Nutrition 0.000 description 1
- 235000003140 Panax quinquefolius Nutrition 0.000 description 1
- 238000002474 experimental method Methods 0.000 description 1
- 235000008434 ginseng Nutrition 0.000 description 1
- 238000005286 illumination Methods 0.000 description 1
- 238000005259 measurement Methods 0.000 description 1
- 238000010295 mobile communication Methods 0.000 description 1
- 238000012544 monitoring process Methods 0.000 description 1
- 230000006855 networking Effects 0.000 description 1
- 238000009877 rendering Methods 0.000 description 1
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
-
- 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/71—Version control; Configuration management
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)
- Computer Security & Cryptography (AREA)
- Stored Programmes (AREA)
Abstract
本发明公开了一种可配置的UI界面生成方法，使用领域特定语言描述数据源和用户交互界面，所述领域特定语言采用Json脚本格式，所述UI界面实现步骤，包括设定有UI界面参数信息的Json初始配置文件，所述UI界面程序通过调用Json初始配置文件中的参数信息对移动通讯终端的UI进行配置；还包括UI界面修改步骤，通过修改所述Json初始配置文件中的参数信息，并重启UI界面程序，实现所述UI界面的重新配置。本发明使得非开发人员或用户可通过简单配置JSON文本生成可交互的UI界面。在react native上抽象出数据层和基于组件的DSL。DSL用于描述数据源和界面，屏蔽了界面的形成方式和数据获取方式这些底层细节。后续只需要通过编写DSL就可以获取数据并生成相应的设备控制界面。
Description
技术领域
本发明涉及物联网技术领域，尤其涉及一种可配置的UI界面生成方法。
背景技术
物联网是现代信息技术发展到一定阶段后出现的一种聚合性应用技术。物联网通过约定的协议，把任何物品和互联网连接起来，进行信息交换和通信，以实现智能化识别、定位、跟踪、监控和管理的网络。随着计算机和网络技术的发展，物联网领域发生了深刻的技术变革。其功能不仅仅限制在温度、压力、湿度、光照强度等这些数据的测量上。现如今，随着网络发展和用户多样化的需求，产生了各种各样的消费产品，例如：智能手机、移动平板、数码相机和穿戴设备等。同样，在特定领域，物联网***不仅能够灵活的接入和访问各种设备，而且能满足用户的特殊需求。
现有移动通讯终端通常都支持用户界面(UI)配置功能。常见的移动通讯终端UI配置的实现方法是，通过修改程序文件，如*.C(C语言源代码文件)或*.cpp(C++源代码文件)等其他代码文件，*.H(同名.C文件中定义的变量、数组、函数的声明)或其他文件，或者其他资源文件，然后通过编译成二进制文件，把二进制文件下载到移动通讯终端的内存空间(如FLASH)，移动通讯终端在运行的时候对FLASH的代码区进行执行读取来实现。
现有的基于移动设备的物联网设备控制界面，用于操控基于智能模块联网的设备；每个设备的控制面板复用性低，且随着接入设备量的增多，开发周期长，开发人员也会跟着增加。
发明内容
本发明使得非开发人员或用户可通过简单配置JSON文本生成可交互的UI界面。在react native上抽象出数据层和基于组件的DSL。DSL用于描述数据源和界面，屏蔽了界面的形成方式和数据获取方式这些底层细节。后续只需要通过编写DSL就可以获取数据并生成相应的设备控制界面。
本发明所述的可配置的UI界面生成方法，使用领域特定语言描述数据源和用户交互界面，所述领域特定语言采用Json脚本格式，所述UI界面实现步骤，包括设定有UI界面参数信息的Json初始配置文件，所述UI界面程序通过调用Json初始配置文件中的参数信息对移动通讯终端的UI进行配置；还包括UI界面修改步骤，通过修改所述Json初始配置文件中的参数信息，并重启UI界面程序，实现所述UI界面的重新配置。
较佳地，所述UI界面配置步骤具体包括以下步骤：
步骤11)编写UI界面的Json脚本；
步骤12)设定有UI界面参数信息的Json初始配置文件；
步骤13)编译UI界面Json脚本；
步骤14)将步骤12)中的Json初始配置文件和步骤13)的编译结果传输至移动通讯终端的文件***中；
步骤15)移动通讯终端开机进入工作状态，运行经过编译的UI界面Json脚本，通过对步骤12)中的Json初始配置文件的解析，渲染出所述UI界面。
较佳地，所述UI界面重新配置步骤具体包括以下步骤：
步骤21)修改所述Json初始配置文件中的参数信息；
步骤22)将修改后的所述Json初始配置文件传输至移动通讯终端的文件***中，替换原初始配置文件；
步骤23)重启经过编译的UI界面Json脚本，实现UI界面的重新配置。
较佳地，所述Json初始配置文件中的参数信息包括UI界面元素的位置、颜色、高度、宽度属性。
较佳地，所述Json初始配置文件中的参数信息包括对用户操作的反应。
较佳地，所述根据所述用户操作反应的配置信息，在所述UI界面分别显示或隐藏界面元素的步骤包括：若控件的配置信息为第一配置信息，在所述UI界面显示所述配置信息为第一配置信息的控件；若控件的配置信息为第二配置信息，在所述UI界面隐藏所述配置信息为第二配置信息的控件。
较佳地，所述参数信息包括设备端的本地信息和管理服务器端的远程信息。
较佳地，所述UI界面的显示包括以下步骤：
通过读取Json配置文件，得到所述待显示UI界面的元素节点；
根据所述UI界面的元素节点创建与所述待显示UI界面对应的树形控件；
配置所述UI界面的与所述树形控件对应的渲染列表；以及
根据所述渲染列表，采用双缓冲技术对所述树形控件进行渲染。
附图说明
图1为本发明实施提供的一种程序调用流程图。
具体实施方式
下面结合附图和具体实施方式对本发明做进一步描述。
如图1所示，本发明所述的一种可配置的UI界面生成方法，通过DSL领域特定语言构建JavaScript Bundle，然后由JS Bundle调用数据层的各种数据资源，数据层的数据资源再调用React Native，最后React Native再分别Render成Android和IOS平台上的具体UI界面。
在本发明的一个较佳实施例中，通过DSL加数据层生成UI设备控制界面，通过json格式这种简单的DSL为例：
其中data中jsbridge表示同过jsbridge方式向客户端获取数据，也可以填server向服务端获取数据。
最终渲染成一个宽高100px的，背景红色的按钮，当点击时，弹出文案。
在本发明的另一个较佳实施例中，渲染了两个按钮，当点击任意一个按钮，就会弹出用户所按按钮的颜色，具体Json脚本如下：
本发明使得非开发人员或用户可通过简单配置JSON文本生成可交互的UI界面。在react native上抽象出数据层和基于组件的DSL。DSL用于描述数据源和界面，屏蔽了界面的形成方式和数据获取方式这些底层细节。后续只需要通过编写DSL就可以获取数据并生成相应的设备控制界面。
以上详细描述了本发明的较佳具体实施例。应当理解，本领域的普通技术无需创造性劳动就可以根据本发明的构思作出诸多修改和变化。因此，凡本技术领域中技术人员依本发明的构思在现有技术的基础上通过逻辑分析、推理或者有限的实验可以得到的技术方案，皆应在由权利要求书所确定的保护范围内。
Claims (8)
1.一种可配置的UI界面生成方法，其特征在于，使用领域特定语言描述数据源和用户交互界面，所述领域特定语言采用Json脚本格式，所述UI界面实现步骤，包括设定有UI界面参数信息的Json初始配置文件，所述UI界面程序通过调用Json初始配置文件中的参数信息对移动通讯终端的UI进行配置；还包括UI界面修改步骤，通过修改所述Json初始配置文件中的参数信息，并重启UI界面程序，实现所述UI界面的重新配置。
2.如权利要求1所述的可配置的UI界面生成方法，其特征在于，所述UI界面配置步骤具体包括以下步骤：
步骤11)编写UI界面的Json脚本；
步骤12)设定有UI界面参数信息的Json初始配置文件；
步骤13)编译UI界面Json脚本；
步骤14)将步骤12)中的Json初始配置文件和步骤13)的编译结果传输至移动通讯终端的文件***中；
步骤15)移动通讯终端开机进入工作状态，运行经过编译的UI界面Json脚本，通过对步骤12)中的Json初始配置文件的解析，渲染出所述UI界面。
3.如权利要求2所述的可配置的UI界面生成方法，其特征在于，所述UI界面重新配置步骤具体包括以下步骤：
步骤21)修改所述Json初始配置文件中的参数信息；
步骤22)将修改后的所述Json初始配置文件传输至移动通讯终端的文件***中，替换原初始配置文件；
步骤23)重启经过编译的UI界面Json脚本，实现UI界面的重新配置。
4.如权利要求1所述的可配置的UI界面生成方法，其特征在于，所述Json初始配置文件中的参数信息包括UI界面元素的位置、颜色、高度、宽度属性。
5.如权利要求1所述的可配置的UI界面生成方法，其特征在于，所述Json初始配置文件中的参数信息包括对用户操作的反应。
6.如权利要求5所述的可配置的UI界面生成方法，其特征在于，所述根据所述用户操作反应的配置信息，在所述UI界面分别显示或隐藏界面元素的步骤包括：若控件的配置信息为第一配置信息，在所述UI界面显示所述配置信息为第一配置信息的控件；若控件的配置信息为第二配置信息，在所述UI界面隐藏所述配置信息为第二配置信息的控件。
7.如权利要求1所述的可配置的UI界面生成方法，其特征在于，所述参数信息包括设备端的本地信息和管理服务器端的远程信息。
8.如权利要求1所述的可配置的UI界面生成方法，其特征在于，所述UI界面的显示包括以下步骤：
通过读取Json配置文件，得到所述待显示UI界面的元素节点；
根据所述UI界面的元素节点创建与所述待显示UI界面对应的树形控件；
配置所述UI界面的与所述树形控件对应的渲染列表；以及
根据所述渲染列表，采用双缓冲技术对所述树形控件进行渲染。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810732166.0A CN109144506A (zh) | 2018-07-05 | 2018-07-05 | 一种可配置的ui界面生成方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810732166.0A CN109144506A (zh) | 2018-07-05 | 2018-07-05 | 一种可配置的ui界面生成方法 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN109144506A true CN109144506A (zh) | 2019-01-04 |
Family
ID=64799693
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201810732166.0A Withdrawn CN109144506A (zh) | 2018-07-05 | 2018-07-05 | 一种可配置的ui界面生成方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN109144506A (zh) |
Cited By (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110442342A (zh) * | 2019-07-25 | 2019-11-12 | 北京金堤科技有限公司 | 界面生成方法、装置、存储介质及计算机设备 |
| CN110618812A (zh) * | 2019-03-18 | 2019-12-27 | 北京无限光场科技有限公司 | 信息呈现方法和装置 |
| CN110990010A (zh) * | 2019-12-03 | 2020-04-10 | 锐捷网络股份有限公司 | 一种软件界面代码的生成方法及装置 |
| CN111209204A (zh) * | 2020-01-06 | 2020-05-29 | 杭州涂鸦信息技术有限公司 | 一种基于JSON的web自动化测试方法及其***和装置 |
| CN111367523A (zh) * | 2020-03-16 | 2020-07-03 | 杭州涂鸦信息技术有限公司 | 一种小程序动态ui匹配方法及*** |
| CN111597484A (zh) * | 2020-07-22 | 2020-08-28 | 成都新希望金融信息有限公司 | 一种ui动态生成方法 |
| CN111736744A (zh) * | 2020-07-22 | 2020-10-02 | 成都新希望金融信息有限公司 | 一种基于dsl的监控预警计算子*** |
| CN111740948A (zh) * | 2020-05-12 | 2020-10-02 | 北京沃东天骏信息技术有限公司 | 数据包发布方法、动态更新方法、装置、设备及介质 |
| CN113138761A (zh) * | 2021-04-30 | 2021-07-20 | 南京电研电力自动化股份有限公司 | 一种界面编程方法及*** |
| CN113849247A (zh) * | 2021-09-26 | 2021-12-28 | 上海哔哩哔哩科技有限公司 | 直播间页面元素的显示方法、装置及*** |
-
2018
- 2018-07-05 CN CN201810732166.0A patent/CN109144506A/zh not_active Withdrawn
Cited By (14)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110618812A (zh) * | 2019-03-18 | 2019-12-27 | 北京无限光场科技有限公司 | 信息呈现方法和装置 |
| CN110442342A (zh) * | 2019-07-25 | 2019-11-12 | 北京金堤科技有限公司 | 界面生成方法、装置、存储介质及计算机设备 |
| CN110990010A (zh) * | 2019-12-03 | 2020-04-10 | 锐捷网络股份有限公司 | 一种软件界面代码的生成方法及装置 |
| CN110990010B (zh) * | 2019-12-03 | 2023-08-25 | 锐捷网络股份有限公司 | 一种软件界面代码的生成方法及装置 |
| CN111209204A (zh) * | 2020-01-06 | 2020-05-29 | 杭州涂鸦信息技术有限公司 | 一种基于JSON的web自动化测试方法及其***和装置 |
| CN111209204B (zh) * | 2020-01-06 | 2023-09-22 | 杭州涂鸦信息技术有限公司 | 一种基于JSON的web自动化测试方法及其***和装置 |
| CN111367523A (zh) * | 2020-03-16 | 2020-07-03 | 杭州涂鸦信息技术有限公司 | 一种小程序动态ui匹配方法及*** |
| CN111740948B (zh) * | 2020-05-12 | 2023-04-07 | 北京沃东天骏信息技术有限公司 | 数据包发布方法、动态更新方法、装置、设备及介质 |
| CN111740948A (zh) * | 2020-05-12 | 2020-10-02 | 北京沃东天骏信息技术有限公司 | 数据包发布方法、动态更新方法、装置、设备及介质 |
| CN111736744A (zh) * | 2020-07-22 | 2020-10-02 | 成都新希望金融信息有限公司 | 一种基于dsl的监控预警计算子*** |
| CN111597484A (zh) * | 2020-07-22 | 2020-08-28 | 成都新希望金融信息有限公司 | 一种ui动态生成方法 |
| CN113138761A (zh) * | 2021-04-30 | 2021-07-20 | 南京电研电力自动化股份有限公司 | 一种界面编程方法及*** |
| CN113849247A (zh) * | 2021-09-26 | 2021-12-28 | 上海哔哩哔哩科技有限公司 | 直播间页面元素的显示方法、装置及*** |
| CN113849247B (zh) * | 2021-09-26 | 2024-04-30 | 上海哔哩哔哩科技有限公司 | 直播间页面元素的显示方法、装置及*** |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN109144506A (zh) | 一种可配置的ui界面生成方法 | |
| CN109542399B (zh) | 软件开发方法、装置、终端设备及计算机可读存储介质 | |
| EP3433732B1 (en) | Converting visual diagrams into code | |
| CA2915619C (en) | Method and apparatus for customized software development kit (sdk) generation | |
| CA2912852C (en) | Method and apparatus for code virtualization and remote process call generation | |
| CN104252342B (zh) | 一种可配置参数的嵌入式应用实现方法及装置 | |
| US20160357519A1 (en) | Natural Language Engine for Coding and Debugging | |
| US10564988B1 (en) | Deploying cross-platform applications on mobile devices with native and web components | |
| CN109725901A (zh) | 前端代码的开发方法、装置、设备和计算机存储介质 | |
| CN105339889B (zh) | 用于计算机应用的语言翻译本地化的技术 | |
| CN104731589A (zh) | 用户界面的自动生成方法及自动生成装置 | |
| CN108804188A (zh) | 界面换肤方法及装置 | |
| Prehofer et al. | From internet of things mashups to model-based development | |
| US20100082954A1 (en) | Configuration rule prototyping tool | |
| CN105573764B (zh) | 一种面向智能手表的Android应用重构方法 | |
| CN102546797B (zh) | 一种基于浏览器端/服务器端结构的移动设备截屏方法 | |
| CN110647322B (zh) | 列表渲染方法、装置、电子设备和计算机可读介质 | |
| CN111176629A (zh) | 一种应用开发的方法和装置 | |
| CN110275704A (zh) | 页面数据处理方法和装置，存储介质和电子设备 | |
| CN109799988A (zh) | iOS页面布局方法、终端设备及计算机可读存储介质 | |
| Junior et al. | Bipes: Block based integrated platform for embedded systems | |
| US20190087160A1 (en) | System and method for creating domain specific language | |
| CN108921855A (zh) | 基于信息的图片处理方法及*** | |
| CN111984248A (zh) | 页面编辑方法和装置、存储介质及电子装置 | |
| CN105706023B (zh) | 与不支持的输入设备的通信 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| WW01 | Invention patent application withdrawn after publication |
Application publication date: 20190104 |
|
| WW01 | Invention patent application withdrawn after publication |