UI Code Generation via Block Segmentation for Screen Adaptation
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Developers face challenges in designing user interfaces that adapt to different screen sizes and resolutions, requiring multiple versions of web pages or applications, which complicates the editing and coding process.
Innovation Solution
A method and system for generating a description code of a user interface that involves displaying a programmable interface with objects, grouping them, cutting into sub-blocks, setting display attributes, and detecting attribute element selections to automatically generate code that adjusts layout based on display width.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Adaptability or versatility
If developers design multiple versions of user interfaces for different screen sizes and resolutions, then the user interface can be optimally displayed on various displays, but the complexity of editing and coding increases
Solution Approach 1:
The user interface is divided into multiple independent blocks (first block, second block, third block) that can be separately edited and configured. Each block contains specific objects (e.g., navigation bar, main content, footer) that can be independently adjusted for different display requirements, reducing the overall complexity of managing multiple interface versions
Solution Approach 2:
A single user interface design includes multiple blocks that can be selectively configured to adapt to different screen sizes and resolutions. The same interface structure serves multiple display requirements by adjusting the visibility and arrangement of blocks, eliminating the need for separate interface versions for different devices
2Adaptability or versatility
If developers create separate user interface versions for different devices, then optimal display is achieved, but the time required for development and maintenance increases
Solution Approach 1:
By segmenting the user interface into independent blocks, developers can quickly configure which blocks to display on different devices without rewriting the entire interface. This modular approach significantly reduces development time compared to creating separate versions from scratch
Solution Approach 2:
The user interface is pre-configured with multiple blocks that can be selectively activated based on display requirements. Developers can pre-set different block combinations for different device types, allowing for rapid deployment without time-consuming customization during development
Data Source
AI summary
This disclosure discloses a method and a system for generating a description code of a user interface, and the method includes the steps of displaying a programmable user interface having a first object and a second object; grouping the first object and the second object to form a grouping block; cutting the grouping block into a first sub-block and a second sub-block; setting a first interval between the first object and the second object as having a first display attribute or a second display attribute; displaying a first attribute element; detecting whether the first attribute element is selected; when the first attribute element is detected as selected, switching the first interval between having the first display attribute and having the second display attribute; and generating a first description code corresponding to the first object and the second object according to the first display attribute or the second display attribute.