CN114443031B - Method, system, equipment and storage medium for writing graphical user interface - Google Patents
Method, system, equipment and storage medium for writing graphical user interface Download PDFInfo
- Publication number
- CN114443031B CN114443031B CN202111607548.9A CN202111607548A CN114443031B CN 114443031 B CN114443031 B CN 114443031B CN 202111607548 A CN202111607548 A CN 202111607548A CN 114443031 B CN114443031 B CN 114443031B
- Authority
- CN
- China
- Prior art keywords
- value
- component
- creating
- list
- json
- 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.)
- Active
Links
- 238000000034 method Methods 0.000 title claims abstract description 85
- 230000008569 process Effects 0.000 claims description 27
- 238000004590 computer program Methods 0.000 claims description 15
- 238000006243 chemical reaction Methods 0.000 claims description 13
- 238000012545 processing Methods 0.000 claims description 9
- 238000007781 pre-processing Methods 0.000 claims description 7
- 238000010586 diagram Methods 0.000 description 10
- 230000001360 synchronised effect Effects 0.000 description 8
- 230000005291 magnetic effect Effects 0.000 description 6
- 238000010276 construction Methods 0.000 description 4
- 230000003287 optical effect Effects 0.000 description 4
- 230000003068 static effect Effects 0.000 description 4
- 230000009471 action Effects 0.000 description 3
- 238000004891 communication Methods 0.000 description 3
- 238000011161 development Methods 0.000 description 3
- 230000000694 effects Effects 0.000 description 3
- 230000006870 function Effects 0.000 description 3
- 230000003993 interaction Effects 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000005294 ferromagnetic effect Effects 0.000 description 1
- 230000008520 organization Effects 0.000 description 1
- 238000012552 review 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/40—Transformation of program code
- G06F8/41—Compilation
- G06F8/42—Syntactic analysis
- G06F8/427—Parsing
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- Engineering & Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Devices For Executing Special Programs (AREA)
- Stored Programmes (AREA)
Abstract
The invention provides a method, a system, equipment and a storage medium for compiling a graphical user interface, wherein the method comprises the steps of adopting JSON text as a compiling specification of the graphical user interface; reading a JSON text, firstly creating a root component on the premise that the JSON text accords with the regulations, and then sequentially creating component objects from outside to inside to analyze the JSON text into an intermediate data structure; after the analysis of the intermediate data structure is completed, the object types in the JSON text are sequentially converted into corresponding component types in the corresponding language from the root component object, and finally converted into corresponding codes according to the parent-child structure. Based on the method, a system, equipment and storage medium for writing the graphical user interface are also provided. The invention uses JSON as writing sentence to simplify the writing mode of GUI interface, and convert it into different language, to realize unified management of interface content, and to realize once writing and convert it into convenience of different language.
Description
Technical Field
The invention belongs to the technical field of development of graphical user interfaces, and particularly relates to a method, a system, equipment and a storage medium for writing a graphical user interface.
Background
The GUI interface is an indispensable part for developing the desktop client, namely a graphical user interface; however, the writing of the graphical user interface requires a certain programming capability of the user, and different programming languages need to be used in different writing forms, when different languages are used in different projects, different graphical user interface programmers need to be provided for each project, and different graphical user interfaces cannot be managed uniformly.
The writing mode of the graphical user interface in the prior art comprises the following steps: first, python writes the GUI interface with the aid of the pyqt5 code, and can be simply built with the aid of the Qt-Designer, but cannot be precisely positioned. Secondly, java uses Java fx or Swing to directly use codes to write a graphical user interface, and a user is required to have high Java programming experience. Therefore, the writing mode of the graphical user interface in the prior art is complicated to write codes realized by using specific languages, and the graphical user interface writer is required to have higher knowledge reserve for the languages, but people familiar with multiple languages are rare, so that special graphical user interface writers are required to be equipped for different languages. The graphical user interface code implementation of different languages has no unified standard and cannot be migrated in different languages.
Disclosure of Invention
In order to solve the technical problems, the invention provides a method, a system, equipment and a storage medium for compiling a graphical user interface, and the compiling mode of the graphical user interface can be simplified by using JSON as a compiling sentence. The interface content can be conveniently and uniformly managed by converting the interface content into different languages through JSON.
In order to achieve the above purpose, the present invention adopts the following technical scheme:
a method of graphical user interface authoring comprising the steps of:
adopting JSON text as writing specification of the graphic user interface;
reading the JSON text, firstly creating a root component on the premise that the JSON text accords with the regulations, and then sequentially creating component objects from outside to inside to analyze the JSON text into an intermediate data structure;
after the analysis of the intermediate data structure is completed, the object types in the JSON text are sequentially converted into corresponding component types in the corresponding language from the root component object, and finally converted into corresponding codes according to the parent-child structure.
Further, the method for verifying whether the JSON text meets the specification comprises the following steps: judging whether the JSON text is wrong or whether the JSON text contains unspecified component names; if an error occurs or an unspecified component is contained, execution is stopped and an error cause prompt is given.
Further, the detailed process of creating a root component and then sequentially creating component objects from outside to inside to parse the JSON text into a data structure to be converted includes:
creating a virtual root component and assigning a null;
analyzing from the outermost layer of the JSON file, if the outermost layer is of an object type, creating a sub-component list by the root component; if the outermost layer is of an array type, firstly acquiring the array length and creating a subcomponent list with a specified length;
creating a corresponding object type according to a key value in a JSON file, and adding the object type into the sub-component list after the object type is successfully created;
and reading the relevant attribute value of the value corresponding to the key value until the complete JSON text is analyzed to generate an intermediate data structure.
Further, the process of reading the related attribute value of the value corresponding to the key value includes:
reading a sub-list value of the value corresponding to the key value, if the sub-list value is contained, creating a component list, and if the sub-list value is not contained, not processing;
reading a style attribute value of the value corresponding to the key value, and storing the CSS format character string into the style attribute of the object;
And reading other attribute values of the value corresponding to the key value except the sub-list value and the style attribute value, and sequentially assigning the other attributes to the corresponding object attributes.
Further, the creating the corresponding object type according to the key value in the JSON file includes:
if the key value is "Button", creating a Button program object;
if the key value is "Input," then an Input program object is created.
Further, the process of converting the object type in the JSON text into the corresponding component type in the corresponding language sequentially from the root component object includes:
acquiring a sub-component list in a root component, and converting an object in the sub-component list into an object value in an actual language environment;
reading the attribute value of the object in the actual language environment, and setting the attribute value as the attribute value of the type of the object to be converted;
and reading the character string value in the cascading style sheet, and stopping when no style is set for the object until the component list is empty.
Further, before the obtaining the sub-component list in the root component, the method further includes: creating project engineering and configuration files to generate project starting environment according to the language environment.
The invention also provides a system for writing the graphical user interface, which comprises a preprocessing module, an analysis module and a conversion module;
The preprocessing module is used for adopting JSON text as a writing specification of a graphical user interface;
the analysis module is used for reading the JSON text, firstly creating a root component on the premise that the JSON text accords with the regulations, and then sequentially creating component objects from outside to inside to analyze the JSON text into an intermediate data structure;
and the conversion module is used for sequentially converting the object types in the JSON text into corresponding component types in the corresponding language from the root component object after the analysis of the intermediate data structure is completed, and finally converting the object types into corresponding codes according to the parent-child structure.
The invention also proposes a device comprising:
a memory for storing a computer program;
and a processor for implementing the method steps when executing the computer program.
The invention also proposes a readable storage medium having stored thereon a computer program which, when executed by a processor, implements the method steps.
The effects provided in the summary of the invention are merely effects of embodiments, not all effects of the invention, and one of the above technical solutions has the following advantages or beneficial effects:
The invention provides a method, a system, equipment and a storage medium for compiling a graphical user interface, wherein the method comprises the steps of adopting JSON text as a compiling specification of the graphical user interface; reading the JSON text, firstly creating a root component on the premise that the JSON text accords with the regulations, and then sequentially creating component objects from outside to inside to analyze the JSON text into an intermediate data structure; after the analysis of the intermediate data structure is completed, the object types in the JSON text are sequentially converted into corresponding component types in the corresponding language from the root component object, and finally converted into corresponding codes according to the parent-child structure. Based on a method for compiling the graphical user interface, a system, equipment and storage medium for compiling the graphical user interface are also provided. The invention can simplify the writing mode of the GUI interface by using JSON as writing statement. The interface content can be conveniently and uniformly managed by converting the interface content into different languages through JSON, and meanwhile, the convenience of one-time writing and conversion into different languages is realized.
Drawings
FIG. 1 is a flow chart of a method for programming a graphical user interface according to embodiment 1 of the present invention;
FIG. 2 is a schematic diagram illustrating the analysis and construction of a method for writing a graphical user interface according to embodiment 1 of the present invention;
FIG. 3 is a diagram illustrating a structure of component data in a method for writing a graphical user interface according to embodiment 1 of the present invention;
fig. 4 is a schematic diagram of a system written in a gui according to embodiment 2 of the present invention.
Detailed Description
In order to clearly illustrate the technical features of the present solution, the present invention will be described in detail below with reference to the following detailed description and the accompanying drawings. The following disclosure provides many different embodiments, or examples, for implementing different structures of the invention. In order to simplify the present disclosure, components and arrangements of specific examples are described below. Furthermore, the present invention may repeat reference numerals and/or letters in the various examples. This repetition is for the purpose of simplicity and clarity and does not in itself dictate a relationship between the various embodiments and/or configurations discussed. It should be noted that the components illustrated in the figures are not necessarily drawn to scale. Descriptions of well-known components and processing techniques and processes are omitted so as to not unnecessarily obscure the present invention.
Example 1
The embodiment 1 of the invention provides a method for writing a graphical user interface. The method is realized by converting the specific parser in different languages into specific codes in the language and provides consistent representation forms for the organization structures of different components so as to achieve the aim of programming a cross-language GUI.
The invention takes the GUI interface realization of Python and Java language as the basic implementation. Pyqt5 is currently commonly used as a development framework for Python implementation GUI interfaces, and Java implementation GUIs are commonly used as a development framework for JavaFX. Based on the above situation, the invention can convert the JSON text into the code implementation conforming to Pyqt5 and JavaFX standards during actual conversion.
Among them, JSON, all called (JavaScript Object Notation), means JavaScript object notation, which is a text-based, language-independent lightweight data exchange format, easy for human reading and writing. And is also easy to machine parse and generate.
GUI, collectively (Graphical User Interface), meaning a graphical user interface, is an interface display format in which a person communicates with a computer, allowing the user to manipulate icons or menu options on a screen using an input device such as a mouse to select commands, call files, initiate a program, or perform some other daily task.
FIG. 1 is a flow chart of a method for programming a graphical user interface according to embodiment 1 of the present invention; FIG. 2 is a schematic diagram illustrating the analysis and construction of a method for writing a graphical user interface according to embodiment 1 of the present invention;
in step S101, JSON text is adopted as a writing specification of a graphical user interface;
After the JSON text is read, the text compliance is checked, and if the JSON text is wrong or contains unspecified component names, the program can directly stop executing and give out error reason prompts. If the read can be performed normally, the execution is continued.
In step S102, the JSON text is read, and on the premise that the JSON text meets the specification, a root component is first created, and then component objects are sequentially created from outside to inside to parse the JSON text into an intermediate data structure.
In fig. 2, a parser is employed to parse its contents in turn and convert into a specific data structure description.
Creating a virtual root component and assigning a null;
analyzing from the outermost layer of the JSON file, if the outermost layer is of an object type, creating a sub-component list by the root component; if the outermost layer is of an array type, firstly acquiring the array length and creating a subcomponent list with a specified length;
creating a corresponding object type according to a key value in a JSON file, and adding the object type into the sub-component list after the object type is successfully created;
and reading the relevant attribute value of the value corresponding to the key value until the complete JSON text is analyzed to generate an intermediate data structure.
The detailed analysis process is as follows:
(1) The parser will first create a virtual root RootWidget object. The list of subcomponents of the originally created RootWidget object is not created, but is assigned a None (denoted None in Python, and null in Java).
(2) The parser parses the outermost layer of the JSON file, and if the outermost layer is an object type, the rootwidgets create a list of sub-components with length of 1; if the outermost layer is of an array type, the array length is obtained first, and a component list of a specified length is created.
(3) The parser creates a corresponding object type according to the key value in the JSON, if the key is button, a button Widget object is created; a key of "input" will create an InputWidget object. The successfully created objects are added to the sub-list of the rootwidgets in turn. The list of sub-components for each object is by default None and is created according to the rules in 4) only if it is determined that it does contain a sub-component.
(4) The parser reads the "sub-list" value of the value in the corresponding key, and if the value is not included, the value is not processed. If the value is contained, a list of components is created according to the rules in 2).
(5) The parser reads the "style" attribute value in the value corresponding to the key, and saves the converted CSS format character string to the style attribute of the object.
(6) And the parser reads other attribute values in the value corresponding to the key and sequentially assigns the attribute values to the specific object attribute. If the object does not define the attribute, then execution is directly aborted and stopped.
(7) The processes (2), (3), (4), (5) and (6) are recursively performed until the complete JSON text is parsed, ultimately producing the data structure shown in fig. 3. FIG. 3 is a diagram illustrating a structure of component data in a method for writing a graphical user interface according to embodiment 1 of the present invention;
during the parsing process, attention needs to be paid:
first, all components inherit from the top-level component ObjectWidget, objectWidget defining common properties of all components, such as a list of sub-components, etc.
Second, JSON text is actually converted into an object to be represented, so it is guaranteed that the key type in JSON is a type already defined and cannot be any type specified by the user. When the parser parses the undefined type, it throws out the exception and stops executing.
Thirdly, the specific corresponding type of the component is required to be specified through a key, and the key is not case-independent and can be normally analyzed. The key as the button is denoted as "button"; the key of the input box is denoted as "input"; the key of the text of a plurality of lines is denoted as "text".
Fourth, the key value when the component is parsed is converted into the corresponding attribute in the object for storage. Each component has its own unique attributes and common attributes, and is directly erroneous and exited if the user-defined attributes are not present. If the user does not specify an attribute value, the default values already defined are used.
Fifth, the component style can be set in JSON using CSS (cascading style sheet) and finally saved as an object attribute value after finishing. The child component style, if not set alone, will inherit the parent component style by default.
Sixth, if other components are included in the components, the components that are not included in each other are sequentially stored in the list according to the parsing order
Seventh, the data structure description defaults to create a topmost RootWidget object, which is also a sub-class of objectwidgets, but the rootwidgets are not actually built when converted into actual components by the builder, and their function is only to prevent the situation that the top object itself is a list.
In step S103, after the parsing of the intermediate data structure is completed, the object types in the JSON text are sequentially converted from the root component object into corresponding component types in the corresponding language, and finally converted into corresponding codes according to the parent-child structure.
After the data structure description is successfully created, the program triggers the built-in constructor to execute. The constructor sequentially converts the object types in the description into corresponding component types in specific languages from a top-level root component (rootWidget) object, and finally converts the object types into specific code implementations according to a parent-child structure.
The builder-implemented process includes:
(1): and creating information such as project engineering, configuration files and the like according to the used language environment, and generating a project starting environment.
(2): the method comprises the steps that an acquisition analyzer analyzes a packaged data structure, a sub-component list of a RootWidget is acquired, objects in the list are converted into object values in an actual language environment, for example, the ButtonWidget is converted into a QButton object in pyqt5, and the Button object in JavaFx is converted into a Button object; inputWidget is converted to QLineEdit in pyqt5, to textField by default in JavaFx, and possibly to PasswordField depending on the value-type.
(3): the attribute values of the objects in the data structure are read and set to the attribute values of the actual object types.
(4): the string value of the CSS is read and a style is set for the object.
(5): the processes (2), (3) and (4) are recursively performed until the list of components is None.
According to the method for compiling the graphical user interface, provided by the embodiment 1 of the invention, the JSON is used as a compiling sentence, so that the compiling mode of the GUI interface can be simplified. The interface content can be conveniently and uniformly managed by converting the interface content into different languages through JSON, and meanwhile, the convenience of one-time writing and conversion into different languages is realized.
Example 2
The method for writing the graphical user interface is based on the embodiment 1 of the invention. The embodiment 2 of the present invention further provides a system for writing a graphical user interface, as shown in fig. 4, which is a schematic diagram of a system for writing a graphical user interface in embodiment 2 of the present invention, where the system further includes: the device comprises a preprocessing module, an analysis module and a conversion module;
the preprocessing module is used for adopting the JSON text as a writing specification of the graphical user interface;
the analysis module is used for reading the JSON text, firstly creating a root component on the premise that the JSON text accords with the regulations, and then sequentially creating component objects from outside to inside to analyze the JSON text into an intermediate data structure;
and the conversion module is used for sequentially converting the object types in the JSON text into corresponding component types in the corresponding language from the root component object after the analysis of the intermediate data structure is completed, and finally converting the object types into corresponding codes according to the parent-child structure.
In the preprocessing module, the method for verifying whether the JSON text meets the specification comprises the following steps: judging whether the JSON text is wrong or whether the JSON text contains unspecified component names; if an error occurs or an unspecified component is contained, execution is stopped and an error cause prompt is given.
The analysis module executes the following steps: creating a virtual root component and assigning a null;
analyzing from the outermost layer of the JSON file, if the outermost layer is of an object type, creating a sub-component list by the root component; if the outermost layer is of an array type, firstly acquiring the array length and creating a subcomponent list with a specified length;
creating a corresponding object type according to a key value in the JSON file, and adding the object type into the sub-component list after the object type is successfully created;
and reading the relevant attribute value of the value corresponding to the key value until the complete JSON text is analyzed to generate an intermediate data structure. Reading a sub-list value of a value corresponding to a key value, if the sub-list value is contained, creating a component list, and if the sub-list value is not contained, not processing; reading a style attribute value of the value corresponding to the key value, and storing the CSS format character string into the style attribute of the object; and reading other attribute values of the value corresponding to the key value except the sub-list value and the style attribute value, and sequentially assigning the other attributes to the corresponding object attributes.
The creating the corresponding object type according to the key value in the JSON file comprises: if the key value is "Button", creating a Button program object; if the key value is "Input," then an Input program object is created.
The conversion module executes the following processes: creating project engineering and configuration files to generate project starting environment according to the language environment. Acquiring a sub-component list in a root component, and converting an object in the sub-component list into an object value in an actual language environment; reading the attribute value of the object in the actual language environment, and setting the attribute value as the attribute value of the type of the object to be converted; and reading the character string value in the cascading style sheet, and stopping when no style is set for the object until the component list is empty.
According to the system for compiling the graphical user interface, provided by the embodiment 2 of the invention, the compiling mode of the GUI interface can be simplified by using JSON as a compiling sentence. The interface content can be conveniently and uniformly managed by converting the interface content into different languages through JSON, and meanwhile, the convenience of one-time writing and conversion into different languages is realized.
Example 3
The invention also proposes a device comprising:
a memory for storing a computer program;
The processor is used for realizing the following steps when executing the computer program:
FIG. 1 is a flow chart of a method for programming a graphical user interface according to embodiment 1 of the present invention; FIG. 2 is a schematic diagram illustrating the analysis and construction of a method for writing a graphical user interface according to embodiment 1 of the present invention;
in step S101, JSON text is adopted as a writing specification of a graphical user interface;
after the JSON text is read, the text compliance is checked, and if the JSON text is wrong or contains unspecified component names, the program can directly stop executing and give out error reason prompts. If the read can be performed normally, the execution is continued.
In step S102, the JSON text is read, and on the premise that the JSON text meets the specification, a root component is first created, and then component objects are sequentially created from outside to inside to parse the JSON text into an intermediate data structure.
In fig. 2, a parser is employed to parse its contents in turn and convert into a specific data structure description.
Creating a virtual root component and assigning a null;
analyzing from the outermost layer of the JSON file, if the outermost layer is of an object type, creating a sub-component list by the root component; if the outermost layer is of an array type, firstly acquiring the array length and creating a subcomponent list with a specified length;
Creating a corresponding object type according to a key value in a JSON file, and adding the object type into the sub-component list after the object type is successfully created;
and reading the relevant attribute value of the value corresponding to the key value until the complete JSON text is analyzed to generate an intermediate data structure.
The detailed analysis process is as follows:
(1) The parser will first create a virtual root RootWidget object. The list of subcomponents of the originally created RootWidget object is not created, but is assigned a None (denoted None in Python, and null in Java).
(2) The parser parses the outermost layer of the JSON file, and if the outermost layer is an object type, the rootwidgets create a list of sub-components with length of 1; if the outermost layer is of an array type, the array length is obtained first, and a component list of a specified length is created.
(3) The parser creates a corresponding object type according to the key value in the JSON, if the key is button, a button Widget object is created; a key of "input" will create an InputWidget object. The successfully created objects are added to the sub-list of the rootwidgets in turn. The list of sub-components for each object is by default None and is created according to the rules in 4) only if it is determined that it does contain a sub-component.
(4) The parser reads the "sub-list" value of the value in the corresponding key, and if the value is not included, the value is not processed. If the value is contained, a list of components is created according to the rules in 2).
(5) The parser reads the "style" attribute value in the value corresponding to the key, and saves the converted CSS format character string to the style attribute of the object.
(6) And the parser reads other attribute values in the value corresponding to the key and sequentially assigns the attribute values to the specific object attribute. If the object does not define the attribute, then execution is directly aborted and stopped.
(7) The processes (2), (3), (4), (5) and (6) are recursively performed until the complete JSON text is parsed, ultimately producing the data structure shown in fig. 3. FIG. 3 is a diagram illustrating a structure of component data in a method for writing a graphical user interface according to embodiment 1 of the present invention;
during the parsing process, attention needs to be paid:
first, all components inherit from the top-level component ObjectWidget, objectWidget defining common properties of all components, such as a list of sub-components, etc.
Second, JSON text is actually converted into an object to be represented, so it is guaranteed that the key type in JSON is a type already defined and cannot be any type specified by the user. When the parser parses the undefined type, it throws out the exception and stops executing.
Thirdly, the specific corresponding type of the component is required to be specified through a key, and the key is not case-independent and can be normally analyzed. The key as the button is denoted as "button"; the key of the input box is denoted as "input"; the key of the text of a plurality of lines is denoted as "text".
Fourth, the key value when the component is parsed is converted into the corresponding attribute in the object for storage. Each component has its own unique attributes and common attributes, and is directly erroneous and exited if the user-defined attributes are not present. If the user does not specify an attribute value, the default values already defined are used.
Fifth, the component style can be set in JSON using CSS (cascading style sheet) and finally saved as an object attribute value after finishing. The child component style, if not set alone, will inherit the parent component style by default.
Sixth, if other components are included in the components, the components that are not included in each other are sequentially stored in the list according to the parsing order
Seventh, the data structure description defaults to create a topmost RootWidget object, which is also a sub-class of objectwidgets, but the rootwidgets are not actually built when converted into actual components by the builder, and their function is only to prevent the situation that the top object itself is a list.
In step S103, after the parsing of the intermediate data structure is completed, the object types in the JSON text are sequentially converted from the root component object into corresponding component types in the corresponding language, and finally converted into corresponding codes according to the parent-child structure.
After the data structure description is successfully created, the program triggers the built-in constructor to execute. The constructor sequentially converts the object types in the description into corresponding component types in specific languages from a top-level root component (rootWidget) object, and finally converts the object types into specific code implementations according to a parent-child structure.
The builder-implemented process includes:
(1): and creating information such as project engineering, configuration files and the like according to the used language environment, and generating a project starting environment.
(2): the method comprises the steps that an acquisition analyzer analyzes a packaged data structure, a sub-component list of a RootWidget is acquired, objects in the list are converted into object values in an actual language environment, for example, the ButtonWidget is converted into a QButton object in pyqt5, and the Button object in JavaFx is converted into a Button object; inputWidget is converted to QLineEdit in pyqt5, to textField by default in JavaFx, and possibly to PasswordField depending on the value-type.
(3): the attribute values of the objects in the data structure are read and set to the attribute values of the actual object types.
(4): the string value of the CSS is read and a style is set for the object.
(5): the processes (2), (3) and (4) are recursively performed until the list of components is None.
According to the device for compiling the graphical user interface, provided by the embodiment 3 of the application, the JSON is used as a compiling sentence, so that the compiling mode of the GUI interface can be simplified. The interface content can be conveniently and uniformly managed by converting the interface content into different languages through JSON, and meanwhile, the convenience of one-time writing and conversion into different languages is realized. .
It is necessary to explain that: the technical scheme of the application also provides electronic equipment, which comprises: a communication interface capable of information interaction with other devices such as a network device and the like; and the processor is connected with the communication interface to realize information interaction with other devices, and is used for executing the method for writing the graphical user interface provided by one or more of the technical schemes when running the computer program, and the computer program is stored on the memory. Of course, in practice, the various components in the electronic device are coupled together by a bus system. It will be appreciated that a bus system is used to enable connected communications between these components. The bus system includes a power bus, a control bus, and a status signal bus in addition to the data bus. The memory in the embodiments of the present application is used to store various types of data to support the operation of the electronic device. Examples of such data include: any computer program for operating on an electronic device. It will be appreciated that the memory can be either volatile memory or nonvolatile memory, and can include both volatile and nonvolatile memory. Wherein the nonvolatile Memory may be Read Only Memory (ROM), programmable Read Only Memory (PROM, programmable Read-Only Memory), erasable programmable Read Only Memory (EPROM, erasable Programmable Read-Only Memory), electrically erasable programmable Read Only Memory (EEPROM, electrically Erasable Programmable Read-Only Memory), magnetic random access Memory (FRAM, ferromagnetic random access Memory), flash Memory (Flash Memory), magnetic surface Memory, optical disk, or compact disk Read Only Memory (CD-ROM, compact Disc Read-Only Memory); the magnetic surface memory may be a disk memory or a tape memory. The volatile memory may be random access memory (RAM, random AccessMemory), which acts as external cache memory. By way of example, and not limitation, many forms of RAM are available, such as static random access memory (SRAM, static Random Access Memory), synchronous static random access memory (SSRAM, synchronous Static Random Access Memory), dynamic random access memory (DRAM, dynamic Random Access Memory), synchronous dynamic random access memory (SDRAM, synchronousDynamic Random Access Memory), double data rate synchronous dynamic random access memory (ddr sdram, double Data Rate Synchronous Dynamic Random Access Memory), enhanced synchronous dynamic random access memory (ESDRAM, enhanced Synchronous Dynamic Random Access Memory), synchronous link dynamic random access memory (SLDRAM, syncLink Dynamic Random Access Memory), direct memory bus random access memory (DRRAM, direct Rambus Random Access Memory). The memory described by embodiments of the present application is intended to comprise, without being limited to, these and any other suitable types of memory. The method disclosed by the embodiment of the application can be applied to a processor or realized by the processor. The processor may be an integrated circuit chip having signal processing capabilities. In implementation, the steps of the above method may be performed by integrated logic circuits of hardware in a processor or by instructions in the form of software. The processor may be a general purpose processor, a DSP (Digital Signal Processing, meaning a chip capable of implementing digital signal processing techniques), or other programmable logic device, discrete gate or transistor logic device, discrete hardware components, or the like. The processor may implement or perform the methods, steps, and logic blocks disclosed in embodiments of the present application. The general purpose processor may be a microprocessor or any conventional processor or the like. The steps of the method disclosed in the embodiment of the application can be directly embodied in the hardware of the decoding processor or can be implemented by combining hardware and software modules in the decoding processor. The software modules may be located in a storage medium having a memory, and the processor reads the program in the memory and performs the steps of the method in combination with its hardware. The corresponding flow in each method of the embodiments of the present application is implemented when the processor executes the program, and for brevity, will not be described in detail herein.
Example 4
The invention also provides a readable storage medium, the readable storage medium stores a computer program, and the computer program when executed by a processor realizes the following steps:
FIG. 1 is a flow chart of a method for programming a graphical user interface according to embodiment 1 of the present invention; FIG. 2 is a schematic diagram illustrating the analysis and construction of a method for writing a graphical user interface according to embodiment 1 of the present invention;
in step S101, JSON text is adopted as a writing specification of a graphical user interface;
after the JSON text is read, the text compliance is checked, and if the JSON text is wrong or contains unspecified component names, the program can directly stop executing and give out error reason prompts. If the read can be performed normally, the execution is continued.
In step S102, the JSON text is read, and on the premise that the JSON text meets the specification, a root component is first created, and then component objects are sequentially created from outside to inside to parse the JSON text into an intermediate data structure.
In fig. 2, a parser is employed to parse its contents in turn and convert into a specific data structure description.
Creating a virtual root component and assigning a null;
analyzing from the outermost layer of the JSON file, if the outermost layer is of an object type, creating a sub-component list by the root component; if the outermost layer is of an array type, firstly acquiring the array length and creating a subcomponent list with a specified length;
Creating a corresponding object type according to a key value in a JSON file, and adding the object type into the sub-component list after the object type is successfully created;
and reading the relevant attribute value of the value corresponding to the key value until the complete JSON text is analyzed to generate an intermediate data structure.
The detailed analysis process is as follows:
(1) The parser will first create a virtual root RootWidget object. The list of subcomponents of the originally created RootWidget object is not created, but is assigned a None (denoted None in Python, and null in Java).
(2) The parser parses the outermost layer of the JSON file, and if the outermost layer is an object type, the rootwidgets create a list of sub-components with length of 1; if the outermost layer is of an array type, the array length is obtained first, and a component list of a specified length is created.
(3) The parser creates a corresponding object type according to the key value in the JSON, if the key is button, a button Widget object is created; a key of "input" will create an InputWidget object. The successfully created objects are added to the sub-list of the rootwidgets in turn. The list of sub-components for each object is by default None and is created according to the rules in 4) only if it is determined that it does contain a sub-component.
(4) The parser reads the "sub-list" value of the value in the corresponding key, and if the value is not included, the value is not processed. If the value is contained, a list of components is created according to the rules in 2).
(5) The parser reads the "style" attribute value in the value corresponding to the key, and saves the converted CSS format character string to the style attribute of the object.
(6) And the parser reads other attribute values in the value corresponding to the key and sequentially assigns the attribute values to the specific object attribute. If the object does not define the attribute, then execution is directly aborted and stopped.
(7) The processes (2), (3), (4), (5) and (6) are recursively performed until the complete JSON text is parsed, ultimately producing the data structure shown in fig. 3. FIG. 3 is a diagram illustrating a structure of component data in a method for writing a graphical user interface according to embodiment 1 of the present invention;
during the parsing process, attention needs to be paid:
first, all components inherit from the top-level component ObjectWidget, objectWidget defining common properties of all components, such as a list of sub-components, etc.
Second, JSON text is actually converted into an object to be represented, so it is guaranteed that the key type in JSON is a type already defined and cannot be any type specified by the user. When the parser parses the undefined type, it throws out the exception and stops executing.
Thirdly, the specific corresponding type of the component is required to be specified through a key, and the key is not case-independent and can be normally analyzed. The key as the button is denoted as "button"; the key of the input box is denoted as "input"; the key of the text of a plurality of lines is denoted as "text".
Fourth, the key value when the component is parsed is converted into the corresponding attribute in the object for storage. Each component has its own unique attributes and common attributes, and is directly erroneous and exited if the user-defined attributes are not present. If the user does not specify an attribute value, the default values already defined are used.
Fifth, the component style can be set in JSON using CSS (cascading style sheet) and finally saved as an object attribute value after finishing. The child component style, if not set alone, will inherit the parent component style by default.
Sixth, if other components are included in the components, the components that are not included in each other are sequentially stored in the list according to the parsing order
Seventh, the data structure description defaults to create a topmost RootWidget object, which is also a sub-class of objectwidgets, but the rootwidgets are not actually built when converted into actual components by the builder, and their function is only to prevent the situation that the top object itself is a list.
In step S103, after the parsing of the intermediate data structure is completed, the object types in the JSON text are sequentially converted from the root component object into corresponding component types in the corresponding language, and finally converted into corresponding codes according to the parent-child structure.
After the data structure description is successfully created, the program triggers the built-in constructor to execute. The constructor sequentially converts the object types in the description into corresponding component types in specific languages from a top-level root component (rootWidget) object, and finally converts the object types into specific code implementations according to a parent-child structure.
The builder-implemented process includes:
(1): and creating information such as project engineering, configuration files and the like according to the used language environment, and generating a project starting environment.
(2): the method comprises the steps that an acquisition analyzer analyzes a packaged data structure, a sub-component list of a RootWidget is acquired, objects in the list are converted into object values in an actual language environment, for example, the ButtonWidget is converted into a QButton object in pyqt5, and the Button object in JavaFx is converted into a Button object; inputWidget is converted to QLineEdit in pyqt5, to textField by default in JavaFx, and possibly to PasswordField depending on the value-type.
(3): the attribute values of the objects in the data structure are read and set to the attribute values of the actual object types.
(4): the string value of the CSS is read and a style is set for the object.
(5): the processes (2), (3) and (4) are recursively performed until the list of components is None.
According to the storage medium written by the graphical user interface provided by the embodiment 4 of the application, the JSON is used as a writing sentence, so that the writing mode of the GUI interface can be simplified. The interface content can be conveniently and uniformly managed by converting the interface content into different languages through JSON, and meanwhile, the convenience of one-time writing and conversion into different languages is realized.
The embodiment of the application also provides a storage medium, namely a computer storage medium, particularly a computer readable storage medium, for example, comprising a memory for storing a computer program, wherein the computer program can be executed by a processor to complete the steps of the method. The computer readable storage medium may be FRAM, ROM, PROM, EPROM, EEPROM, flash Memory, magnetic surface Memory, optical disk, or CD-ROM.
Those of ordinary skill in the art will appreciate that: all or part of the steps for implementing the above method embodiments may be implemented by hardware associated with program instructions, where the foregoing program may be stored in a computer readable storage medium, and when executed, the program performs steps including the above method embodiments; and the aforementioned storage medium includes: a removable storage device, ROM, RAM, magnetic or optical disk, or other medium capable of storing program code. Alternatively, the above-described integrated units of the present application may be stored in a computer-readable storage medium if implemented in the form of software functional modules and sold or used as separate products. Based on such understanding, the technical solutions of the embodiments of the present application may be embodied in essence or a part contributing to the prior art in the form of a software product stored in a storage medium, including several instructions for causing an electronic device (which may be a personal computer, a server, or a network device, etc.) to perform all or part of the methods described in the embodiments of the present application. And the aforementioned storage medium includes: a removable storage device, ROM, RAM, magnetic or optical disk, or other medium capable of storing program code.
The description of the related parts in the processing device and the storage medium written in the graphical user interface provided in the embodiments of the present application may refer to the detailed description of the corresponding parts in the method for writing the graphical user interface provided in embodiment 1 of the present application, which is not repeated here.
It is noted that relational terms such as first and second, and the like are used solely to distinguish one entity or action from another entity or action without necessarily requiring or implying any actual such relationship or order between such entities or actions. Moreover, the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements is inherent to. Without further limitation, an element defined by the phrase "comprising one … …" does not exclude the presence of other like elements in a process, method, article, or apparatus that comprises the element. In addition, the parts of the above technical solutions provided in the embodiments of the present application, which are consistent with the implementation principles of the corresponding technical solutions in the prior art, are not described in detail, so that redundant descriptions are avoided.
While the specific embodiments of the present invention have been described above with reference to the drawings, the scope of the present invention is not limited thereto. Other modifications and variations to the present invention will be apparent to those of skill in the art upon review of the foregoing description. It is not necessary here nor is it exhaustive of all embodiments. On the basis of the technical scheme of the invention, various modifications or variations which can be made by the person skilled in the art without the need of creative efforts are still within the protection scope of the invention.
Claims (7)
1. A method of programming a graphical user interface, comprising the steps of:
adopting JSON text as writing specification of the graphic user interface;
reading the JSON text, firstly creating a root component on the premise that the JSON text accords with the regulations, and then sequentially creating component objects from outside to inside to analyze the JSON text into an intermediate data structure; the detailed process of creating root components and then sequentially creating component objects from outside to inside to parse the JSON text into a data structure to be converted comprises the following steps: creating a virtual root component and assigning a null; analyzing from the outermost layer of the JSON file, if the outermost layer is of an object type, creating a sub-component list by the root component; if the outermost layer is of an array type, firstly acquiring the array length and creating a subcomponent list with a specified length; creating a corresponding object type according to a key value in a JSON file, and adding the object type into the sub-component list after the object type is successfully created; reading the relevant attribute value of the value corresponding to the key value until the complete JSON text is analyzed to generate an intermediate data structure;
The process of reading the relevant attribute value of the value corresponding to the key value comprises the following steps: reading a sub-list value of the value corresponding to the key value, if the sub-list value is contained, creating a component list, and if the sub-list value is not contained, not processing; reading a style attribute value of the value corresponding to the key value, and storing the CSS format character string into the style attribute of the object; reading other attribute values except the sub-list value and the style attribute value of the value corresponding to the key value, and sequentially assigning the other attributes to the corresponding object attributes;
after the analysis of the intermediate data structure is completed, sequentially converting the object types in the JSON text into corresponding component types in the corresponding language from the root component object, and finally converting the object types into corresponding codes according to the parent-child structure; the creating the corresponding object type according to the key value in the JSON file comprises: if the key value is "Button", creating a Button program object; if the key value is "Input," then an Input program object is created.
2. The method for writing a graphical user interface according to claim 1, wherein the method for verifying whether JSON text is compliant with the specification is: judging whether the JSON text is wrong or whether the JSON text contains unspecified component names; if an error occurs or an unspecified component is contained, execution is stopped and an error cause prompt is given.
3. The method according to claim 1, wherein the process of converting the object types in the JSON text to the corresponding component types in the corresponding language sequentially from the root component object comprises:
acquiring a sub-component list in a root component, and converting an object in the sub-component list into an object value in an actual language environment;
reading the attribute value of the object in the actual language environment, and setting the attribute value as the attribute value of the type of the object to be converted;
and reading the character string value in the cascading style sheet, and stopping when no style is set for the object until the component list is empty.
4. A method of graphical user interface authoring according to claim 3 further comprising, prior to said obtaining a list of subcomponents in a root component: creating project engineering and configuration files to generate project starting environment according to the language environment.
5. The system for writing the graphical user interface is characterized by comprising a preprocessing module, an analysis module and a conversion module;
the preprocessing module is used for adopting JSON text as a writing specification of a graphical user interface;
the analysis module is used for reading the JSON text, firstly creating a root component on the premise that the JSON text accords with the regulations, and then sequentially creating component objects from outside to inside to analyze the JSON text into an intermediate data structure; the detailed process of creating root components and then sequentially creating component objects from outside to inside to parse the JSON text into a data structure to be converted comprises the following steps: creating a virtual root component and assigning a null; analyzing from the outermost layer of the JSON file, if the outermost layer is of an object type, creating a sub-component list by the root component; if the outermost layer is of an array type, firstly acquiring the array length and creating a subcomponent list with a specified length; creating a corresponding object type according to a key value in a JSON file, and adding the object type into the sub-component list after the object type is successfully created; reading the relevant attribute value of the value corresponding to the key value until the complete JSON text is analyzed to generate an intermediate data structure;
The process of reading the relevant attribute value of the value corresponding to the key value comprises the following steps: reading a sub-list value of the value corresponding to the key value, if the sub-list value is contained, creating a component list, and if the sub-list value is not contained, not processing; reading a style attribute value of the value corresponding to the key value, and storing the CSS format character string into the style attribute of the object; reading other attribute values except the sub-list value and the style attribute value of the value corresponding to the key value, and sequentially assigning the other attributes to the corresponding object attributes;
the conversion module is used for sequentially converting the object types in the JSON text into corresponding component types in the corresponding language from the root component object after the analysis of the intermediate data structure is completed, and finally converting the object types into corresponding codes according to the parent-child structure; the creating the corresponding object type according to the key value in the JSON file comprises: if the key value is "Button", creating a Button program object; if the key value is "Input," then an Input program object is created.
6. An electronic device, comprising:
a memory for storing a computer program;
a processor for implementing the method steps of any one of claims 1 to 4 when executing said computer program.
7. A readable storage medium, characterized in that it has stored thereon a computer program which, when executed by a processor, implements the method steps of any of claims 1 to 4.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111607548.9A CN114443031B (en) | 2021-12-24 | 2021-12-24 | Method, system, equipment and storage medium for writing graphical user interface |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111607548.9A CN114443031B (en) | 2021-12-24 | 2021-12-24 | Method, system, equipment and storage medium for writing graphical user interface |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN114443031A CN114443031A (en) | 2022-05-06 |
| CN114443031B true CN114443031B (en) | 2023-11-10 |
Family
ID=81363799
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202111607548.9A Active CN114443031B (en) | 2021-12-24 | 2021-12-24 | Method, system, equipment and storage medium for writing graphical user interface |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114443031B (en) |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106843852A (en) * | 2016-12-28 | 2017-06-13 | 北京乐动卓越科技有限公司 | A kind of method that client graphical user interface is quickly created |
| CN113138761A (en) * | 2021-04-30 | 2021-07-20 | 南京电研电力自动化股份有限公司 | Interface programming method and system |
Family Cites Families (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| EP1460533A1 (en) * | 2003-03-17 | 2004-09-22 | Alcatel | Extensible graphical user interface development framework |
-
2021
- 2021-12-24 CN CN202111607548.9A patent/CN114443031B/en active Active
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106843852A (en) * | 2016-12-28 | 2017-06-13 | 北京乐动卓越科技有限公司 | A kind of method that client graphical user interface is quickly created |
| CN113138761A (en) * | 2021-04-30 | 2021-07-20 | 南京电研电力自动化股份有限公司 | Interface programming method and system |
Also Published As
| Publication number | Publication date |
|---|---|
| CN114443031A (en) | 2022-05-06 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US7610545B2 (en) | Annotations for tracking provenance | |
| US7937688B2 (en) | System and method for context-sensitive help in a design environment | |
| US7930182B2 (en) | Computer-implemented tool for creation of speech application code and associated functional specification | |
| US8245186B2 (en) | Techniques for offering and applying code modifications | |
| US7634722B2 (en) | Reversible logic for widget and markup language generation | |
| KR101213890B1 (en) | Using strong data types to express speech recognition grammars in software programs | |
| US20060026559A1 (en) | Automatic content completion of valid values for method argument variables | |
| US20040158820A1 (en) | System for generating an application framework and components | |
| US7761856B2 (en) | Defining expressions in a meta-object model of an application | |
| CN114077430A (en) | Interface generation method and device, electronic equipment and storage medium | |
| CN103136100A (en) | Method and system for Android test | |
| KR20080043345A (en) | Declaratively defined control actions | |
| TWI327701B (en) | System and method for defining and using subclasses declaratively within markup | |
| CN114443031B (en) | Method, system, equipment and storage medium for writing graphical user interface | |
| EP4145761A1 (en) | A system and a method for automatic generation of smart contracts across blockchain platforms | |
| CN113138755A (en) | JSON serialization and deserialization optimization method and system | |
| CN117234487A (en) | Method and device for generating software interface, electronic equipment and storage medium | |
| Savic et al. | Use case specification at different levels of abstraction | |
| CN110737431B (en) | Software development method, development platform, terminal device and storage medium | |
| CN112380142A (en) | Interface document management method and device and test equipment | |
| CN111880785A (en) | Program code conversion method and device and electronic equipment | |
| KR20220003106A (en) | Systems and methods of computer-assisted computer programming | |
| CN117170654A (en) | Development method and device of graphical user interface application program and electronic equipment | |
| Dayan et al. | MDA Models and PIM/PSM Transformations Using Extended Automata | |
| CN115268907A (en) | Method for generating software system control interaction logic by using json data |
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 | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |