CN108052365A - The component generation method and device of user interface - Google Patents
The component generation method and device of user interface Download PDFInfo
- Publication number
- CN108052365A CN108052365A CN201711375363.3A CN201711375363A CN108052365A CN 108052365 A CN108052365 A CN 108052365A CN 201711375363 A CN201711375363 A CN 201711375363A CN 108052365 A CN108052365 A CN 108052365A
- Authority
- CN
- China
- Prior art keywords
- component
- layer
- called
- event
- box
- 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.)
- Granted
Links
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
Abstract
The embodiment of the present invention discloses the component generation method and device of a kind of user interface, the described method includes：Load the Component Gallery of the present invention, the component in invocation component storehouse；Wherein, Component Gallery includes search box, date and time picker, tree component, pop-up box and the drafting of picture polygon hot-zone etc.；When from Component Gallery invocation component, show the component in display interface, the view layer of the component, which monitors developer, asks the page properties performed to set event, and the event is fed back to the logical layer of the component, so that it changes the data of logical layer according to page properties setting event.Since the document identification of the page elements of the view layer of component is bound with the document identification of the data of logical layer processing, view layer only need to according to document identification by the data render in the logical layer of the component to be called in the view layer of component, it can complete the self-defined adjustment to component, DOM Document Object Model is operated one by one woth no need to developer, it is easy to operate efficient.
Description
Technical field
The present invention relates to the component generation methods and device of field of computer technology more particularly to a kind of user interface.
Background technology
Increasing with hand-held intelligent equipment, interaction of the user to web page, experience requirements are significantly increased.
Research staff in the one large-scale background management system of exploitation simultaneously, it is necessary to concurrent development each business interface, i.e. web interface, with
It is interacted for user by web interface and management system.And research staff is in the process of development, control background management system with
Business interface keeps lower coupling, while ensures the uniformity of interface alternation, and it is few to meet the frame of such demand on the market, and one
As common have the Bootstrap based on jquery.js.
It is to generate the process at interface using Jquery.js in currently existing scheme：In browser interface, developer
It needs one by one DOM Document Object Model (page elements of composition component) to be operated to meet different business scenarios.But
Currently existing scheme can there are following defects：Developer needs one by one to operate DOM Document Object Model, effect complicated for operation
Rate is low, and in generating process browser render it is of high cost；And height is coupled between each business module, more people are parallel
The too high subsequent scalability of system, maintainable poor of causing is coupled in the large scale system of exploitation, between module and module.
The content of the invention
The component generation method and device for a kind of user interface that the embodiment of the present invention proposes, woth no need to developer one by one
DOM Document Object Model is operated, it is easy to operate efficient, while supporting assembly melts hair, can substantially reduce each business module
Between the degree of coupling, large size web is suitble to apply.
In a first aspect, the embodiment of the present invention provides a kind of component generation method of user interface, including：
Monitor the calling event to the Custom component in Component Gallery；The Custom component includes view layer and logic
Layer；The view layer includes at least one page elements, the document identification of the page elements of the view layer and the logical layer
The document identification binding of the data of processing；
Receive invocation component request；The invocation component request includes component to be called；
The component to be called is called from the Component Gallery, shows the view layer of the component to be called；
Page properties are monitored by the view layer of the component to be called, event is set, and the page properties are set into thing
Part feeds back to the logical layer of the component to be called, so that the logical layer of the component to be called is set according to the page properties
Event changes the data of the logical layer；
By the view layer of the component to be called and will be in the logical layer of the component to be called according to document identification
Data render completes the calling of the component to be called in the view layer of the component to be called.
In the first possible embodiment of first aspect, the component to be called includes selection search box component；
The page elements of the selection search box component include input frame and drop-down choice box；
Then the view layer by the component to be called monitors page properties and sets event, and by the page properties
Setting event feeds back to the logical layer of the component to be called, so that the logical layer of the component to be called is according to the page category
Property event is set to change the data of the logical layer, specifically include：
When the view layer by the selection search box component, which listens to front end search, sets request, pass through the selection
The view layer of search box component receives search data file；Described search data file includes at least one option；
Described search data file is inputted by the selection search box group by the logical layer of the selection search box component
In the front end search function of the logical layer of part；Wherein, the front end search function is used to receive pass from the input frame
During keyword, searched out from described search data file and the relevant option of the keyword.
The possible embodiment of with reference to first aspect the first, in second of possible embodiment of first aspect
In, the view layer by the component to be called monitors page properties and sets event, and the page properties are set thing
Part feeds back to the logical layer of the component to be called, so that the logical layer of the component to be called is set according to the page properties
Event changes the data of the logical layer, further includes：
When the view layer by the selection search box component, which listens to Back-end search, sets request, pass through the selection
The view layer of search box component receives back end interface address；
The back end interface address is inputted by the selection search box group by the logical layer of the selection search box component
In the Back-end search function of the logical layer of part；Wherein, the Back-end search function is used to receive key in the input frame
During word, back end interface is supplied to search out and the keyword relevant choosing the keyword by the back end interface address
, and receive the option returned from the back end interface；
When the view layer by the selection search box component, which listens to option display, sets request, pass through the selection
The logical layer of search box component is shown according to option sets request setting options explicit function；Wherein, the option explicit function
For the option of the front end search function or Back-end search function return to be shown in the view layer, and described in control
The display properties of option；The option display sets request to include, and single choice setting is asked, multiselect sets request and multiselect pattern exhibition
Show setting request.
In the third possible embodiment of first aspect, the component to be called includes date and time picker group
Part；The page elements of the date and time picker component include input frame, drop-down calendar and fall times table；During the date
Between selector assembly logical layer for respond drop-down calendar or fall times table on click event, will be with the click event
Corresponding date or time is shown in the input frame.
In the 4th kind of possible embodiment of first aspect, the component to be called includes tree component；The tree group
The page elements of part include input frame, node and the node tick boxes；
Then the view layer by the component to be called monitors page properties and sets event, and by the page properties
Setting event feeds back to the logical layer of the component to be called, so that the logical layer of the component to be called is according to the page category
Property event is set to change the data of the logical layer, specifically include：
When the view layer by the tree component listens to node data load request, pass through the view of the tree component
Layer receiving node data are sent to the logical layer of the tree component；The node data includes the title of each node, subordinate is closed
Whether system allows the attribute chosen；
The node data is traveled through by the logical layer of the tree component, generates the tree construction of the node data
Data, so that the view layer of the tree component is shown according to the tree construction data；Wherein, the input frame is used for from institute
It states when keyword is received in input frame, provides logical layer of the keyword to the tree component according to the keyword to institute
Tree construction data are stated to carry out traverse node and set the section that there is master slave relation with the keyword in the tree construction data
Point association display mark；It is described display mark for be supplied to it is described tree component view layer according to it is described display mark display with
The display identifies associated node.
In the 5th kind of possible embodiment of first aspect, the component to be called includes pop-up box component；It is described
The page elements of pop-up box component include pop-up box, the reference element of the pop-up box and rolling member corresponding with the reference element
Element；
Then the view layer by the component to be called monitors page properties and sets event, and by the page properties
Setting event feeds back to the logical layer of the component to be called, so that the logical layer of the component to be called is according to the page category
Property event is set to change the data of the logical layer, specifically include：
When the view layer by the pop-up box component, which listens to pop-up box, sets event, pass through the pop-up box component
View layer receive the position of the reference element, the position of the rollover elements, the pop-up box compared with described with reference to member
The ejected position of element, data and the window of the pop-up box for being shown in the pop-up box are arranged to adjustable data；
First is set to click on event letter by the logical layer of the pop-up box component and according to the position of the reference element
Number sets rolling event functions according to the position of the rollover elements, is set according to the data for being used to be shown in the pop-up box
It puts the second click event functions and is arranged to adjustable according to the window of the pop-up box and scaling event functions are set；Wherein, institute
The first click event functions are stated for when the view layer triggers the position of clicking operation and the position consistency of the reference element
When, the pop-up box is controlled to be in off state from current opening state transformation or be changed into opening from current closed state
State；The event functions that roll are used to fall in the position of the rollover elements when the position of view layer triggering rolling operation
In the range of when, update the position of the pop-up box；Described second, which clicks on event functions, is used to click on behaviour when view layer triggering
When the position of work falls the outside in the reference element and the pop-up box, the pop-up box is controlled to be closed；It is described
Scale the position that event functions are used to, when the view layer triggers the zoom operations of the pop-up box, update the pop-up box.
The 5th kind of possible embodiment with reference to first aspect, in the 6th kind of possible embodiment of first aspect
In, the position of the rolling operation is the reference element in the position at current time, then updates the position of the pop-up box
Process specifically includes：
It is opposite in the position at current time, the window size of the pop-up box and the pop-up box according to the reference element
In the ejected position of the reference element, the position of the pop-up box is calculated；
Based on the position of the pop-up box, judge the pop-up box window whether beyond screen；
If so, the position of the pop-up box is calculated according to foundation location position.
In the 7th kind of possible embodiment of first aspect, the component to be called is painted including picture polygon hot-zone
Component processed；The page elements that component is drawn in the picture polygon hot-zone include canvas area；
Then the view layer by the component to be called monitors page properties and sets event, and by the page properties
Setting event feeds back to the logical layer of the component to be called, so that the logical layer of the component to be called is according to the page category
Property event is set to change the data of the logical layer, specifically include：
When the view layer that component is drawn by the picture polygon hot-zone, which listens to picture, imports request, by described
View layer receives the list of coordinates of picture and the picture；
The logical layer of component is drawn by the polygonal hot-zone of the picture, the picture is imported into the canvas area, and
The original shape of the picture is drawn according to the list of coordinates of the picture, completes the initialization of the picture；
The picture is included in the canvas area by the view layer；
When listening to picture drafting request by the view layer, pass through the view layer and obtain the region that regional frame selects
Scope；
When listening to the request of frame selection operation by the view layer, obtain to replace the area by the view layer
The replacement element of the element of the corresponding picture of domain scope, and the corresponding element of the regional extent is replaced by the logical layer
For the replacement element；
When by the view layer listen to click event set request when, by the view layer obtain chained address or
Display mark, and the regional extent and the chained address and/or the display are identified by input point by the logical layer
It hits in event functions；The control when element that event functions are clicked in the regional extent of the picture is clicked
User interface jumps to the chained address or the display mark.
The 7th kind of possible embodiment with reference to first aspect, in the 8th kind of possible embodiment of first aspect
In, the regional extent that regional frame choosing is obtained by the view layer specifically includes：
Mouse action event is monitored by the view layer；The mouse action event includes mouse clicking operation, mouse
Drag operation and mouse up operation；
It, will be using described two coordinate points as square by the logical layer when receiving two coordinates by the view layer
The regional extent that the rectangular area formed to angular coordinate of shape is selected as the regional frame；
When receiving three or more coordinates by the view layer, and origin coordinates and terminate coordinate position distance it is small
When lower threshold, by the logical layer by using the coordinate that is connected to be the polygonal region that angle point is formed as the region
The regional extent of frame choosing；
The adjustment event selected the regional frame is monitored by the view layer；The adjustment event includes mouse and clicks on institute
State the operation of angle point of regional frame choosing, the operation of angle point described in mouse drag, the operation of angle point described in mouse up；
During coordinate when receiving angle point described in the mouse up by the view layer, passing through the logical layer will
The coordinate of the angle point replaces with the coordinate received, completes the adjustment of the regional frame choosing.
In second aspect, the embodiment of the present invention also provides a kind of component generating means of user interface, including：
It calls and monitors module, for monitoring the calling event to the Custom component in Component Gallery；The Custom component
Including view layer and logical layer；The view layer includes at least one page elements, the document of the page elements of the view layer
The document identification of mark and the data of logical layer processing is bound；
Call request receiving module, for receiving invocation component request；The invocation component request includes component to be called；
View layer display module, for calling the component to be called, described to be called group of display from the Component Gallery
The view layer of part；
Logical layer data modification module sets thing for monitoring page properties by the view layer of the component to be called
Part, and page properties setting event is fed back into the logical layer of the component to be called, so that the component to be called
Logical layer sets the data of the event modification logical layer according to the page properties；
View layer update module, for waiting to adjust by described by the view layer of the component to be called and according to document identification
With the data render in the logical layer of component in the view layer of the component to be called, the tune of the component to be called is completed
With.
Implement the embodiment of the present invention, have the advantages that：
The component generation method and device of a kind of user interface provided in an embodiment of the present invention load the group set in advance
Part storehouse, to being called for the Custom component in Component Gallery；In invocation component display interface, show the component of initialization in
In display interface, the view layer of the component to be called, which monitors developer, asks the page properties performed to set event, and will
The page properties setting event feeds back to the logical layer of the component to be called, so that the logical layer root of the component to be called
The data of the event modification logical layer are set according to the page properties；And due to the view layer of the component in Component Gallery
The document identification of page elements is bound with the document identification of the data of logical layer processing, and view layer is only needed according to text
Shelves mark is by the data render in the logical layer of the component to be called in the view layer of the component to be called, you can with complete
The self-defined adjustment of paired component, it is easy to operate so that developer only needs to be absorbed in the data modification of logical layer, you can with
Realize that component meets the requirement of generation user interface, interaction is simple.
Description of the drawings
In order to illustrate more clearly of technical scheme, attached drawing needed in embodiment will be made below
Simply introduce, it should be apparent that, the accompanying drawings in the following description is only some embodiments of the present invention, general for this field
For logical technical staff, without creative efforts, other attached drawings are can also be obtained according to these attached drawings.
Fig. 1 is the flow diagram of one embodiment of the component generation method of user interface provided by the invention；
Fig. 2 is the schematic diagram of one embodiment of input frame component provided in an embodiment of the present invention；
Fig. 3 is the schematic diagram of one embodiment of radio box component provided by the invention, and the present embodiment can realize single choice
Function；
Fig. 4 is the schematic diagram of one embodiment of multiselect frame component provided by the invention, and the work(of multiselect can be achieved in this implementation
Energy；
Fig. 5 is the schematic diagram of one embodiment of selection search box component provided by the invention；
Fig. 6 is the schematic diagram of one embodiment of date and time picker component provided by the invention；
Fig. 7 is the schematic diagram of one embodiment of the form component provided by the invention with two-page separation function；
Fig. 8 is the schematic diagram of one embodiment of mode frame component provided by the invention；
Fig. 9 is the schematic diagram of one embodiment of tree component provided by the invention；
Figure 10 is the schematic diagram of one embodiment of the user interface of multicompartment composition provided by the invention；
Figure 11 is the structure diagram of one embodiment of pop-up box provided by the invention；
Figure 12 is the structure diagram of another embodiment of pop-up box provided by the invention；
Figure 13 is the structure diagram of one embodiment that component is drawn in picture polygon hot-zone provided by the invention；
Figure 14 is the structure diagram of one embodiment of the component generating means of user interface provided by the invention.
Specific embodiment
Below in conjunction with the attached drawing in the embodiment of the present invention, the technical solution in the embodiment of the present invention is carried out clear, complete
Site preparation describes, it is clear that described embodiment is only part of the embodiment of the present invention, instead of all the embodiments.It is based on
Embodiment in the present invention, those of ordinary skill in the art are obtained every other without creative efforts
Embodiment belongs to the scope of protection of the invention.
Referring to Fig. 1, Fig. 1 is the flow signal of one embodiment of the component generation method of user interface provided by the invention
Figure, the embodiment of the present invention provide a kind of component generation method of user interface, and the page generation that can be run in terminal device is opened
It is performed on the frame of source, and including step S10 to step S40, it is specific as follows：
S10 monitors the calling event to the Custom component in Component Gallery；The Custom component includes view layer and patrols
Collect layer；The view layer includes at least one page elements, the document identification of the page elements of the view layer and the logic
The document identification binding of the data of layer processing.
In embodiments of the present invention, lower coupling, interactive experience sense height flexibly can rapidly be built using the Component Gallery
Web page, i.e. user interface, so-called lower coupling refers to utilize component package in Component Gallery into meeting developer's need
The Service Component asked, and, suitable for the exploitation of large-scale background management system. between each Service Component independently of each other.
It should be noted that component includes view layer and logical layer, view layer by page elements (atom component or
DOM Document Object Model) displaying, the bottom document of view layer be used to describe structure between page elements and description page elements it
Between pattern.Logical layer is the logic for handling the atom component in view layer, typically by written in JavaScript, the view
Layer is to bind corresponding document identification in the two before Custom component generation with the logical layer, thus only needs to repair
Change data, corresponding data in logical layer is made also to be modified, view layer will correspondingly update.
S20 receives invocation component request；The invocation component request includes component to be called；
S30 calls the component to be called from the Component Gallery, shows the view layer of the component to be called.
The embodiment of the present invention is only called the description of event using component to be called as signal, is adjusted when in frame interface
During with component to be called, the initialization data in the logical layer of component to be called passes through the binding between view layer and logical layer
The page elements of view layer are shown among interface by relation, wherein, the page elements shown in view layer should further include
The mark that label introduces and attribute is set, for developer to be prompted to be arranged such component so that component can be defined as and industry
It is engaged in relevant component.
S40 monitors page properties by the view layer of the component to be called and sets event, and the page properties are set
The event of putting feeds back to the logical layer of the component to be called, so that the logical layer of the component to be called is according to the page properties
Setting event changes the data of the logical layer.
Component Gallery provided in an embodiment of the present invention includes multiple assembly, is largely divided into two big class components, list class component
With data class component, wherein, list class component generally all includes input frame page elements, have non-empty verification, set input
The length and regular expression of frame verify these common functions, and list class component includes input frame component, selection search box group
Part, date and time picker component, subscription time selector assembly, radio box component, multiselect frame component and evaluation component.Number
According to class component includes form component, setting component, bullet frame class component (pop-up box and mode frame), drawer appliance, (view layer includes point
The page elements can be packed up after hitting, being unfolded, available for left-hand navigation is shown, dragging right side edge can change size, can flexibly adjust
The occupancy in its whole space) and picture polygon hot-zone drafting component.
The component recalled from Component Gallery can be set component by the setting of step S30 with meeting business need
The user interface asked, referring specifically to the type of Fig. 2 to Figure 10, Component Gallery of schematically illustrating component included, and to have completed
The appearance of the view layer of the component of setting, wherein, Fig. 2 is one embodiment of input frame component provided in an embodiment of the present invention
Schematic diagram, the input frame of the input frame component of the embodiment of the present invention are arranged to general text type, may be arranged as other
Input type, such as numerical value, textview field or file；Non-empty verification, the setting of length and canonical table can be carried out for input frame
The setting verified up to formula.Fig. 3 is the schematic diagram of one embodiment of radio box component provided by the invention, and the present embodiment can be realized
The function of single choice.Fig. 4 is the schematic diagram of one embodiment of multiselect frame component provided by the invention, and multiselect can be achieved in this implementation
Function especially may be provided with without frame is selected entirely, and i.e. view bed boundary can set a line to show that multiple or a line shows one in appearance.
Fig. 5 is the schematic diagram of one embodiment of selection search box component provided by the invention.Fig. 6 is date-time provided by the invention
The schematic diagram of one embodiment of selector assembly；The page elements of the view layer of the present embodiment include an input frame and one
Calendar is pulled down, for selecting following one week some interior or some day period.Fig. 7 is provided by the invention with two-page separation function
The schematic diagram of one embodiment of form component；Fig. 8 is the schematic diagram of one embodiment of mode frame component provided by the invention；
The mode frame component of the present embodiment can cover the pop-up box of full page, there is translucent black mask, can click on shade to mould
State frame is closed.Fig. 9 is the schematic diagram of one embodiment of tree component provided by the invention；Tree component provided in this embodiment
Available for the display of the data such as catalogue, organizational structure, support is chosen or is screened and supports single choice or the realization of the function of multiselect.Figure
10 be the schematic diagram of one embodiment of the user interface of multicompartment composition provided by the invention.
S50, by the view layer of the component to be called and according to document identification by the logical layer of the component to be called
In data render in the view layer of the component to be called, complete the calling of the component to be called.
It should be noted that after the calling of the component to be called and setting is completed, the component to be called regards
The mark that label in drawing introduces and attribute is set can delete, and label is introduced and belonged to by the logical layer of component to be called at this time
Property the Data Identification of mark that sets not show, then the view layer of the component to be called correspondingly not display label introduce and
Attribute is set, and completes the setting of the component to be called.Similarly, completed successively in frame multiple such as above-mentioned component to be called
Setting, you can form user interface, such as Figure 10 in user interface.
The component generation method of user interface provided in an embodiment of the present invention loads the Component Gallery set in advance, to group
Custom component in part storehouse is called；In invocation component display interface, show the component of initialization in display interface
In, the view layer of the component to be called, which monitors developer, asks the page properties performed to set event, and by the page
Attribute setting event feeds back to the logical layer of the component to be called, so that the logical layer of the component to be called is according to the page
Face attribute sets the data of the event modification logical layer；And the page elements of the view layer due to the component in Component Gallery
Document identification be bind with the document identification of data of logical layer processing, view layer is only needed according to document identification general
Data render in the logical layer of the component to be called is in the view layer of the component to be called, you can to complete to component
Self-defined adjustment, it is easy to operate so that developer only needs to be absorbed in the data modification of logical layer, you can to realize component
Meet the requirement of generation user interface, interaction is simple.
Below by using the component to be called that frame calls as selection search box component, and combine Fig. 5 carry out it is detailed
Description：
The page elements of the selection search box component of the present embodiment include input frame and drop-down choice box；The selection
There is the logical layer of search box component the option for scanning for option when the keyword to input frame input and searching out to be more than 7
When, there is search box automatically in control combobox, that is, pulls down choice box.The function logic of the logical layer includes judging option
Number, and control whether display search box with v-if.
Then when calling out selection search box component, due in selection search box component only input frame with having built
Logical layer, thus need to carry out the setting of step S30, it specifically includes：
Set-up mode one：When the view layer by the selection search box component, which listens to front end search, sets request,
That is, developer introduces corresponding front end search setting mark progress clicking trigger front end by the mark in the view layer and searches
Rope, which is set, asks, and then developer passes through the Data Input Interface input data in the view layer of the selection search box component
File, i.e., described view layer receive search data file；Described search data file includes at least one option, for working as user
When inputting keyword to input frame, relevant option is searched out.
The view layer sends the search data file received to logical layer, then described to select patrolling for search box component
Collecting layer will be in the front end search function of the logical layer of the described search data file input selection search box component；Wherein, institute
Front end search function is stated for when receiving keyword from the input frame, searched out from described search data file with
The relevant option of keyword.So as to which selection search box component provided in this embodiment can realize that front end is searched for, front end is searched
Rope is after downloading data to front end (i.e. current terminal device), the filtering of display to be performed, specifically by the logical layer of the component
It realizes.
Set-up mode two, when the view layer by the selection search box component, which listens to Back-end search, sets request,
That is, developer introduces corresponding Back-end search setting mark progress clicking trigger rear end by the mark in the view layer and searches
Rope, which is set, asks, and then developer passes through the Data Input Interface input data in the view layer of the selection search box component
File, i.e., described view layer receive back end interface address；
The view layer sends the back end interface address received to logical layer, then passes through the selection search box component
Logical layer by the back end interface address input it is described selection search box component logical layer Back-end search function in；Its
In, the Back-end search function in the input frame for when receiving keyword, by the back end interface address by institute
State keyword be supplied to back end interface search out with the relevant option of the keyword, and receive from the back end interface return
Option；So as to which selection search box component provided in this embodiment can realize Back-end search, and Back-end search is to pass through keyword
Back end interface address sends back end interface to, and back end interface performs search, and the option searched is returned to logical layer and is carried out
It sets or stores, and then can be shown in view layer.
Set-up mode two, when the view layer by the selection search box component, which listens to option display, sets request,
That is, developer introduces corresponding option display setting mark progress clicking trigger option by the mark in the view layer and shows
Show setting request, and then developer is shown according to option by the logical layer of the selection search box component and request is set to set
Option explicit function；Wherein, the option explicit function is used to return the front end search function or the Back-end search function
The option returned is shown in the view layer, and controls the display properties of the option；It is single that the option display sets request to include
Choosing sets request, multiselect that request and the displaying of multiselect pattern is set to set request；So as to selection search box group provided in this embodiment
Part can realize that the option searched out can set single choice or multiselect, and when multiselect can set uniline to show or with multiselect rectangle style exhibition again
Show.
Below by the component to be called called using frame as date and time picker component, and combine Fig. 6 and carry out in detail
Thin description：
The page elements of the date and time picker component of the present embodiment include input frame, drop-down calendar and fall times
Table；The logical layer of the date and time picker component, will for responding the click event on drop-down calendar or fall times table
Date or time corresponding with the click event is shown in the input frame, by the way that drop-down calendar and fall times table is selected to be
No display, and then it is arranged to its selector assembly of day, selection of time device assembly and date and time picker component, wherein, the time
Selection can set and be accurate to the second or divide.The mode of component switching, allows selection of time to be shown in entire combobox, more
Add beauty；And each time point can be carried out selecting.
Below by using the component to be called that frame calls as tree component, and it is described in detail with reference to Fig. 9：
The page elements of the tree component of the present embodiment include input frame, node and the node tick boxes；
The process that then above-mentioned steps S30 sets a property to tree component, specifically includes：
When the view layer by the tree component listens to node data load request, i.e. developer passes through described
Mark in view layer introduces corresponding node data loading mark and is clicked on, and the search of triggering front end sets request, Jin Erkai
Data Input Interface input data file in the view layer that hair personnel pass through the tree component, i.e., described view layer receiving node
Data are sent to the logical layer of the tree component；Whether title of the node data including each node, subordinate relation permit
Permitted the attribute chosen；For when user inputs keyword and enters input frame, logical layer can to search out relevant node.
And then since logical layer has the function logic of depth-first search, and then the logical layer of the tree component is to institute
It states node data to be traveled through, generates the tree construction data of the node data, so that the view layer for setting component is according to institute
Tree construction data are stated to be shown；Wherein, the input frame is described for when receiving keyword from the input frame, providing
Keyword carries out traverse node and described according to the keyword to the logical layer of the tree component to the tree construction data
It is set in tree construction data and associates display mark with the node that the keyword has master slave relation；The display identifies to carry
The view layer for supplying the tree component identifies associated node according to the display mark display with the display.That is,
After the above-mentioned page setup to setting component, when user uses the component in the user interface, input keyword to input
Frame, for the data Layer of the component according to keyword to data extreme saturation node, sift out has master slave relation with the keyword
Node, and display is set to identify, the view layer is filtered according to the display of this mark control node so as to fulfill according to keyword
The function of node and its ancestor node.In addition, it is provided in this embodiment tree component can also support single node asynchronous data loading and
The function that the loading of full tree structured data renders.
Figure 11 is referred to, Figure 11 is the structure diagram of one embodiment of pop-up box provided by the invention；Figure 12 is this
The structure diagram of another embodiment of the pop-up box provided is provided；
Below by the component to be called called using frame as pop-up box component, and combine Figure 11 and Figure 12 and carry out in detail
Thin description：
The page elements of the pop-up box component of the present embodiment include pop-up box, the pop-up box reference element and with it is described
Reference element corresponds to rollover elements；
The process that then above-mentioned steps S30 sets a property to pop-up box component, specifically includes：
When the view layer by the pop-up box component, which listens to pop-up box, sets event, i.e. the pop-up box is set
It is opposite that event including developer inputs the position of reference element, the position of the rollover elements, the pop-up box in interface
Ejected position in the reference element, data and the window of the pop-up box for being shown in the pop-up box are set
For adjustable data, and then the view layer of the pop-up box component receives the position of the reference element, the rollover elements
Position, the pop-up box compared with the ejected position of the reference element, for the data being shown in the pop-up box and institute
The window for stating pop-up box is arranged to adjustable data, and is transmitted to logical layer and is configured.Wherein, the pop-up box is compared with described
The ejected position of reference element include left, right, top, bottom, left-top, right-top, left-bottom,
Right-bottom, top-left, top-right, bottom-left and bottom-right；Such as the bullet that Figure 11 is provided
It is left to go out frame compared with the ejected position of the reference element.
First is set to click on event letter by the logical layer of the pop-up box component and according to the position of the reference element
Number sets rolling event functions according to the position of the rollover elements, is set according to the data for being used to be shown in the pop-up box
It puts the second click event functions and is arranged to adjustable according to the window of the pop-up box and scaling event functions are set；Wherein, institute
The first click event functions are stated for when the view layer triggers the position of clicking operation and the position consistency of the reference element
When, the pop-up box is controlled to be in off state from current opening state transformation or be changed into opening from current closed state
State；The event functions that roll are used to fall in the position of the rollover elements when the position of view layer triggering rolling operation
In the range of when, update the position of the pop-up box；Described second, which clicks on event functions, is used to click on behaviour when view layer triggering
When the position of work falls the outside in the reference element and the pop-up box, the pop-up box is controlled to be closed；It is described
Scale the position that event functions are used to, when the view layer triggers the zoom operations of the pop-up box, update the pop-up box.
It should be noted that described first is set to click on event functions in the logical layer of the pop-up box component of the present embodiment
It can realize the function that the point on or off of pop-up box is closed；The rolling event functions can realize that pop-up box can exist with reference element
It rolls and moves on scroll bar；Described second, which clicks on event functions, can work as outside user's click pop-up box device region
Pop-up box is closed in place, is not take up user interface space；The scaling event functions can realize the zoom function of pop-up box.
And the presence for clicking on event functions due to described second, when the position of reference element movement exceeds the position model of the rollover elements
When enclosing, pop-up box can also be hidden.
Further, the logical layer of pop-up box component provided in this embodiment also has following functions：
The logical layer of the pop-up box component is according to the reference element in the position at current time, the window of the pop-up box
Mouthful size and the pop-up box calculate the position of the pop-up box compared with the ejected position of the reference element；
The position of the logical layer of pop-up box component based on the pop-up box, judges whether the pop-up box window exceeds
Screen；If so, the position for revising the pop-up box is calculated according to foundation location position, if it is not, then keeping the position of the pop-up box
It puts constant.Thus when by user's rolling reference element pop-up box being made to exceed the page, it can be with the position of adjust automatically pop-up box.
Such as Figure 12, if popping up left pop-up box (left) by vertical center, screen top edge can be exceeded, therefore logical layer is automatically by pop-up box
Ejected position be adjusted to left-bottom.
Figure 13 is referred to, Figure 13 is the structure of one embodiment that component is drawn in picture polygon hot-zone provided by the invention
Schematic diagram；
Below will using the component to be called that frame calls as picture polygon hot-zone draw component, and combine Figure 13 into
The detailed description of row：
The page elements that component is drawn in picture polygon hot-zone provided in this embodiment include canvas area；
Then above-mentioned steps S30 draws picture polygon hot-zone the process that component sets a property, and specifically includes：
When the view layer that component is drawn by the picture polygon hot-zone, which listens to picture, imports request, by described
View layer receives the list of coordinates of picture and the picture；
The logical layer of component is drawn by the polygonal hot-zone of the picture, the picture is imported into the canvas area, and
The original shape of the picture is drawn according to the list of coordinates of the picture, completes the initialization of the picture；
The picture is included in the canvas area by the view layer.So as to complete the Background of canvas area
The setting of piece (picture of above-mentioned input).Wherein, the logical layer can limit maximum, minimum widith and the height of background picture,
Picture actual size is obtained after the completion of background picture loading, and it is Background to set painting canvas (canvas in html5) size
Size.Then the list of coordinates of picture is switched into absolute coordinate, and draws out picture, be shown in view layer.
It should be noted that relative coordinate, i.e. the percentage coordinate with respect to background picture, such as (0.5,0.5) is background
The central point of picture.Absolute coordinate, i.e. pixel coordinate, such as (20px, 20px), the upper abscissa for being background picture are 20px,
Ordinate is the position of 20px.View layer shows that the point on the page is drawn with absolute coordinate, but is needed during preservation image data
With relative coordinate so that subsequently on mobile phone screen or other equipment, the normal display of picture can be kept.
When listening to picture drafting request by the view layer, pass through the view layer and obtain the region that regional frame selects
Scope；
When listening to the request of frame selection operation by the view layer, obtain to replace the area by the view layer
The replacement element of the element of the corresponding picture of domain scope, and the corresponding element of the regional extent is replaced by the logical layer
For the replacement element, so as to fulfill after regional frame choosing is determined, developer can select the regional frame in corresponding picture
Element can carry out individualized selection, for example, Garment region to the personage in picture, decorative zones carry out individualized selection
Or event binding.
When by the view layer listen to click event set request when, by the view layer obtain chained address or
Display mark, and the regional extent and the chained address and/or the display are identified by input point by the logical layer
It hits in event functions；The control when element that event functions are clicked in the regional extent of the picture is clicked
User interface jumps to the chained address or the display mark.So as to which after regional frame choosing is determined, developer can be with
The click event of each position, such as the clothes clicked in picture is set to jump to the address of clothes purchase, clicks on personage's picture
In wrist-watch jump to the address of wrist-watch purchase, the click selection of for another example different parts of floor plan is identified or corresponding portion
Event handling is hit in site.
The regional extent how above-mentioned view layer is obtained to regional frame choosing below is specifically described：
Mouse action event is monitored by the view layer；The mouse action event includes mouse clicking operation, mouse
Drag operation and mouse up operation：Intermediate region is selected for regional frame as shown in fig. 13 that.
Embodiment one：Developer draws rectangular area on background picture：After clicking on left mouse button, dragging mouse arrives
Position is verified, unclamps mouse, forms rectangle.At this point, when the view layer receives two coordinates, the logical layer will be with described
The regional extent that two coordinate points are selected for the rectangular area formed to angular coordinate of rectangle as the regional frame.
Embodiment two：Developer draws polygonal region on background picture：After clicking on left mouse button, mouse is dragged
To position is verified, left button generation node is again tapped on, node is connected one by one, forms the figure of closing.At this point, the view layer
Three or more coordinates are received, and the distance of position of the origin coordinates with terminating coordinate is less than lower threshold, the logical layer will
The regional extent selected using the coordinate being connected to as the polygonal region that angle point is formed as the regional frame.
Embodiment three：Developer adjusts the regional extent of above-mentioned zone frame choosing on background picture：Mouse clicks on choosing
There is circular point of adjustment, the i.e. adjustable figure of dragging point of adjustment in middle region, the coordinate points in region.At this point, the view layer is monitored
To the adjustment event of regional frame choosing；The adjustment event includes mouse and clicks on the operation for the angle point that the regional frame selects, mouse
Mark drags the operation of the angle point, the operation of angle point described in mouse up.The view layer is received described in the mouse up
During coordinate during angle point, the coordinate of the angle point is replaced with by the coordinate received by the logical layer, completes the region
The adjustment of frame choosing.
Embodiment four：Developer moves the choosing of above-mentioned zone frame on background picture：Left mouse button is clicked at region
Afterwards, mouse is dragged to position is verified, and unclamps mouse, you can region is dragged into another position.If beyond painting canvas, mouse is unclamped
During mark, painting canvas edge can be located to automatically.
It should be noted that the main implementation method of the above embodiment one and embodiment two is：During mouse down, note
Record coordinate { x, y }；During mouse drag, according to current mouse coordinate { x1, y1 } and { x, y }, do not stop to obtain a rubber ring rectangle,
If rectangle is just directly drawn out, if polygon, then drawing out 2 points of direct straight lines, (rubber loop-shaped is simply faced
When, it is not net shape)；During mouse up, if rectangle, drawn out according to current mouse coordinate { x2, y2 } and { x, y }
Rectangle, if polygon then draws out straight line, the coordinate and the distance of starting point coordinate that the last one is put when polygon are in 5px
Within when, press mouse and then Turn Off Path and draw entire polygon.
The realization method of the above embodiment four is similar with upper two embodiments, unclamps mouse and is maintained at painting canvas by figure
It is internal：It is fairly simple for rectangle, directly judge four points of rectangle ({ x, y, width, height }) whether in painting canvas
Portion if inside painting canvas, resets the value of the upper left corner { x, y }.For polygon ([{ x, y }, x,
Y } ...]), then it is traversal all the points, obtains the x values of minimum and maximum, y values obtains an external square for including the polygon
Shape, then the method judged with rectangle, judge whether inside painting canvas, if beyond painting canvas, calculate in current outer rectangular
Heart point and the outer rectangular central point without departing from painting canvas calculate the two distance, and polygon all the points are allowed to add the distance, i.e.,
For the coordinate of polygon.
The implementation of embodiment three is：For rectangle, drag a point, then it is diagonal with respect to it, change rubber ring square
Shape integrally zooms in and out.For polygon, a point is dragged, simply changes the coordinate of the point.So four with path drawing
Side shape, one point of dragging can only change the point coordinates rather than integrally be scaled as rectangle.
The list of coordinates selected to the regional frame accessed by above-mentioned implementation is absolute coordinate, thus logical layer can will be upper
The list of coordinates for stating regional frame choosing switchs to relative coordinate and carries out depositing (with respect to the position of background picture) paying handle.
Referring to Figure 14, Figure 14 is that the structure of one embodiment of the component generating means of user interface provided by the invention is shown
It is intended to.The embodiment of the present invention also provides a kind of component generating means of user interface, including：
It calls and monitors module 10, for monitoring the calling event to the Custom component in Component Gallery；Described self-defined group
Part includes view layer and logical layer；The view layer includes at least one page elements, the text of the page elements of the view layer
Shelves mark and the document identification of the data of logical layer processing are bound；
Call request receiving module 20, for receiving invocation component request；The invocation component request includes to be called group
Part；
View layer display module 30, for when receiving invocation component request, the tune to be called from the Component Gallery
Component to be called in being asked with component shows the view layer of the component to be called；
Logical layer data modification module 40 sets thing for monitoring page properties by the view layer of the component to be called
Part, and page properties setting event is fed back into the logical layer of the component to be called, so that the component to be called
Logical layer sets the data of the event modification logical layer according to the page properties；
View layer update module 50, for by described being treated by the view layer of the component to be called and according to document identification
Data render in the logical layer of invocation component is in the view layer of the component to be called.
A kind of component generating means of user interface provided in an embodiment of the present invention load the Component Gallery set in advance,
To being called for the Custom component in Component Gallery；Using this Component Gallery, different components is called, the splicing as ' spelling building blocks '
Into the page for meeting business demand needed for developer user, developer can more be absorbed in being implemented without for Business Logic
Excessive concern interaction logic, greatly promotes Web development efficiency.
One of ordinary skill in the art will appreciate that realizing all or part of flow in above-described embodiment method, being can be with
Relevant hardware is instructed to complete by computer program, the program can be stored in a computer read/write memory medium
In, the program is upon execution, it may include such as the flow of the embodiment of above-mentioned each method.Wherein, the storage medium can be magnetic
Dish, CD, read-only memory (Read-Only Memory, ROM) or random access memory (Random Access
Memory, RAM) etc..
The above is the preferred embodiment of the present invention, it is noted that for those skilled in the art
For, various improvements and modifications may be made without departing from the principle of the present invention, these improvements and modifications are also considered as
Protection scope of the present invention.
Claims (10)
1. a kind of component generation method of user interface, which is characterized in that including：
Monitor the calling event to the Custom component in Component Gallery；The Custom component includes view layer and logical layer；Institute
Stating view layer includes at least one page elements, the document identification of the page elements of the view layer and logical layer processing
The document identification binding of data；
Receive invocation component request；The invocation component request includes component to be called；
The component to be called is called from the Component Gallery, shows the view layer of the component to be called；
Page properties are monitored by the view layer of the component to be called, event is set, and set event anti-the page properties
It feeds the logical layer of the component to be called, so that the logical layer of the component to be called sets event according to the page properties
Change the data of the logical layer；
By the view layer of the component to be called and according to document identification by the data in the logical layer of the component to be called
It renders in the view layer of the component to be called, completes the calling of the component to be called.
2. the component generation method of user interface as described in claim 1, which is characterized in that the component to be called includes choosing
Select search box component；The page elements of the selection search box component include input frame and drop-down choice box；
Then the view layer by the component to be called monitors page properties and sets event, and the page properties are set
Event feeds back to the logical layer of the component to be called, so that the logical layer of the component to be called is set according to the page properties
The data that event changes the logical layer are put, are specifically included：
When the view layer by the selection search box component, which listens to front end search, sets request, searched for by the selection
The view layer of frame component receives search data file；Described search data file includes at least one option；
Described search data file is inputted by the selection search box component by the logical layer of the selection search box component
In the front end search function of logical layer；Wherein, the front end search function is used to receive keyword from the input frame
When, it is searched out from described search data file and the relevant option of the keyword.
3. the component generation method of user interface as claimed in claim 2, which is characterized in that described to pass through described to be called group
The view layer of part monitors page properties and sets event, and page properties setting event is fed back to the component to be called
Logical layer, so that the logical layer of the component to be called sets the number of the event modification logical layer according to the page properties
According to further including：
When the view layer by the selection search box component, which listens to Back-end search, sets request, searched for by the selection
The view layer of frame component receives back end interface address；
The back end interface address is inputted by the selection search box component by the logical layer of the selection search box component
In the Back-end search function of logical layer；Wherein, when the Back-end search function is used to receive keyword in the input frame,
By the back end interface address by the keyword be supplied to back end interface search out with the relevant option of the keyword, and
Receive the option returned from the back end interface；
When the view layer by the selection search box component, which listens to option display, sets request, searched for by the selection
The logical layer of frame component is shown according to option sets request setting options explicit function；Wherein, the option explicit function is used for
The option that the front end search function or the Back-end search function return is shown in the view layer, and controls the option
Display properties；The option display sets request to include, and single choice setting is asked, multiselect sets request and the displaying of multiselect pattern is set
Put request.
4. the component generation method of user interface as described in claim 1, which is characterized in that the component to be called includes day
Phase selection of time device assembly；When the page elements of the date and time picker component include input frame, drop-down calendar and drop-down
Between table；Click event of the logical layer of the date and time picker component on response drop-down calendar or fall times table,
Date or time corresponding with the click event is shown in the input frame.
5. the component generation method of user interface as described in claim 1, which is characterized in that the component to be called includes tree
Component；The page elements of the tree component include input frame, node and the node tick boxes；
Then the view layer by the component to be called monitors page properties and sets event, and the page properties are set
Event feeds back to the logical layer of the component to be called, so that the logical layer of the component to be called is set according to the page properties
The data that event changes the logical layer are put, are specifically included：
When the view layer by the tree component listens to node data load request, connect by the view layer of the tree component
Receive the logical layer that node data is sent to the tree component；The title of the node data including each node, subordinate relation or
Whether the attribute chosen is allowed；
The node data is traveled through by the logical layer of the tree component, generates the tree construction number of the node data
According to so that the view layer of the tree component is shown according to the tree construction data；Wherein, the input frame is used for from described
When keyword is received in input frame, logical layer of the keyword to the tree component is provided according to the keyword to described
Tree construction data carry out traverse node and the node for having master slave relation with the keyword are set in the tree construction data
Association display mark；The display identifies to be supplied to the view layer of the tree component according to the display mark display and institute
It states display and identifies associated node.
6. the component generation method of user interface as described in claim 1, which is characterized in that the component to be called includes bullet
Go out frame component；The page elements of the pop-up box component include pop-up box, the pop-up box reference element and with the reference
Element corresponds to rollover elements；
Then the view layer by the component to be called monitors page properties and sets event, and the page properties are set
Event feeds back to the logical layer of the component to be called, so that the logical layer of the component to be called is set according to the page properties
The data that event changes the logical layer are put, are specifically included：
When the view layer by the pop-up box component, which listens to pop-up box, sets event, pass through regarding for the pop-up box component
Figure layer receives the position of the reference element, the position of the rollover elements, the pop-up box compared with the reference element
Ejected position, data and the window of the pop-up box for being shown in the pop-up box are arranged to adjustable data；
First is set to click on event functions, root by the logical layer of the pop-up box component and according to the position of the reference element
It is set according to the position of the rollover elements and rolls event functions, according to the data setting second for being shown in the pop-up box
It clicks on event functions and is arranged to adjustable according to the window of the pop-up box and scaling event functions are set；Wherein, described first
It clicks on event functions to be used for when the position of view layer triggering clicking operation and the position consistency of the reference element, control
The pop-up box is in off state from current opening state transformation or is in an open state from current closed state transformation；Institute
It states and rolls event functions for when the position of view layer triggering rolling operation falls in the position range of the rollover elements
When, update the position of the pop-up box；Described second, which clicks on event functions, is used for when the position of view layer triggering clicking operation
When putting the outside in the reference element and the pop-up box, the pop-up box is controlled to be closed；The scaling thing
Part function is used to, when the view layer triggers the zoom operations of the pop-up box, update the position of the pop-up box.
7. the component generation method of the user interface as claimed in claim 6, which is characterized in that the position of the rolling operation
It is the reference element in the position at current time, then updates the process of the position of the pop-up box, specifically include：
According to the reference element in the position at current time, the window size of the pop-up box and the pop-up box compared with institute
The ejected position of reference element is stated, calculates the position of the pop-up box；
Based on the position of the pop-up box, judge the pop-up box window whether beyond screen；
If so, the position of the pop-up box is calculated according to foundation location position.
8. the component generation method of user interface as described in claim 1, which is characterized in that the component to be called includes figure
Draw component in piece polygon hot-zone；The page elements that component is drawn in the picture polygon hot-zone include canvas area；
Then the view layer by the component to be called monitors page properties and sets event, and the page properties are set
Event feeds back to the logical layer of the component to be called, so that the logical layer of the component to be called is set according to the page properties
The data that event changes the logical layer are put, are specifically included：
When the view layer that component is drawn by the picture polygon hot-zone, which listens to picture, imports request, pass through the view
Layer receives the list of coordinates of picture and the picture；
The logical layer of component is drawn by the polygonal hot-zone of the picture, by the picture importing canvas area, and according to
The list of coordinates of the picture draws the original shape of the picture, completes the initialization of the picture；
The picture is included in the canvas area by the view layer；
When listening to picture drafting request by the view layer, pass through the view layer and obtain the region model that regional frame selects
It encloses；
When listening to the request of frame selection operation by the view layer, obtain to replace the region model by the view layer
The replacement element of the element of corresponding picture is enclosed, and institute is replaced with to the corresponding element of the regional extent by the logical layer
State replacement element；
When listening to the setting request of click event by the view layer, pass through the view layer and obtain chained address or display
Mark, and the regional extent and the chained address and/or the display mark input are clicked on by thing by the logical layer
In part function；The element that event functions are clicked in the regional extent of the picture controls user when being clicked
Interface jumps to the chained address or the display mark.
9. the component generation method of user interface as claimed in claim 8, which is characterized in that described to be obtained by the view layer
The regional extent that regional frame is taken to select, specifically includes：
Mouse action event is monitored by the view layer；The mouse action event includes mouse clicking operation, mouse drag
Operation and mouse up operation；
It, will be using described two coordinate points as rectangle by the logical layer when receiving two coordinates by the view layer
The regional extent selected as the regional frame the rectangular area that angular coordinate is formed；
When receiving three or more coordinates by the view layer, and under the distance of position of the origin coordinates with terminating coordinate is less than
When limiting threshold value, it will be selected by the logical layer using the coordinate being connected to as the polygonal region that angle point is formed as the regional frame
Regional extent；
The adjustment event selected the regional frame is monitored by the view layer；The adjustment event includes mouse and clicks on the area
The operation of angle point described in the operation of the angle point of domain frame choosing, mouse drag, the operation of angle point described in mouse up；
During coordinate when receiving angle point described in the mouse up by the view layer, by the logical layer will described in
The coordinate of angle point replaces with the coordinate received, completes the adjustment of the regional frame choosing.
10. a kind of component generating means of user interface, which is characterized in that including：
It calls and monitors module, for monitoring the calling event to the Custom component in Component Gallery；The Custom component includes
View layer and logical layer；The view layer includes at least one page elements, the document identification of the page elements of the view layer
It is bound with the document identification of the data of logical layer processing；
Call request receiving module, for receiving invocation component request；The invocation component request includes component to be called；
View layer display module for calling the component to be called from the Component Gallery, shows the component to be called
View layer；
Logical layer data modification module sets event for monitoring page properties by the view layer of the component to be called, and
Page properties setting event is fed back to the logical layer of the component to be called, so that the logical layer of the component to be called
The data of the event modification logical layer are set according to the page properties；
View layer update module, for by the view layer of the component to be called and according to document identification by described to be called group
Data render in the logical layer of part completes the calling of the component to be called in the view layer of the component to be called.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201711375363.3A CN108052365B (en) | 2017-12-19 | 2017-12-19 | User interface component generation method and device |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201711375363.3A CN108052365B (en) | 2017-12-19 | 2017-12-19 | User interface component generation method and device |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN108052365A true CN108052365A (en) | 2018-05-18 |
| CN108052365B CN108052365B (en) | 2021-04-27 |
Family
ID=62130015
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201711375363.3A Active CN108052365B (en) | 2017-12-19 | 2017-12-19 | User interface component generation method and device |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN108052365B (en) |
Cited By (35)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN108932309A (en) * | 2018-06-15 | 2018-12-04 | 上海陆家嘴国际金融资产交易市场股份有限公司 | Platform database management method, device, computer equipment and storage medium |
| CN109144510A (en) * | 2018-08-09 | 2019-01-04 | 上海展湾信息科技有限公司 | Internet of things system display unit |
| CN109213484A (en) * | 2018-08-20 | 2019-01-15 | 北京知本源信息技术有限公司 | Online Collaborative Design figure condition managing device and method |
| CN109271159A (en) * | 2018-08-20 | 2019-01-25 | 北京知本源信息技术有限公司 | The online cooperation device of tree-shaped logical formula and method |
| CN109471626A (en) * | 2018-10-11 | 2019-03-15 | 深圳市金证科技股份有限公司 | Page logic structure, page generation method, page data processing method and device |
| CN109522500A (en) * | 2018-11-26 | 2019-03-26 | 深圳乐信软件技术有限公司 | Webpage display process, device, terminal and storage medium |
| CN109542423A (en) * | 2018-11-23 | 2019-03-29 | 郑州云海信息技术有限公司 | A kind of method and device adjusting mode frame position |
| CN109634476A (en) * | 2018-11-29 | 2019-04-16 | 武汉兴图新科电子股份有限公司 | A kind of two-dimensional visualization figure layer equipment display control method and system based on C# language |
| CN109739491A (en) * | 2018-12-25 | 2019-05-10 | 北京金山安全软件有限公司 | Control data display method and device, electronic equipment and storage medium |
| CN109739495A (en) * | 2018-12-27 | 2019-05-10 | 山东中创软件工程股份有限公司 | A kind of method, apparatus, equipment and storage medium constructing tree construction |
| CN109840083A (en) * | 2018-12-27 | 2019-06-04 | 杭州亚信云信息科技有限公司 | Web pages component template construction method, device, computer equipment and storage medium |
| CN109992268A (en) * | 2019-03-29 | 2019-07-09 | 携程旅游信息技术（上海）有限公司 | Play frame implementation method, device, electronic equipment, storage medium |
| CN110045956A (en) * | 2019-04-16 | 2019-07-23 | 北京字节跳动网络技术有限公司 | Configuration method, device, equipment and the readable storage medium storing program for executing of component |
| CN110221892A (en) * | 2019-05-20 | 2019-09-10 | 北京字节跳动网络技术有限公司 | A kind of method, apparatus, medium and the electronic equipment of rolling window information |
| CN110389808A (en) * | 2019-07-26 | 2019-10-29 | 上海宝尊电子商务有限公司 | Full-expasion date picker applied to quick-view object designs |
| CN110442403A (en) * | 2019-08-09 | 2019-11-12 | 北京字节跳动网络技术有限公司 | A kind of method, apparatus, electronic equipment and the medium of calling function component |
| CN110543342A (en) * | 2018-09-20 | 2019-12-06 | 北京北方华创微电子装备有限公司 | OCX component response interface interaction method and device |
| CN110704148A (en) * | 2019-09-20 | 2020-01-17 | 广州虎牙科技有限公司 | Method and device for acquiring device page elements, server and storage medium |
| CN110851133A (en) * | 2019-10-12 | 2020-02-28 | 深圳前海金融资产交易所有限公司 | Front-end component library, and webpage response method and device based on front-end component library |
| CN110968813A (en) * | 2019-11-29 | 2020-04-07 | 中国银行股份有限公司 | Index page display method and device |
| CN110968224A (en) * | 2018-09-28 | 2020-04-07 | 北京国双科技有限公司 | Time information display method and related device |
| CN111045672A (en) * | 2018-10-15 | 2020-04-21 | 珠海格力电器股份有限公司 | Interface component setting method, computer device and storage medium |
| CN111258474A (en) * | 2020-01-15 | 2020-06-09 | 广东三维家信息科技有限公司 | Interaction method and device based on GUI and electronic equipment |
| CN111309321A (en) * | 2019-11-12 | 2020-06-19 | 广州银汉科技有限公司 | Customizable GUI system based on data drive |
| CN111625238A (en) * | 2020-05-06 | 2020-09-04 | Oppo（重庆）智能科技有限公司 | Display window control method, device, terminal and storage medium |
| CN112417829A (en) * | 2020-11-27 | 2021-02-26 | 上海妙一生物科技有限公司 | Processing method and device for adding page annotations |
| CN112417344A (en) * | 2021-01-25 | 2021-02-26 | 北京小米移动软件有限公司 | Rendering method, rendering device, electronic equipment and storage medium |
| CN113342317A (en) * | 2021-06-24 | 2021-09-03 | 武汉华莘教育科技有限公司 | Development multi-service dynamic combination method and system based on Android componentization |
| CN113923131A (en) * | 2021-09-10 | 2022-01-11 | 北京世纪互联宽带数据中心有限公司 | Monitoring information determination method and device, computing equipment and storage medium |
| CN114153345A (en) * | 2021-11-26 | 2022-03-08 | 深圳集智数字科技有限公司 | Multi-time node selection method and device, electronic equipment and storage medium |
| CN114371889A (en) * | 2022-01-19 | 2022-04-19 | 苏州峰之鼎信息科技有限公司 | Event configuration method and device, electronic equipment and storage medium |
| CN114816202A (en) * | 2022-05-09 | 2022-07-29 | 广州市易工品科技有限公司 | Method, device, equipment and medium for chart cross-boundary interaction in tab component |
| CN115577570A (en) * | 2022-11-21 | 2023-01-06 | 北京尽微致广信息技术有限公司 | Canvas layer processing method and device, electronic equipment and storage medium |
| CN115951811A (en) * | 2023-03-10 | 2023-04-11 | 北京尽微致广信息技术有限公司 | Component generation method and device |
| WO2024046313A1 (en) * | 2022-08-30 | 2024-03-07 | 北京沃东天骏信息技术有限公司 | Visual processing method, apparatus, and system for front-end service logic |
Citations (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20060112399A1 (en) * | 2004-11-18 | 2006-05-25 | Lessly Roger T | Automated binding for object oriented programming user interface components |
| CN1834906A (en) * | 2005-03-15 | 2006-09-20 | 微软公司 | Rich data-bound applications |
| US20120144285A1 (en) * | 2010-12-07 | 2012-06-07 | Microsoft Corporation | User interface form field expansion |
| CN105446740A (en) * | 2015-11-27 | 2016-03-30 | 国网信息通信产业集团有限公司 | MVVM (Model-View-View Model) architecture based Web front-end presentation system |
| CN105760159A (en) * | 2016-02-01 | 2016-07-13 | 四川长虹电器股份有限公司 | Website developing method and system |
| CN106164858A (en) * | 2014-04-02 | 2016-11-23 | 微软技术许可有限责任公司 | Data View shows mechanism |
| CN106250128A (en) * | 2016-07-26 | 2016-12-21 | 网易（杭州）网络有限公司 | The display processing method of user interface and device |
| CN106708370A (en) * | 2017-01-12 | 2017-05-24 | 合网络技术（北京）有限公司 | Operation method based on mobile intelligent terminal, operation system and mobile intelligent terminal |
| CN106815007A (en) * | 2015-12-02 | 2017-06-09 | 阿里巴巴集团控股有限公司 | The treating method and apparatus of application program |
-
2017
- 2017-12-19 CN CN201711375363.3A patent/CN108052365B/en active Active
Patent Citations (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20060112399A1 (en) * | 2004-11-18 | 2006-05-25 | Lessly Roger T | Automated binding for object oriented programming user interface components |
| CN1834906A (en) * | 2005-03-15 | 2006-09-20 | 微软公司 | Rich data-bound applications |
| US20120144285A1 (en) * | 2010-12-07 | 2012-06-07 | Microsoft Corporation | User interface form field expansion |
| CN106164858A (en) * | 2014-04-02 | 2016-11-23 | 微软技术许可有限责任公司 | Data View shows mechanism |
| CN105446740A (en) * | 2015-11-27 | 2016-03-30 | 国网信息通信产业集团有限公司 | MVVM (Model-View-View Model) architecture based Web front-end presentation system |
| CN106815007A (en) * | 2015-12-02 | 2017-06-09 | 阿里巴巴集团控股有限公司 | The treating method and apparatus of application program |
| CN105760159A (en) * | 2016-02-01 | 2016-07-13 | 四川长虹电器股份有限公司 | Website developing method and system |
| CN106250128A (en) * | 2016-07-26 | 2016-12-21 | 网易（杭州）网络有限公司 | The display processing method of user interface and device |
| CN106708370A (en) * | 2017-01-12 | 2017-05-24 | 合网络技术（北京）有限公司 | Operation method based on mobile intelligent terminal, operation system and mobile intelligent terminal |
Cited By (49)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN108932309A (en) * | 2018-06-15 | 2018-12-04 | 上海陆家嘴国际金融资产交易市场股份有限公司 | Platform database management method, device, computer equipment and storage medium |
| CN108932309B (en) * | 2018-06-15 | 2020-12-01 | 未鲲(上海)科技服务有限公司 | Cross-platform database management method, device, computer equipment and storage medium |
| CN109144510A (en) * | 2018-08-09 | 2019-01-04 | 上海展湾信息科技有限公司 | Internet of things system display unit |
| CN109213484A (en) * | 2018-08-20 | 2019-01-15 | 北京知本源信息技术有限公司 | Online Collaborative Design figure condition managing device and method |
| CN109271159A (en) * | 2018-08-20 | 2019-01-25 | 北京知本源信息技术有限公司 | The online cooperation device of tree-shaped logical formula and method |
| CN110543342A (en) * | 2018-09-20 | 2019-12-06 | 北京北方华创微电子装备有限公司 | OCX component response interface interaction method and device |
| CN110543342B (en) * | 2018-09-20 | 2022-12-09 | 北京北方华创微电子装备有限公司 | OCX component response interface interaction method and device |
| CN110968224A (en) * | 2018-09-28 | 2020-04-07 | 北京国双科技有限公司 | Time information display method and related device |
| CN109471626A (en) * | 2018-10-11 | 2019-03-15 | 深圳市金证科技股份有限公司 | Page logic structure, page generation method, page data processing method and device |
| CN111045672A (en) * | 2018-10-15 | 2020-04-21 | 珠海格力电器股份有限公司 | Interface component setting method, computer device and storage medium |
| CN111045672B (en) * | 2018-10-15 | 2021-08-24 | 珠海格力电器股份有限公司 | Interface component setting method, computer device and storage medium |
| CN109542423A (en) * | 2018-11-23 | 2019-03-29 | 郑州云海信息技术有限公司 | A kind of method and device adjusting mode frame position |
| CN109522500B (en) * | 2018-11-26 | 2021-03-09 | 深圳乐信软件技术有限公司 | Webpage display method, device, terminal and storage medium |
| CN109522500A (en) * | 2018-11-26 | 2019-03-26 | 深圳乐信软件技术有限公司 | Webpage display process, device, terminal and storage medium |
| CN109634476A (en) * | 2018-11-29 | 2019-04-16 | 武汉兴图新科电子股份有限公司 | A kind of two-dimensional visualization figure layer equipment display control method and system based on C# language |
| CN109739491A (en) * | 2018-12-25 | 2019-05-10 | 北京金山安全软件有限公司 | Control data display method and device, electronic equipment and storage medium |
| CN109840083A (en) * | 2018-12-27 | 2019-06-04 | 杭州亚信云信息科技有限公司 | Web pages component template construction method, device, computer equipment and storage medium |
| CN109739495A (en) * | 2018-12-27 | 2019-05-10 | 山东中创软件工程股份有限公司 | A kind of method, apparatus, equipment and storage medium constructing tree construction |
| CN109992268A (en) * | 2019-03-29 | 2019-07-09 | 携程旅游信息技术（上海）有限公司 | Play frame implementation method, device, electronic equipment, storage medium |
| CN109992268B (en) * | 2019-03-29 | 2022-12-20 | 携程旅游信息技术（上海）有限公司 | Bullet frame implementation method and device, electronic equipment and storage medium |
| CN110045956A (en) * | 2019-04-16 | 2019-07-23 | 北京字节跳动网络技术有限公司 | Configuration method, device, equipment and the readable storage medium storing program for executing of component |
| CN110221892B (en) * | 2019-05-20 | 2022-07-15 | 北京字节跳动网络技术有限公司 | Method, device, medium and electronic equipment for scrolling window information |
| CN110221892A (en) * | 2019-05-20 | 2019-09-10 | 北京字节跳动网络技术有限公司 | A kind of method, apparatus, medium and the electronic equipment of rolling window information |
| CN110389808A (en) * | 2019-07-26 | 2019-10-29 | 上海宝尊电子商务有限公司 | Full-expasion date picker applied to quick-view object designs |
| CN110442403B (en) * | 2019-08-09 | 2023-12-19 | 北京字节跳动网络技术有限公司 | Method, device, electronic equipment and medium for calling functional component |
| CN110442403A (en) * | 2019-08-09 | 2019-11-12 | 北京字节跳动网络技术有限公司 | A kind of method, apparatus, electronic equipment and the medium of calling function component |
| CN110704148A (en) * | 2019-09-20 | 2020-01-17 | 广州虎牙科技有限公司 | Method and device for acquiring device page elements, server and storage medium |
| CN110704148B (en) * | 2019-09-20 | 2023-09-05 | 广州虎牙科技有限公司 | Acquisition method and device of equipment page element, server and storage medium |
| CN110851133A (en) * | 2019-10-12 | 2020-02-28 | 深圳前海金融资产交易所有限公司 | Front-end component library, and webpage response method and device based on front-end component library |
| CN111309321A (en) * | 2019-11-12 | 2020-06-19 | 广州银汉科技有限公司 | Customizable GUI system based on data drive |
| CN110968813A (en) * | 2019-11-29 | 2020-04-07 | 中国银行股份有限公司 | Index page display method and device |
| CN111258474A (en) * | 2020-01-15 | 2020-06-09 | 广东三维家信息科技有限公司 | Interaction method and device based on GUI and electronic equipment |
| CN111258474B (en) * | 2020-01-15 | 2021-07-06 | 广东三维家信息科技有限公司 | Interaction method and device based on GUI and electronic equipment |
| CN111625238A (en) * | 2020-05-06 | 2020-09-04 | Oppo（重庆）智能科技有限公司 | Display window control method, device, terminal and storage medium |
| CN111625238B (en) * | 2020-05-06 | 2023-02-03 | Oppo（重庆）智能科技有限公司 | Display window control method, device, terminal and storage medium |
| CN112417829A (en) * | 2020-11-27 | 2021-02-26 | 上海妙一生物科技有限公司 | Processing method and device for adding page annotations |
| CN112417344A (en) * | 2021-01-25 | 2021-02-26 | 北京小米移动软件有限公司 | Rendering method, rendering device, electronic equipment and storage medium |
| CN112417344B (en) * | 2021-01-25 | 2021-10-08 | 北京小米移动软件有限公司 | Rendering method, rendering device, electronic equipment and storage medium |
| CN113342317A (en) * | 2021-06-24 | 2021-09-03 | 武汉华莘教育科技有限公司 | Development multi-service dynamic combination method and system based on Android componentization |
| CN113342317B (en) * | 2021-06-24 | 2022-05-31 | 武汉华莘科技有限公司 | Development multi-service dynamic combination method and system based on Android componentization |
| CN113923131A (en) * | 2021-09-10 | 2022-01-11 | 北京世纪互联宽带数据中心有限公司 | Monitoring information determination method and device, computing equipment and storage medium |
| CN113923131B (en) * | 2021-09-10 | 2023-08-22 | 北京世纪互联宽带数据中心有限公司 | Monitoring information determining method and device, computing equipment and storage medium |
| CN114153345A (en) * | 2021-11-26 | 2022-03-08 | 深圳集智数字科技有限公司 | Multi-time node selection method and device, electronic equipment and storage medium |
| CN114371889B (en) * | 2022-01-19 | 2023-10-13 | 苏州峰之鼎信息科技有限公司 | Event configuration method, device, electronic equipment and storage medium |
| CN114371889A (en) * | 2022-01-19 | 2022-04-19 | 苏州峰之鼎信息科技有限公司 | Event configuration method and device, electronic equipment and storage medium |
| CN114816202A (en) * | 2022-05-09 | 2022-07-29 | 广州市易工品科技有限公司 | Method, device, equipment and medium for chart cross-boundary interaction in tab component |
| WO2024046313A1 (en) * | 2022-08-30 | 2024-03-07 | 北京沃东天骏信息技术有限公司 | Visual processing method, apparatus, and system for front-end service logic |
| CN115577570A (en) * | 2022-11-21 | 2023-01-06 | 北京尽微致广信息技术有限公司 | Canvas layer processing method and device, electronic equipment and storage medium |
| CN115951811A (en) * | 2023-03-10 | 2023-04-11 | 北京尽微致广信息技术有限公司 | Component generation method and device |
Also Published As
| Publication number | Publication date |
|---|---|
| CN108052365B (en) | 2021-04-27 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN108052365A (en) | The component generation method and device of user interface | |
| US9874995B2 (en) | Maintaining context for maximize interactions on grid-based visualizations | |
| CN105373567B (en) | Page generation method and client | |
| CN103970827B (en) | Page search method and the electronic equipment for supporting the method | |
| EP2990924A1 (en) | Gesture-based on-chart data filtering | |
| CN110045894A (en) | System and method for dialog box customization | |
| CN110399420A (en) | A kind of deriving method, electronic equipment and the medium of configurableization Excel format | |
| US9916388B2 (en) | Simplified website creation, configuration, and customization system | |
| CN102982181B (en) | A kind of method and device in browser side displaying web page data | |
| CN104021016B (en) | Method and browser for loading browser plug-in icons | |
| CN103870092A (en) | Desktop icon display method and electronic device | |
| CN102214079A (en) | Method and device for displaying data of widget | |
| CN106648283A (en) | Pop-up screen information processing method and server | |
| CN103019766A (en) | Android equipment-based dynamic wallpaper arrangement method, android equipment-based dynamic wallpaper arrangement device and terminal | |
| US10467782B2 (en) | Interactive hierarchical bar chart | |
| CN110247794A (en) | The topological graph methods of exhibiting and device of one kind of multiple layout type | |
| CN107957868A (en) | A kind of html user interface visualizing editing method and device | |
| CN201196775Y (en) | Mobile phone dynamic desktop maker | |
| CN109522508A (en) | Page authoring method, editing machine construction method, device and electronic equipment | |
| EP2388690B1 (en) | Method and apparatus for displaying batch execution data of an industrial plant | |
| TWI567630B (en) | Label button management method and system | |
| CN107239212A (en) | Segmentation selection view rendering method, device and user terminal | |
| CN108304114A (en) | A kind of customized list interactive system | |
| CN112346610A (en) | Implementation method of multi-level selectable option selection component, electronic device and storage medium | |
| CN104182212A (en) | Telescopic WEB system interface framework design |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |