CN112286513A - Visual design method and device based on component metadata - Google Patents
Visual design method and device based on component metadata Download PDFInfo
- Publication number
- CN112286513A CN112286513A CN201910665741.4A CN201910665741A CN112286513A CN 112286513 A CN112286513 A CN 112286513A CN 201910665741 A CN201910665741 A CN 201910665741A CN 112286513 A CN112286513 A CN 112286513A
- Authority
- CN
- China
- Prior art keywords
- metadata
- component
- template
- target
- target 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
Links
Images
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/34—Graphical or visual programming
-
- 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/36—Software reuse
-
- 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
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Stored Programmes (AREA)
Abstract
The invention discloses a visual design method and device based on component metadata, and relates to the technical field of computers. One embodiment of the method comprises: acquiring metadata of a template component from a component metadata base, and rendering the template component according to the metadata of the template component; instantiating the metadata of the template component to obtain the metadata of a target component, and monitoring the metadata of the target component in real time; when the metadata of the target assembly changes, the template assembly is re-rendered according to the changed metadata of the target assembly to obtain the target assembly, and visual design is achieved. The implementation method can assemble a new assembly based on the existing assembly, realizes personalized customization of the assembly library, and completes page construction flexibly and rapidly.
Description
Technical Field
The invention relates to the technical field of computers, in particular to a visual design method and device based on component metadata.
Background
The development process of the existing front-end project is as follows: firstly, a Product manager outputs a PRD Product Requirement Document (Product Requirement Document) and a Product prototype draft; then, a User Interface (UI) designer beautifies a product prototype by using tools such as Photoshop and Sketch and the like to produce a UI design draft; then, a front-end engineer cuts a UI design draft, then builds a page html (hypertext Markup Language) structure, writes CSS (Cascading Style Sheets) Style codes, and strives to restore the design draft by 100%; and finally realizing the service logic of the page and performing interface joint debugging with the rear end after the design draft is restored, and completing the development of a single page until the whole project.
In the process of implementing the invention, the inventor finds that at least the following problems exist in the prior art:
(1) the existing visual editing device only supports the design of dragging components from zero, cannot assemble new components based on the existing components, and does not support the personalized customization of a component library;
(2) the page layout mode of the existing visual editing device is either based on grid layout or needs 'customizing a page template in advance', and is not flexible and various;
(3) the purpose of the existing visualization device invention is mainly to help the product manager to complete the prototyping, but not to help the UI designer to complete the UI design work. The page manufactured in the way can not be used as an actual page for secondary development on the basis of the front-end development, because a product manager may need to continuously modify, a UI designer can beautify and adjust the initial design results, and if the secondary development is carried out on the basis, the front-end development is continuously reworked, page codes are rewritten, and the development efficiency and the development progress of the front end are seriously influenced;
(4) the existing visualization multiplexing method can only drag components to design a page, and can not drag a plurality of components to combine or aggregate into a new component, so that the reusability is relatively closed.
Disclosure of Invention
In view of this, embodiments of the present invention provide a visual design method and apparatus based on component metadata, which can assemble a new component based on an existing component, implement personalized customization of a component library, and flexibly and quickly complete page construction.
According to a first aspect of the embodiments of the present invention, a visual design method based on component metadata is provided.
The visual design method based on the component metadata comprises the following steps:
acquiring metadata of a template component from a component metadata base, and rendering the template component according to the metadata of the template component;
instantiating the metadata of the template component to obtain the metadata of a target component, and monitoring the metadata of the target component in real time;
when the metadata of the target assembly changes, the template assembly is re-rendered according to the changed metadata of the target assembly to obtain the target assembly, and visual design is achieved.
Optionally, the metadata includes: attribute metadata, event metadata, and slot metadata;
monitoring the metadata of the target component in real time, wherein the monitoring comprises the following steps: and extracting attribute metadata from the metadata of the target component to be bidirectionally bound with the attribute form, monitoring the attribute form in real time, and synchronously modifying the metadata of the target component when the attribute form is modified.
Optionally, monitoring metadata of the target component in real time, further includes: and binding the metadata of the target component and a data source form bidirectionally, monitoring the data source form in real time, and merging the modified data source form into the metadata of the target component when the data source form is modified.
Optionally, after obtaining the target component, the method further includes: and taking the target component as a new template component, and writing the metadata of the target component into the component metadata base.
Optionally, after obtaining the target component, the method further includes:
splicing template character strings according to the attribute metadata and the event metadata of the template component;
traversing each slot of the template component, and if the content of the slot is html or character strings, directly splicing the content of the slot as text content into the template character strings; if the content of the slot is a sub-component, searching metadata of the sub-component, splicing character strings of the sub-component according to the attribute metadata and the event metadata of the sub-component, and splicing the character strings of the sub-component into the template character string to obtain a template character string source code of the target component;
and sleeving the template character string source code of the target assembly into a code template of a front-end frame to obtain the source code of the target assembly.
According to a second aspect of the embodiments of the present invention, there is provided a visual design apparatus based on component metadata.
The visualization design device based on the component metadata comprises the following components:
the component obtaining module is used for obtaining metadata of the template components from the component metadata base and rendering the template components according to the metadata of the template components;
the data monitoring module instantiates the metadata of the template component to obtain the metadata of a target component and monitors the metadata of the target component in real time;
and the component rendering module is used for re-rendering the template component according to the changed metadata of the target component to obtain the target component when the metadata of the target component is changed, so that the visual design is realized.
Optionally, the metadata includes: attribute metadata, event metadata, and slot metadata;
monitoring the metadata of the target component in real time, wherein the monitoring comprises the following steps: and extracting attribute metadata from the metadata of the target component to be bidirectionally bound with the attribute form, monitoring the attribute form in real time, and synchronously modifying the metadata of the target component when the attribute form is modified.
Optionally, monitoring metadata of the target component in real time, further includes: and binding the metadata of the target component and a data source form bidirectionally, monitoring the data source form in real time, and merging the modified data source form into the metadata of the target component when the data source form is modified.
Optionally, the visual design apparatus further comprises a component saving module, configured to: and after the target component is obtained, writing the metadata of the target component into the component metadata base by taking the target component as a new template component.
Optionally, the apparatus further comprises: a code generation module to: after the target component is obtained,
splicing template character strings according to the attribute metadata and the event metadata of the template component;
traversing each slot of the template component, and if the content of the slot is html or character strings, directly splicing the content of the slot as text content into the template character strings; if the content of the slot is a sub-component, searching metadata of the sub-component, splicing character strings of the sub-component according to the attribute metadata and the event metadata of the sub-component, and splicing the character strings of the sub-component into the template character string to obtain a template character string source code of the target component;
and sleeving the template character string source code of the target assembly into a code template of a front-end frame to obtain the source code of the target assembly.
According to a third aspect of embodiments of the present invention, there is provided an electronic device designed based on a visualization of component metadata.
The visual design electronic equipment based on the component metadata comprises the following components:
one or more processors;
a storage device for storing one or more programs,
when the one or more programs are executed by the one or more processors, the one or more processors implement the visual design method provided by the first aspect of the embodiments of the present invention.
According to a fourth aspect of embodiments of the present invention, there is provided a computer-readable medium.
The computer readable medium according to an embodiment of the present invention has a computer program stored thereon, where the computer program is characterized in that when being executed by a processor, the computer program implements the visual design method provided by the first aspect of the embodiment of the present invention.
One embodiment of the above invention has the following advantages or benefits: according to the invention, visual design is carried out on the basis of the template component based on the metadata of the component, so that personalized customization of the component library can be realized, and the page can be flexibly and quickly set up. By taking the target assembly as a new template assembly and storing the target assembly in the assembly metadata base, the target assembly is used as a new 'building block' to be reused, a UI designer can flexibly and quickly build a page like 'building blocks', and open reuse of the template assembly is realized. By adopting a recursive mode to generate the source code of the target component, the design style is not required to be restored by cutting a diagram in front-end development, and the project development efficiency is greatly improved.
Further effects of the above-mentioned non-conventional alternatives will be described below in connection with the embodiments.
Drawings
The drawings are included to provide a better understanding of the invention and are not to be construed as unduly limiting the invention. Wherein:
FIG. 1 is a schematic diagram of a main flow of a visualization design method based on component metadata according to an embodiment of the present invention;
FIG. 2 is a schematic illustration of a visualization design method based on component metadata according to an alternative embodiment of the present invention;
FIG. 3 is a schematic diagram of a layout assembly according to an alternative embodiment of the present invention;
FIG. 4 is a schematic diagram of a visual designer primary interface in accordance with an alternative embodiment of the invention;
FIG. 5 is a schematic diagram of the main modules of a visual design apparatus based on component metadata according to an embodiment of the present invention;
FIG. 6 is an exemplary system architecture diagram in which embodiments of the present invention may be employed;
fig. 7 is a schematic block diagram of a computer system suitable for use in implementing a terminal device or server of an embodiment of the invention.
Detailed Description
Exemplary embodiments of the present invention are described below with reference to the accompanying drawings, in which various details of embodiments of the invention are included to assist understanding, and which are to be considered as merely exemplary. Accordingly, those of ordinary skill in the art will recognize that various changes and modifications of the embodiments described herein can be made without departing from the scope and spirit of the invention. Also, descriptions of well-known functions and constructions are omitted in the following description for clarity and conciseness.
According to a first aspect of the embodiments of the present invention, a visual design method based on component metadata is provided.
Fig. 1 is a schematic diagram of a main flow of a visual design method based on component metadata according to an embodiment of the present invention, and as shown in fig. 1, the visual design method based on component metadata according to the embodiment of the present invention includes:
s101, acquiring metadata of a template component from a component metadata base, and rendering the template component according to the metadata of the template component;
s102, instantiating metadata of the template component to obtain metadata of the target component, and monitoring the metadata of the target component in real time;
and S103, when the metadata of the target assembly changes, re-rendering the template assembly according to the changed metadata of the target assembly to obtain the target assembly, so that the visual design is realized.
Component Metadata (Metadata) is description data of a component, and may be in any format, such as JSON (Java Script Object Notation, JS Object Notation, which is a lightweight data exchange format), YAML (Yet antenna Markup Language), XML (Extensible Markup Language), and the like. The content of the description may contain the name (name), properties (pops), events (events), slots (slots), etc. of the component. Taking an attribute as an example, the content may contain the name, type (numeric, string, boolean, enumerated, etc.) and default values for each parameter. The Slot (Slot) is used for deciding to insert the carried content into a specified position, so that the template is blocked, and the template has modularization property and larger reusability. The slot is used for delivering content to the component, and any template code including html and even the component can be contained in the slot. If a component does not contain a < slot > element, any incoming content is discarded.
Taking the JSON format as an example, the component metadata content is as follows:
the component metadata base stores metadata of a large number of existing components. The component metadata repository may be registered at a "component repository" granularity. Each component library comprises a plurality of components. Multiple component libraries may be registered, any one component necessarily being contained under one component library. The component library to which the component belongs is the common Context (Context) of the component, and the component type (exact/vue/regular) is judged through the Context, and the calling source code of the component is generated. The component metadata base can be registered according to the following steps:
registering the component library in the visual designer, presenting a registration form of the component library, and inputting necessary information of the component library by a user, wherein the necessary information comprises the following information: the method comprises the steps of obtaining a component library, and storing the component library in a component metadata library, wherein the component library comprises a name, a type (vue/exact/regular), a code address, a style variable and all contained components (prop/events/slots), wherein the style variable needs to be uploaded to a style variable file, then configuration information converted into key-value is automatically matched according to regular expression rules, metadata of the component library is generated after input is completed, and the metadata is stored in the component metadata library after submission. In addition to registration, editing, deletion, import, and export (metadata) of the component library can be performed.
On the basis of the registered component metadata base, the target component base can be obtained by modifying the registered component base in the component metadata base, and the customized design of the component base is realized. For example, first, the style variable in the metadata of the original component library in the component metadata library is read, then the style variable and the default value are loaded into the property panel, and simultaneously, all the components in the original component library are rendered in the design area according to the metadata of the original component library, when a UI designer modifies the style variable (one style variable may be one that acts on all or a plurality of components, such as a global main color, a main text color, a border color, and the like) and the default value in the property panel, the modified result is previewed in the design area in real time, and when the UI designer is satisfied with the modified result, the UI designer clicks to save, then fills in a new component library name, finally generates a new piece of metadata of the UI component library and saves the new piece of metadata in the component metadata library, and simultaneously adds a new piece of UI component library under the page label of the UI component library. The added component library is a customized version of the original component library.
The metadata of the target component instantiated in step S102 may be considered "temporary" metadata of the target component. Binding and modifying the "temporary" metadata does not affect the metadata of the template components nor change the template components. And the visual design is realized on the basis of the template component by modifying the temporary metadata. Once saved, the "temporary" metadata is translated into the actual metadata of the target component. The existing visual editing device only supports the design of dragging the components from zero, cannot assemble new components based on the existing components, does not support the personalized customization of the component library, and is relatively closed in reusability. The embodiment of the invention is assembled into a new assembly based on the existing assembly, and open type reuse is realized.
The existing visualization multiplexing method can only drag components to design a page, and can not drag a plurality of components to combine or aggregate into a new component, so that the reusability is relatively closed. In the embodiment of the invention, a plurality of basic components can be dragged to be combined or aggregated into a new basic component or service component to be used as a new 'building block' to be reused, and the dragged and designed page can also be used as a new reusable page template to be stored in a page template library, so that the open reuse of the page is realized, and a UI designer can flexibly and quickly build the page like 'building blocks'.
A page or view can be abstracted into a component tree, which is also a component in nature, and all interface elements can be abstracted into components. The page layout is a component layout, and therefore, a component serving as a template component in the embodiment of the present invention may also be a layout component, i.e., a page template. Fig. 3 is a schematic diagram of a layout assembly in an alternative embodiment according to the present invention. The layout component can include:
arranging containers: abstract layout container components container, header, shader, content, font, which are collocated and combined to realize common layouts, such as top-middle-bottom layout, top-sidebar-column layout, side navigation-breadcrumbs-content area-bottom layout, and the like;
grid layout: abstract row container row and column container col components, quickly and simply create a layout through 24 columns of the foundation;
flex layout: the row container row component encapsulation style supports flex layout;
responsive layout: the column container col components support multiple response sizes: xs, sm, md, lg and xl;
layout of the form: the abstract Form and the Form item are components, which are mostly used for Form pages and popup layout scenes.
The page layout is abstracted and then packaged into a reusable UI component, and the page can be quickly created in a component layout mode. In addition, the page layout mode of the conventional visual editing device is based on grid layout or needs to customize a page template in advance, and is not flexible and diverse, the embodiment of the invention supports rich component layout modes such as grids, forms, Flex and layout container components, and the customized component library can flexibly and quickly complete page construction.
In some embodiments, the metadata includes: attribute metadata, event metadata, and slot metadata; monitoring metadata of a target component in real time, comprising: and extracting attribute metadata from the metadata of the target component, binding the attribute metadata with the attribute form in a bidirectional mode, monitoring the attribute form in real time, and synchronously modifying the metadata of the target component when the attribute form is modified. The properties form is used to edit the properties of the component. For example, when the user operates the property form, such as setting the parameters of the component props, the metadata of the target component is synchronously modified, and once the metadata of the target component changes, the component source code is immediately updated, and the UI component is re-rendered. And monitoring the change of the metadata of the target component through the attribute form, and the method is simple and efficient.
Further, listening to the metadata of the target component in real time may further include: and binding the metadata of the target component and the data source form in a bidirectional mode, monitoring the data source form in real time, and merging the modified data source form into the metadata of the target component when the data source form is modified.
The data source form is used for setting the data source of the component, and can comprise: 1) data source type: local files, remote services, and custom variables. The local file may upload a data file, such as a data file in JSON format, the remote service needs to specify a URL (Uniform Resource Locator) address and an HTTP (HyperText Transfer Protocol) request method (e.g., get, post, put, delete), and the custom variable may name a local variable; 2) the data source attribute mapping is used for specifying a corresponding relation between a certain field of the returned data and a certain attribute of the component, for example, the data field of the returned data corresponds to a value attribute of the component; 3) the data source filtering may specify one or more query parameters for obtaining the data source, such as a common top box search and a bottom table component, where the data source of the table may be set as a remote service, and a query parameter binding input box value (i.e., a binding custom variable value) may be set, and a filtering expression or filter function may be set to filter data, or convert a returned data format.
The data source configuration information is not an essential component of the metadata of the component. For example, a Table component has a data source, while a Button component has no data source. The data source configuration information is equivalent to an extension to the component metadata. The data source configuration information is unique after user setup. And binding the data source form independently and the metadata of the target component in a bidirectional manner, and combining the configuration information into the metadata of the component after a user sets the configuration information of the data source through the data source form. Code for acquiring the data source can be generated according to the data source configuration information. The metadata of the component, once changed, triggers the regeneration of the source code and rendering of the UI component. And monitoring the change of the metadata of the target component through the attribute form, and the method is simple and efficient.
In an optional embodiment, after obtaining the target component, the method further includes: and taking the target component as a new template component, and writing the metadata of the target component into the component metadata base. By taking the target assembly as a new template assembly and storing the target assembly in the assembly metadata base, the target assembly is used as a new 'building block' to be reused, a UI designer can flexibly and quickly build a page like 'building blocks', and open reuse of the template assembly is realized.
Optionally, after obtaining the target component, the method may further include:
(1) splicing the template character strings according to the attribute metadata and the event metadata of the template component; the schematic is as follows:
< component name attribute name 1 ═ attribute value 1 attribute name 2 ═ attribute value 2 … attribute name n ═ attribute value n event name 1 ═ event callback 1 event name 2 ═ event callback 2 … event name n ═ event callback n >
[ component name ]
(2) Traversing each slot of the template component, and if the content of the slot is html or a character string, directly splicing the content of the slot as text content into the template character string; if the content of the slot is a sub-component, searching metadata of the sub-component, splicing character strings of the sub-component according to the attribute metadata and the event metadata of the sub-component, and splicing the character strings of the sub-component into a template character string to obtain a template character string source code of the target component; the schematic is as follows:
< component name attribute name 1 ═ attribute value 1 attribute name 2 ═ attribute value 2 … attribute name n ═ attribute value n event name 1 ═ event callback 1 event name 2 ═ event callback 2 … event name n ═ event callback n >
< subcomponent name 1 attribute name 2 attribute name n attribute value 2 … attribute name n attribute value n event name 1 event callback 1 event name 2 event callback 2 … event name n event callback n >
…
</sub-Assembly name 1>
…
< subcomponent name n attribute name 1 ═ attribute value 1 attribute name 2 ═ attribute value 2 … attribute name n ═ attribute value n event name 1 ═ event callback 1 event name 2 ═ event callback 2 … event name n ═ event callback n >
…
Name of sub-component n >
Slot string content 1
…
Slot string content n
[ component name ]
(3) And sleeving the template character string source code of the target assembly into the code template of the front-end frame to obtain the source code of the target assembly.
The purpose of the existing visualization device invention is mainly to help the product manager to complete the prototyping, but not to help the UI designer to complete the UI design work. The page manufactured in this way cannot be used as an actual page for secondary development on the basis of the front-end development, because a product manager may need to continuously modify, a UI designer can beautify and adjust the initial design results, and if the secondary development is performed on the basis, the front-end development is continuously reworked, page codes are rewritten, and the development efficiency and the development progress of the front end are seriously affected. By adopting the visual design method of the embodiment of the invention, the source code of the target component can be generated by adopting a recursion mode without carrying out secondary development, so that the front-end development does not need to cut a picture to restore the design style, and the project development efficiency is greatly improved.
FIG. 2 is a schematic diagram of a visualization design method based on component metadata according to an alternative embodiment of the present invention, and FIG. 4 is a schematic diagram of a visualization designer main interface according to an alternative embodiment of the present invention. As shown in fig. 4, in the visual designer main interface, on the left side, a project directory structure (including components and views) is provided, and a UI component library for design can be dragged (i.e., a customized UI component library obtained in the following step (2)), an icon library and a page template; the upper part of the right side is a tool operation area, the middle part is a drag design area and component source code, and the right side is an attribute panel and a data source panel. The following describes an exemplary visualization design method according to an embodiment of the present invention with reference to fig. 2 and 4:
a visualization designer is opened, and the designer reads the metadata of all components from the component metadata library. When the UI component is dragged to the design area, loading metadata of the component, generating source codes of the component, rendering the UI component in the design area, and simultaneously monitoring metadata change of the component; generating a right property form according to the component metadata and binding the right property form in a two-way mode, synchronously modifying the component metadata when a user operates the property form, such as setting a component props parameter, updating a component source code immediately once the property form is changed, and re-rendering a UI component; extracting data source configuration information in the component metadata, binding the data source configuration information to a data source form in a two-way mode, synchronously modifying the component data source configuration information when a user sets a data source, combining the data source configuration information with the component metadata, monitoring that the component metadata changes, immediately updating component source codes, and re-rendering UI components;
when the user needs to save the designed component or page, a selection box pops up, so that the user can determine whether to save the component or page below the current project or save the component or page as a reusable component or page in a UI component library or page template, and after the user finishes selecting, the metadata of the current component is written into a component metadata library for persistent storage. If the selected component is saved as the UI component, adding a new component under the metadata of the specified UI component library; and if the selected component source code character string is saved as the page template, saving the whole component source code character string into a page template library.
When a user clicks one key to generate the source code, the current source code can be exported to a specified directory in a file form.
The invention adopts the idea of data driving, takes component metadata as core data, constructs the whole visual design system, and carries out visual customized design on a UI component library based on a front-end framework of current mainstream, and the visual customized design is used as the basis of page visual dragging design. On one hand, a UI designer can quickly create a page through a page template, and on the other hand, visual construction of the page can be flexibly and quickly completed through abstract packaged rich layout components such as grids, forms, Flex, layout containers and the like and the customized UI component library. After the UI design is completed, the front-end development does not need to cut a picture to restore the design, only source codes corresponding to different front-end frames need to be generated by one key on a design result, then the development of business logic is completed by using the front-end frames and the facility provided by the UI component library, the development efficiency of the front-end can be greatly improved, the time cost of repeated communication is reduced, and the repeated work of repeatedly adjusting the design style or the visual effect in the process of developing the page is avoided. In addition, the result of the visual design, namely the components and the pages, can form a reusable design resource library and a page template library (closed loop) to realize open reuse.
According to a second aspect of the embodiments of the present invention, there is provided a visual design apparatus based on component metadata.
FIG. 5 is a schematic diagram of the main modules of a visual design apparatus based on component metadata according to an embodiment of the present invention. As shown in fig. 5, the visualization design apparatus 500 based on component metadata includes:
the component obtaining module 501 obtains metadata of a template component from a component metadata base, and renders the template component according to the metadata of the template component;
a data monitoring module 502, instantiating the metadata of the template component to obtain the metadata of the target component, and monitoring the metadata of the target component in real time;
and the component rendering module 503 is configured to, when the metadata of the target component changes, re-render the template component according to the changed metadata of the target component to obtain the target component, so as to implement a visual design.
Optionally, the metadata includes: attribute metadata, event metadata, and slot metadata;
monitoring the metadata of the target component in real time, wherein the monitoring comprises the following steps: and extracting attribute metadata from the metadata of the target component to be bidirectionally bound with the attribute form, monitoring the attribute form in real time, and synchronously modifying the metadata of the target component when the attribute form is modified.
Optionally, monitoring metadata of the target component in real time, further includes: and binding the metadata of the target component and a data source form bidirectionally, monitoring the data source form in real time, and merging the modified data source form into the metadata of the target component when the data source form is modified.
Optionally, the visualization design apparatus in the embodiment of the present invention further includes a component storage module 504, configured to: and after the target component is obtained, writing the metadata of the target component into the component metadata base by taking the target component as a new template component.
Optionally, the visualization design apparatus of the embodiment of the present invention further includes a code generation module 505, configured to: after the target component is obtained,
splicing template character strings according to the attribute metadata and the event metadata of the template component;
traversing each slot of the template component, and if the content of the slot is html or character strings, directly splicing the content of the slot as text content into the template character strings; if the content of the slot is a sub-component, searching metadata of the sub-component, splicing character strings of the sub-component according to the attribute metadata and the event metadata of the sub-component, and splicing the character strings of the sub-component into the template character string to obtain a template character string source code of the target component;
and sleeving the template character string source code of the target assembly into a code template of a front-end frame to obtain the source code of the target assembly.
According to a third aspect of embodiments of the present invention, there is provided an electronic device designed based on a visualization of component metadata.
The visual design electronic equipment based on the component metadata comprises the following components:
one or more processors;
a storage device for storing one or more programs,
when the one or more programs are executed by the one or more processors, the one or more processors implement the visual design method provided by the first aspect of the embodiments of the present invention.
According to a fourth aspect of embodiments of the present invention, there is provided a computer-readable medium.
The computer readable medium according to an embodiment of the present invention has a computer program stored thereon, where the computer program is characterized in that when being executed by a processor, the computer program implements the visual design method provided by the first aspect of the embodiment of the present invention.
Fig. 6 shows an exemplary system architecture 600 to which the visual design method or visual design apparatus of an embodiment of the present invention may be applied.
As shown in fig. 6, the system architecture 600 may include terminal devices 601, 602, 603, a network 604, and a server 605. The network 604 serves to provide a medium for communication links between the terminal devices 601, 602, 603 and the server 605. Network 604 may include various types of connections, such as wire, wireless communication links, or fiber optic cables, to name a few.
A user may use the terminal devices 601, 602, 603 to interact with the server 605 via the network 604 to receive or send messages or the like. The terminal devices 601, 602, 603 may have installed thereon various communication client applications, such as shopping applications, web browser applications, search applications, instant messaging tools, mailbox clients, social platform software, etc. (by way of example only).
The terminal devices 601, 602, 603 may be various electronic devices having a display screen and supporting web browsing, including but not limited to smart phones, tablet computers, laptop portable computers, desktop computers, and the like.
The server 605 may be a server providing various services, such as a background management server (for example only) providing support for shopping websites browsed by users using the terminal devices 601, 602, 603. The backend management server may analyze and perform other processing on the received data such as the product information query request, and feed back a processing result (for example, target push information, product information — just an example) to the terminal device.
It should be noted that the visualization design method provided by the embodiment of the present invention is generally executed by the server 605, and accordingly, the visualization design apparatus is generally disposed in the server 605.
It should be understood that the number of terminal devices, networks, and servers in fig. 6 is merely illustrative. There may be any number of terminal devices, networks, and servers, as desired for implementation.
Referring now to FIG. 7, shown is a block diagram of a computer system 700 suitable for use with a terminal device implementing an embodiment of the present invention. The terminal device shown in fig. 7 is only an example, and should not bring any limitation to the functions and the scope of use of the embodiments of the present invention.
As shown in fig. 7, the computer system 700 includes a Central Processing Unit (CPU)701, which can perform various appropriate actions and processes in accordance with a program stored in a Read Only Memory (ROM)702 or a program loaded from a storage section 708 into a Random Access Memory (RAM) 703. In the RAM 703, various programs and data necessary for the operation of the system 700 are also stored. The CPU 701, the ROM 702, and the RAM 703 are connected to each other via a bus 704. An input/output (I/O) interface 705 is also connected to bus 704.
The following components are connected to the I/O interface 705: an input portion 706 including a keyboard, a mouse, and the like; an output section 707 including a display such as a Cathode Ray Tube (CRT), a Liquid Crystal Display (LCD), and the like, and a speaker; a storage section 708 including a hard disk and the like; and a communication section 709 including a network interface card such as a LAN card, a modem, or the like. The communication section 709 performs communication processing via a network such as the internet. A drive 710 is also connected to the I/O interface 705 as needed. A removable medium 711 such as a magnetic disk, an optical disk, a magneto-optical disk, a semiconductor memory, or the like is mounted on the drive 710 as necessary, so that a computer program read out therefrom is mounted into the storage section 708 as necessary.
In particular, according to the embodiments of the present disclosure, the processes described above with reference to the flowcharts may be implemented as computer software programs. For example, embodiments of the present disclosure include a computer program product comprising a computer program embodied on a computer readable medium, the computer program comprising program code for performing the method illustrated in the flow chart. In such an embodiment, the computer program can be downloaded and installed from a network through the communication section 709, and/or installed from the removable medium 711. The computer program performs the above-described functions defined in the system of the present invention when executed by the Central Processing Unit (CPU) 701.
It should be noted that the computer readable medium shown in the present invention can be a computer readable signal medium or a computer readable storage medium or any combination of the two. A computer readable storage medium may be, for example, but not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination of the foregoing. More specific examples of the computer readable storage medium may include, but are not limited to: an electrical connection having one or more wires, a portable computer diskette, a hard disk, a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing. In the present invention, a computer readable storage medium may be any tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device. In the present invention, however, a computer readable signal medium may include a propagated data signal with computer readable program code embodied therein, for example, in baseband or as part of a carrier wave. Such a propagated data signal may take many forms, including, but not limited to, electro-magnetic, optical, or any suitable combination thereof. A computer readable signal medium may also be any computer readable medium that is not a computer readable storage medium and that can communicate, propagate, or transport a program for use by or in connection with an instruction execution system, apparatus, or device. Program code embodied on a computer readable medium may be transmitted using any appropriate medium, including but not limited to: wireless, wire, fiber optic cable, RF, etc., or any suitable combination of the foregoing.
The flowchart and block diagrams in the figures illustrate the architecture, functionality, and operation of possible implementations of systems, methods and computer program products according to various embodiments of the present invention. In this regard, each block in the flowchart or block diagrams may represent a module, segment, or portion of code, which comprises one or more executable instructions for implementing the specified logical function(s). It should also be noted that, in some alternative implementations, the functions noted in the block may occur out of the order noted in the figures. For example, two blocks shown in succession may, in fact, be executed substantially concurrently, or the blocks may sometimes be executed in the reverse order, depending upon the functionality involved. It will also be noted that each block of the block diagrams or flowchart illustration, and combinations of blocks in the block diagrams or flowchart illustration, can be implemented by special purpose hardware-based systems which perform the specified functions or acts, or combinations of special purpose hardware and computer instructions.
The modules described in the embodiments of the present invention may be implemented by software or hardware. The described modules may also be provided in a processor, which may be described as: a processor comprising: the component obtaining module is used for obtaining metadata of the template components from the component metadata base and rendering the template components according to the metadata of the template components; the data monitoring module instantiates the metadata of the template component to obtain the metadata of a target component and monitors the metadata of the target component in real time; and the component rendering module is used for re-rendering the template component according to the changed metadata of the target component to obtain the target component when the metadata of the target component is changed, so that the visual design is realized. Where the names of these modules do not in some cases constitute a limitation on the module itself, for example, a component rendering module may also be described as a "module that instantiates metadata for the template component to obtain metadata for the target component".
As another aspect, the present invention also provides a computer-readable medium that may be contained in the apparatus described in the above embodiments; or may be separate and not incorporated into the device. The computer readable medium carries one or more programs which, when executed by a device, cause the device to comprise: acquiring metadata of a template component from a component metadata base, and rendering the template component according to the metadata of the template component; instantiating the metadata of the template component to obtain the metadata of a target component, and monitoring the metadata of the target component in real time; when the metadata of the target assembly changes, the template assembly is re-rendered according to the changed metadata of the target assembly to obtain the target assembly, and visual design is achieved.
According to the technical scheme of the embodiment of the invention, the visual design is carried out on the basis of the template component based on the metadata of the component, so that the personalized customization of the component library can be realized, and the page can be flexibly and quickly set up. By taking the target assembly as a new template assembly and storing the target assembly in the assembly metadata base, the target assembly is used as a new 'building block' to be reused, a UI designer can flexibly and quickly build a page like 'building blocks', and open reuse of the template assembly is realized. By adopting a recursive mode to generate the source code of the target component, the design style is not required to be restored by cutting a diagram in front-end development, and the project development efficiency is greatly improved.
The above-described embodiments should not be construed as limiting the scope of the invention. Those skilled in the art will appreciate that various modifications, combinations, sub-combinations, and substitutions can occur, depending on design requirements and other factors. Any modification, equivalent replacement, and improvement made within the spirit and principle of the present invention should be included in the protection scope of the present invention.
Claims (10)
1. A visual design method based on component metadata is characterized by comprising the following steps:
acquiring metadata of a template component from a component metadata base, and rendering the template component according to the metadata of the template component;
instantiating the metadata of the template component to obtain the metadata of a target component, and monitoring the metadata of the target component in real time;
when the metadata of the target assembly changes, the template assembly is re-rendered according to the changed metadata of the target assembly to obtain the target assembly, and visual design is achieved.
2. A visualization design method as recited in claim 1, wherein the metadata comprises: attribute metadata, event metadata, and slot metadata;
monitoring the metadata of the target component in real time, wherein the monitoring comprises the following steps: and extracting attribute metadata from the metadata of the target component to be bidirectionally bound with the attribute form, monitoring the attribute form in real time, and synchronously modifying the metadata of the target component when the attribute form is modified.
3. A visualization design method as recited in claim 2, wherein the metadata of the target component is listened to in real-time, further comprising: and binding the metadata of the target component and a data source form bidirectionally, monitoring the data source form in real time, and merging the modified data source form into the metadata of the target component when the data source form is modified.
4. A visual design method according to any one of claims 1-3 wherein after obtaining said target component, further comprising: and taking the target component as a new template component, and writing the metadata of the target component into the component metadata base.
5. A visual design method according to any one of claims 1-3 wherein after obtaining said target component, further comprising:
splicing template character strings according to the attribute metadata and the event metadata of the template component;
traversing each slot of the template component, and if the content of the slot is html or character strings, directly splicing the content of the slot as text content into the template character strings; if the content of the slot is a sub-component, searching metadata of the sub-component, splicing character strings of the sub-component according to the attribute metadata and the event metadata of the sub-component, and splicing the character strings of the sub-component into the template character string to obtain a template character string source code of the target component;
and sleeving the template character string source code of the target assembly into a code template of a front-end frame to obtain the source code of the target assembly.
6. A visual design apparatus based on component metadata, comprising:
the component obtaining module is used for obtaining metadata of the template components from the component metadata base and rendering the template components according to the metadata of the template components;
the data monitoring module instantiates the metadata of the template component to obtain the metadata of a target component and monitors the metadata of the target component in real time;
and the component rendering module is used for re-rendering the template component according to the changed metadata of the target component to obtain the target component when the metadata of the target component is changed, so that the visual design is realized.
7. A visualization design apparatus as recited in claim 6, wherein the metadata comprises: attribute metadata, event metadata, and slot metadata;
monitoring the metadata of the target component in real time, wherein the monitoring comprises the following steps: and extracting attribute metadata from the metadata of the target component to be bidirectionally bound with the attribute form, monitoring the attribute form in real time, and synchronously modifying the metadata of the target component when the attribute form is modified.
8. The visualization design apparatus of claim 7, wherein the metadata of the target component is listened to in real-time, further comprising: and binding the metadata of the target component and a data source form bidirectionally, monitoring the data source form in real time, and merging the modified data source form into the metadata of the target component when the data source form is modified.
9. An electronic device for visual design based on component metadata, comprising:
one or more processors;
a storage device for storing one or more programs,
when executed by the one or more processors, cause the one or more processors to implement the method of any one of claims 1-5.
10. A computer-readable medium, on which a computer program is stored, which, when being executed by a processor, carries out the method according to any one of claims 1-5.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910665741.4A CN112286513A (en) | 2019-07-23 | 2019-07-23 | Visual design method and device based on component metadata |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910665741.4A CN112286513A (en) | 2019-07-23 | 2019-07-23 | Visual design method and device based on component metadata |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN112286513A true CN112286513A (en) | 2021-01-29 |
Family
ID=74419199
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201910665741.4A Pending CN112286513A (en) | 2019-07-23 | 2019-07-23 | Visual design method and device based on component metadata |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112286513A (en) |
Cited By (13)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112925855A (en) * | 2021-04-12 | 2021-06-08 | 平安科技（深圳）有限公司 | Theme template synchronization method, device and equipment and storage medium |
| CN113010473A (en) * | 2021-03-05 | 2021-06-22 | 山东英信计算机技术有限公司 | Method and equipment for editing YAML file |
| CN113094038A (en) * | 2021-05-10 | 2021-07-09 | 乐聚(深圳)机器人技术有限公司 | Processing method, device, terminal and storage medium of function programming building block |
| CN113110829A (en) * | 2021-04-19 | 2021-07-13 | 中国工商银行股份有限公司 | Multi-UI component library data processing method and device |
| CN113181657A (en) * | 2021-04-30 | 2021-07-30 | 北京读我网络技术有限公司 | Cross-platform rendering method and device |
| CN113296758A (en) * | 2021-03-15 | 2021-08-24 | 上海爱数信息技术股份有限公司 | Front-end component library construction method and device and storage medium |
| CN113722015A (en) * | 2021-09-10 | 2021-11-30 | 京东科技控股股份有限公司 | Method and device for acquiring combined assembly and storage medium |
| CN113741898A (en) * | 2021-11-08 | 2021-12-03 | 深圳市明源云采购科技有限公司 | Form generation method, device and equipment |
| CN113835701A (en) * | 2021-09-22 | 2021-12-24 | 上海妙一生物科技有限公司 | Code generation method and device based on componentization |
| CN114417215A (en) * | 2021-12-31 | 2022-04-29 | 天闻数媒科技（北京）有限公司 | Designer and page design method |
| CN115238218A (en) * | 2022-09-26 | 2022-10-25 | 北京美络克思科技有限公司 | Webpage design method and webpage design device |
| CN115543323A (en) * | 2022-11-29 | 2022-12-30 | 共道网络科技有限公司 | Page development method and device |
| WO2023241544A1 (en) * | 2022-06-16 | 2023-12-21 | 华为技术有限公司 | Component preview method and electronic device |
-
2019
- 2019-07-23 CN CN201910665741.4A patent/CN112286513A/en active Pending
Cited By (17)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113010473A (en) * | 2021-03-05 | 2021-06-22 | 山东英信计算机技术有限公司 | Method and equipment for editing YAML file |
| CN113296758A (en) * | 2021-03-15 | 2021-08-24 | 上海爱数信息技术股份有限公司 | Front-end component library construction method and device and storage medium |
| CN112925855A (en) * | 2021-04-12 | 2021-06-08 | 平安科技（深圳）有限公司 | Theme template synchronization method, device and equipment and storage medium |
| CN113110829B (en) * | 2021-04-19 | 2024-02-20 | 中国工商银行股份有限公司 | Multi-UI component library data processing method and device |
| CN113110829A (en) * | 2021-04-19 | 2021-07-13 | 中国工商银行股份有限公司 | Multi-UI component library data processing method and device |
| CN113181657A (en) * | 2021-04-30 | 2021-07-30 | 北京读我网络技术有限公司 | Cross-platform rendering method and device |
| CN113181657B (en) * | 2021-04-30 | 2024-04-05 | 北京读我网络技术有限公司 | Cross-platform rendering method and device |
| CN113094038A (en) * | 2021-05-10 | 2021-07-09 | 乐聚(深圳)机器人技术有限公司 | Processing method, device, terminal and storage medium of function programming building block |
| CN113722015A (en) * | 2021-09-10 | 2021-11-30 | 京东科技控股股份有限公司 | Method and device for acquiring combined assembly and storage medium |
| CN113835701A (en) * | 2021-09-22 | 2021-12-24 | 上海妙一生物科技有限公司 | Code generation method and device based on componentization |
| CN113835701B (en) * | 2021-09-22 | 2024-04-02 | 上海妙一生物科技有限公司 | Code generation method and device based on componentization |
| CN113741898B (en) * | 2021-11-08 | 2022-02-25 | 深圳市明源云采购科技有限公司 | Form generation method, device and equipment |
| CN113741898A (en) * | 2021-11-08 | 2021-12-03 | 深圳市明源云采购科技有限公司 | Form generation method, device and equipment |
| CN114417215A (en) * | 2021-12-31 | 2022-04-29 | 天闻数媒科技（北京）有限公司 | Designer and page design method |
| WO2023241544A1 (en) * | 2022-06-16 | 2023-12-21 | 华为技术有限公司 | Component preview method and electronic device |
| CN115238218A (en) * | 2022-09-26 | 2022-10-25 | 北京美络克思科技有限公司 | Webpage design method and webpage design device |
| CN115543323A (en) * | 2022-11-29 | 2022-12-30 | 共道网络科技有限公司 | Page development method and device |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN112286513A (en) | Visual design method and device based on component metadata | |
| US11861334B2 (en) | Providing communication between a client system and a process-based software application | |
| US10831453B2 (en) | Connectors framework | |
| US8930824B2 (en) | Facilitating propagation of user interface patterns or themes | |
| US9910651B2 (en) | System for developing, testing, deploying, and managing applications in real-time | |
| US11635974B2 (en) | Providing a different configuration of added functionality for each of the stages of predeployment, deployment, and post deployment using a layer of abstraction | |
| US10095381B2 (en) | Task flow pin for a portal web site | |
| US20130159892A1 (en) | Non-technical creation of mobile web applications | |
| US11514232B2 (en) | Multi dimensional rules-based dynamic layouts | |
| CN113504908A (en) | Business code generation method and device, electronic equipment and computer readable medium | |
| CN116738106A (en) | System and method for converting web content into reusable templates and components | |
| US9323729B2 (en) | Coordinating the management of the layout and design of portal pages with the management of its associated web content | |
| CN111752561B (en) | Block development method, block sharing method, page building method and page building system | |
| WO2019080796A1 (en) | Method, apparatus and device for separating foreground and background of web system, and storage medium | |
| WO2024066825A1 (en) | Page project development method, apparatus, device, medium and product | |
| US9990343B2 (en) | System and method for in-browser editing | |
| CN112486482A (en) | Page display method and device | |
| US11843679B2 (en) | Automated dependency management based on page components | |
| US11663199B1 (en) | Application development based on stored data | |
| CN115543286A (en) | Dragging-combined visual large-screen system and method based on MVVM (multifunction vehicle virtual machine) | |
| CN113781608A (en) | Animation editing method and device | |
| CN112287266A (en) | Processing method and device for webpage configuration, equipment and storage medium | |
| CN111177183B (en) | Method and device for generating database access statement | |
| Kharel | Nokia 5G Field Test Web Application: Full Stack JavaScript Application | |
| Zdun | Xml-based dynamic content generation and conversion for the multimedia home platform |
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 |