CN108052365B - User interface component generation method and device - Google Patents

Abstract

The embodiment of the invention discloses a method and a device for generating a component of a user interface, wherein the method comprises the following steps: loading the component library of the invention, and calling the components of the component library; the component library comprises a search box, a date and time selector, a tree component, a pop-up box, drawing of a picture polygon hot zone and the like; when the component is called from the component library, the component is displayed on a display interface, a view layer of the component monitors a page attribute setting event which is requested to be executed by a developer, and the event is fed back to a logic layer of the component, so that the data of the logic layer is modified according to the page attribute setting event. Because the document identification of the page element of the view layer of the component is bound with the document identification of the data processed by the logic layer, the view layer can complete the self-defined adjustment of the component only by rendering the data in the logic layer of the component to be called in the view layer of the component according to the document identification, developers do not need to operate the document object model one by one, and the operation is simple and efficient.

Description

User interface component generation method and device

Technical Field

The invention relates to the technical field of computers, in particular to a method and a device for generating a component of a user interface.

Background

With the increasing number of handheld intelligent devices, the interaction and experience requirements of users on web pages are remarkably improved. Research and development personnel need to develop respective business interfaces, namely web interfaces, in parallel while developing a large background management system, so that a user can interact with the management system through the web interfaces. In the development process, research and development personnel control the background management system to keep low coupling with the service interface, meanwhile, the consistency of interface interaction is ensured, a few frames capable of meeting the requirements are available on the market, and generally boot trap based on jquery.

Js is used in the existing scheme to generate an interface as follows: in a browser interface, developers need to operate on document object models (page elements constituting components) one by one to meet different business scenarios. However, the existing solutions have the following drawbacks: developers need to operate the document object models one by one, the operation is complex and low in efficiency, and the rendering cost of the browser is high in the generation process; and the coupling among all the service modules is high, and in a large-scale system developed by multiple persons in parallel, the subsequent expandability and maintainability of the system are poor due to the fact that the coupling among the modules is too high.

Disclosure of Invention

The method and the device for generating the components of the user interface, provided by the embodiment of the invention, have the advantages that developers do not need to operate the document object models one by one, the operation is simple, the efficiency is high, meanwhile, the componentized development is supported, the coupling degree among all business modules can be greatly reduced, and the method and the device are suitable for large-scale web application.

In a first aspect, an embodiment of the present invention provides a method for generating a component of a user interface, where the method includes:

monitoring a calling event of a user-defined assembly in an assembly library; the self-defining component comprises a view layer and a logic layer; the view layer comprises at least one page element, and the document identifier of the page element of the view layer is bound with the document identifier of the data processed by the logic layer;

receiving a calling component request; the calling component request comprises a component to be called;

calling the component to be called from the component library, and displaying a view layer of the component to be called;

monitoring a page attribute setting event through a view layer of the component to be called, and feeding the page attribute setting event back to a logic layer of the component to be called so that the logic layer of the component to be called modifies data of the logic layer according to the page attribute setting event;

and rendering the data in the logic layer of the component to be called in the view layer of the component to be called through the view layer of the component to be called and according to the document identification, and completing the calling of the component to be called.

In a first possible implementation manner of the first aspect, the component to be invoked includes a select search box component; the page elements of the select search box component comprise an input box and a drop-down selection box;

monitoring a page attribute setting event through the view layer of the component to be called, and feeding back the page attribute setting event to the logic layer of the component to be called, so that the logic layer of the component to be called modifies data of the logic layer according to the page attribute setting event, specifically including:

receiving a search data file through the view layer of the selective search frame assembly when a front-end search setting request is monitored through the view layer of the selective search frame assembly; the search data file includes at least one option;

inputting the search data file into a front-end search function of the logical layer of the selected search box component through the logical layer of the selected search box component; the front-end search function is used for searching out options related to the keywords from the search data file when the keywords are received from the input box.

With reference to the first possible implementation manner of the first aspect, in a second possible implementation manner of the first aspect, the monitoring a page attribute setting event through a view layer of the component to be called, and feeding back the page attribute setting event to a logic layer of the component to be called, so that the logic layer of the component to be called modifies data of the logic layer according to the page attribute setting event, further includes:

when a back-end search setting request is monitored through the view layer of the selective search frame assembly, receiving a back-end interface address through the view layer of the selective search frame assembly;

inputting the backend interface address into a backend search function of the logical layer of the select search box component through the logical layer of the select search box component; the back-end search function is used for providing the keywords to a back-end interface through the address of the back-end interface to search out options related to the keywords when the keywords are received in the input box, and receiving the options returned from the back-end interface;

when an option display setting request is monitored through the view layer of the selective search frame assembly, an option display function is set through the logic layer of the selective search frame assembly according to the option display setting request; the option display function is used for displaying the options returned by the front-end search function or the back-end search function on the view layer and controlling the display attributes of the options; the option display setting request comprises a single selection setting request, a multiple selection setting request and a multiple selection style display setting request.

In a third possible implementation form of the first aspect, the component to be invoked comprises a date and time selector component; the page elements of the date and time selector component include an input box, a drop-down calendar, and a drop-down schedule; and the logic layer of the date and time selector component is used for responding to click events on a pull-down calendar or a pull-down schedule and displaying the date or time corresponding to the click events on the input box.

In a fourth possible implementation manner of the first aspect, the component to be invoked includes a tree component; the page elements of the tree component comprise an input box, a node and the node check box;

monitoring a page attribute setting event through the view layer of the component to be called, and feeding back the page attribute setting event to the logic layer of the component to be called, so that the logic layer of the component to be called modifies data of the logic layer according to the page attribute setting event, specifically including:

when a node data loading request is monitored through a view layer of the tree component, receiving node data through the view layer of the tree component and transmitting the node data to a logic layer of the tree component; the node data comprises the name and the affiliation of each node or the attribute of whether to allow check;

traversing the node data through the logic layer of the tree component to generate tree structure data of the node data, so that a view layer of the tree component can display according to the tree structure data; when the input box is used for receiving a keyword from the input box, providing the keyword to a logic layer of the tree component, traversing nodes of the tree structure data according to the keyword, and setting a node association display identifier having a master-slave relation with the keyword in the tree structure data; the display identifier is used for displaying the nodes associated with the display identifier according to the display identifier for the view layer of the tree component.

In a fifth possible implementation manner of the first aspect, the component to be called includes a pop-up box component; the page elements of the pop-up box assembly comprise a pop-up box, a reference element of the pop-up box and a scroll element corresponding to the reference element;

monitoring a page attribute setting event through the view layer of the component to be called, and feeding back the page attribute setting event to the logic layer of the component to be called, so that the logic layer of the component to be called modifies data of the logic layer according to the page attribute setting event, specifically including:

when a pop-up box setting event is monitored through a viewing layer of the pop-up box assembly, receiving the position of the reference element, the position of the rolling element, the pop-up position of the pop-up box relative to the reference element, data for displaying in the pop-up box and data with adjustable window setting of the pop-up box through the viewing layer of the pop-up box assembly;

setting a first click event function according to the position of the reference element, setting a scroll event function according to the position of the scroll element, setting a second click event function according to data for display in the pop-up box, and setting an adjustable zoom event function according to a window of the pop-up box through a logic layer of the pop-up box assembly; the first click event function is used for controlling the pop-up box to be converted into a closed state from a current open state or to be converted into an open state from a current closed state when the position of the view layer triggering click operation is consistent with the position of the reference element; the scrolling event function is used for updating the position of the pop-up box when the position of the visual layer triggering the scrolling operation falls within the position range of the scrolling element; the second click event function is used for controlling the pop-up box to be in a closed state when the position of the view layer triggering click operation falls outside the reference element and the pop-up box; and the scaling event function is used for updating the position of the pop-up box when the view layer triggers the scaling operation of the pop-up box.

With reference to the fifth possible implementation manner of the first aspect, in a sixth possible implementation manner of the first aspect, if the position of the scrolling operation is the position of the reference element at the current time, the process of updating the position of the pop-up box specifically includes:

calculating the position of the pop-up box according to the position of the reference element at the current moment, the window size of the pop-up box and the pop-up position of the pop-up box relative to the reference element;

judging whether the pop-up box window exceeds the screen or not based on the position of the pop-up box;

and if so, calculating the position of the pop-up frame according to the basic positioning position.

In a seventh possible implementation manner of the first aspect, the component to be called includes a picture polygon hot zone drawing component; the page elements of the picture polygon hotspot drawing component comprise canvas areas;

monitoring a page attribute setting event through the view layer of the component to be called, and feeding back the page attribute setting event to the logic layer of the component to be called, so that the logic layer of the component to be called modifies data of the logic layer according to the page attribute setting event, specifically including:

when a picture import request is monitored through a view layer of the picture polygon hot zone drawing assembly, receiving a picture and a coordinate list of the picture through the view layer;

importing the picture into the canvas area through a logic layer of the picture polygon hot zone drawing component, and drawing the initial shape of the picture according to the coordinate list of the picture to complete the initialization of the picture;

displaying the picture in the picture area through the view layer;

when a picture drawing request is monitored through the view layer, acquiring a region range of region framing through the view layer;

when a frame selection operation request is monitored through the view layer, a replacing element for replacing an element of a picture corresponding to the area range is obtained through the view layer, and the element corresponding to the area range is replaced with the replacing element through the logic layer;

when a click event setting request is monitored through the view layer, a link address or a display identifier is obtained through the view layer, and the area range, the link address and/or the display identifier are input into a click event function through the logic layer; the click event function is used for controlling a user interface to jump to the link address or displaying the identifier when an element in the area range of the picture is clicked.

With reference to the seventh possible implementation manner of the first aspect, in an eighth possible implementation manner of the first aspect, the obtaining, by the view layer, a region range framed by a region frame specifically includes:

monitoring a mouse operation event through the view layer; the mouse operation event comprises mouse click operation, mouse dragging operation and mouse releasing operation;

when two coordinates are received through the view layer, a rectangular area formed by diagonal coordinates taking the two coordinate points as rectangles is used as an area range of the area frame selection through the logic layer;

when more than three coordinates are received through the view layer and the distance between the position of the start coordinate and the position of the end coordinate is smaller than a lower limit threshold, a polygonal area formed by taking the received coordinates as corner points is used as an area range of the area frame selection through the logic layer;

monitoring an adjusting event for the area frame selection through the view layer; the adjusting event comprises an operation of clicking the corner selected by the area frame by a mouse, an operation of dragging the corner by the mouse and an operation of releasing the corner by the mouse;

and when the coordinates of the mouse when the corner point is released are received through the view layer, the coordinates of the corner point are replaced by the received coordinates through the logic layer, and the adjustment of the region frame selection is completed.

In a second aspect, an embodiment of the present invention further provides an apparatus for generating a component of a user interface, including:

the calling monitoring module is used for monitoring calling events of the custom components in the component library; the self-defining component comprises a view layer and a logic layer; the view layer comprises at least one page element, and the document identifier of the page element of the view layer is bound with the document identifier of the data processed by the logic layer;

the calling request receiving module is used for receiving a calling component request; the calling component request comprises a component to be called;

the view layer display module is used for calling the component to be called from the component library and displaying the view layer of the component to be called;

the logic layer data modification module is used for monitoring a page attribute setting event through a view layer of the component to be called and feeding the page attribute setting event back to the logic layer of the component to be called so as to enable the logic layer of the component to be called to modify data of the logic layer according to the page attribute setting event;

and the view layer updating module is used for rendering the data in the logic layer of the component to be called in the view layer of the component to be called through the view layer of the component to be called and according to the document identification, so as to finish the calling of the component to be called.

The embodiment of the invention has the following beneficial effects:

according to the method and the device for generating the components of the user interface, which are provided by the embodiment of the invention, the component library which is set in advance is loaded, and the user-defined components in the component library are called; when a component display interface is called, displaying an initialized component in the display interface, monitoring a page attribute setting event requested to be executed by a developer by a view layer of the component to be called, and feeding the page attribute setting event back to a logic layer of the component to be called so as to enable the logic layer of the component to be called to modify data of the logic layer according to the page attribute setting event; and because the document identification of the page element of the view layer of the component in the component library is bound with the document identification of the data processed by the logic layer, the view layer only needs to render the data in the logic layer of the component to be called in the view layer of the component to be called according to the document identification, the user-defined adjustment of the component can be completed, the operation is simple, developers only need to concentrate on the data modification of the logic layer, the requirement of generating a user interface can be met by the component, and the interaction is simple.

Drawings

In order to more clearly illustrate the technical solution of the present invention, the drawings needed to be used in the embodiments will be briefly described below, and it is obvious that the drawings in the following description are only some embodiments of the present invention, and it is obvious for those skilled in the art that other drawings can be obtained according to the drawings without creative efforts.

FIG. 1 is a flow diagram illustrating one embodiment of a method for generating components of a user interface provided by the present invention;

FIG. 2 is a schematic diagram of one embodiment of an input box component provided by embodiments of the invention;

FIG. 3 is a diagram illustrating one embodiment of a radio box component that may implement the radio function provided by the present invention;

FIG. 4 is a diagram illustrating one embodiment of a multiple selection box component that may be implemented to perform multiple selection functions;

FIG. 5 is a diagram for one embodiment of a select search box component provided by the present invention;

FIG. 6 is a schematic diagram illustrating one embodiment of a date and time selector assembly provided by the present invention;

FIG. 7 is a diagram illustrating one embodiment of a table component with paging functionality provided by the present invention;

FIG. 8 is a schematic diagram of one embodiment of a modal box component provided by the present invention;

FIG. 9 is a schematic diagram illustrating one embodiment of a tree component provided by the present invention;

FIG. 10 is a schematic diagram of one embodiment of a user interface for a multi-component composition provided by the present invention;

FIG. 11 is a schematic diagram of the structure of one embodiment of a pop-up box provided by the present invention;

FIG. 12 is a schematic diagram of another embodiment of a pop-up box provided by the present invention;

FIG. 13 is a schematic diagram illustrating an embodiment of a picture polygon hot zone rendering component;

fig. 14 is a schematic structural diagram of an embodiment of a component generation apparatus of a user interface provided by the present invention.

Detailed Description

The technical solutions in the embodiments of the present invention will be clearly and completely described below with reference to the drawings in the embodiments of the present invention, and it is obvious that the described embodiments are only a part of the embodiments of the present invention, and not all of the embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present invention.

Referring to fig. 1, fig. 1 is a flowchart illustrating an embodiment of a method for generating a user interface component, which may be executed on a page generation open-source framework operated by a terminal device, and includes steps S10 to S40, and the method includes the following specific steps:

s10, monitoring the calling event of the self-defined component in the component library; the self-defining component comprises a view layer and a logic layer; the view layer comprises at least one page element, and the document identification of the page element of the view layer is bound with the document identification of the data processed by the logic layer.

In the embodiment of the invention, the web page with low coupling and high interactive experience sense, namely the user interface, can be flexibly and quickly built by utilizing the component library, the low coupling means that the components in the component library can be packaged into service components meeting the requirements of developers, and the service components are mutually independent, so that the method is suitable for developing a large-scale background management system.

It should be noted that one component includes a view layer and a logic layer, the view layer is exposed through page elements (atomic components or document object models), and the underlying file of the view layer is used for describing the structure between the page elements and describing the style between the page elements. The logic layer is a logic for processing the atomic components in the view layer, and is usually written by JavaScript, and the view layer and the logic layer bind corresponding document identifications in the view layer and the logic layer before the custom component is generated, so that the data is only required to be modified, the corresponding data in the logic layer is also modified, and the view layer is correspondingly updated.

S20, receiving a calling component request; the calling component request comprises a component to be called;

s30, calling the component to be called from the component library, and displaying the view layer of the component to be called.

The embodiment of the invention only takes the to-be-called component as an indication to describe the calling event, when the to-be-called component is called in the frame interface, the initialization data in the logic layer of the to-be-called component displays the page element of the view layer in the interface through the binding relationship between the view layer and the logic layer, wherein the page element displayed in the view layer also comprises a label introduction and attribute setting identifier for prompting a developer to set the component in such a way, so that the component can be defined as a component related to the service.

S40, monitoring a page attribute setting event through the view layer of the component to be called, and feeding back the page attribute setting event to the logic layer of the component to be called, so that the logic layer of the component to be called modifies the data of the logic layer according to the page attribute setting event.

The component library provided by the embodiment of the invention comprises a plurality of components which are mainly divided into two major components, namely a form component and a data component, wherein the form component generally comprises an input frame page element and has the common functions of non-null check, input frame length setting and regular expression check, and the form component comprises an input frame component, a search selection frame component, a date and time selector component, a reservation time selector component, a single selection frame component, a multi-selection frame component and an evaluation component. The data type component comprises a table component, a tree component, a popup frame component (a popup frame and a modal frame), a drawer component (a view layer comprises page elements which can be folded and unfolded after clicking, can be used for displaying left navigation, dragging the right edge to change the size, and can flexibly adjust the space occupation) and a picture polygon hot area drawing component.

The component called from the component library may be configured to be a user interface meeting the service requirement through the configuration in step S30, specifically referring to fig. 2 to fig. 10, which schematically illustrate types of components included in the component library and are appearances of viewing layers of the component whose configuration is completed, where fig. 2 is a schematic diagram of an embodiment of an input box component provided in the embodiment of the present invention, an input box of the input box component in the embodiment of the present invention is configured to be a general text type, and may also be configured to be another input type, such as a numerical value, a text field, or a file; non-null verification, length setting, and regular expression verification setting can be performed for the input box. Fig. 3 is a schematic diagram of an embodiment of a radio frame component provided in the present invention, where the embodiment can implement a radio function. Fig. 4 is a schematic diagram of an embodiment of a multi-box component provided by the present invention, which can implement a multi-selection function, and in particular, the multi-box component may be provided with no full box, and the appearance that the view layer interface may be provided with a plurality of line displays or one line display. FIG. 5 is a diagram illustrating one embodiment of a select search box component provided by the present invention. FIG. 6 is a schematic diagram illustrating one embodiment of a date and time selector assembly provided by the present invention; the page elements of the viewing layer of this embodiment include an input box and a pull-down calendar for selecting a time period within the future week or day. FIG. 7 is a diagram illustrating one embodiment of a table component with paging functionality provided by the present invention; FIG. 8 is a schematic diagram of one embodiment of a modal box component provided by the present invention; the modal frame component of the embodiment can cover the popup frame of the whole page, has a semitransparent black mask, and can close the modal frame by clicking the mask. FIG. 9 is a schematic diagram illustrating one embodiment of a tree component provided by the present invention; the tree component provided by the embodiment can be used for displaying data such as a directory, an organization structure and the like, and supports the function realization of checking or screening and single-selection or multi-selection. FIG. 10 is a schematic diagram of one embodiment of a user interface for a multi-component composition provided by the present invention.

S50, rendering the data in the logic layer of the component to be called in the view layer of the component to be called through the view layer of the component to be called and according to the document identification, and completing the calling of the component to be called.

It should be noted that after the calling and setting of the to-be-called component are completed, the tag introduction and attribute setting identifiers in the view plane of the to-be-called component may be deleted, at this time, the logic layer of the to-be-called component identifies the data of the tag introduction and attribute setting identifiers as not to be displayed, and then the view plane of the to-be-called component correspondingly does not display the tag introduction and attribute setting, thereby completing the setting of the to-be-called component. Similarly, the user interface, for example, the user interface in fig. 10, can be formed by completing the setting of the above-mentioned components to be called in sequence in the framework.

According to the component generation method of the user interface, the component library set in advance is loaded, and the user-defined component in the component library is called; when a component display interface is called, displaying an initialized component in the display interface, monitoring a page attribute setting event requested to be executed by a developer by a view layer of the component to be called, and feeding the page attribute setting event back to a logic layer of the component to be called so as to enable the logic layer of the component to be called to modify data of the logic layer according to the page attribute setting event; and because the document identification of the page element of the view layer of the component in the component library is bound with the document identification of the data processed by the logic layer, the view layer only needs to render the data in the logic layer of the component to be called in the view layer of the component to be called according to the document identification, the user-defined adjustment of the component can be completed, the operation is simple, developers only need to concentrate on the data modification of the logic layer, the requirement of generating a user interface can be met by the component, and the interaction is simple.

The component to be called by the framework is a component for selecting a search box, and is described in detail with reference to fig. 5:

the page elements of the component for selecting the search box of the embodiment comprise an input box and a pull-down selection box; the logic layer of the selection search box component has the function of controlling the drop-down box to automatically appear in the search box, namely the drop-down selection box when the search options of the key words input by the input box are carried out and the number of searched options is more than 7. The function logic of the logic layer comprises judging the number of options and controlling whether a search box is displayed or not by using v-if.

When the select search box component is called, since only the input box and the constructed logic layer are in the select search box component, the setting of step S30 needs to be performed, which specifically includes:

the setting mode is as follows: when a front-end search setting request is monitored through the view layer of the selective search frame assembly, namely, a developer introduces a corresponding front-end search setting identifier through the identifier in the view layer to click and trigger the front-end search setting request, and then the developer inputs a data file through a data input interface in the view layer of the selective search frame assembly, namely, the view layer receives a search data file; the search data file includes at least one option for searching out a related option when a user inputs a keyword into the input box.

The view layer transmits the received search data file to the logic layer, and the logic layer of the selective search frame component inputs the search data file into a front-end search function of the logic layer of the selective search frame component; the front-end search function is used for searching out options related to the keywords from the search data file when the keywords are received from the input box. Therefore, the component for selecting a search box provided by this embodiment can implement front-end search, where the front-end search is implemented by performing filtering of display after data is downloaded to a front end (i.e., a current terminal device), and is specifically implemented by a logic layer of the component.

In the second setting mode, when a back-end search setting request is monitored through the view layer of the selective search frame assembly, namely, a developer introduces a corresponding back-end search setting identifier through the identifier in the view layer to click and trigger the back-end search setting request, and then the developer inputs a data file through a data input interface in the view layer of the selective search frame assembly, namely, the view layer receives a back-end interface address;

the view layer transmits the received rear-end interface address to a logic layer, and then the rear-end interface address is input into a rear-end search function of the logic layer of the selective search frame assembly through the logic layer of the selective search frame assembly; the back-end search function is used for providing the keywords to a back-end interface through the address of the back-end interface to search out options related to the keywords when the keywords are received in the input box, and receiving the options returned from the back-end interface; therefore, the module for selecting a search box provided by the embodiment can realize back-end search, the back-end search is to transmit the keyword to the back-end interface through the address of the back-end interface, the back-end interface executes search, and returns searched options to the logic layer for setting or storing, so that the searched options can be displayed in the view layer.

In a second setting mode, when the option display setting request is monitored through the view layer of the selective search frame assembly, namely, a developer introduces a corresponding option display setting identifier through the identifier in the view layer to click and trigger the option display setting request, and then the developer sets an option display function according to the option display setting request through the logic layer of the selective search frame assembly; the option display function is used for displaying the options returned by the front-end search function or the back-end search function on the view layer and controlling the display attributes of the options; the option display setting request comprises a single selection setting request, a multiple selection setting request and a multiple selection style display setting request; therefore, the selection search box assembly provided by the embodiment can realize that the searched options can be set to be single-selected or multiple-selected, and can be set to be displayed in a single line or in a multiple-selection box mode when the options are multiple-selected.

The component to be called by the framework is a date and time selector component and is described in detail in conjunction with fig. 6 as follows:

the page elements of the date and time selector assembly of the present embodiment include an input box, a drop-down calendar and a drop-down schedule; the logic layer of the date and time selector assembly is used for responding to click events on a pull-down calendar or a pull-down schedule, displaying dates or times corresponding to the click events on the input box, and selecting whether the pull-down calendar and the pull-down schedule are displayed or not to further set as the date selector assembly, the time selector assembly and the date and time selector assembly, wherein time selection can be set to be accurate to seconds or minutes. The assembly is in a switching mode, so that time selection is displayed in the whole pull-down frame, and the assembly is more attractive; and each time point can be selected.

The component to be called by the framework is a tree component, and is described in detail with reference to fig. 9:

the page elements of the tree component of the embodiment comprise an input box, nodes and the node check box;

the step S30 is a process of setting attributes for tree components, which specifically includes:

when a node data loading request is monitored through a view layer of the tree component, namely, a developer introduces a corresponding node data loading identifier through an identifier in the view layer to click, a front-end search setting request is triggered, and then the developer inputs a data file through a data input interface in the view layer of the tree component, namely, the view layer receives node data and transmits the node data to a logic layer of the tree component; the node data comprises the name and the affiliation of each node or the attribute of whether to allow check; the logic layer can search out relevant nodes when a user inputs a keyword into the input box.

Furthermore, because the logic layer has a function logic of depth-first search, the logic layer of the tree component traverses the node data to generate tree structure data of the node data, so that a view layer of the tree component can display according to the tree structure data; when the input box is used for receiving a keyword from the input box, providing the keyword to a logic layer of the tree component, traversing nodes of the tree structure data according to the keyword, and setting a node association display identifier having a master-slave relation with the keyword in the tree structure data; the display identifier is used for displaying the nodes associated with the display identifier according to the display identifier for the view layer of the tree component. That is, after the page of the tree component is set, when a user uses the component in a user interface, a keyword is input into an input box, a data layer of the component traverses nodes according to the keyword to the depth of data, screens out nodes having a master-slave relation with the keyword, and sets a display identifier, and the view layer controls the display of the nodes according to the identifier, so that the function of filtering the nodes and ancestor nodes thereof according to the keyword is realized. In addition, the tree component provided by the embodiment can also support the functions of single-node asynchronous data loading and whole tree structure data loading rendering.

Referring to fig. 11, fig. 11 is a schematic structural diagram of an embodiment of a pop-up box provided by the present invention; FIG. 12 is a schematic diagram of another embodiment of a pop-up box provided by the present invention;

the component to be called by the framework is a pop-up box component, and is described in detail with reference to fig. 11 and 12 as follows:

the page elements of the pop-up box assembly of the embodiment comprise a pop-up box, a reference element of the pop-up box and a scroll element corresponding to the reference element;

the step S30 of setting the attribute for the pop-up box component specifically includes:

when monitoring a pop-up box setting event through the view layer of the pop-up box assembly, namely, the pop-up box setting event comprises the position of a reference element input by a developer in an interface, the position of the rolling element, the pop-up position of the pop-up box relative to the reference element, data used for displaying in the pop-up box and data set as adjustable by a window of the pop-up box, and further the view layer of the pop-up box assembly receives the position of the reference element, the position of the rolling element, the pop-up position of the pop-up box relative to the reference element, the data used for displaying in the pop-up box and the data set as adjustable by the window of the pop-up box and transmits the data to a logic layer for setting. Wherein pop-up positions of the pop-up box relative to the reference element include left, right, top, bottom, left-top, right-top, left-bottom, right-bottom, top-left, top-right, bottom-left, and bottom-right; for example, FIG. 11 provides a pop-up box with a pop-up position left relative to the reference element.

Setting a first click event function according to the position of the reference element, setting a scroll event function according to the position of the scroll element, setting a second click event function according to data for display in the pop-up box, and setting an adjustable zoom event function according to a window of the pop-up box through a logic layer of the pop-up box assembly; the first click event function is used for controlling the pop-up box to be converted into a closed state from a current open state or to be converted into an open state from a current closed state when the position of the view layer triggering click operation is consistent with the position of the reference element; the scrolling event function is used for updating the position of the pop-up box when the position of the visual layer triggering the scrolling operation falls within the position range of the scrolling element; the second click event function is used for controlling the pop-up box to be in a closed state when the position of the view layer triggering click operation falls outside the reference element and the pop-up box; and the scaling event function is used for updating the position of the pop-up box when the view layer triggers the scaling operation of the pop-up box.

It should be noted that, by setting the first click event function in the logic layer of the pop-up box assembly in this embodiment, the function of opening or closing the pop-up box can be realized; the scroll event function enables a pop-up box to move as a reference element scrolls across a scroll bar; the second click event function can close the pop-up box when the user clicks a place outside the pop-up box component area, and does not occupy the space of a user interface; the zoom event function enables a zoom function of the pop-up box. Due to the second click event function, the pop-up box is also hidden when the position of the reference element movement exceeds the position range of the scroll element.

Further, the logical layer of the pop-up box assembly provided by the embodiment further has the following functions:

the logical layer of the pop-up box assembly calculates the position of the pop-up box according to the position of the reference element at the current moment, the window size of the pop-up box and the pop-up position of the pop-up box relative to the reference element;

the logic layer of the pop-up box assembly judges whether the pop-up box window exceeds the screen or not based on the position of the pop-up box; if yes, calculating and revising the position of the pop-up frame according to the basic positioning position, and if not, keeping the position of the pop-up frame unchanged. Thus, when the reference element is scrolled by the user to bring the pop-up box beyond the page, the position of the pop-up box can be automatically adjusted. As shown in FIG. 12, if the left pop-up box (left) is popped up at the vertical center, the top edge of the screen is exceeded, so the logical layer automatically adjusts the pop-up position of the pop-up box to left-bottom.

Referring to fig. 13, fig. 13 is a schematic structural diagram of an embodiment of a picture polygon hot zone rendering component according to the present invention;

the component to be called by the frame is a drawing component of the polygon hot zone of the picture, and is described in detail with reference to fig. 13:

the page element of the picture polygon hot zone drawing component provided by the embodiment comprises a canvas area;

the step S30 of setting attributes of the drawing component for the polygon hot zone of the picture includes:

when a picture import request is monitored through a view layer of the picture polygon hot zone drawing assembly, receiving a picture and a coordinate list of the picture through the view layer;

importing the picture into the canvas area through a logic layer of the picture polygon hot zone drawing component, and drawing the initial shape of the picture according to the coordinate list of the picture to complete the initialization of the picture;

and displaying the picture in the drawing area through the view layer. Thereby completing the setting of the background picture (the above-mentioned inputted picture) of the canvas area. The logic layer may limit the maximum and minimum widths and heights of the background picture, obtain the actual size of the picture after the background picture is loaded, and set the size of the canvas (canvas in html 5) as the size of the background picture. And then converting the coordinate list of the picture into absolute coordinates, drawing the picture and displaying the picture on a view layer.

It should be noted that the relative coordinate, i.e. the percentage coordinate of the relative background picture, such as (0.5 ) is the central point of the background picture. The absolute coordinates, i.e. pixel coordinates, such as (20px ), are the positions of the background picture with 20px of the up-horizontal coordinate and 20px of the vertical coordinate. Points on the view layer display page need to be drawn by absolute coordinates, but relative coordinates are needed when picture data are stored, so that normal display of pictures can be kept on a mobile phone screen or other equipment subsequently.

When a picture drawing request is monitored through the view layer, acquiring a region range of region framing through the view layer;

when a framing operation request is monitored through the view layer, a replacement element for replacing an element of a picture corresponding to the area range is acquired through the view layer, and the element corresponding to the area range is replaced by the replacement element through the logic layer, so that a developer can perform personalized selection on the element of the picture corresponding to the area framing after the area framing is determined, for example, personalized selection or event binding is performed on a clothing area and a decoration area of a person in the picture.

When a click event setting request is monitored through the view layer, a link address or a display identifier is obtained through the view layer, and the area range, the link address and/or the display identifier are input into a click event function through the logic layer; the click event function is used for controlling a user interface to jump to the link address or displaying the identifier when an element in the area range of the picture is clicked. Therefore, after the area frame selection is determined, the developer can set the click events of each position, for example, clicking the clothes in the picture to jump to the clothes purchasing address, clicking the watch in the character picture to jump to the watch purchasing address, and clicking selection of different parts of the user-type picture to perform identification or corresponding part click event processing.

The following describes how the viewing layer obtains the area range of the area frame selection specifically:

monitoring a mouse operation event through the view layer; the mouse operation event comprises mouse click operation, mouse dragging operation and mouse releasing operation: the middle area as shown in fig. 13 is the area box.

The first implementation mode comprises the following steps: the developer draws a rectangular area on the background picture: and after a left mouse button is clicked, dragging the mouse to a verification position, and releasing the mouse to form a rectangle. At this time, when the view layer receives two coordinates, the logic layer takes a rectangular region formed by diagonal coordinates taking the two coordinate points as rectangles as a region range of the region framing.

The second embodiment: the developer draws the polygon area on the background picture: after clicking the left mouse button, dragging the mouse to the verification position, clicking the left button again to generate nodes, and connecting the nodes one by one to form a closed graph. At this time, the view layer receives more than three coordinates, the distance between the position of the start coordinate and the position of the end coordinate is smaller than a lower threshold, and the logic layer takes a polygonal area formed by taking the received coordinates as corner points as an area range of the area frame selection.

The third embodiment is as follows: and the developer adjusts the area range of the area selection on the background picture: and clicking the selected area by a mouse, enabling the coordinate point of the area to have a circular adjusting point, and dragging the adjusting point to adjust the graph. At this time, the view layer monitors an adjusting event for the area frame selection; the adjusting event comprises the operation of clicking the corner selected by the area frame by a mouse, the operation of dragging the corner by the mouse and the operation of releasing the corner by the mouse. And when the view layer receives the coordinates when the mouse releases the corner points, the coordinates of the corner points are replaced by the received coordinates through the logic layer, and the adjustment of the region frame selection is completed.

The fourth embodiment: the developer moves the above area box on the background picture: after a left mouse button is clicked at the area, the mouse is dragged to the verification position, and the area can be dragged to another position by releasing the mouse. If the mouse is released beyond the canvas, it will be automatically positioned to the edge of the canvas.

The main implementation methods of the first and second embodiments are as follows: recording coordinates { x, y } when the mouse is pressed; when the mouse is dragged, a rubber ring rectangle is obtained continuously according to the current mouse coordinates { x1, y1} and { x, y }, if the rectangle is drawn, the rectangle is drawn directly, and if the rectangle is a polygon, a straight line with two points directly is drawn (the shape of the rubber ring is only temporary and is not the final shape); when the mouse is released, if the mouse is a rectangle, drawing the rectangle according to the current mouse coordinates { x2, y2} and { x, y }, if the mouse is a polygon, drawing a straight line, and when the distance between the coordinates of the last point of the polygon and the coordinates of the starting point is within 5px, pressing the mouse to close the path and drawing the whole polygon.

The fourth embodiment is similar to the first two embodiments, and the mouse is released to keep the graph inside the canvas: for the rectangle, the method is simple, whether four points of the rectangle ({ x, y, width, height }) are inside the canvas is directly judged, and if the four points exceed the inside of the canvas, the value of the upper left corner { x, y } is reset. For a polygon ([ { x, y }, { x, y } ].), all points are traversed, the minimum and maximum x value and the maximum y value are obtained, an external rectangle containing the polygon is obtained, whether the polygon is in the canvas is judged by using a rectangle judgment method, if the polygon exceeds the canvas, the current external rectangle central point is calculated, the distance between the current external rectangle central point and the external rectangle central point does not exceed the canvas is calculated, and the distance is added to all the points of the polygon to obtain the coordinates of the polygon.

The third embodiment is implemented by the following steps: for the rectangle, dragging one point changes the rectangle of the rubber ring relative to the opposite angle, and the whole is zoomed. For polygons, dragging a point just changes the coordinates of the point. Therefore, dragging a point in a quadrilateral drawn with a path only changes the coordinates of the point, rather than scaling the whole as a rectangle.

The coordinate list of the region frame obtained by the implementation method is absolute coordinates, so that the logic layer converts the coordinate list of the region frame into relative coordinates (positions relative to the background picture) for deposit and payment processing.

Referring to fig. 14, fig. 14 is a schematic structural diagram of an embodiment of a component generation apparatus of a user interface provided by the present invention. An embodiment of the present invention further provides a device for generating a component of a user interface, including:

the calling monitoring module 10 is used for monitoring calling events of the custom components in the component library; the self-defining component comprises a view layer and a logic layer; the view layer comprises at least one page element, and the document identifier of the page element of the view layer is bound with the document identifier of the data processed by the logic layer;

a calling request receiving module 20, configured to receive a calling component request; the calling component request comprises a component to be called;

the view layer display module 30 is configured to, when a component calling request is received, call a component to be called in the component calling request from the component library, and display a view layer of the component to be called;

a logic layer data modification module 40, configured to monitor a page attribute setting event through a view layer of the to-be-called component, and feed the page attribute setting event back to the logic layer of the to-be-called component, so that the logic layer of the to-be-called component modifies data of the logic layer according to the page attribute setting event;

and the view layer updating module 50 is configured to render the data in the logic layer of the component to be called in the view layer of the component to be called according to the document identifier and through the view layer of the component to be called.

The component generation device of the user interface provided by the embodiment of the invention loads the component library set in advance, and calls the user-defined component in the component library; by utilizing the component library, different components are called and spliced into a page meeting business requirements needed by a developer user like 'splicing blocks', developers can be more concentrated in realizing a business logic layer without paying much attention to interactive logic, and the Web development efficiency is greatly improved.

It will be understood by those skilled in the art that all or part of the processes of the methods of the embodiments described above can be implemented by a computer program, which can be stored in a computer-readable storage medium, and when executed, can include the processes of the embodiments of the methods described above. The storage medium may be a magnetic disk, an optical disk, a Read-Only Memory (ROM), a Random Access Memory (RAM), or the like.

While the foregoing is directed to the preferred embodiment of the present invention, it will be understood by those skilled in the art that various changes and modifications may be made without departing from the spirit and scope of the invention.

Claims (8)

1. A method for generating a component of a user interface, comprising:

monitoring a calling event of a user-defined assembly in an assembly library; the self-defining component comprises a view layer and a logic layer; the view layer comprises at least one page element, and the document identifier of the page element of the view layer is bound with the document identifier of the data processed by the logic layer; the logic layer is logic for processing atomic components in the view layer and is written by JavaScript;

receiving a calling component request; the calling component request comprises a component to be called;

calling the component to be called from the component library, and displaying a view layer of the component to be called;

monitoring a page attribute setting event through a view layer of the component to be called, and feeding the page attribute setting event back to a logic layer of the component to be called so that the logic layer of the component to be called modifies data of the logic layer according to the page attribute setting event;

rendering the modified data in the logic layer of the component to be called in the view layer of the component to be called through the view layer of the component to be called and according to the binding relation of the document identification, and completing the calling of the component to be called;

wherein the component to be called comprises a select search box component; the page elements of the select search box component comprise an input box and a drop-down selection box;

monitoring a page attribute setting event through the view layer of the component to be called, and feeding back the page attribute setting event to the logic layer of the component to be called, so that the logic layer of the component to be called modifies data of the logic layer according to the page attribute setting event, specifically including:

receiving a search data file through the view layer of the selective search frame assembly when a front-end search setting request is monitored through the view layer of the selective search frame assembly; the search data file includes at least one option;

inputting the search data file into a front-end search function of the logical layer of the selected search box component through the logical layer of the selected search box component; the front-end search function is used for searching options related to the keywords from the search data file when the keywords are received from the input box;

the monitoring a page attribute setting event through the view layer of the component to be called and feeding the page attribute setting event back to the logic layer of the component to be called so that the logic layer of the component to be called modifies the data of the logic layer according to the page attribute setting event, further comprising:

when a back-end search setting request is monitored through the view layer of the selective search frame assembly, receiving a back-end interface address through the view layer of the selective search frame assembly;

inputting the backend interface address into a backend search function of the logical layer of the select search box component through the logical layer of the select search box component; the back-end search function is used for providing the keywords to a back-end interface through the address of the back-end interface to search out options related to the keywords when the keywords are received in the input box, and receiving the options returned from the back-end interface;

when an option display setting request is monitored through the view layer of the selective search frame assembly, an option display function is set through the logic layer of the selective search frame assembly according to the option display setting request; the option display function is used for displaying the options returned by the front-end search function or the back-end search function on the view layer and controlling the display attributes of the options; the option display setting request comprises a single selection setting request, a multiple selection setting request and a multiple selection style display setting request.

2. The method for generating a component for a user interface of claim 1, wherein the component to be invoked comprises a date and time selector component; the page elements of the date and time selector component include an input box, a drop-down calendar, and a drop-down schedule; and the logic layer of the date and time selector component is used for responding to click events on a pull-down calendar or a pull-down schedule and displaying the date or time corresponding to the click events on the input box.

3. The method for generating a component for a user interface according to claim 1, wherein the component to be called comprises a tree component; the page elements of the tree component comprise an input box, a node and the node check box;

when a node data loading request is monitored through a view layer of the tree component, receiving node data through the view layer of the tree component and transmitting the node data to a logic layer of the tree component; the node data comprises the name and the affiliation of each node or the attribute of whether to allow check;

traversing the node data through the logic layer of the tree component to generate tree structure data of the node data, so that a view layer of the tree component can display according to the tree structure data; when the input box is used for receiving a keyword from the input box, providing the keyword to a logic layer of the tree component, traversing nodes of the tree structure data according to the keyword, and setting a node association display identifier having a master-slave relation with the keyword in the tree structure data; the display identifier is used for displaying the nodes associated with the display identifier according to the display identifier for the view layer of the tree component.

4. The method for generating a component for a user interface according to claim 1, wherein the component to be called comprises a pop-up box component; the page elements of the pop-up box assembly comprise a pop-up box, a reference element of the pop-up box and a scroll element corresponding to the reference element;

when a pop-up box setting event is monitored through a viewing layer of the pop-up box assembly, receiving the position of the reference element, the position of the rolling element, the pop-up position of the pop-up box relative to the reference element, data for displaying in the pop-up box and data with adjustable window setting of the pop-up box through the viewing layer of the pop-up box assembly;

setting a first click event function according to the position of the reference element, setting a scroll event function according to the position of the scroll element, setting a second click event function according to data for display in the pop-up box, and setting an adjustable zoom event function according to a window of the pop-up box through a logic layer of the pop-up box assembly; the first click event function is used for controlling the pop-up box to be converted into a closed state from a current open state or to be converted into an open state from a current closed state when the position of the view layer triggering click operation is consistent with the position of the reference element; the scrolling event function is used for updating the position of the pop-up box when the position of the visual layer triggering the scrolling operation falls within the position range of the scrolling element; the second click event function is used for controlling the pop-up box to be in a closed state when the position of the view layer triggering click operation falls outside the reference element and the pop-up box; and the zooming event function is used for controlling the pop-up box to zoom when the view layer triggers the zooming operation of the pop-up box.

5. The method for generating a component of a user interface according to claim 4, wherein if the position of the scroll operation is the position of the reference element at the current time, the process of updating the position of the pop-up box specifically includes:

calculating the position of the pop-up box according to the position of the reference element at the current moment, the window size of the pop-up box and the pop-up position of the pop-up box relative to the reference element;

judging whether the pop-up box window exceeds the screen or not based on the position of the pop-up box;

if yes, recalculating the position of the pop-up frame according to the basic positioning position and updating the position of the pop-up frame.

6. The method for generating a component for a user interface of claim 1, wherein the component to be invoked comprises a picture polygon hotspot rendering component; the page elements of the picture polygon hotspot drawing component comprise canvas areas;

when a picture import request is monitored through a view layer of the picture polygon hot zone drawing assembly, receiving a picture and a coordinate list of the picture through the view layer;

importing the picture into the canvas area through a logic layer of the picture polygon hot zone drawing component, and drawing the initial shape of the picture according to the coordinate list of the picture to complete the initialization of the picture;

displaying the picture in the picture area through the view layer;

when a picture drawing request is monitored through the view layer, acquiring a region range of region framing through the view layer;

when a frame selection operation request is monitored through the view layer, a replacing element for replacing an element of a picture corresponding to the area range is obtained through the view layer, and the element corresponding to the area range is replaced with the replacing element through the logic layer;

when a click event setting request is monitored through the view layer, a link address or a display identifier is obtained through the view layer, and the area range and the link address or the display identifier are input into a click event function through the logic layer; the click event function is used for controlling a user interface to jump to the link address or displaying the identifier when an element in the area range of the picture is clicked.

7. The method for generating a component of a user interface according to claim 6, wherein the obtaining of the area range of the area frame selection through the view layer specifically includes:

monitoring a mouse operation event through the view layer; the mouse operation event comprises mouse click operation, mouse dragging operation and mouse releasing operation;

when two coordinates are received through the view layer, a rectangular area formed by diagonal coordinates taking the two coordinate points as rectangles is used as an area range of the area frame selection through the logic layer;

when more than three coordinates are received through the view layer and the distance between the position of the start coordinate and the position of the end coordinate is smaller than a lower limit threshold, a polygonal area formed by taking the received coordinates as corner points is used as an area range of the area frame selection through the logic layer;

monitoring an adjusting event for the area frame selection through the view layer; the adjusting event comprises an operation of clicking the corner selected by the area frame by a mouse, an operation of dragging the corner by the mouse and an operation of releasing the corner by the mouse;

and when the coordinates of the mouse when the corner point is released are received through the view layer, the coordinates of the corner point are replaced by the received coordinates through the logic layer, and the adjustment of the region frame selection is completed.

8. An apparatus for generating a component of a user interface, comprising:

the calling monitoring module is used for monitoring calling events of the custom components in the component library; the self-defining component comprises a view layer and a logic layer; the view layer comprises at least one page element, and the document identifier of the page element of the view layer is bound with the document identifier of the data processed by the logic layer; the logic layer is logic for processing atomic components in the view layer and is written by JavaScript;

the calling request receiving module is used for receiving a calling component request; the calling component request comprises a component to be called;

the view layer display module is used for calling the component to be called from the component library and displaying the view layer of the component to be called;

the logic layer data modification module is used for monitoring a page attribute setting event through a view layer of the component to be called and feeding the page attribute setting event back to the logic layer of the component to be called so as to enable the logic layer of the component to be called to modify data of the logic layer according to the page attribute setting event;

the view layer updating module is used for rendering the modified data in the logic layer of the component to be called in the view layer of the component to be called through the view layer of the component to be called and according to the binding relation of the document identification, and completing the calling of the component to be called;

wherein the component to be called comprises a select search box component; the page elements of the select search box component comprise an input box and a drop-down selection box;

monitoring a page attribute setting event through the view layer of the component to be called, and feeding back the page attribute setting event to the logic layer of the component to be called, so that the logic layer of the component to be called modifies data of the logic layer according to the page attribute setting event, specifically including:

receiving a search data file through the view layer of the selective search frame assembly when a front-end search setting request is monitored through the view layer of the selective search frame assembly; the search data file includes at least one option;

inputting the search data file into a front-end search function of the logical layer of the selected search box component through the logical layer of the selected search box component; the front-end search function is used for searching options related to the keywords from the search data file when the keywords are received from the input box;

the monitoring a page attribute setting event through the view layer of the component to be called and feeding the page attribute setting event back to the logic layer of the component to be called so that the logic layer of the component to be called modifies the data of the logic layer according to the page attribute setting event, further comprising:

when a back-end search setting request is monitored through the view layer of the selective search frame assembly, receiving a back-end interface address through the view layer of the selective search frame assembly;

inputting the backend interface address into a backend search function of the logical layer of the select search box component through the logical layer of the select search box component; the back-end search function is used for providing the keywords to a back-end interface through the address of the back-end interface to search out options related to the keywords when the keywords are received in the input box, and receiving the options returned from the back-end interface;

when an option display setting request is monitored through the view layer of the selective search frame assembly, an option display function is set through the logic layer of the selective search frame assembly according to the option display setting request; the option display function is used for displaying the options returned by the front-end search function or the back-end search function on the view layer and controlling the display attributes of the options; the option display setting request comprises a single selection setting request, a multiple selection setting request and a multiple selection style display setting request.

Images