CN114168141A - Page processing method and device based on components - Google Patents
Page processing method and device based on components Download PDFInfo
- Publication number
- CN114168141A CN114168141A CN202210126704.8A CN202210126704A CN114168141A CN 114168141 A CN114168141 A CN 114168141A CN 202210126704 A CN202210126704 A CN 202210126704A CN 114168141 A CN114168141 A CN 114168141A
- Authority
- CN
- China
- Prior art keywords
- component
- moved
- nesting
- currently
- page
- 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/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/0486—Drag-and-drop
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Software Systems (AREA)
- Databases & Information Systems (AREA)
- Data Mining & Analysis (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The invention discloses a page processing method and a device based on components, wherein the page processing method comprises the following steps: in response to detecting that component input or component position movement exists on a page for presenting components, acquiring position information and type attribute information of a currently input or moved-in component; determining a first display position of the currently input or moved-in component on the page based on the position information; in response to the fact that the first display position of the currently input or moved-in component is overlapped with the second display position of a target component in at least one component displayed on a page, determining whether the target component supports nesting of the currently input or moved-in component or not based on at least one preset nesting rule judging function, type attribute information of the currently input or moved-in component and type attribute information of the target component; and in response to determining that the target component supports nesting the currently entered or moved-in component, displaying the currently entered or moved-in component at a first display position on the page.
Description
Technical Field
The present invention relates to the field of information processing technologies, and in particular, to a method and an apparatus for processing a page based on a component, a computer-readable storage medium, an electronic device, and a computer program product.
Background
Based on the project development perspective, in order to meet various activity requirements of operation and markets, a system front end develops a plurality of page components, such as poster sharing components, carousel graph components, large graph components, list display components, timing components, video components and the like. The components developed by the system front-end may let the product, operator or UI (user interface) achieve the desired page effect by dragging the components on the page in a manner similar to a building block or puzzle. Some of the components in the page support nesting, for example, on a single graph component to support placement of one or more button components, and under a tab bar component to support nesting of various components. However, another portion of the components in the page can only be placed under the page, and these components do not support any components nested underneath as sub-components thereof. For example, the button assembly can only nest under components such as page pages, single graph components, orientation containers, etc., since the button assembly is the smallest component. Nesting a carousel component or video component under a button component, both visual and logical, is not in compliance with rules and usage habits. Therefore, the function settings do not support nesting any components under the button components.
Generally, when a page is submitted after being processed, whether the verification is performed by the front end of the system or the verification is performed by the back end of the system, the data format and the type of the page are judged to determine whether the condition that the webpage is successfully stored is met. If the webpage is not successfully saved, corresponding prompt information is provided so that the user can modify the webpage. If the user is unfamiliar with or does not understand the component nesting rules and performs nested splicing on components which cannot be nested, there may be a plurality of conditions which do not meet the storage success after the system front end or the system back end verifies. In this case, a plurality of prompt messages are provided to the user together, so that the user cannot distinguish which components have nesting errors, thereby bringing great trouble to the user experience.
Disclosure of Invention
In view of this, the present invention provides a component-based page processing method and apparatus, a computer-readable storage medium, an electronic device, and a computer program product, and aims to solve the problem of how to effectively prompt a user about a component nesting rule in a complex page component nesting structure, reduce the user's difficulty in handling, and improve the user experience, so that the user can generate an effect page faster and better.
According to an aspect of the embodiments of the present disclosure, there is provided a component-based page processing method, including:
in response to detecting that component input or component position movement exists on a page for presenting components, acquiring position information and type attribute information of a currently input or moved-in component;
determining a first display position of a currently input or moved-in component on the page based on the position information;
in response to detecting that a first display position of a currently input or moved-in component is overlapped with a second display position of a target component in at least one component displayed on the page, determining whether the target component supports nesting of the currently input or moved-in component based on at least one preset nesting rule judgment function, type attribute information of the currently input or moved-in component and the type attribute information of the target component; and
in response to determining that the target component supports nesting currently entered or moved-in components, displaying the currently entered or moved-in components at the first display location on the page.
Preferably, the method further comprises the following steps: in response to determining that the target component does not support nesting a currently entered or moved component, maintaining the state of the page and outputting a hint indicating a component nesting error.
Preferably, the position information includes coordinate information of the currently input or moved-in component on the page.
Preferably, the method further comprises the following steps: after displaying the currently entered or moved-in component at the first display position on the page,
determining whether the currently input or moved-in component supports nesting of other components based on the type attribute information of the currently input or moved-in component;
in response to determining that the currently input or moved-in component does not support nesting of other components, marking a node corresponding to the currently input or moved-in component with a specific mark in the tree structure for representing the hierarchical relationship of the components to prompt that the currently input or moved-in component does not support nesting of other components.
Preferably, the acquiring the position information and the type attribute information of the currently input component includes:
detecting whether a user operation related to component input exists in real time aiming at each component in the component library;
in response to detecting that there is a user operation related to the component input and the user operation is to input a component onto the page, determining a selected position of the currently input component based on the user operation;
acquiring the position information of the currently input assembly based on the selected position;
and/or the presence of a gas in the gas,
determining type attribute information of a currently input component based on a configuration file of the component library.
Preferably, the obtaining of the location information and the type attribute information of the currently moved-in component includes:
detecting whether user operation related to component movement exists in real time aiming at each component in the component library;
in response to detecting that there is a user action associated with movement of a component, and the user action is to move the component from one location of the page to another location of the page, determining a selected location of the currently moved-in component based on the user action;
acquiring the position information of the currently moved component based on the selected position;
and/or the presence of a gas in the gas,
determining type attribute information of the currently moved-in component based on the configuration file of the component library.
Preferably, the determining whether the target component supports nesting of the currently input or moved-in component based on at least one preset nesting rule judgment function and the type attribute information of the currently input or moved-in component and the type attribute information of the target component includes:
determining a nesting judgment result between the currently input or moved-in component and the target component by utilizing each nesting rule judgment function in the at least one nesting rule judgment function and based on the type attribute information of the currently input or moved-in component and the type attribute information of the target component;
and responding to the nesting judgment result of each nesting rule judgment function to indicate that the nesting is supported, and determining that the target component supports nesting of the currently input or moved-in component.
Preferably, the determining whether the target component supports nesting of the currently input or moved-in component based on at least one preset nesting rule judgment function and the type attribute information of the currently input or moved-in component and the type attribute information of the target component includes:
determining whether the number of the components nested in the target component exceeds a specified threshold value based on a nesting number judging function;
in response to determining that the number of components nested by the target component does not exceed a specified threshold, determining whether the target component itself supports nesting of other components based on a nesting logic decision function;
in response to determining that the target component supports other nested components, determining whether the currently input or moved-in component is a nested type supported by the target component based on a nesting relation judgment function and the type attribute information of the currently input or moved-in component and the type attribute information of the target component;
in response to determining that the currently entered or moved component is a nesting type supported by the target component, determining that the target component supports nesting the currently entered or moved component.
According to an aspect of the embodiments of the present disclosure, there is provided a component-based page processing apparatus including:
the device comprises an acquisition unit, a display unit and a display unit, wherein the acquisition unit is used for acquiring the position information and the type attribute information of the currently input or moved component in response to the detection that the component input or the component position movement exists on the page for presenting the component;
a first determination unit, configured to determine, based on the position information, a first display position of a currently input or moved-in component on the page;
a second determining unit, configured to determine, in response to detecting that there is a position overlap between a first display position of a currently input or moved-in component and a second display position of a target component in at least one component displayed on the page, whether the target component supports nesting of the currently input or moved-in component based on at least one preset nesting rule judgment function, and type attribute information of the currently input or moved-in component and type attribute information of the target component; and
a display unit to display a currently entered or moved-in component at the first display position on the page in response to determining that the target component supports nesting the currently entered or moved-in component.
Preferably, the method further comprises the following steps: and the output unit is used for responding to the fact that the target component does not support nesting of the currently input or moved-in component, keeping the state of the page unchanged and outputting prompt information for indicating component nesting errors.
Preferably, the position information includes coordinate information of the currently input or moved-in component on the page.
Preferably, the method further comprises the following steps: the marking unit is used for determining whether the currently input or moved-in component supports nesting of other components or not based on the type attribute information of the currently input or moved-in component after the currently input or moved-in component is displayed at the first display position on the page;
in response to determining that the currently input or moved-in component does not support nesting of other components, marking a node corresponding to the currently input or moved-in component with a specific mark in the tree structure for representing the hierarchical relationship of the components to prompt that the currently input or moved-in component does not support nesting of other components.
Preferably, the obtaining unit is specifically configured to detect, in real time, for each component in the component library, whether there is a user operation related to the component input; in response to detecting that there is a user operation related to the component input and the user operation is to input a component onto the page, determining a selected position of the currently input component based on the user operation; acquiring the position information of the currently input assembly based on the selected position; and/or the obtaining unit is specifically configured to determine type attribute information of the currently input component based on the configuration file of the component library.
Preferably, the obtaining unit is specifically configured to detect, in real time, for each component in the component library, whether there is a user operation related to component movement; in response to detecting that there is a user action associated with movement of a component, and the user action is to move the component from one location of the page to another location of the page, determining a selected location of the currently moved-in component based on the user action; and acquiring the position information of the currently moved component based on the selected position. And/or the obtaining unit is specifically configured to determine type attribute information of the currently moved component based on the configuration file of the component library.
Preferably, the second determination unit includes:
the first determining subunit is configured to determine, by using each nesting rule determination function in the at least one nesting rule determination function, a nesting determination result between the currently input or moved-in component and the target component based on the type attribute information of the currently input or moved-in component and the type attribute information of the target component;
and the second determining subunit is used for responding to that the nesting judgment result of each nesting rule judgment function represents that nesting is supported, and determining that the target component supports nesting of the currently input or moved-in component.
Preferably, the second determination unit includes:
a third determining subunit, configured to determine, based on a nesting number judging function, whether the number of components nested by the target component exceeds a specified threshold;
a fourth determining subunit, configured to determine, in response to determining that the number of components nested by the target component does not exceed a specified threshold, whether the target component itself supports nesting of other components based on a nesting logic determination function;
a fifth determining subunit, configured to determine, in response to determining that the target component itself supports nesting of other components, whether the currently input or migrated component is a nesting type supported by the target component based on a nesting relation determination function and the type attribute information of the currently input or migrated component and the type attribute information of the target component;
a sixth determining subunit, configured to determine that the target component supports nesting of the currently input or moved-in component in response to determining that the currently input or moved-in component is a nesting type supported by the target component.
According to yet another aspect of the embodiments of the present disclosure, there is provided a computer-readable storage medium storing a computer program for executing the method of any of the above embodiments.
Based on a further aspect of the embodiments of the present disclosure, there is provided an electronic device, including:
a processor;
a memory for storing the processor-executable instructions;
the processor is configured to read the executable instructions from the memory and execute the instructions to implement the method according to any of the embodiments.
According to yet another aspect of the embodiments of the present disclosure, there is provided a computer program product including computer readable code, wherein when the computer readable code runs on a device, a processor in the device executes a method for implementing any of the above embodiments.
Based on the page processing method and device based on the components, the computer readable storage medium, the electronic device and the computer program product provided by the embodiments of the present disclosure, on one hand, a user can clearly see whether each component of a current page supports dragging, and on the other hand, in the dragging process, if the current operation is adding a component node to a component which does not support nesting, the current operation is abandoned or rejected, and toast prompt information is provided, so that the problem that multiple prompts occur simultaneously due to nesting errors of multiple components when a webpage is finally saved is avoided. According to the technical scheme, the user can know the nesting attribute of the current component before component operation through the change of the cs style, and the identification degree is enhanced. In addition, the toast prompt message for prompting the nesting error is preposed, so that the current operation can be abandoned and the toast prompt message of the error reason can be provided in time as long as the current operation does not meet the nesting rule, and the problem that a user needs to modify a large number of page components again because the toast possibly occurs for multiple times when the webpage is finally saved is avoided.
Drawings
The above and other objects, features and advantages of the present invention will become more apparent by describing in more detail embodiments of the present invention with reference to the attached drawings. The accompanying drawings are included to provide a further understanding of the embodiments of the invention and are incorporated in and constitute a part of this specification, illustrate embodiments of the invention and together with the description serve to explain the principles of the invention and not to limit the invention. In the drawings, like reference numbers generally represent like parts or steps.
FIG. 1 is a flowchart of a component-based page processing method provided by an exemplary embodiment of the present disclosure;
FIG. 2 is a flowchart of a component-based page processing method provided by another exemplary embodiment of the present disclosure;
FIG. 3 is a schematic diagram of an example page process provided by an exemplary embodiment of the present disclosure;
FIG. 4 is a schematic structural diagram of a component-based page processing apparatus according to an exemplary embodiment of the present disclosure;
fig. 5 is a schematic diagram of an electronic device provided in an exemplary embodiment of the present disclosure.
Detailed Description
Hereinafter, example embodiments according to the present disclosure will be described in detail with reference to the accompanying drawings. It is to be understood that the described embodiments are merely a subset of the embodiments of the present disclosure and not all embodiments of the present disclosure, with the understanding that the present disclosure is not limited to the example embodiments described herein.
It should be noted that: the relative arrangement of the components and steps, the numerical expressions, and numerical values set forth in these embodiments do not limit the scope of the present disclosure unless specifically stated otherwise.
It will be understood by those of skill in the art that the terms "first," "second," and the like in the embodiments of the present disclosure are used merely to distinguish one element from another, and are not intended to imply any particular technical meaning, nor is the necessary logical order between them.
It is also understood that in embodiments of the present disclosure, "a plurality" may refer to two or more and "at least one" may refer to one, two or more.
It is also to be understood that any reference to any component, data, or structure in the embodiments of the disclosure, may be generally understood as one or more, unless explicitly defined otherwise or stated otherwise.
In addition, the term "and/or" in the present disclosure is only one kind of association relationship describing an associated object, and means that three kinds of relationships may exist, for example, a and/or B may mean: a exists alone, A and B exist simultaneously, and B exists alone. In addition, the character "/" in the present disclosure generally indicates that the former and latter associated objects are in an "or" relationship.
It should also be understood that the description of the various embodiments of the present disclosure emphasizes the differences between the various embodiments, and the same or similar parts may be referred to each other, so that the descriptions thereof are omitted for brevity.
Meanwhile, it should be understood that the sizes of the respective portions shown in the drawings are not drawn in an actual proportional relationship for the convenience of description.
The following description of at least one exemplary embodiment is merely illustrative in nature and is in no way intended to limit the disclosure, its application, or uses.
Techniques, methods, and apparatus known to those of ordinary skill in the relevant art may not be discussed in detail, but are intended to be part of the specification where appropriate.
It should be noted that: like reference numbers and letters refer to like items in the following figures, and thus, once an item is defined in one figure, further discussion thereof is not required in subsequent figures.
The disclosed embodiments may be applied to electronic devices such as terminal devices, computer systems, servers, etc., which are operational with numerous other general purpose or special purpose computing system environments or configurations. Examples of well known terminal devices, computing systems, environments, and/or configurations that may be suitable for use with electronic devices, such as terminal devices, computer systems, servers, and the like, include, but are not limited to: personal computer systems, server computer systems, thin clients, thick clients, hand-held or laptop devices, microprocessor-based systems, set top boxes, programmable consumer electronics, network pcs, minicomputer systems, mainframe computer systems, distributed cloud computing environments that include any of the above systems, and the like.
Electronic devices such as terminal devices, computer systems, servers, etc. may be described in the general context of computer system-executable instructions, such as program modules, being executed by a computer system. Generally, program modules may include routines, programs, objects, components, logic, data structures, etc. that perform particular tasks or implement particular abstract data types. The computer system/server may be practiced in distributed cloud computing environments where tasks are performed by remote processing devices that are linked through a communications network. In a distributed cloud computing environment, program modules may be located in both local and remote computer system storage media including memory storage devices.
The embodiment of the disclosure provides a component-based page processing method, which determines the display position of a current component on a page by detecting and acquiring position information and type attribute information of the current component input or moved in the page. And when the display position of the current component is overlapped with the display position of the existing component on the page, determining whether the existing component supports the nested current component or not based on the nesting rule judgment function, the type attribute information of the current component and the type attribute information of the existing component. In response to determining that the existing component supports nesting the current component, the current component is displayed at a display position on the page.
Fig. 1 is a flowchart of a component-based page processing method according to an exemplary embodiment of the present disclosure. As shown in fig. 1, the component-based page processing method includes:
According to one embodiment, the location information includes coordinate information on the page of the currently entered or moved-in component. Multiple components can be accommodated on a page for presenting components, and a nesting relationship can exist between any of the multiple components, or some components do not support nesting or no nesting relationship exists between two components. Generally, when a user wishes to nest a currently entered or moved-in second component under an already existing first component on a page, the act of nesting the second component under the first component may be accomplished by an input action or a setup action, such as dragging the second component to the location of the first component. To this end, in order to determine whether a user's input action requires nesting of components or under which component, it is necessary to determine where the user inputs or sets a current component, such as a second component. Thus, the location information is utilized to determine the location of the currently entered or moved-in component on the page on which the component is presented. The location information may be coordinate information of the currently input or moved-in component on the page, a distance of the currently input or moved-in component from a boundary of the page, and the like.
According to one embodiment, acquiring the position information and the type attribute information of the currently input component includes: detecting whether a user operation related to component input exists in real time aiming at each component in the component library; in response to detecting that there is a user operation related to the component input and the user operation is to input a component onto the page, determining a selected position of the currently input component based on the user operation; based on the selected position, position information of the currently input component is acquired.
Alternatively, according to one embodiment, obtaining location information and type attribute information of a currently migrated component includes: detecting whether user operation related to component movement exists in real time aiming at each component in the component library; in response to detecting that there is a user action associated with movement of a component, and the user action is to move the component from one location of the page to another location of the page, determining a selected location of the currently moved-in component based on the user action; and acquiring the position information of the currently moved component based on the selected position.
An example of a component library is shown in fig. 3, and fig. 3 is a schematic diagram of an example of page processing provided by an exemplary embodiment of the present disclosure. In fig. 3, the component library is displayed in the form of a list, and includes: single-chart, carousel, button, back-to-top, rich text, poster pop-up, video component, countdown component, navigation component, carousel information component, city selection, and the like. Each component in the component library may provide a specific function to the user. For example, the countdown component can provide a countdown function, and the user can make corresponding settings for the countdown component. According to one embodiment, for each component in the component library, the presence or absence of a user operation related to any component is detected in real time. User actions related to the components can be determined through real-time detection, and when the user actions related to the components are detected to exist and the user actions are used for inputting the components to the page or the user actions are used for moving the components from one position of the page to another position of the page, the selected position of the currently input or moved-in components is determined based on the user actions.
It should be understood that, since the present application adopts a tree diagram structure to show the structure of the current page and the positions of the components, the selected position can be the position of the currently input or moved-in component operated by the user in the web page data structure (e.g. the tree diagram shown in the page setting of fig. 3), which can be understood as the selected position selected by the user in the tree diagram. However, the selected position selected by the user is not necessarily able to be the final display position because the selected position cannot be determined as the final display position when the target component at the selected position selected by the user does not support nesting. To do so, it is necessary to determine whether the target component supports nesting of the currently entered or moved-in component in this position. If the target component does not support the currently entered or moved-in component to be nested in this position, the selected position selected by the user cannot become the final display position, but needs to be selected again.
According to one embodiment, alternatively, acquiring the position information and the type attribute information of the currently input component includes: type attribute information of a currently input component is determined based on a configuration file of the component library. According to one embodiment, alternatively, acquiring location information and type attribute information of a currently moved-in component includes: the type attribute information of the currently moved-in component is determined based on the configuration file of the component library. The type attribute information is used to describe a plurality of attributes of the component. For example, the type attribute information of the component includes: attributes (or fields) such as name (component name), ID (component ID), param (component carried parameter), that is, the data structure of the component includes: name (component name), ID (component ID), param (component carrying parameter), and the like. Further, in order to solve the problems in the prior art, improvements may be made in defining the data structure of the component. For example, each component adds two more attributes in addition to the above attributes when defining the data structure: allowNest (whether nesting is supported) and nodeRule (is an array that stores the functional judgment of nesting rules), thereby adding nesting identification and rules to the component. Based on two attributes or fields of allowNest and nodeRule, the nesting problem of the current component is processed and prompted to the user.
As shown in fig. 3, as a user operates a component in a component library, such as a single drawing, a carousel drawing, a button, a back to the top, rich text, a poster pop-up, a video component, a countdown component, a navigation component, a carousel information component, a city selection, etc., the user may select and drag a particular component, such as a rich text component. When the component is dragged to the page and the display position of the component is determined to be free from errors or conflicts, whether the component supports nesting or not is determined according to the allowNest attribute of the component. Whether the current component supports nesting or not is marked at the connecting point according to the allowNest attribute of the component in real time, for example, if the current component supports nesting, the connecting line displays a solid line, and if the current component does not support nesting, the connecting line displays a dotted line. As shown in FIG. 3, the single graph and Tabs container support nesting, so the connecting lines show solid lines for components that can be nested under the single graph and Tabs container. The carousel map, rich text, and countdown components do not support nesting, so connecting lines show dashed lines to indicate components that cannot be nested under the carousel map, rich text, and countdown components.
Based on the position information, a first display position of the currently input or moved-in component on the page is determined 102. As described above, the selected location may be the location of the currently entered or moved-in component of the user operation in a web page data structure (e.g., a tree diagram as shown in the page arrangement of FIG. 3). For example, the carousel map component is located below the single map and above the three navigation components in the tree, then the first display location of the carousel map component is also located below the single map and above the three navigation components in the displayed page.
Specific examples of component operations include: when a user wants to input a component into a page, the component can be dragged from the component library to a certain component node in the tree diagram (the page setting column of fig. 3), and an operation mode of dragging the component node on the tree diagram to change the position and nest the component is supported. If the user ignores the above-described prompt of whether to support the nested connecting line (solid line or dotted line), and still drags the currently input or moved component to the target component node which does not support nesting, and wants to make it become the subcomponent node of the target component node, the nesting judgment can be performed by using nodeRule (nested rule function array). The nested regular function array has one or more functions therein. For example, a user currently drags a single graph component and drags the single graph component to a button component, and when a mouse is released by dragging the single graph component to the button component node, type attribute data of a target component node (button component) can be acquired. It is determined whether a function value exists in nodeRule in the type attribute data of the target component node. And if the nodeRule has a function value, sequentially acquiring each function in the nested regular function array by using a combined function or a common loop and executing. For example, each function in the nested rule function array judges whether the button component supports the nested single-graph component, and if the button component supports the nesting, true is returned; if nesting is not supported, false is returned. If false is returned, it is stated that the target component node does not support nesting of the dragging component based on this function, and if true, it is stated that the target component node supports nesting of the dragging component based on this function. And continuing to execute the next function until all the functions are executed. If all functions return true, the target component node is said to support nesting the component being dragged. If any function returns false, the fact that the target component node does not support nesting of the component which is being dragged is shown, the reason of operation execution failure is prompted by using toast, then the current judging process is finished, and the current operation of the user is discarded, so that the change of the webpage data structure cannot be caused.
In one example, determining whether the target component supports nesting of the currently input or moved-in component based on at least one preset nesting rule judgment function and the type attribute information of the currently input or moved-in component and the type attribute information of the target component includes: determining a nesting judgment result between the currently input or moved-in component and the target component by utilizing each nesting rule judgment function in at least one nesting rule judgment function and based on the type attribute information of the currently input or moved-in component and the type attribute information of the target component; and responding to the nesting judgment result of each nesting rule judgment function to indicate that the nesting is supported, and determining that the target component supports nesting of the currently input or moved-in component. As described above, if all functions return true, it is stated that the target component node supports nesting the component being dragged. If any function returns false, it indicates that the target component node does not support nesting the component being dragged.
In one example, determining whether the target component supports nesting of the currently input or moved-in component based on at least one preset nesting rule judgment function and the type attribute information of the currently input or moved-in component and the type attribute information of the target component includes: determining whether the number of the components nested in the target component exceeds a specified threshold value based on a nesting number judging function; in response to determining that the number of components nested by the target component does not exceed a specified threshold, determining whether the target component itself supports nesting of other components based on a nesting logic decision function; in response to determining that the target component supports other nested components, determining whether the currently input or moved-in component is a nested type supported by the target component based on a nesting relation judgment function and the type attribute information of the currently input or moved-in component and the type attribute information of the target component; in response to determining that the currently entered or moved-in component is a nesting type supported by the target component, determining that the target component supports nesting the currently entered or moved-in component.
It should be appreciated that when nesting components, there is a corresponding threshold number of components that can be nested under each type of component due to some constraints. In this way, nesting too many components under a component can be avoided, thereby cluttering the page display. For this reason, when determining whether the component supports nesting, it is also necessary to determine whether the number of components nested by the target component exceeds a specified threshold value based on the nesting number judgment function. When it is determined that the number of components nested by the target component exceeds a specified threshold, no new nested components are allowed to be added.
When the number of the components nested in the target component is determined not to exceed the specified threshold, whether the target component supports nesting of other components is determined based on a nesting logic judgment function. For example, it is determined whether the target component itself supports nesting of other components using allowNest (whether nesting is supported) in the type attribute information, i.e., a nesting logic judgment function. When the target component itself does not support nesting other components, nesting components are not allowed. And when the target component is determined to support other nested components, further determining whether the currently input or moved-in component is a nested type supported by the target component based on the nesting relation judgment function, the type attribute information of the currently input or moved-in component and the type attribute information of the target component. In response to determining that the currently entered or moved-in component is a nesting type supported by the target component, determining that the target component supports nesting the currently entered or moved-in component.
In one embodiment, in response to detecting that the first display position of the currently entered or moved-in component does not exist in a position overlap with the display position of each of the at least one component displayed on the page, the currently entered or moved-in component is displayed at the first display position on the page.
In response to determining that the target component supports nesting of the currently entered or moved-in component, the currently entered or moved-in component is displayed at a first display position on the page, step 104. Wherein the first display position is a display position of the currently input or moved-in component on the page determined based on the position information. Further, in response to determining that the target component does not support nesting of a currently entered or moved component, the state of the page is maintained and a hint indicating a component nesting error is output. According to one embodiment, the reasons for component nesting errors include: the target component does not support (below) nesting any components, e.g., the value of allowNest for the target component indicates that the target component does not support nesting; alternatively, the target component supports nested components, e.g., the value of allowNest for the target component indicates that the target component supports nesting, but the target component does not support nesting of currently entered or moved-in components. That is, the target component and the currently input or moved-in component are not supported by nesting logic, for example, if any function in nodeRule of the target component determines that the target component does not support nesting of the currently input or moved-in component, the target component is determined not to support nesting of the currently input or moved-in component. It should be appreciated that the target component may support nesting of other components.
In one embodiment, further comprising: after displaying the currently input or moved-in component at the first display position on the page, determining whether the currently input or moved-in component supports nesting of other components based on the type attribute information of the currently input or moved-in component; in response to determining that the currently input or moved-in component does not support nesting of other components, marking a node corresponding to the currently input or moved-in component with a specific mark in the tree structure for representing the hierarchical relationship of the components to prompt that the currently input or moved-in component does not support nesting of other components. For example, if the current component supports nesting, the connecting line shows a solid line, and if the current component does not support nesting, the connecting line shows a dashed line.
Fig. 2 is a flowchart of a component-based page processing method according to another exemplary embodiment of the present disclosure. The page processing method based on the components enables a user to build a component page and request to save the page according to allowNest and nodeRule prompts. Specifically, the method comprises the following steps:
At step 202, component tabs are dragged from the component area to effect component addition.
And step 203, dragging the component label in the tree diagram to perform transposition or nesting of the component.
Fig. 4 is a schematic structural diagram of a component-based page processing apparatus according to an exemplary embodiment of the present disclosure. The page processing apparatus includes: an acquisition unit 401, a first determination unit 402, a second determination unit 403, a display unit 404, an output unit 405, and an annotation unit 406.
An obtaining unit 401, configured to, in response to detecting that there is a component input or a component position movement on a page for presenting components, obtain position information and type attribute information of a currently input or moved-in component. The location information includes coordinate information on the page of the currently entered or moved-in component.
In an embodiment, the obtaining unit 401 is specifically configured to detect, in real time, for each component in the component library, whether there is a user operation related to component input; in response to detecting that there is a user operation related to the component input and the user operation is to input a component onto the page, determining a selected position of the currently input component based on the user operation; based on the selected position, position information of the currently input component is acquired. Alternatively, the obtaining unit 401 is specifically configured to determine type attribute information of the currently input component based on the configuration file of the component library.
In an embodiment, the obtaining unit 401 is specifically configured to detect, in real time, for each component in the component library, whether there is a user operation related to component movement; in response to detecting that there is a user action associated with movement of a component, and the user action is to move the component from one location of the page to another location of the page, determining a selected location of the currently moved-in component based on the user action; and acquiring the position information of the currently moved component based on the selected position. Alternatively, the obtaining unit 401 is specifically configured to determine type attribute information of the currently moved component based on the configuration file of the component library.
A first determining unit 402, configured to determine a first display position of the currently input or moved-in component on the page based on the position information.
A second determining unit 403, configured to determine, in response to detecting that there is a position overlap between a first display position of the currently input or moved-in component and a second display position of a target component in at least one component displayed on the page, whether the target component supports nesting of the currently input or moved-in component based on at least one nesting rule judgment function set in advance, and type attribute information of the currently input or moved-in component and type attribute information of the target component.
In one embodiment, the second determining unit 403 includes:
the first determining subunit is used for determining a function by using each nesting rule in at least one nesting rule determining function, and determining a nesting determining result between the currently input or moved-in component and the target component based on the type attribute information of the currently input or moved-in component and the type attribute information of the target component;
and the second determining subunit is used for responding to that the nesting judgment result of each nesting rule judgment function represents that nesting is supported, and determining that the target component supports nesting of the currently input or moved-in component.
In one embodiment, the second determining unit 403 further includes:
a third determining subunit, configured to determine, based on the nesting number judging function, whether the number of components nested by the target component exceeds a specified threshold;
a fourth determining subunit, configured to determine, in response to determining that the number of components nested by the target component does not exceed the specified threshold, whether the target component itself supports nesting of other components based on a nesting logic determination function;
a fifth determining subunit, configured to determine, in response to determining that the target component itself supports nesting of other components, whether the currently input or migrated component is a nested type supported by the target component based on the nesting relation determination function and the type attribute information of the currently input or migrated component and the type attribute information of the target component;
a sixth determining subunit, configured to determine that the target component supports nesting of the currently input or moved-in component in response to determining that the currently input or moved-in component is a nesting type supported by the target component.
A display unit 404 for displaying the currently entered or moved-in component at a first display position on the page in response to determining that the target component supports nesting the currently entered or moved-in component.
An output unit 405, configured to, in response to determining that the target component does not support nesting of a currently input or moved-in component, keep the state of the page unchanged and output a prompt message indicating a component nesting error.
And the marking unit 406 is used for determining whether the currently input or moved-in component supports nesting of other components or not based on the type attribute information of the currently input or moved-in component after the currently input or moved-in component is displayed at the first display position on the page. In response to determining that the currently input or moved-in component does not support nesting of other components, the labeling unit 406 labels a node corresponding to the currently input or moved-in component with a specific label in a tree structure representing a hierarchical relationship of the components to prompt that the currently input or moved-in component does not support nesting of other components.
Fig. 5 is a structure of an electronic device according to an exemplary embodiment of the present disclosure. The electronic device may be either or both of the first device and the second device, or a stand-alone device separate from them, which stand-alone device may communicate with the first device and the second device to receive the acquired input signals therefrom. FIG. 5 shows a block diagram of an electronic device in accordance with an embodiment of the disclosure. As shown in fig. 5, the electronic device includes one or more processors 510 and memory 520.
The processor 510 may be a Central Processing Unit (CPU) or other form of processing unit having data processing capabilities and/or instruction execution capabilities, and may control other components in the electronic device to perform desired functions.
The input device 530 may also include, for example, a keyboard, a mouse, and the like.
The output device 540 may output various information to the outside. The output devices 540 may include, for example, a display, speakers, a printer, and a communication network and remote output devices connected thereto, among others.
Of course, for simplicity, only some of the components of the electronic device relevant to the present disclosure are shown in fig. 5, omitting components such as buses, input/output interfaces, and the like. In addition, the electronic device may include any other suitable components, depending on the particular application.
Exemplary computer program product and computer-readable storage medium in addition to the above-described methods and apparatus, embodiments of the present disclosure may also be a computer program product comprising computer program instructions that, when executed by a processor, cause the processor to perform steps in a component-based page processing method according to various embodiments of the present disclosure as described in the "exemplary methods" section of this specification above.
The computer program product may write program code for carrying out operations for embodiments of the present disclosure in any combination of one or more programming languages, including an object oriented programming language such as Java, C + + or the like and conventional procedural programming languages, such as the "C" programming language or similar programming languages. The program code may execute entirely on the user's computing device, partly on the user's device, as a stand-alone software package, partly on the user's computing device and partly on a remote computing device, or entirely on the remote computing device or server.
Furthermore, embodiments of the present disclosure may also be a computer-readable storage medium having stored thereon computer program instructions that, when executed by a processor, cause the processor to perform steps in a component-based page processing method according to various embodiments of the present disclosure described in the "exemplary methods" section above in this specification.
The computer-readable storage medium may take any combination of one or more readable media. The readable medium may be a readable signal medium or a readable storage medium. A readable storage medium may include, for example, but not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or a combination of any of the foregoing. More specific examples (a non-exhaustive list) of the readable storage medium include: an electrical connection having one or more wires, a portable disk, 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.
The foregoing describes the general principles of the present disclosure in conjunction with specific embodiments, however, it is noted that the advantages, effects, etc. mentioned in the present disclosure are merely examples and are not limiting, and they should not be considered essential to the various embodiments of the present disclosure. Furthermore, the foregoing disclosure of specific details is for the purpose of illustration and description and is not intended to be limiting, since the disclosure is not intended to be limited to the specific details so described.
In the present specification, the embodiments are described in a progressive manner, each embodiment focuses on differences from other embodiments, and the same or similar parts in the embodiments are referred to each other. For the system embodiment, since it basically corresponds to the method embodiment, the description is relatively simple, and for the relevant points, reference may be made to the partial description of the method embodiment.
The block diagrams of devices, apparatuses, systems referred to in this disclosure are only given as illustrative examples and are not intended to require or imply that the connections, arrangements, configurations, etc. must be made in the manner shown in the block diagrams. These devices, apparatuses, devices, systems may be connected, arranged, configured in any manner, as will be appreciated by those skilled in the art. Words such as "including," "comprising," "having," and the like are open-ended words that mean "including, but not limited to," and are used interchangeably therewith. The words "or" and "as used herein mean, and are used interchangeably with, the word" and/or, "unless the context clearly dictates otherwise. The word "such as" is used herein to mean, and is used interchangeably with, the phrase "such as but not limited to".
The methods and apparatus of the present disclosure may be implemented in a number of ways. For example, the methods and apparatus of the present disclosure may be implemented by software, hardware, firmware, or any combination of software, hardware, and firmware. The above-described order for the steps of the method is for illustration only, and the steps of the method of the present disclosure are not limited to the order specifically described above unless specifically stated otherwise. Further, in some embodiments, the present disclosure may also be embodied as programs recorded in a recording medium, the programs including machine-readable instructions for implementing the methods according to the present disclosure. Thus, the present disclosure also covers a recording medium storing a program for executing the method according to the present disclosure.
It is also noted that in the devices, apparatuses, and methods of the present disclosure, each component or step can be decomposed and/or recombined. These decompositions and/or recombinations are to be considered equivalents of the present disclosure. The previous description of the disclosed aspects is provided to enable any person skilled in the art to make or use the present disclosure. Various modifications to these aspects will be readily apparent to those skilled in the art, and the generic principles defined herein may be applied to other aspects without departing from the scope of the disclosure. Thus, the present disclosure is not intended to be limited to the aspects shown herein but is to be accorded the widest scope consistent with the principles and novel features disclosed herein.
The foregoing description has been presented for purposes of illustration and description. Furthermore, this description is not intended to limit embodiments of the disclosure to the form disclosed herein. While a number of example aspects and embodiments have been discussed above, those of skill in the art will recognize certain variations, modifications, alterations, additions and sub-combinations thereof.
Claims (11)
1. A component-based page processing method includes:
in response to detecting that component input or component position movement exists on a page for presenting components, acquiring position information and type attribute information of a currently input or moved-in component;
determining a first display position of a currently input or moved-in component on the page based on the position information;
in response to detecting that a first display position of a currently input or moved-in component is overlapped with a second display position of a target component in at least one component displayed on the page, determining whether the target component supports nesting of the currently input or moved-in component based on at least one preset nesting rule judgment function, type attribute information of the currently input or moved-in component and the type attribute information of the target component; and
in response to determining that the target component supports nesting currently entered or moved-in components, displaying the currently entered or moved-in components at the first display location on the page.
2. The method of claim 1, further comprising:
in response to determining that the target component does not support nesting a currently entered or moved component, maintaining the state of the page and outputting a hint indicating a component nesting error.
3. The method of claim 1, wherein the location information includes coordinate information on the page of a currently entered or moved-in component.
4. The method of claim 1, further comprising: after displaying the currently entered or moved-in component at the first display position on the page,
determining whether the currently input or moved-in component supports nesting of other components based on the type attribute information of the currently input or moved-in component;
in response to determining that the currently input or moved-in component does not support nesting of other components, marking a node corresponding to the currently input or moved-in component with a specific mark in the tree structure for representing the hierarchical relationship of the components to prompt that the currently input or moved-in component does not support nesting of other components.
5. The method of claim 1, wherein obtaining location information and type attribute information of a currently input component comprises:
detecting whether a user operation related to component input exists in real time aiming at each component in the component library;
in response to detecting that there is a user operation related to the component input and the user operation is to input a component onto the page, determining a selected position of the currently input component based on the user operation;
acquiring the position information of the currently input assembly based on the selected position;
and/or the presence of a gas in the gas,
determining type attribute information of a currently input component based on a configuration file of the component library.
6. The method of claim 1, wherein obtaining location information and type attribute information for a currently migrated component comprises:
detecting whether user operation related to component movement exists in real time aiming at each component in the component library;
in response to detecting that there is a user action associated with movement of a component, and the user action is to move the component from one location of the page to another location of the page, determining a selected location of the currently moved-in component based on the user action;
acquiring the position information of the currently moved component based on the selected position;
and/or the presence of a gas in the gas,
determining type attribute information of the currently moved-in component based on the configuration file of the component library.
7. The method of claim 1, wherein determining whether the target component supports nesting of the currently input or moved-in component based on at least one preset nesting rule judgment function and the type attribute information of the currently input or moved-in component and the type attribute information of the target component comprises:
determining a nesting judgment result between the currently input or moved-in component and the target component by utilizing each nesting rule judgment function in the at least one nesting rule judgment function and based on the type attribute information of the currently input or moved-in component and the type attribute information of the target component;
and responding to the nesting judgment result of each nesting rule judgment function to indicate that the nesting is supported, and determining that the target component supports nesting of the currently input or moved-in component.
8. The method of claim 1, wherein determining whether the target component supports nesting of the currently input or moved-in component based on at least one preset nesting rule judgment function and the type attribute information of the currently input or moved-in component and the type attribute information of the target component comprises:
determining whether the number of the components nested in the target component exceeds a specified threshold value based on a nesting number judging function;
in response to determining that the number of components nested by the target component does not exceed a specified threshold, determining whether the target component itself supports nesting of other components based on a nesting logic decision function;
in response to determining that the target component supports other nested components, determining whether the currently input or moved-in component is a nested type supported by the target component based on a nesting relation judgment function and the type attribute information of the currently input or moved-in component and the type attribute information of the target component;
in response to determining that the currently entered or moved component is a nesting type supported by the target component, determining that the target component supports nesting the currently entered or moved component.
9. A component-based page processing apparatus, comprising:
the device comprises an acquisition unit, a display unit and a display unit, wherein the acquisition unit is used for acquiring the position information and the type attribute information of the currently input or moved component in response to the detection that the component input or the component position movement exists on the page for presenting the component;
a first determination unit, configured to determine, based on the position information, a first display position of a currently input or moved-in component on the page;
a second determining unit, configured to determine, in response to detecting that there is a position overlap between a first display position of a currently input or moved-in component and a second display position of a target component in at least one component displayed on the page, whether the target component supports nesting of the currently input or moved-in component based on at least one preset nesting rule judgment function, and type attribute information of the currently input or moved-in component and type attribute information of the target component; and
a display unit to display a currently entered or moved-in component at the first display position on the page in response to determining that the target component supports nesting the currently entered or moved-in component.
10. A computer-readable storage medium, characterized in that the storage medium stores a computer program for performing the method of any of claims 1-8.
11. An electronic device, comprising:
a processor;
a memory for storing the processor-executable instructions;
the processor to read the executable instructions from the memory and execute the instructions to implement the method of any of claims 1-8.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210126704.8A CN114168141A (en) | 2022-02-11 | 2022-02-11 | Page processing method and device based on components |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210126704.8A CN114168141A (en) | 2022-02-11 | 2022-02-11 | Page processing method and device based on components |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN114168141A true CN114168141A (en) | 2022-03-11 |
Family
ID=80489782
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202210126704.8A Pending CN114168141A (en) | 2022-02-11 | 2022-02-11 | Page processing method and device based on components |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114168141A (en) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116893772A (en) * | 2023-09-11 | 2023-10-17 | 中移(苏州)软件技术有限公司 | Component control method and device, electronic equipment and storage medium |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20150213117A1 (en) * | 2014-01-25 | 2015-07-30 | Microsoft Corporation | Adaptive ui for nested data categories across browser viewports |
| CN106775683A (en) * | 2016-11-30 | 2017-05-31 | 华南理工大学 | A kind of graphic programming control and storage system |
| CN108304182A (en) * | 2018-02-14 | 2018-07-20 | 飞天诚信科技股份有限公司 | A kind of implementation method and device of the control for supporting nested window |
| CN110377858A (en) * | 2019-07-08 | 2019-10-25 | 紫光云技术有限公司 | A kind of visualization pulls the system and method for the generation dynamic list page |
| CN111273900A (en) * | 2020-01-14 | 2020-06-12 | 浙江华云信息科技有限公司 | On-line drag code generation method based on gitlab real-time code sharing |
-
2022
- 2022-02-11 CN CN202210126704.8A patent/CN114168141A/en active Pending
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20150213117A1 (en) * | 2014-01-25 | 2015-07-30 | Microsoft Corporation | Adaptive ui for nested data categories across browser viewports |
| CN106775683A (en) * | 2016-11-30 | 2017-05-31 | 华南理工大学 | A kind of graphic programming control and storage system |
| CN108304182A (en) * | 2018-02-14 | 2018-07-20 | 飞天诚信科技股份有限公司 | A kind of implementation method and device of the control for supporting nested window |
| CN110377858A (en) * | 2019-07-08 | 2019-10-25 | 紫光云技术有限公司 | A kind of visualization pulls the system and method for the generation dynamic list page |
| CN111273900A (en) * | 2020-01-14 | 2020-06-12 | 浙江华云信息科技有限公司 | On-line drag code generation method based on gitlab real-time code sharing |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116893772A (en) * | 2023-09-11 | 2023-10-17 | 中移(苏州)软件技术有限公司 | Component control method and device, electronic equipment and storage medium |
| CN116893772B (en) * | 2023-09-11 | 2024-01-26 | 中移(苏州)软件技术有限公司 | Component control method and device, electronic equipment and storage medium |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US11270186B2 (en) | Systems and methods of activity target selection for robotic process automation | |
| JP4896444B2 (en) | Method, apparatus, and computer-readable medium for managing specific types of content within an electronic document | |
| US11249729B2 (en) | Providing image and text data for automatic target selection in robotic process automation | |
| US10503821B2 (en) | Dynamic workflow assistant with shared application context | |
| US11201796B2 (en) | Enabling transfer of widgets across containers at runtime | |
| US9058105B2 (en) | Automated adjustment of input configuration | |
| US11188308B2 (en) | Interactive code editing | |
| US20100199185A1 (en) | Common navigation mechanism for desktop and browser-based applications | |
| CN101952821A (en) | Editing a document using a transitory editing surface | |
| US20220035641A1 (en) | Robotic process automation with resilient playback capabilities | |
| US9910835B2 (en) | User interface for creation of content works | |
| CN109683773B (en) | Corpus labeling method and apparatus | |
| EP3891625A1 (en) | Method of detecting user interface layout issues for web applications | |
| US11803396B2 (en) | Intelligent automation of UI interactions | |
| US20130174033A1 (en) | HTML5 Selector for Web Page Content Selection | |
| US10713417B2 (en) | Contextual font filtering in a digital medium environment | |
| JP2011081778A (en) | Method and device for display-independent computerized guidance | |
| CN114168141A (en) | Page processing method and device based on components | |
| US20210405998A1 (en) | Element detection | |
| CN114185523A (en) | Page tree structure processing method and device based on components | |
| CN115062251A (en) | Method, system, device and storage medium for automatically publishing articles | |
| US20220355473A1 (en) | Robotic Process Automation (RPA) Comprising Automatic Document Scrolling | |
| CN110874176A (en) | Interaction method, storage medium, operating system and device | |
| CN110991147B (en) | Font detection method and device, electronic equipment and storage medium | |
| CN112612469A (en) | Interface element processing method and device and electronic equipment |
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 | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20220311 |
|
| RJ01 | Rejection of invention patent application after publication |