CN109144506A - A kind of configurable UI interface creating method - Google Patents
A kind of configurable UI interface creating method 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
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
The invention discloses a kind of configurable UI interface creating methods, data source and user interface are described using field language-specific, the field language-specific uses Json script format, the UI interface realization, Json initial configuration file including being set with UI interface parameter information, the UI interface program is by calling the parameter information in Json initial configuration file to configure the UI of communication terminal；Further include UI interface modification step, by modifying the parameter information in the Json initial configuration file, and restarts UI interface program, realize reconfiguring for the interface UI.The invention enables the interfaces UI that non-developer or user can be interacted by easy configuration JSON text generation.Data Layer and DSL component-based are taken out on react native.DSL shields the generation type and data acquiring mode these low-level details at interface for describing data source and interface.Subsequent needs that data can be obtained by writing DSL and generates corresponding appliance control interface.
Description
Technical field
The present invention relates to internet of things field more particularly to a kind of configurable UI interface creating methods.
Background technique
Internet of Things is that modern information technologies develop to a kind of polymerism application technology occurred after certain phase.Internet of Things Netcom
The agreement for crossing agreement, connects any article and internet, carries out information exchange and communication, with realize Weigh sensor,
The network of positioning, tracking, monitoring and management.With the development of computer and network technology, internet of things field has occurred deep
Technological change.Its function is not only limited in the measurement of these data such as temperature, pressure, humidity, intensity of illumination.Nowadays,
With network Development and the diversified demand of user, various consumer products are produced, such as: smart phone, movement are flat
Plate, digital camera and wearable device etc..Equally, in specific area, Internet of things system flexibly can not only be accessed and be accessed respectively
Kind equipment, and it is able to satisfy the specific demand of user.
Existing communication terminal usually all supports user interface (UI) configuration feature.Common communication terminal UI matches
The implementation method set is, by modifying program file, such as * .C (C language source code file) or * .cpp (C++ source code file)
Deng other code files, * .H (statement of variable, array, function defined in .C file of the same name) or alternative document or other
Binary file is downloaded to the memory headroom of communication terminal (such as then by being compiled into binary file by resource file
FLASH), communication terminal execute to the code area of FLASH and be read to realize when operation.
Existing mobile device-based internet of things equipment control interface, for manipulating setting based on intelligent object networking
It is standby；The control panel reusability of each equipment is low, and increasing with access device amount, and the development cycle is long, and developer also can
And then increase.
Summary of the invention
The invention enables the interfaces UI that non-developer or user can be interacted by easy configuration JSON text generation.?
Data Layer and DSL component-based are taken out on react native.DSL shields interface for describing data source and interface
Generation type and data acquiring mode these low-level details.Subsequent needs that data and life can be obtained by writing DSL
At corresponding appliance control interface.
Configurable UI interface creating method of the present invention describes data source using field language-specific and user hands over
Mutual interface, the field language-specific use Json script format, the UI interface realization, including are set with the interface UI ginseng
The Json initial configuration file of number information, the UI interface program is by calling the parameter information pair in Json initial configuration file
The UI of communication terminal is configured；It further include UI interface modification step, by modifying in the Json initial configuration file
Parameter information, and restart UI interface program, realize reconfiguring for the interface UI.
Preferably, the UI interface configurations step specifically includes the following steps:
Step 11) writes the Json script at the interface UI；
Step 12) is set with the Json initial configuration file of UI interface parameter information；
Step 13) compiles the interface UI Json script；
The compiling result of Json initial configuration file and step 13) in step 12) is transmitted to mobile communication by step 14)
In the file system of terminal；
The booting of step 15) communication terminal enters working condition, and UI interface Json script of the operation by compiling passes through
Parsing to the Json initial configuration file in step 12) renders the interface UI.
Preferably, the interface UI reconfigure step specifically includes the following steps:
Step 21) modifies the parameter information in the Json initial configuration file；
The modified Json initial configuration file is transmitted in the file system of communication terminal by step 22),
Replace original initial configuration file；
Step 23) restarts the interface the UI Json script by compiling, realizes reconfiguring for the interface UI.
Preferably, the parameter information in the Json initial configuration file includes the position of UI interface element, color, height
Degree, width attribute.
Preferably, the parameter information in the Json initial configuration file includes the reaction to user's operation.
Preferably, the configuration information reacted according to the user's operation, distinguishes show or hide at the interface UI
If the configuration information that the step of interface element includes: control is the first configuration information, confidence is matched described in the UI interface display
Breath is the control of the first configuration information；If the configuration information of control is the second configuration information, described match is hidden at the interface UI
Confidence breath is the control of the second configuration information.
Preferably, the parameter information includes the local information of equipment end and the remote information at management server end.
Preferably, the display at the interface UI the following steps are included:
By reading Json configuration file, the node element at the interface UI to be shown is obtained；
According to the node element at the interface UI creation Tree control corresponding with the interface UI to be shown；
Configure the render list corresponding with the Tree control at the interface UI；And
According to the render list, the Tree control is rendered using double buffering technology.
Detailed description of the invention
Fig. 1 is a kind of routine call flow chart that present invention implementation provides.
Specific embodiment
The present invention is described further with reference to the accompanying drawings and detailed description.
As shown in Figure 1, a kind of configurable UI interface creating method of the present invention, passes through the field DSL language-specific
JavaScript Bundle is constructed, the various data resources of data Layer, the data money of data Layer are then called by JS Bundle
Source recalls React Native, and last React Native distinguishes Render into the specific UI on Android and ios platform again
Interface.
In a preferred embodiment of the present invention, UI appliance control interface is generated by DSL plus data Layer, passes through json
For this simple DSL of format:
Wherein jsbridge indicates that server can also be filled out with jsbridge mode is crossed to client acquisition data in data
Data are obtained to server-side.
Final rendering pops up official documents and correspondence when clicked at high 100px one wide, the button of background red.
In another preferred embodiment of the invention, two buttons have been rendered, it, will bullet when clicking any one button
The color that user is touched the button out, specific Json script are as follows:
The invention enables the interfaces UI that non-developer or user can be interacted by easy configuration JSON text generation.?
Data Layer and DSL component-based are taken out on react native.DSL shields interface for describing data source and interface
Generation type and data acquiring mode these low-level details.Subsequent needs that data and life can be obtained by writing DSL
At corresponding appliance control interface.
The preferred embodiment of the present invention has been described in detail above.It should be appreciated that the ordinary skill of this field is without wound
The property made labour, which according to the present invention can conceive, makes many modifications and variations.Therefore, all technician in the art
Pass through the available technology of logical analysis, reasoning, or a limited experiment on the basis of existing technology under this invention's idea
Scheme, all should be within the scope of protection determined by the claims.
Claims (8)
1. a kind of configurable UI interface creating method, which is characterized in that describe data source and user using field language-specific
Interactive interface, the field language-specific uses Json script format, the UI interface realization, including is set with the interface UI
The Json initial configuration file of parameter information, the UI interface program is by calling the parameter information in Json initial configuration file
The UI of communication terminal is configured；It further include UI interface modification step, by modifying the Json initial configuration file
In parameter information, and restart UI interface program, realize reconfiguring for the interface UI.
2. the UI interface creating method that can configure as described in claim 1, which is characterized in that the UI interface configurations step tool
Body the following steps are included:
Step 11) writes the Json script at the interface UI；
Step 12) is set with the Json initial configuration file of UI interface parameter information；
Step 13) compiles the interface UI Json script；
The compiling result of Json initial configuration file and step 13) in step 12) is transmitted to communication terminal by step 14)
File system in；
The booting of step 15) communication terminal enters working condition, UI interface Json script of the operation by compiling, by step
It is rapid 12) in Json initial configuration file parsing, render the interface UI.
3. the UI interface creating method that can configure as claimed in claim 2, which is characterized in that the interface UI reconfigures step
It is rapid specifically includes the following steps:
Step 21) modifies the parameter information in the Json initial configuration file；
The modified Json initial configuration file is transmitted in the file system of communication terminal by step 22), replacement
Original initial configuration file；
Step 23) restarts the interface the UI Json script by compiling, realizes reconfiguring for the interface UI.
4. the UI interface creating method that can configure as described in claim 1, which is characterized in that the Json initial configuration file
In parameter information include the position of UI interface element, color, height, width attribute.
5. the UI interface creating method that can configure as described in claim 1, which is characterized in that the Json initial configuration file
In parameter information include reaction to user's operation.
6. the UI interface creating method that can configure as claimed in claim 5, which is characterized in that described according to the user's operation
The configuration information of reaction, if in the step of interface UI show or hide interface element respectively including: the configuration information of control
For the first configuration information, the configuration information described in the UI interface display is the control of the first configuration information；If the configuration of control
Information is the second configuration information, hides the control that the configuration information is the second configuration information at the interface UI.
7. the UI interface creating method that can configure as described in claim 1, which is characterized in that the parameter information includes equipment
The local information at end and the remote information at management server end.
8. the UI interface creating method that can configure as described in claim 1, which is characterized in that the display at the interface UI includes
Following steps:
By reading Json configuration file, the node element at the interface UI to be shown is obtained；
According to the node element at the interface UI creation Tree control corresponding with the interface UI to be shown；
Configure the render list corresponding with the Tree control at the interface UI；And
According to the render list, the Tree control is rendered using double buffering technology.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810732166.0A CN109144506A (en) | 2018-07-05 | 2018-07-05 | A kind of configurable UI interface creating method |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810732166.0A CN109144506A (en) | 2018-07-05 | 2018-07-05 | A kind of configurable UI interface creating method |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN109144506A true CN109144506A (en) | 2019-01-04 |
Family
ID=64799693
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201810732166.0A Withdrawn CN109144506A (en) | 2018-07-05 | 2018-07-05 | A kind of configurable UI interface creating method |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN109144506A (en) |
Cited By (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110442342A (en) * | 2019-07-25 | 2019-11-12 | 北京金堤科技有限公司 | Interface creating method, device, storage medium and computer equipment |
| CN110618812A (en) * | 2019-03-18 | 2019-12-27 | 北京无限光场科技有限公司 | Information presentation method and device |
| CN110990010A (en) * | 2019-12-03 | 2020-04-10 | 锐捷网络股份有限公司 | Software interface code generation method and device |
| CN111209204A (en) * | 2020-01-06 | 2020-05-29 | 杭州涂鸦信息技术有限公司 | JSON-based web automatic testing method, system and device |
| CN111367523A (en) * | 2020-03-16 | 2020-07-03 | 杭州涂鸦信息技术有限公司 | Dynamic UI (user interface) matching method and system for small program |
| CN111597484A (en) * | 2020-07-22 | 2020-08-28 | 成都新希望金融信息有限公司 | UI dynamic generation method |
| CN111736744A (en) * | 2020-07-22 | 2020-10-02 | 成都新希望金融信息有限公司 | Monitoring early warning calculation subsystem based on DSL |
| CN111740948A (en) * | 2020-05-12 | 2020-10-02 | 北京沃东天骏信息技术有限公司 | Data packet issuing method, dynamic updating method, device, equipment and medium |
| CN113138761A (en) * | 2021-04-30 | 2021-07-20 | 南京电研电力自动化股份有限公司 | Interface programming method and system |
| CN113849247A (en) * | 2021-09-26 | 2021-12-28 | 上海哔哩哔哩科技有限公司 | Method, device and system for displaying page elements in live broadcast room |
-
2018
- 2018-07-05 CN CN201810732166.0A patent/CN109144506A/en not_active Withdrawn
Cited By (14)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110618812A (en) * | 2019-03-18 | 2019-12-27 | 北京无限光场科技有限公司 | Information presentation method and device |
| CN110442342A (en) * | 2019-07-25 | 2019-11-12 | 北京金堤科技有限公司 | Interface creating method, device, storage medium and computer equipment |
| CN110990010A (en) * | 2019-12-03 | 2020-04-10 | 锐捷网络股份有限公司 | Software interface code generation method and device |
| CN110990010B (en) * | 2019-12-03 | 2023-08-25 | 锐捷网络股份有限公司 | Method and device for generating software interface code |
| CN111209204A (en) * | 2020-01-06 | 2020-05-29 | 杭州涂鸦信息技术有限公司 | JSON-based web automatic testing method, system and device |
| CN111209204B (en) * | 2020-01-06 | 2023-09-22 | 杭州涂鸦信息技术有限公司 | Automatic web testing method based on JSON, system and device thereof |
| CN111367523A (en) * | 2020-03-16 | 2020-07-03 | 杭州涂鸦信息技术有限公司 | Dynamic UI (user interface) matching method and system for small program |
| CN111740948B (en) * | 2020-05-12 | 2023-04-07 | 北京沃东天骏信息技术有限公司 | Data packet issuing method, dynamic updating method, device, equipment and medium |
| CN111740948A (en) * | 2020-05-12 | 2020-10-02 | 北京沃东天骏信息技术有限公司 | Data packet issuing method, dynamic updating method, device, equipment and medium |
| CN111736744A (en) * | 2020-07-22 | 2020-10-02 | 成都新希望金融信息有限公司 | Monitoring early warning calculation subsystem based on DSL |
| CN111597484A (en) * | 2020-07-22 | 2020-08-28 | 成都新希望金融信息有限公司 | UI dynamic generation method |
| CN113138761A (en) * | 2021-04-30 | 2021-07-20 | 南京电研电力自动化股份有限公司 | Interface programming method and system |
| CN113849247A (en) * | 2021-09-26 | 2021-12-28 | 上海哔哩哔哩科技有限公司 | Method, device and system for displaying page elements in live broadcast room |
| CN113849247B (en) * | 2021-09-26 | 2024-04-30 | 上海哔哩哔哩科技有限公司 | Live broadcasting room page element display method, device and system |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN109144506A (en) | A kind of configurable UI interface creating method | |
| CN109542399B (en) | Software development method and device, terminal equipment and computer readable storage medium | |
| 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 (en) | Embedded application implementation method and device capable of configuring parameters | |
| US20160357519A1 (en) | Natural Language Engine for Coding and Debugging | |
| US10564988B1 (en) | Deploying cross-platform applications on mobile devices with native and web components | |
| CN109725901A (en) | Development approach, device, equipment and the computer storage medium of front-end code | |
| CN105339889B (en) | The technology that language translation for computer application localizes | |
| CN104731589A (en) | Automatic generation method and device of user interface (UI) | |
| CN108804188A (en) | Changing an interface skin method and device | |
| Prehofer et al. | From internet of things mashups to model-based development | |
| US20100082954A1 (en) | Configuration rule prototyping tool | |
| CN105573764B (en) | A kind of Android application reconstructing method towards smartwatch | |
| CN102546797B (en) | Screen shooting method for mobile equipment based on browser end/server end structure | |
| CN110647322B (en) | List rendering method and device, electronic equipment and computer readable medium | |
| CN111176629A (en) | Application development method and device | |
| CN114064024A (en) | Method, apparatus, device, storage medium, and program product for developing micro-application | |
| CN110275704A (en) | Page data processing method and device, storage medium and electronic equipment | |
| CN109799988A (en) | IOS page layout method, terminal device and computer readable storage medium | |
| US10387124B2 (en) | System and method for creating domain specific language | |
| Junior et al. | Bipes: Block based integrated platform for embedded systems | |
| CN108921855A (en) | Image processing method and system based on information | |
| AU2020203975A1 (en) | Information display method, terminal, and server | |
| CN110109684B (en) | Block chain link point management proxy service installation method, electronic device and storage medium |
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 |