CN113934486A - Method and device for editing and rendering user interface component in real time - Google Patents

Method and device for editing and rendering user interface component in real time Download PDF

Info

Publication number
CN113934486A
CN113934486A CN202111072271.4A CN202111072271A CN113934486A CN 113934486 A CN113934486 A CN 113934486A CN 202111072271 A CN202111072271 A CN 202111072271A CN 113934486 A CN113934486 A CN 113934486A
Authority
CN
China
Prior art keywords
user interface
editing
code
component
interface component
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202111072271.4A
Other languages
Chinese (zh)
Inventor
李忠文
赵铭
陈林
李丹波
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Shenzhen Digital Power Grid Research Institute of China Southern Power Grid Co Ltd
Original Assignee
Shenzhen Digital Power Grid Research Institute of China Southern Power Grid Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Shenzhen Digital Power Grid Research Institute of China Southern Power Grid Co Ltd filed Critical Shenzhen Digital Power Grid Research Institute of China Southern Power Grid Co Ltd
Priority to CN202111072271.4A priority Critical patent/CN113934486A/en
Publication of CN113934486A publication Critical patent/CN113934486A/en
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • User Interface Of Digital Computer (AREA)
  • Stored Programmes (AREA)

Abstract

The invention discloses a method and a device for editing and rendering a user interface component in real time, wherein the method comprises the following steps: acquiring editing information which is submitted by a property editing window of a user interface component and is input by a user on the property editing window; the attribute editing window is used for editing the attribute information of the user interface component in real time; generating a code corresponding to the attribute information according to the editing information; sending the code to a user interface browser to cause the user interface browser to render the user interface component according to the code. Therefore, the method and the device can edit and render the user interface component in real time, and improve the editing efficiency of the user interface component.

Description

Method and device for editing and rendering user interface component in real time
Technical Field
The invention relates to the technical field of user interface editing, in particular to a method and a device for editing and rendering a user interface component in real time.
Background
A User Interface (UI) is a medium for interaction and information exchange between a system and a user and is composed of one or more components. As society develops and the standard of living increases, the need for personalization is becoming more popular with the public, and therefore, personalized customization of user interfaces and periodic updating of user interfaces to appeal to users are becoming more common.
However, in practice, there are two main problems with editing a user interface: 1. all or part of components in the user interface are edited each time, the theme resource file is required to be modified and redeployed to the server, and the components cannot be edited in real time; 2. after the components of the user interface are edited, the effects can only be seen by applying the components to specific page scenes, and the effects cannot be previewed in real time when the properties of the components are edited. Therefore, how to implement real-time editing and real-time rendering on the user interface component is very important.
Disclosure of Invention
The technical problem to be solved by the present invention is to provide a method and an apparatus for editing and rendering a user interface component in real time, which can edit and render the user interface component in real time, and improve the editing efficiency of the user interface component.
In order to solve the above technical problem, a first aspect of the present invention discloses a method for editing and rendering a user interface component in real time, where the method includes:
acquiring editing information which is submitted by a property editing window of a user interface component and is input by a user on the property editing window; the attribute editing window is used for editing the attribute information of the user interface component in real time;
generating a code corresponding to the attribute information according to the editing information;
sending the code to a user interface browser to cause the user interface browser to render the user interface component according to the code.
As an optional implementation manner, in the first aspect of the present invention, the generating a code corresponding to the attribute information according to the editing information includes:
determining a source of the editing information; the source of the editing information comprises the visual editing window and/or the code editing window;
when the fact that the editing information comes from the visual editing window is determined, generating a code corresponding to the attribute information of the user interface component according to the editing information and a preset code generation mode;
and when the fact that the editing information comes from the code editing window is determined, generating a code corresponding to the attribute information of the user interface component according to the editing information.
As an optional implementation manner, in the first aspect of the present invention, before acquiring the editing information, submitted by the property editing window of the user interface component, on the property editing window, input by the user, the method further includes:
determining the component type of a user interface component needing to be edited; wherein the component types comprise a custom type and a non-custom type;
when the component type needing to be edited is determined to be the custom type, generating a style code corresponding to a preset style of a code editing window, sending the style code to a user interface browser, so that the user interface browser renders the code editing window, and triggering and executing the operation of acquiring editing information input on the attribute editing window by a user submitted by the attribute editing window of the user interface component;
and when the component type needing to be edited is determined to be the non-self-defined type, sending a style configuration file corresponding to a preset style of a visual editing window to a user interface browser, so that the user interface browser renders the visual editing window according to the style configuration file, and triggering and executing the operation of acquiring the editing information input on the attribute editing window by the user submitted by the attribute editing window of the user interface component.
As an optional implementation manner, in the first aspect of the present invention, the generating a code corresponding to attribute information of the user interface component according to the editing information and a preset code generation manner includes:
generating an attribute file corresponding to the attribute information according to the editing information;
requesting the user interface browser to store a preset style file in a cache corresponding to the user interface browser;
and when detecting that the preset style file is stored in a cache corresponding to the user interface browser, acquiring the attribute file and the preset style file, and generating a code corresponding to the attribute information according to the attribute file and the preset style file.
As an optional implementation manner, in the first aspect of the present invention, the sending the code to a user interface browser to make the user interface browser render the user interface component according to the code includes:
and modifying the rendering model created by the user interface browser according to the code so that the user interface browser renders the user interface component according to the modified rendering model.
As an optional implementation manner, in the first aspect of the present invention, after the sending the code to the user interface browser to make the user interface browser render the user interface component according to the code, the method further includes:
judging whether an editing completion instruction aiming at the user interface component is received or not;
when the editing completion instruction aiming at the user interface component is judged to be received, generating an attribute file corresponding to the attribute information according to the attribute information of all the current user interface components; the attribute file comprises a code corresponding to the attribute information; the attribute file is used for backing up the attribute information of all the user interface components which are edited at this time and/or subsequently editing the user interface components.
As an optional implementation manner, in the first aspect of the present invention, after the sending the code to the user interface browser to make the user interface browser render the user interface component according to the code, the method further includes:
judging whether an application instruction aiming at the user interface component is received or not;
and when judging that the application instruction aiming at the user interface component is received, applying the attribute information of the current user interface component to a user interface according to the application instruction aiming at the user interface component.
A second aspect of the present invention discloses an apparatus for real-time editing and rendering of a user interface component, the apparatus comprising:
the system comprises an acquisition module, a display module and a display module, wherein the acquisition module is used for acquiring editing information which is submitted by a property editing window of a user interface component and is input on the property editing window by a user; the attribute editing window is used for editing the attribute information of the user interface component in real time;
the first generation module is used for generating a code corresponding to the attribute information according to the editing information;
and the sending module is used for sending the code to a user interface browser so that the user interface browser renders the user interface component according to the code.
As an optional implementation manner, in the second aspect of the present invention, the property editing window is a visual editing window of the user interface component or a code editing window of the user interface component, and the first generating module includes:
the determining submodule is used for determining the source of the editing information; the source of the editing information comprises the visual editing window and/or the code editing window;
the first generation submodule is used for generating a code corresponding to the attribute information of the user interface component according to the editing information and a preset code generation mode when the determining submodule determines that the editing information comes from the visual editing window;
and the second generation sub-module is used for generating a code corresponding to the attribute information of the user interface component according to the editing information when the determining sub-module determines that the editing information comes from the code editing window.
As an alternative embodiment, in the second aspect of the present invention, the apparatus further comprises:
the determining module is used for determining the component type of the user interface component needing to be edited before the obtaining module obtains the editing information which is submitted by the attribute editing window of the user interface component and is input by the user on the attribute editing window; wherein the component types comprise a custom type and a non-custom type;
the second generation module is used for generating a style code corresponding to the preset style of the code editing window when the determination module determines that the component type needing to be edited is the custom type;
the sending module is further configured to send the style code generated by the second generating module to a user interface browser, so that the user interface browser renders a code editing window, and triggers the obtaining module to execute the operation of obtaining editing information input on the attribute editing window by a user submitted by the attribute editing window of the user interface component;
the sending module is further configured to send a style configuration file corresponding to a preset style of a visual editing window to a user interface browser when the determining module determines that the component type to be edited is the non-user-defined type, so that the user interface browser renders the visual editing window according to the style configuration file, and triggers the obtaining module to perform the operation of obtaining editing information, which is submitted by a property editing window of the user interface component and is input by a user, on the property editing window.
As an alternative embodiment, in the second aspect of the present invention, the first generation submodule includes:
the generating unit is used for generating an attribute file corresponding to the attribute information according to the editing information;
the request unit is used for requesting the user interface browser to store a preset style file in a cache corresponding to the user interface browser;
the obtaining unit is used for obtaining the attribute file and the preset style file when detecting that the preset style file is stored in a cache corresponding to the user interface browser;
the generating unit is further configured to generate a code corresponding to the attribute information according to the attribute file and the preset style file after the acquiring unit acquires the attribute file and the preset style file.
As an optional implementation manner, in the second aspect of the present invention, the sending module sends the code to a user interface browser, so that a manner in which the user interface browser renders the user interface component according to the code specifically includes:
inserting the code into a rendering model created by the user interface browser to cause the user interface browser to render the user interface component according to the rendering model.
As an alternative embodiment, in the second aspect of the present invention, the apparatus further comprises:
the judging module is used for judging whether an editing completion instruction aiming at the user interface component is received or not after the sending module sends the code to the user interface browser so that the user interface browser renders the user interface component according to the code;
a third generating module, configured to generate, when the determining module determines that an editing completion instruction for the user interface component is received, an attribute file corresponding to the attribute information according to the attribute information of all current user interface components; the attribute file comprises a code corresponding to the attribute information; the attribute file is used for backing up the attribute information of all the user interface components which are edited at this time and/or subsequently editing the user interface components.
As an alternative embodiment, in the second aspect of the present invention, the apparatus further comprises:
the judging module is further configured to judge whether an application instruction for the user interface component is received after the sending module sends the code to the user interface browser so that the user interface browser renders the user interface component according to the code;
and the application module is used for applying the attribute information of the current user interface component to a user interface according to the application instruction of the user interface component when the judgment module judges that the application instruction of the user interface component is received.
The third aspect of the present invention discloses another apparatus for real-time editing and rendering of a user interface component, the apparatus comprising:
a memory storing executable program code;
a processor coupled with the memory;
the processor calls the executable program code stored in the memory to execute the method for editing and rendering the user interface component in real time disclosed by the first aspect of the invention.
A fourth aspect of the present invention discloses a computer-readable storage medium storing computer instructions for performing the method for editing and rendering the user interface component disclosed in the first aspect of the present invention in real time when the computer instructions are invoked.
Compared with the prior art, the embodiment of the invention has the following beneficial effects:
in the embodiment of the invention, editing information input on an attribute editing window by a user and submitted by the attribute editing window of a user interface component is obtained; the attribute editing window is used for editing the attribute information of the user interface component in real time; generating a code corresponding to the attribute information according to the editing information; sending the code to a user interface browser to cause the user interface browser to render the user interface component according to the code. Therefore, the method and the device can edit and render the user interface component in real time, and improve the editing efficiency of the user interface component.
Drawings
In order to more clearly illustrate the technical solutions in the embodiments of the present invention, the drawings needed to be used in the description of the embodiments will be briefly introduced below, and it is obvious that the drawings in the following description are only some embodiments of the present invention, and it is obvious for those skilled in the art to obtain other drawings based on these drawings without creative efforts.
FIG. 1 is a flowchart illustrating a method for real-time editing and rendering of a user interface component according to an embodiment of the present invention;
FIG. 2 is a schematic flow chart illustrating another method for real-time editing and rendering of a user interface component according to an embodiment of the present invention;
FIG. 3 is a schematic structural diagram of an apparatus for real-time editing and rendering of a user interface component according to an embodiment of the present invention;
FIG. 4 is a schematic structural diagram of another apparatus for real-time editing and rendering of user interface components according to an embodiment of the present disclosure;
FIG. 5 is a schematic structural diagram of an apparatus for real-time editing and rendering of a user interface component according to an embodiment of the present disclosure.
Detailed Description
In order to make the technical solutions of the present invention better understood, the technical solutions in the embodiments of the present invention will be clearly and completely described below with reference to the drawings in the embodiments of the present invention, and it is obvious that the described embodiments are only a part of the embodiments of the present invention, and not all of the embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present invention.
The terms "first," "second," and the like in the description and claims of the present invention and in the above-described drawings are used for distinguishing between different objects and not for describing a particular order. Furthermore, the terms "include" and "have," as well as any variations thereof, are intended to cover non-exclusive inclusions. For example, a process, method, apparatus, article, or article that comprises a list of steps or elements is not limited to only those steps or elements listed, but may alternatively include other steps or elements not listed, or inherent to such process, method, article, or article.
Reference herein to "an embodiment" means that a particular feature, structure, or characteristic described in connection with the embodiment can be included in at least one embodiment of the invention. The appearances of the phrase in various places in the specification are not necessarily all referring to the same embodiment, nor are separate or alternative embodiments mutually exclusive of other embodiments. It is explicitly and implicitly understood by one skilled in the art that the embodiments described herein can be combined with other embodiments.
The invention discloses a method and a device for editing and rendering a user interface component in real time, which can edit and render the user interface component in real time and improve the editing efficiency of the user interface component. The following are detailed below.
Example one
Referring to fig. 1, fig. 1 is a flowchart illustrating a method for real-time editing and rendering of a user interface component according to an embodiment of the present invention. The method for editing and rendering the user interface component in real time depicted in fig. 1 may be applied to a local server or a cloud server, or may be applied to a user interface editing system, which is not limited in the embodiment of the present invention. As shown in fig. 1, the method for editing and rendering the user interface component in real time may include the following operations:
101. and acquiring editing information input on the attribute editing window by a user and submitted by the attribute editing window of the user interface component.
In the embodiment of the present invention, optionally, the user interface component may include a custom component and a non-custom component. Wherein, optionally, the non-custom component may comprise at least one of a base component, an interactive component, and a chart component. Optionally, the basic component may include a user interface global color style component, and may further include a user interface layout style component. Optionally, the user interface global color style component may be a red global style component, a green global style component, or a yellow global style component, and so on, and the embodiment of the present invention is not limited. Optionally, the user interface layout style component may include at least one of a center alignment layout style component, a left alignment layout style component, a right alignment layout style component, and a two-end alignment layout style component. Optionally, the interactive component may include at least one of a button component, a form component, a radio box component, and a check box component. Optionally, the button assembly may include at least one of a button frame assembly, a button color assembly, and a button text assembly. Wherein, optionally, the form component may include at least one of a form label component, a form field component, and a form button component. Wherein, optionally, the radio frame component may include a radio button component and/or a radio text label component. Wherein, optionally, the check box component can comprise a check button component and/or a check text label component. Optionally, the chart component may include at least one of a line chart component, a bar chart component, a pie chart component, and a scatter chart component. Optionally, the line drawing component may include at least one of a line drawing background color component, a line drawing line width component, a line drawing dashed line type component, a line drawing text color component, a line drawing text size component, and a line drawing text layout component. Optionally, the bar graph component may include at least one of a bar graph background color component, a bar graph bar width component, a bar graph text character color component, a bar graph text character size component, and a bar graph text character layout component. Optionally, the pie chart component may include at least one of a pie chart background color component, a pie chart partition line width component, a pie chart partition line dashed line type component, a pie chart text color component, a pie chart text size component, and a pie chart text layout component. Optionally, the scattergram component may include at least one of a scattergram background color component, a scattergram size component, a scattergram type component, a scattergram text color component, a scattergram text size component, and a scattergram text layout component. Optionally, the customized component may include components not involved in the non-customized component, and specifically may include personalized components and/or special components.
In embodiments of the present invention, this step of obtaining edit information may be performed by vue event bus configuration collection techniques. In the embodiment of the invention, the attribute editing window can be used for editing the attribute information of the user interface component in real time. Optionally, the attribute information of the user interface component may include an attribute parameter name and/or an attribute parameter value of the user interface component. Optionally, the editing information may include attribute information corresponding to the modified user interface component.
102. And generating a code corresponding to the attribute information according to the editing information.
In the embodiment of the invention, the code corresponding to the attribute information can be used for rendering the user interface component by the user interface browser according to the code. Optionally, the code corresponding to the attribute information may be a code segment based on the CSS cascading style sheet specification.
103. The code is sent to a user interface browser to cause the user interface browser to render the user interface component according to the code.
In embodiments of the present invention, the user interface browser may render the user interface component according to the received code. The user interface browser may include at least one of a Trident kernel-based browser (such as an IE browser), a Gecko kernel-based browser (such as a Firefox browser), a WebKit kernel-based browser (such as a Safari browser, a Chrome browser, etc.), and a Presto kernel-based browser (such as an Opera browser, etc.), which is not limited in the embodiments of the present invention.
Therefore, the embodiment of the invention can edit and render the user interface component in real time, and improve the editing efficiency of the user interface component.
Example two
Referring to fig. 2, fig. 2 is a flowchart illustrating another method for real-time editing and rendering of a user interface component according to an embodiment of the present invention. The method for editing and rendering the user interface component in real time depicted in fig. 2 may be applied to a local server or a cloud server, or may be applied to a user interface editing system, which is not limited in the embodiment of the present invention. As shown in fig. 2, the method for editing and rendering the user interface component in real time may include the following operations:
201. and acquiring editing information input on the attribute editing window by a user and submitted by the attribute editing window of the user interface component.
In the embodiment of the present invention, the attribute editing window of the user interface component may be a visual editing window of the user interface component or a code editing window of the user interface component. It should be noted that the visual editing window and the code editing window may be in the same page or in different pages, and the embodiment of the present invention is not limited. In the embodiment of the present invention, for other descriptions of step 201, please refer to the detailed description of step 101 in the first embodiment, which is not repeated herein.
202. Determining the source of the editing information, and when determining that the editing information comes from the visual editing window, triggering to execute step 203; when it is determined that the editing information is from the code editing window, execution of step 204 may be triggered.
203. And when the editing information is determined to come from the visual editing window, generating a code corresponding to the attribute information of the user interface component according to the editing information and a preset code generation mode.
In embodiments of the present invention, the visual editing window may be used to edit a non-custom type user interface component. Optionally, the preset code generation manner may include a Sass front-end compiling method. Optionally, the code corresponding to the attribute information of the user interface component may be a code segment based on the CSS cascading style sheet specification.
204. And when the fact that the editing information comes from the code editing window is determined, generating a code corresponding to the attribute information of the user interface component according to the editing information.
In embodiments of the present invention, the code editing window may be used to edit user interface components of a custom type. Optionally, the editing information of the window may be a code segment based on the CSS cascading style sheet specification written in the code editing window by the user.
205. The code is sent to a user interface browser to cause the user interface browser to render the user interface component according to the code.
In the embodiment of the present invention, for other descriptions of step 205, please refer to the detailed description of step 103 in the first embodiment, which is not repeated herein.
Therefore, different codes can be generated according to different sources of the editing information, the user interface component can be edited and rendered in real time according to the different codes, and the editing efficiency of the user interface component is improved.
In an optional embodiment, before acquiring the editing information input on the property editing window by the user submitted by the property editing window of the user interface component, the method may further include:
determining the component type of a user interface component needing to be edited; the component types can comprise a custom type and a non-custom type;
when the type of the component needing to be edited is determined to be a user-defined type, generating a style code corresponding to a preset style of a code editing window, sending the style code to a user interface browser, so that the user interface browser renders the code editing window, and triggering the executed operation of acquiring editing information input on the attribute editing window by a user submitted by the attribute editing window of the user interface component;
and when the component type needing to be edited is determined to be a non-self-defined type, sending a style configuration file corresponding to the preset style of the visual editing window to the user interface browser, so that the user interface browser renders the visual editing window according to the style configuration file, and triggering the executed operation of acquiring the editing information input on the attribute editing window by the user and submitted by the attribute editing window of the user interface component.
In this alternative embodiment, the code editing window may be based on a vsCode editor plug-in that may be used to modify custom type components in the user interface components. Optionally, the style configuration file may be a modifiable component property configuration file data. Js may define the data format of all configurable attributes, and optionally, the data format may include the outermost category component type name (such as a non-custom component or a custom component) and/or the config configuration. Optionally, the back layer of the config configuration may include type (refinement type of component) and/or key (parameter setting value corresponding to type).
Therefore, the optional embodiment can be implemented to generate the style code of the corresponding window according to the type of the user interface component needing to be edited, so that the user interface browser renders the corresponding editing window, the needed editing window is provided for the user, and the editing efficiency is improved.
In another optional embodiment, generating a code corresponding to the attribute information of the user interface component based on a preset code generation rule according to the editing information may include:
generating an attribute file corresponding to the attribute information according to the editing information;
requesting a user interface browser to store a preset style file in a cache corresponding to the user interface browser;
and when the preset style file is detected to be stored in the cache corresponding to the user interface browser, acquiring the attribute file and the preset style file, and generating a code corresponding to the attribute information according to the attribute file and the preset style file.
In this optional embodiment, the attribute file corresponding to the attribute information may be a loss variable file based on a writeFile module in the open source library loss. In this alternative embodiment, the preset style file may be a component Sass resource file based on the open source library Sass. Optionally, the preloadFiles module in the open source library, say, jss may request the user interface browser to execute an operation of preloading the preset style file. In this optional embodiment, the attribute file and the preset style file may be uniformly compiled based on a complifile module in the open source library sass, so as to obtain a code corresponding to the attribute information, and further, the code may be a code based on the CSS cascading style sheet specification that may be recognized by the browser.
Therefore, the optional embodiment can be implemented to generate the code corresponding to the attribute information of the user interface component according to the attribute file and the preset style file, so that the efficiency and the accuracy of identifying and rendering the user interface component by the browser are improved.
In yet another alternative embodiment, sending the code to a user interface browser to cause the user interface browser to render the user interface component according to the code may include:
and modifying the rendering model created by the user interface browser according to the code so that the user interface browser renders the user interface component according to the modified rendering model.
In this alternative embodiment, the rendering model created by the user interface browser may be a DOM document object model. Optionally, the rendering model created by the user interface browser may be modified by changing an element in the DOM document object model according to the code, and specifically, the rendering model created by the user interface browser may be modified by changing a head tag in the DOM document object file according to the code.
Therefore, the optional embodiment can be implemented to modify the rendering model created by the user interface browser according to the code corresponding to the attribute information, so that the browser renders the user interface component according to the modified rendering model, thereby realizing real-time rendering of the user interface component and improving the editing efficiency of the user interface component.
In yet another alternative embodiment, after sending the code to the user interface browser to cause the user interface browser to render the user interface component according to the code, the method may further include:
judging whether an editing completion instruction aiming at the user interface component is received or not;
when the editing completion instruction aiming at the user interface components is judged to be received, generating an attribute file corresponding to the attribute information according to the attribute information of all the current user interface components; the attribute file can comprise a code corresponding to the attribute information; the property file can be used for backing up property information of all the user interface components which are edited at this time and/or editing the user interface components subsequently.
Therefore, by implementing the optional embodiment, after receiving the editing completion instruction for the user interface component, the attribute file corresponding to the attribute information can be generated according to the attribute information of all the current user interface components, so as to facilitate backup of the attribute information of all the user interface components which are edited at this time and/or subsequent editing work on the user interface components.
In this alternative embodiment, the edit completion instruction for the user interface component may come from the user side. Optionally, the determining whether an edit completion instruction for the user interface component is received may include:
when a signal that a user determines that all user interface components are edited is received, determining that an editing completion instruction for the user interface components is received; alternatively, the first and second electrodes may be,
recording the editing time length of the user interface component, and determining to receive an editing completion instruction aiming at the user interface component when the editing time length of the user interface component is greater than or equal to a preset time length.
In this alternative embodiment, the user determining that the user interface component has all been edited may be a user created browser clicking a signal confirming that the editing is complete button. Therefore, whether the editing completion instruction for the user interface component is received or not can be judged according to the signal that the user determines that the user interface component is completely edited or the editing duration of the user interface component, so that whether the editing completion instruction is received or not is automatically judged, and the efficiency of the editing work of the user interface component is improved.
In yet another alternative embodiment, after sending the code to the user interface browser to cause the user interface browser to render the user interface component according to the code, the method may further comprise:
judging whether an application instruction aiming at the user interface component is received or not;
and when judging that the application instruction aiming at the user interface component is received, applying the attribute information of the current user interface component to the user interface according to the application instruction aiming at the user interface component.
In this alternative embodiment, the application instructions for the user interface component may come from the user side. Therefore, the implementation of the alternative embodiment can apply the attribute information of the current user interface component to the user interface according to the received application instruction for the user interface component, so that the editing result of the user interface component is applied to the actual user interface.
Alternatively, the application instructions for the user interface element may comprise only one http request. It can be seen that this alternative embodiment can issue fewer http requests, which helps to save resources.
EXAMPLE III
Referring to fig. 3, fig. 3 is a schematic structural diagram of an apparatus for real-time editing and rendering a user interface component according to an embodiment of the present invention. The apparatus for editing and rendering the user interface component in real time depicted in fig. 3 may be applied to a local server or a cloud server, or may be applied to a user interface editing system, which is not limited in the embodiment of the present invention. As shown in fig. 3, the apparatus for editing and rendering the user interface component in real time may include:
an obtaining module 301, configured to obtain editing information, which is submitted by a property editing window of a user interface component and is input by a user on the property editing window; the attribute editing window is used for editing the attribute information of the user interface component in real time;
a first generating module 302, configured to generate a code corresponding to the attribute information according to the editing information;
a sending module 303, configured to send the code to the user interface browser, so that the user interface browser renders the user interface component according to the code.
In the embodiment of the present invention, optionally, the user interface component may include a custom component and a non-custom component. Wherein, optionally, the non-custom component may comprise at least one of a base component, an interactive component, and a chart component. Optionally, the basic component may include a user interface global color style component, and may further include a user interface layout style component. Optionally, the user interface global color style component may be a red global style component, a green global style component, or a yellow global style component, and so on, and the embodiment of the present invention is not limited. Optionally, the user interface layout style component may include at least one of a center alignment layout style component, a left alignment layout style component, a right alignment layout style component, and a two-end alignment layout style component. Optionally, the interactive component may include at least one of a button component, a form component, a radio box component, and a check box component. Optionally, the button assembly may include at least one of a button frame assembly, a button color assembly, and a button text assembly. Wherein, optionally, the form component may include at least one of a form label component, a form field component, and a form button component. Wherein, optionally, the radio frame component may include a radio button component and/or a radio text label component. Wherein, optionally, the check box component can comprise a check button component and/or a check text label component. Optionally, the chart component may include at least one of a line chart component, a bar chart component, a pie chart component, and a scatter chart component. Optionally, the line drawing component may include at least one of a line drawing background color component, a line drawing line width component, a line drawing dashed line type component, a line drawing text color component, a line drawing text size component, and a line drawing text layout component. Optionally, the bar graph component may include at least one of a bar graph background color component, a bar graph bar width component, a bar graph text character color component, a bar graph text character size component, and a bar graph text character layout component. Optionally, the pie chart component may include at least one of a pie chart background color component, a pie chart partition line width component, a pie chart partition line dashed line type component, a pie chart text color component, a pie chart text size component, and a pie chart text layout component. Optionally, the scattergram component may include at least one of a scattergram background color component, a scattergram size component, a scattergram type component, a scattergram text color component, a scattergram text size component, and a scattergram text layout component. Optionally, the customized component may include components not involved in the non-customized component, and specifically may include personalized components and/or special components.
In the embodiment of the invention, the attribute editing window can be used for editing the attribute information of the user interface component in real time. Optionally, the attribute information of the user interface component may include an attribute parameter name and/or an attribute parameter value of the user interface component. Optionally, the editing information may include attribute information corresponding to the modified user interface component. In the embodiment of the invention, the code corresponding to the attribute information can be used for rendering the user interface component by the user interface browser according to the code. Optionally, the code corresponding to the attribute information may be a code segment based on the CSS cascading style sheet specification.
In embodiments of the present invention, the user interface browser may render the user interface component according to the received code. The user interface browser may include at least one of a Trident kernel-based browser (such as an IE browser), a Gecko kernel-based browser (such as a Firefox browser), a WebKit kernel-based browser (such as a Safari browser, a Chrome browser, etc.), and a Presto kernel-based browser (such as an Opera browser, etc.), which is not limited in the embodiments of the present invention.
Therefore, the embodiment of the invention can edit and render the user interface component in real time, and improve the editing efficiency of the user interface component.
In an alternative embodiment, as shown in fig. 4, where the property editing window is a visual editing window of a user interface component or a code editing window of a user interface component, the first generating module 302 may include:
a determination submodule 3021 configured to determine a source of the editing information; the source of the editing information may include a visual editing window and/or a code editing window;
the first generating sub-module 3022, configured to generate, when the determining sub-module 3021 determines that the editing information is from a visual editing window, a code corresponding to the attribute information of the user interface component according to the editing information and a preset code generating manner;
the second generating sub-module 3023 is configured to, when the determining sub-module 3021 determines that the editing information is from the code editing window, generate a code corresponding to the attribute information of the user interface component according to the editing information.
In this alternative embodiment, the visual editing window may be used to edit non-custom type user interface components. Optionally, the preset code generation manner may include a Sass front-end compiling method. Optionally, the code corresponding to the attribute information of the user interface component may be a code segment based on the CSS cascading style sheet specification. In this alternative embodiment, the code editing window may be used to edit custom type user interface components. Optionally, the editing information of the window may be a code segment based on the CSS cascading style sheet specification written in the code editing window by the user.
Therefore, different codes can be generated according to different sources of the editing information, the user interface component can be edited and rendered in real time according to the different codes, and the editing efficiency of the user interface component is improved.
In yet another alternative embodiment, as shown in fig. 4, the apparatus may further include:
a determining module 304, configured to determine a component type of the user interface component to be edited before the obtaining module 301 obtains editing information, which is submitted by a property editing window of the user interface component and is input by a user on the property editing window; the component types can comprise a custom type and a non-custom type;
the second generating module 305 is further configured to generate a style code corresponding to the preset style of the code editing window when the determining module 304 determines that the component type to be edited is the custom type;
the sending module 303 is further configured to send the style code generated by the second generating module 305 to the user interface browser, so that the user interface browser renders a code editing window, and triggers an operation, performed by the obtaining module 301, of obtaining editing information, submitted by a property editing window of the user interface component, input by a user on the property editing window;
the sending module 303 is further configured to send, when the determining module 304 determines that the component type to be edited is a non-user-defined type, a style configuration file corresponding to a preset style of the visual editing window to the user interface browser, so that the user interface browser renders the visual editing window according to the style configuration file, and triggers an operation, performed by the obtaining module 301, of obtaining editing information, which is submitted by the property editing window of the user interface component and is input by the user, on the property editing window.
In this alternative embodiment, the code editing window may be based on a vsCode editor plug-in that may be used to modify custom type components in the user interface components. Optionally, the style configuration file may be a modifiable component property configuration file data. Js may define the data format of all configurable attributes, and optionally, the data format may include the outermost category component type name (such as a non-custom component or a custom component) and/or the config configuration. Optionally, the back layer of the config configuration may include type (refinement type of component) and/or key (parameter setting value corresponding to type).
Therefore, the optional embodiment can be implemented to generate the style code of the corresponding window according to the type of the user interface component needing to be edited, so that the user interface browser renders the corresponding editing window, the needed editing window is provided for the user, and the editing efficiency is improved.
In yet another alternative embodiment, as shown in fig. 4, the first generation submodule 3022 may include:
a generating unit 30221 configured to generate an attribute file corresponding to the attribute information according to the editing information;
a requesting unit 30222, configured to request the user interface browser to store the preset style file in a cache corresponding to the user interface browser;
an obtaining unit 30223, configured to obtain the attribute file and the preset style file when it is detected that the preset style file is stored in a cache corresponding to the user interface browser;
the generating unit 30221 is further configured to generate a code corresponding to the attribute information according to the attribute file and the preset style file after the acquiring unit 30223 acquires the attribute file and the preset style file.
In this optional embodiment, the attribute file corresponding to the attribute information may be a loss variable file based on a writeFile module in the open source library loss. In this alternative embodiment, the preset style file may be a component Sass resource file based on the open source library Sass. Optionally, the preloadFiles module in the open source library, say, jss may request the user interface browser to execute an operation of preloading the preset style file. In this optional embodiment, the attribute file and the preset style file may be uniformly compiled based on a complifile module in the open source library sass, so as to obtain a code corresponding to the attribute information, and further, the code may be a code based on the CSS cascading style sheet specification that may be recognized by the browser.
Therefore, the optional embodiment can be implemented to generate the code corresponding to the attribute information of the user interface component according to the attribute file and the preset style file, so that the efficiency and the accuracy of identifying and rendering the user interface component by the browser are improved.
In yet another alternative embodiment, as shown in fig. 4, the sending module 303 sends the code to the user interface browser, so that the manner in which the user interface browser renders the user interface component according to the code may specifically include:
code is inserted into a rendering model created by the user interface browser to cause the user interface browser to render the user interface component according to the rendering model.
In this alternative embodiment, the rendering model created by the user interface browser may be a DOM document object model. Optionally, the rendering model created by the user interface browser may be modified by changing an element in the DOM document object model according to the code, and specifically, the rendering model created by the user interface browser may be modified by changing a head tag in the DOM document object file according to the code.
Therefore, the optional embodiment can be implemented to modify the rendering model created by the user interface browser according to the code corresponding to the attribute information, so that the browser renders the user interface component according to the modified rendering model, thereby realizing real-time rendering of the user interface component and improving the editing efficiency of the user interface component.
In yet another alternative embodiment, as shown in fig. 4, the apparatus may further include:
a determining module 306, configured to determine whether an editing completion instruction for the user interface component is received after the sending module 303 sends the code to the user interface browser so that the user interface browser renders the user interface component according to the code;
the third generating module 307, configured to generate, when the determining module 306 determines that the editing completion instruction for the user interface component is received, an attribute file corresponding to the attribute information according to the attribute information of all current user interface components; the attribute file can comprise a code corresponding to the attribute information; the attribute file is used for backing up the attribute information of all the user interface components which are edited at this time and/or subsequently editing the user interface components.
Therefore, by implementing the optional embodiment, after receiving the editing completion instruction for the user interface component, the attribute file corresponding to the attribute information can be generated according to the attribute information of all the current user interface components, so as to facilitate backup of the attribute information of all the user interface components which are edited at this time and/or subsequent editing work on the user interface components.
In yet another alternative embodiment, as shown in fig. 4, the apparatus may further include:
the determining module 306 is further configured to send the code to the user interface browser at the sending module 303, so that after the user interface browser renders the user interface component according to the code, whether an application instruction for the user interface component is received is determined;
the application module 308 is configured to, when the determining module 306 determines that the application instruction for the user interface component is received, apply the attribute information of the current user interface component to the user interface according to the application instruction for the user interface component.
Therefore, the implementation of the alternative embodiment can apply the attribute information of the current user interface component to the user interface according to the received application instruction for the user interface component, so that the editing result of the user interface component is applied to the actual user interface.
Example four
Referring to fig. 5, fig. 5 is a schematic structural diagram of another apparatus for real-time editing and rendering of a user interface component according to an embodiment of the present invention. As shown in fig. 5, the apparatus for real-time editing and rendering of the user interface component may include:
a memory 401 storing executable program code;
a processor 402 coupled with the memory 401;
the processor 402 calls the executable program code stored in the memory 401 to execute the steps of the method for editing and rendering the user interface component in real time as described in the first embodiment or the second embodiment of the present invention.
EXAMPLE five
The embodiment of the invention discloses a computer storage medium, which stores computer instructions, and the computer instructions are used for executing the steps of the method for editing and rendering the user interface component in real time, which is described in the first embodiment or the second embodiment of the invention, when the computer instructions are called.
EXAMPLE six
An embodiment of the present invention discloses a computer program product, which includes a non-transitory computer-readable storage medium storing a computer program, and the computer program is operable to cause a computer to execute the steps of the method for editing and rendering a user interface component in real time described in the first or second embodiment.
The above-described embodiments of the apparatus are merely illustrative, and the modules described as separate components may or may not be physically separate, and the components shown as modules may or may not be physical modules, may be located in one place, or may be distributed on a plurality of network modules. Some or all of the modules may be selected according to actual needs to achieve the purpose of the solution of the present embodiment. One of ordinary skill in the art can understand and implement it without inventive effort.
Through the above detailed description of the embodiments, those skilled in the art will clearly understand that the embodiments may be implemented by software plus a necessary general hardware platform, and may also be implemented by hardware. Based on such understanding, the above technical solutions may be embodied in the form of a software product, which may be stored in a computer-readable storage medium, where the storage medium includes a Read-Only Memory (ROM), a Random Access Memory (RAM), a Programmable Read-Only Memory (PROM), an Erasable Programmable Read-Only Memory (EPROM), a One-time Programmable Read-Only Memory (OTPROM), an Electrically Erasable Programmable Read-Only Memory (EEPROM), a Compact Disc-Read-Only Memory (CD-ROM), or other disk memories, CD-ROMs, or other magnetic disks, A tape memory, or any other medium readable by a computer that can be used to carry or store data.
Finally, it should be noted that: the method and apparatus for real-time editing and rendering of a user interface component disclosed in the embodiments of the present invention are only disclosed in the preferred embodiments of the present invention, and are only used for illustrating the technical solutions of the present invention, not for limiting the same; although the present invention has been described in detail with reference to the foregoing embodiments, it will be understood by those skilled in the art; the technical solutions described in the foregoing embodiments may still be modified, or some technical features may be equivalently replaced; and the modifications or the substitutions do not make the essence of the corresponding technical solutions depart from the spirit and scope of the technical solutions of the embodiments of the present invention.

Claims (10)

1. A method for real-time editing and rendering of a user interface component, the method comprising:
acquiring editing information which is submitted by a property editing window of a user interface component and is input by a user on the property editing window; the attribute editing window is used for editing the attribute information of the user interface component in real time;
generating a code corresponding to the attribute information according to the editing information;
sending the code to a user interface browser to cause the user interface browser to render the user interface component according to the code.
2. The method according to claim 1, wherein the property editing window is a visual editing window of the user interface component or a code editing window of the user interface component, and the generating a code corresponding to the property information according to the editing information includes:
determining a source of the editing information; the source of the editing information comprises the visual editing window and/or the code editing window;
when the fact that the editing information comes from the visual editing window is determined, generating a code corresponding to the attribute information of the user interface component according to the editing information and a preset code generation mode;
and when the fact that the editing information comes from the code editing window is determined, generating a code corresponding to the attribute information of the user interface component according to the editing information.
3. The method for editing and rendering a user interface component in real time according to claim 1 or 2, wherein before the acquiring editing information input on the property editing window by a user submitted by the property editing window of the user interface component, the method further comprises:
determining the component type of a user interface component needing to be edited; wherein the component types comprise a custom type and a non-custom type;
when the component type needing to be edited is determined to be the custom type, generating a style code corresponding to a preset style of a code editing window, sending the style code to a user interface browser, so that the user interface browser renders the code editing window, and triggering and executing the operation of acquiring editing information input on the attribute editing window by a user submitted by the attribute editing window of the user interface component;
and when the component type needing to be edited is determined to be the non-self-defined type, sending a style configuration file corresponding to a preset style of a visual editing window to a user interface browser, so that the user interface browser renders the visual editing window according to the style configuration file, and triggering and executing the operation of acquiring the editing information input on the attribute editing window by the user submitted by the attribute editing window of the user interface component.
4. The method according to claim 2 or 3, wherein the generating a code corresponding to the attribute information of the user interface component according to the editing information and a preset code generating manner includes:
generating an attribute file corresponding to the attribute information according to the editing information;
requesting the user interface browser to store a preset style file in a cache corresponding to the user interface browser;
and when detecting that the preset style file is stored in a cache corresponding to the user interface browser, acquiring the attribute file and the preset style file, and generating a code corresponding to the attribute information according to the attribute file and the preset style file.
5. The method for editing and rendering the user interface component in real time according to claim 1 or 2, wherein the sending the code to a user interface browser to cause the user interface browser to render the user interface component according to the code comprises:
and modifying the rendering model created by the user interface browser according to the code so that the user interface browser renders the user interface component according to the modified rendering model.
6. The method of claim 1 or 2, wherein after the sending the code to a user interface browser to cause the user interface browser to render the user interface component according to the code, the method further comprises:
judging whether an editing completion instruction aiming at the user interface component is received or not;
when the editing completion instruction aiming at the user interface component is judged to be received, generating an attribute file corresponding to the attribute information according to the attribute information of all the current user interface components; the attribute file comprises a code corresponding to the attribute information; the attribute file is used for backing up the attribute information of all the user interface components which are edited at this time and/or subsequently editing the user interface components.
7. The method of claim 6, wherein after the sending the code to a user interface browser to cause the user interface browser to render the user interface component according to the code, the method further comprises:
judging whether an application instruction aiming at the user interface component is received or not;
and when judging that the application instruction aiming at the user interface component is received, applying the attribute information of the current user interface component to a user interface according to the application instruction aiming at the user interface component.
8. An apparatus for real-time editing and rendering of a user interface component, the apparatus comprising:
the system comprises an acquisition module, a display module and a display module, wherein the acquisition module is used for acquiring editing information which is submitted by a property editing window of a user interface component and is input on the property editing window by a user; the attribute editing window is used for editing the attribute information of the user interface component in real time;
the first generation module is used for generating a code corresponding to the attribute information according to the editing information;
and the sending module is used for sending the code to a user interface browser so that the user interface browser renders the user interface component according to the code.
9. An apparatus for real-time editing and rendering of a user interface component, the apparatus comprising:
a memory storing executable program code;
a processor coupled with the memory;
the processor calls the executable program code stored in the memory to execute the method of editing and rendering the user interface component in real time according to any one of claims 1-N.
10. A computer-storable medium that stores computer instructions that, when invoked, perform a method for real-time editing and rendering of a user interface component according to any one of claims 1-N.
CN202111072271.4A 2021-09-14 2021-09-14 Method and device for editing and rendering user interface component in real time Pending CN113934486A (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202111072271.4A CN113934486A (en) 2021-09-14 2021-09-14 Method and device for editing and rendering user interface component in real time

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202111072271.4A CN113934486A (en) 2021-09-14 2021-09-14 Method and device for editing and rendering user interface component in real time

Publications (1)

Publication Number Publication Date
CN113934486A true CN113934486A (en) 2022-01-14

Family

ID=79275711

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202111072271.4A Pending CN113934486A (en) 2021-09-14 2021-09-14 Method and device for editing and rendering user interface component in real time

Country Status (1)

Country Link
CN (1) CN113934486A (en)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN116302294A (en) * 2023-05-18 2023-06-23 安元科技股份有限公司 Method and system for automatically identifying component attribute through interface

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104572092A (en) * 2014-12-26 2015-04-29 北京奇虎科技有限公司 Method and device for webpage making
CN106469050A (en) * 2015-08-19 2017-03-01 阿里巴巴集团控股有限公司 A kind of case generation method, page generation method and device
CN107480278A (en) * 2017-08-22 2017-12-15 南京焦点领动云计算技术有限公司 A kind of method of the adjustment webpage pattern to come into force in real time
CN109614095A (en) * 2018-12-07 2019-04-12 北京金山云网络技术有限公司 The method of user's Custom component, the generation method of platform code and device
CN112068824A (en) * 2020-09-16 2020-12-11 杭州海康威视数字技术股份有限公司 Webpage development preview method and device and electronic equipment

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104572092A (en) * 2014-12-26 2015-04-29 北京奇虎科技有限公司 Method and device for webpage making
CN106469050A (en) * 2015-08-19 2017-03-01 阿里巴巴集团控股有限公司 A kind of case generation method, page generation method and device
CN107480278A (en) * 2017-08-22 2017-12-15 南京焦点领动云计算技术有限公司 A kind of method of the adjustment webpage pattern to come into force in real time
CN109614095A (en) * 2018-12-07 2019-04-12 北京金山云网络技术有限公司 The method of user's Custom component, the generation method of platform code and device
CN112068824A (en) * 2020-09-16 2020-12-11 杭州海康威视数字技术股份有限公司 Webpage development preview method and device and electronic equipment

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN116302294A (en) * 2023-05-18 2023-06-23 安元科技股份有限公司 Method and system for automatically identifying component attribute through interface
CN116302294B (en) * 2023-05-18 2023-09-01 安元科技股份有限公司 Method and system for automatically identifying component attribute through interface

Similar Documents

Publication Publication Date Title
CN108495192B (en) Page editing processing method and device
CN111984902A (en) Visual page configuration method, system, computer equipment and storage medium
CN106933887B (en) Data visualization method and device
US20150317405A1 (en) Web Page Variation
CN113655999A (en) Rendering method, device and equipment of page control and storage medium
CN110968314B (en) Page generation method and device
CN109445775A (en) One key activity inline code method, apparatus and computer readable storage medium
US9934291B2 (en) Dynamic presentation of a results set by a form-based software application
CN110941428A (en) Website creation method and device
CN108874379B (en) Page processing method and device
CN113934486A (en) Method and device for editing and rendering user interface component in real time
CN113095056B (en) Generation method, processing method, device, electronic equipment and medium
CN113207039B (en) Video processing method and device, electronic equipment and storage medium
CN116304442A (en) Page code generation method and device, electronic equipment and storage medium
CN114168853A (en) Data visualization display method, device, medium and electronic equipment
CN111414168B (en) Web application development method and device based on mind map and electronic equipment
CN113518187A (en) Video editing method and device
CN112015410A (en) Webpage editing method, device and system and computer storage medium
CN109445780B (en) Method and equipment for editing styles
CN112597416A (en) Webpage element display method, device, server and storage medium
CN109948075B (en) Webpage data marking method and device
CN112631587A (en) Interface prototype design method, interface prototype operation method and storage medium
CN115984413B (en) Chart drawing method and device, electronic equipment and storage medium
CN112181414B (en) Data processing method and device, electronic equipment and storage medium
CN117032666A (en) Page editing method and device based on editor, terminal equipment and storage medium

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