CN109992266A

CN109992266A - A kind for the treatment of method and apparatus of interface element

Info

Publication number: CN109992266A
Application number: CN201711480432.7A
Authority: CN
Inventors: 高凯
Original assignee: Alibaba Group Holding Ltd
Current assignee: Alibaba Group Holding Ltd
Priority date: 2017-12-29
Filing date: 2017-12-29
Publication date: 2019-07-09
Anticipated expiration: 2037-12-29
Also published as: CN109992266B

Abstract

The embodiment of the present application provides a kind for the treatment of method and apparatus of interface element, which comprises obtains interface description data；The interface description data include interface element and the corresponding elemental characteristic data of the interface element；According to interface element described in the elemental characteristic data layout, obtain describing the structuring semantic code of logical relation between interface element；According to the recommendation code variables name of interface element described in the elemental characteristic data acquisition；The interface element in the structuring semantic code is named using the recommendation code variables name.The resulting structuring semantic code of the embodiment of the present application has the logical relations such as brotherhood, set membership, realizes Interfacial elasticity layout.The embodiment of the present application is named also according to the recommendation code variables name of elemental characteristic data acquisition interface element for the interface element for structuring semantic code, can be more in line with the layout habit of programmer.

Description

A kind for the treatment of method and apparatus of interface element

Technical field

This application involves technical field of data processing, processing method and a kind of interface more particularly to a kind of interface element The processing unit of element.

Background technique

With the development of communication technology, terminal is integrated with more and more functions, so that the system function of terminal arranges More and more application programs are contained in table, for example, installed in the application program installed in computer, third party's smart phone Application program etc..It can be related to some pages in some application programs, these pages can be by building interface tool freely come complete At building.

It is known on the market at present freely to build interface tool, such as sketch, photoshop, web etc., institute's output The feature at interface is shown as, and the mode that the interface element in interface is all based on positioning carries out independent building and rendering one by one, boundary Without logical relations such as brother, fathers and sons between surface element, thus the layout of interface element can only be carried out based on the mode of absolute fix, nothing Method realizes Interfacial elasticity layout.

Summary of the invention

In view of the above problems, it proposes the embodiment of the present application and overcomes the above problem or at least partly in order to provide one kind A kind of processing method of the interface element to solve the above problems and a kind of corresponding processing unit of interface element.

To solve the above-mentioned problems, this application discloses a kind of processing methods of interface element, comprising:

Obtain interface description data；The interface description data include interface element and the corresponding member of the interface element Plain characteristic；

According to interface element described in the elemental characteristic data layout, obtain describing logical relation between interface element Structuring semantic code；

According to the recommendation code variables name of interface element described in the elemental characteristic data acquisition；

The interface element in the structuring semantic code is named using the recommendation code variables name.

Preferably, the interface element according to the elemental characteristic data layout, obtain describing interface element it Between logical relation structuring semantic code, comprising:

Create matrix；

Corresponding interface element is marked in the matrix according to the elemental characteristic data；The elemental characteristic data packet Include offset data, width data and altitude information；

The matrix is scanned, the interface element of overlapping is filtered out from the matrix；

Remove other interface elements in the interface element of the overlapping in addition to the interface element of bottom；

Using the matrix after described other interface elements of removal as modification matrix；

Record is overlapped in other interface elements of same interface element, will other described interface elements as interface element, And return to the step of executing the creation matrix；

Logical relation between each interface element is determined using the modification matrix, and is generated according to the logical relation Structuring semantic code.

It is preferably, described that logical relation between each interface element is determined using the modification matrix, comprising:

Each interface element in the modification matrix is converted, structuring semantic code is obtained；The structuring The brotherhood of interface element is described in semantic code；

Determine each interface element in the structuring semantic code with the presence or absence of the interface element of overlapping；

When the interface element has the interface element of overlapping, then the boundary is constructed in the structuring semantic code Set membership between surface element and overlapping interface element.

Preferably, the structuring semantic code is made of multiple data structure segments, in the acquisition interface description number According to later, further includes:

Determine the data structure segment with the presence or absence of matched data model；

When the data structure segment is there are when matched data model, data structure piece is modified according to the data model Section.

Preferably, there is the data model logic between the element type and interface element of corresponding interface element to close System, the data structure segment has the logical relation between the element type and interface element of corresponding interface element, described Determine the data structure segment with the presence or absence of matched data model, comprising:

Judge whether the element type of the data model is consistent with the element type of the data structure segment, and, Judge whether the logical relation of the data model is consistent with the logical relation of the data structure segment；

If the element type of the data model is consistent with the element type of the data structure segment, and, the number It is consistent with the logical relation of the data structure segment according to the logical relation of model, it is determined that the data structure segment presence The data model matched.

It is preferably, described that data structure segment is modified according to the data model, comprising:

Obtain the processing function that the data model has been declared；

It is modified using the processing function for the data structure segment.

Preferably, the recommendation code variables name of the interface element according to the elemental characteristic data acquisition, comprising:

The first semantic information is extracted from the elemental characteristic data of the interface element；

The fraternal interface element of the interface element, father's interface element and/or sub-interface element are obtained according to logical relation；

From the fraternal interface element, the is extracted in the elemental characteristic data of father's interface element and/or sub-interface element Two semantic informations；

Obtain the azimuth information of data structure segment of the interface element where it；

Information array is constructed using the azimuth information, first semantic information and second semantic information；

It is matched using the information array with default name knowledge base；

The recommendation code variables name of the interface element is obtained according to matching result.

Preferably, the recommendation code variables name that the interface element is obtained according to matching result, comprising:

When the matching result is multiple candidate code variable names, obtained from the default name knowledge base the multiple The corresponding scoring of candidate code variable name；

By the highest candidate code variable name of scoring, as recommendation code variables name.

Disclosed herein as well is a kind of processing methods of interface element, comprising:

Interface tool is freely built in offer；

When it is described freely build in interface tool receive interface element process instruction when, obtain the process instruction needle Pair interface description data；The interface description data include interface element and the corresponding elemental characteristic number of the interface element According to；

Disclosed herein as well is a kind of processing units of interface element, comprising:

Interface description data acquisition module, for obtaining interface description data；The interface description data include Interface Element The corresponding elemental characteristic data of plain and described interface element；

Structuring semantic code obtains module, is used for the interface element according to the elemental characteristic data layout, obtains Describe the structuring semantic code of logical relation between interface element；

Code variables name is recommended to obtain module, the recommendation for the interface element according to the elemental characteristic data acquisition Code variables name；

Interface element names module, for using the recommendation code variables name to the boundary in the structuring semantic code Surface element is named.

Preferably, the structuring semantic code obtains module, comprising:

Matrix creates submodule, for creating matrix；

Interface element marks submodule, for marking corresponding interface in the matrix according to the elemental characteristic data Element；The elemental characteristic data include offset data, width data and altitude information；

Overlapping interface element screens submodule and filters out the interface of overlapping from the matrix for scanning the matrix Element；

Interface element removes submodule, in the interface element for removing the overlapping in addition to the interface element of bottom Other interface elements；

Modification matrix obtains submodule, for using the matrix after described other interface elements of removal as modification matrix；

Implementation sub-module is returned, it, will other described boundaries for recording other interface elements for being overlapped in same interface element Surface element returns to the step of executing the creation matrix as interface element；

Structuring semantic code generates submodule, for determining patrolling between each interface element using the modification matrix The relationship of collecting, and structuring semantic code is generated according to the logical relation.

Preferably, the structuring semantic code generates submodule, comprising:

Date Conversion Unit obtains structuring language for converting to each interface element in the modification matrix Adopted code；The brotherhood of interface element is described in the structuring semantic code；

Overlapping interface element determination unit, for determining whether each interface element in the structuring semantic code is deposited In the interface element of overlapping；

Set membership construction unit, when for there is the interface element of overlapping when the interface element, then in the structure Change the set membership constructed between the interface element and overlapping interface element in semantic code.

Preferably, the structuring semantic code is made of multiple data structure segments, further includes:

Data model matching module, for determining the data structure segment with the presence or absence of matched data model；

Data structure segment modified module, for when the data structure segment is there are when matched data model, according to The data model modifies data structure segment.

Preferably, there is the data model logic between the element type and interface element of corresponding interface element to close System, the data structure segment has the logical relation between the element type and interface element of corresponding interface element, described Data model matching module, comprising:

Judging submodule, for judging the element type of the data model and the element type of the data structure segment It is whether consistent, and, judge whether the logical relation of the data model is consistent with the logical relation of the data structure segment；

Submodule is determined, if for the element type of the data model and the element type one of the data structure segment It causes, and, the logical relation of the data model is consistent with the logical relation of the data structure segment, it is determined that the data There are matched data models for structure fragment.

Preferably, the data structure segment modified module, comprising:

Handle function acquisition submodule, the processing function declared for obtaining the data model；

Data structure segment modifies submodule, for being repaired using the processing function for the data structure segment Change.

Preferably, the recommendation code variables name obtains module, comprising:

First Semantic features extraction module, for extracting the first semanteme from the elemental characteristic data of the interface element Information；

Relationship interface element determining module, for obtaining the fraternal interface element of the interface element according to logical relation, Father's interface element and/or sub-interface element；

Second Semantic features extraction module is used for from the fraternal interface element, father's interface element and/or sub-interface element Elemental characteristic data in extract the second semantic information；

Azimuth information obtains module, and the orientation for obtaining data structure segment of the interface element where it is believed Breath；

Information array constructs module, for using the azimuth information, first semantic information and second semanteme Information architecture information array；

Matching module, for being matched using the information array with default name knowledge base；

Code variables name is recommended to obtain module, for obtaining the recommendation code variables of the interface element according to matching result Name.

Preferably, the recommendation code variables name obtains module, comprising:

Score acquisition submodule, is used for when the matching result is multiple candidate code variable names, from the default life Name knowledge base obtains the corresponding scoring of the multiple candidate code variable name；

Code variables name screens submodule, is used for by the highest candidate code variable name of scoring, as recommendation code Variable name.

Interface tool is freely built disclosed herein as well is a kind of, comprising:

It freely builds interface tool and module is provided, freely build interface tool for providing；

Interface description data acquisition module receives interface element processing in described freely build in interface tool for working as When instruction, the interface description data that the process instruction is directed to are obtained；The interface description data include interface element and institute State the corresponding elemental characteristic data of interface element；

Disclosed herein as well is a kind of devices, comprising: one or more processors；Be stored thereon with one of instruction or Multiple machine readable medias, when being executed by one or more of processors so that described device execute above-mentioned one or The processing method of multiple interface elements.

Disclosed herein as well is one or more machine readable medias, are stored thereon with instruction, when by one or more When managing device execution, so that described device executes the processing method such as above-mentioned one or more interface elements.

The embodiment of the present application includes the following advantages:

The embodiment of the present application gets interface description data from interface tool is freely built, wherein interface description data packet Interface element and elemental characteristic data are included, then carry out layout automatically for interface element according to elemental characteristic data, thus Obtain describing the structuring semantic code of logical relation between interface element, the embodiment of the present application resulting structuring semanteme generation Code has the logical relations such as brotherhood, set membership, changes the absolute layout type of first interface description data, realizes boundary Surface elastic layout.Further, recommendation code variables of the embodiment of the present application also according to elemental characteristic data acquisition interface element Name, is named for the interface element for structuring semantic code, can be more in line with the layout habit of programmer.

Detailed description of the invention

Fig. 1 is a kind of step flow chart of the processing method embodiment of interface element of the application；

Fig. 2 is a kind of data structure schematic diagram of interface element of the application；

Fig. 3 is a kind of schematic diagram of newly created two-dimensional matrix of the application；

Fig. 4 is a kind of code structure figure of interface description data of the application；

Fig. 5 is the schematic diagram of the two-dimensional matrix after a kind of label interface element of the application；

Fig. 6 is the schematic diagram of the two-dimensional matrix after a kind of removal overlapping interface element of the application；

Fig. 7 is the schematic diagram of the two-dimensional matrix after a kind of introducing row and column of the application；

Fig. 8 is a kind of schematic diagram of the structuring semantic code of generation of the application；

Fig. 9 is a kind of schematic diagram of the two-dimensional matrix of overlapping interface Element generation of the application；

Figure 10 is a kind of schematic diagram of structuring semantic code of the application；

Figure 11 is a kind of two-dimensional matrix schematic diagram of overlapping interface element of the application；

Figure 12 is a kind of schematic diagram of structuring semantic code of the application；

Figure 13 is the scene interface screenshot of description dotey of the application a kind of；

Figure 14 is a kind of schematic diagram based on the source data for freely building tool generation of the application；

Figure 15 is a kind of schematic diagram of the two-dimensional matrix of label interface element of the application；

Figure 16 is a kind of schematic diagram of structuring semanteme of the application；

Figure 17 is a kind of structural schematic diagram of model of the application；

Figure 18 is a kind of structural schematic diagram at interface of the application；

Figure 19 is a kind of schematic diagram of Model Matching hit of the application；

Figure 20 is a kind of according to the modified surface chart of hitting model of the application；

Figure 21 is a kind of data structure schematic diagram according to after model modification of the application；

Figure 22 is a kind of schematic diagram of first step match hit of the application；

Figure 23 is a kind of schematic diagram of second step match hit of the application；

Figure 24 is a kind of data framework schematic diagram of interface element to be named of the application；

Figure 25 is the interface schematic diagram under the scenario A of the application；

Figure 26 is the interface schematic diagram under the scenario B of the application；

Figure 27 is a kind of flow diagram of the maintenance of knowledge base of the application；

Figure 28 is a kind of flow chart of processing for realizing interface element of the application；

Figure 29 is the step flow chart of the processing method embodiment of another interface element of the application；

Figure 30 is a kind of structural block diagram of the processing device embodiment of interface element of the application；

Figure 31 is a kind of structural block diagram for freely building interface tool embodiment of the application；

Figure 32 is a kind of structural schematic diagram of system embodiment of the application.

Specific embodiment

In order to make the above objects, features, and advantages of the present application more apparent, with reference to the accompanying drawing and it is specific real Applying mode, the present application will be further described in detail.

The embodiment of the present application provides a kind of processing method of interface element, will can freely build the one of interface tool output Group interface element set (interface description data), automatic editing is organized into the interface with relationships such as brotherhood, set memberships Element set (structuring semantic code)；Meanwhile the embodiment of the present application provides a kind of processing method of interface element, institute is most lifelong At structuring semantic code, allow interface layout type and corresponding code all close to the manual output of programmer, and then have To the ability freely built class tool code generated and can carry out secondary modification.

It is introduced below for the embodiment of the present application.

Referring to Fig.1, a kind of step flow chart of the processing method embodiment of interface element of the application is shown, specifically may be used To include the following steps:

Step 101, interface description data are obtained.

In the embodiment of the present application, interface description data, which are typically derived from, freely builds interface tool, wherein freely builds Tool refers to, such as sketch, photoshop, web type builds tool etc. and builds work based on what absolute fix mode built interface Tool.

Interface description data main feature shows themselves in that the information that interface element is described in a manner of absolute fix, Mei Gejie Surface element is independent individual, without logical relation between interface element, therefore is unfavorable for realizing the elasticity layout at interface.

In the concrete realization, the interface description data include that interface element and the corresponding element of the interface element are special Levy data.The elemental characteristic data of each interface element may include following information: (such as Button (is pressed interface element type Button), Rectangle (rectangle), Image (image)), offset data, width data, altitude information and other element type Attribute.

Referring to a kind of structural schematic diagram of interface description data shown in Fig. 2, interface description data are a tree construction numbers According to a node of tree construction represents an interface element.Wherein, the component of Fig. 1 is interface element type, top, Left is offset data, and width is width data, and heigth is altitude information, and props is core configuration item.

Step 102, the interface element according to the elemental characteristic data layout is obtained describing between interface element and be patrolled The structuring semantic code for the relationship of collecting.

In the embodiment of the present application, according to the interface element of elemental characteristic data layout interface description data, interface is obtained With the structuring semantic code of logical relation between element.

In a preferred embodiment of the present application, the step 102 may include following sub-step:

Sub-step S11 creates matrix；

Sub-step S12 marks corresponding interface element in the matrix according to the elemental characteristic data；The element Characteristic includes offset data, width data and altitude information；

Sub-step S13 scans the matrix, and the interface element of overlapping is filtered out from the matrix；

Sub-step S14 removes other interface elements in the interface element of the overlapping in addition to the interface element of bottom；

Sub-step S15, using the matrix after described other interface elements of removal as modification matrix；

Sub-step S16, record are overlapped in other interface elements of same interface element, will other described interface element conducts Interface element, and return to the step of executing the creation matrix；

Sub-step S17 determines the logical relation between each interface element using the modification matrix, and is patrolled according to described The relationship of collecting generates structuring semantic code.

Wherein, the sub-step S17 may include following sub-step:

Sub-step S17-1 converts each interface element in the modification matrix, obtains structuring semanteme generation Code；The brotherhood of interface element is described in the structuring semantic code；

Sub-step S17-2 determines each interface element in the structuring semantic code with the presence or absence of the interface of overlapping Element；

Sub-step S17-3, when the interface element has the interface element of overlapping, then in the structuring semantic code The middle set membership constructed between the interface element and overlapping interface element.

The embodiment of the present application provides a kind of data conversion algorithm, can be turned according to the elemental characteristic data of interface element It is changed to the structuring semantic code for the logical relation that description has between interface element.The algorithm core feature shows themselves in that data turn The logical relations such as father and son brother are increased in the result changed, but still can restore the result interface that the tool of building is built, The specific implementation steps are as follows:

A. referring to Fig. 3, with one two-dimensional matrix of wide high creation at interface；

B. high according to the width of interface element, the occupy-place of all interface elements is marked in two-dimensional matrix；Assuming that now with 7 A interface element, corresponding data is as shown in figure 4, this 7 interface elements correspond to placeholder in two-dimensional matrix, then as shown in Figure 5.

C. two-dimensional matrix is scanned, all elements to overlap are found, overlay elements are removed from two-dimensional matrix, and Retain the element that bottom is overlapped, while by overlay elements corresponding to the overlay elements being removed under additional records；It needs It is bright, retain the element that is overlapped of bottom, be follow in mainstream interface tech interface level logic (photoshop, Sketch, html etc.): top element is typically considered to spatially cover bottom element, therefore detaches top element, to top After element completes recursive calculation, then cover back bottom element.

Therefore overlapping relation analyzes result are as follows: 1 element of number is numbered the overlapping of [2,3,5] element, and 3 element of number is numbered The overlapping of 6 elements；Therefore, it is the element for numbering [2,3,5,6] that present scan, which removes element,.Result is as shown in Figure 6 after removal.

D. passing through the remaining element of step c, all elements not overlapped scan the two-dimensional matrix modified, and It introduces row and column unit and layout tissue is carried out to surplus element, therefore the logical relation between element can be obtained.

Referring to Fig. 7, it is shown element in two-dimensional matrix, row (row) and column (column) layout element are introduced, according to element Between logical relation corresponding to generate code as shown in Figure 8.

E. using in step c overlay elements and overlay elements it is corresponding by overlay elements as input, enter step a progress Recursive calculation:

A) 1 element of number is numbered the recurrence of [2,3,5] element overlapping, as shown in figure 9, giving birth to according to the matrix of Fig. 8 is corresponding It is as shown in Figure 10 at code.

B) 3 element of number is numbered the recurrence of 6 elements overlapping, as shown in figure 11, generates generation according to the matrix of Figure 11 is corresponding Code is as shown in figure 12.

It in the embodiment of the present application, repeats the above process, until completing the recurrence of whole overlay elements.Then, it can deposit When by overlay elements, injection constitutes set membership by the children of overlay elements to code.

In a preferred embodiment of the present application, in the structuring semantic code by multiple data structure segment groups At in the step 101, i.e. acquisition interface description data can also include the following steps: later

Step S21 determines the data structure segment with the presence or absence of matched data model；

Step S22 modifies number according to the data model when the data structure segment is there are when matched data model According to structure fragment.

In the embodiment of the present application, a kind of model of place library and the matched strategy of model of place are provided, the knot generated is helped Structure semantic code carries out Model Matching and optimizes data structure, makes it closer to the arranged mode manually realized.

In order to more fully understand those skilled in the art, model of place is matched using a specific example below Process is illustrated, and detailed process is as follows:

A. referring to Fig.1 3, it show the scene interface screenshot of dotey description.

B. the source data (interface description data) for freely building tool generation is as shown in figure 14.

C. data conversion is carried out for interface description data, as a result as follows:

A) referring to Fig.1 5, create two-dimensional matrix；

B) referring to Fig.1 6, it generates arranged mode and describes the data at interface to get to structuring semantic code；

C) data model in hitting model library, model statement are as shown in figure 17.

Wherein, model includes semanteme: model wraps in container using any (ANYTHING) interface element type as outer layer container The arrangement mode of 3 daughter elements containing 3 daughter elements (countOfchild:3) is 2:1 (rowSpace:[2,1]), daughter element class Type be first daughter element type be Image perhaps second daughter element of Rectangle type be Text or Column, the type of third daughter element are Button.

Wherein, the semanteme of rowSpace is: a row spatially, the vertical cleavable regional percentage for being；Vertically cut Rule is: adjacent closer perpendicular unit is determined as on a region that (less than 15 pixels of such as neighbor distance, regular visual field scape can have Body configuration and adjusting), it is adjacent to be then determined as not on a region (such as adjacent to be greater than 15 pixels) greater than farther away perpendicular unit.

It is exemplified below: rowSpace:[2,1], space can turn to as two regions in implied meaning row unit, and wherein region 1 is wrapped Containing first and second perpendicular unit, region 2 includes the perpendicular unit of third, specific as shown in figure 18.

E. Model Matching hit such as Figure 19.

Structure such as Figure 20 is modified after model hit.It is divided into region 1 and region 2 in structure, region 1 includes first row and the Two column contents, region 2 include third column content, and it is semantic to increase two teams' alignment newly in region 1 and the layout of region 2；

F. according to ultimately producing data structure such as Figure 21 after model modification.Wherein, justifyContent is increased: Space-between realizes both sides alignment, ModelGroup element is increased newly, so that first row and second is classified as an entirety.

Wherein, there is the data model logic between the element type and interface element of corresponding interface element to close System, the data structure segment has the logical relation between the element type and interface element of corresponding interface element, described Step S21, i.e., specific the step of how determining matched data model are as follows:

Step S21-1, judge the data model element type and the data structure segment element type whether Unanimously, and, judge whether the logical relation of the data model is consistent with the logical relation of the data structure segment；

Step S21-2, if the element type of the data model is consistent with the element type of the data structure segment, with And the logical relation of the data model is consistent with the logical relation of the data structure segment, it is determined that the data structure There are matched data models for segment.

The matching scheme of the data model of the embodiment of the present application, is described in detail below:

A. the target object of Model Matching is the segment in data structure；

B. matching step 1: the type and attribute of fuzzy matching first order Container elements (specific matching content follows data Source Type can adjust) and its first order container and container include the relationship between daughter element, including but not limited to: daughter element Number (countOfChild), layout distribution situation (rowSpace) of daughter element etc.；

C. matching step 2: the type and attribute of the daughter element of fuzzy matching father's element container (specific matching content follows Data source types, can adjust) and its daughter element and father's container between relationship and daughter element and daughter element between relationship, packet Contain but be not limited to: being which daughter element (where) of father's element, whether center is aligned daughter elements, top is aligned, bottom pair It is neat etc..

D. data model declares a processing function and modifies to the data slot of match hit.

Below using one example of continuation for Model Matching procedure declaration.Example is described in detail below:

The matching of the first step: matched target object is the segment of data structure, and model is to describe this data structure One data structure of segment characterizations.The structure of model includes two layers in this example, and first layer is used to describe first order container The type and attribute of element；

The data structure of model first layer in this example are as follows:

From top to bottom, the feature of first layer element is successively described are as follows: element type be any element type of ANYTHING all Matching；There are three daughter elements for the countOfChild:3 element；RowSpace:[2,1] daughter elements of the element are in lateral sky Between middle distribution form be that the distance of first daughter element and second daughter element is less than second daughter element and third daughter element Citing.

Therefore: in first step matching, being matched to the element such as Figure 22, and be identified as first order container.

The matching of second step: being described as follows about the corresponding daughter element of first order container first in model:

Wherein, the element type that successively description possesses the daughter element daughter element is Image or Rectangle and belongs to First daughter element (where:0) of father's element；The element type for possessing the daughter element daughter element is Text or Column And belong to second daughter element (where:1) of father's element；Possess the daughter element resource element type be Button and Belong to the third daughter element (where:2) of father's element.

To sum up, second step match hit, referring to Figure 23.

Step 103, the recommendation code variables name of the interface element according to the elemental characteristic data acquisition.

Specifically in practice, code variables name is in data structure with the attribute of the className of id peer.In data The attribute of a className can be added in structure.

In the embodiment of the present application, can according to the recommendation code variables name of the interface element of elemental characteristic data acquisition, And it is modified according to recommendation code variables name for the attribute of the className in data structure.

Step 104, the interface element in the structuring semantic code is ordered using the recommendation code variables name Name.

In the embodiment of the present application, it additionally provides by knowledge base, the matched scheme of knowledge base, for code variables name The name of programmer is accustomed to precipitating in knowledge base, is allowed to carry out the variable naming mode of interface element excellent by name Change, so that code variables name is more in line with the habit of programmer, convenient for the modification of programmer.

In a preferred embodiment of the present application, the step 103 may include following sub-step:

Sub-step S31 extracts the first semantic information from the elemental characteristic data of the interface element；

Sub-step S32, obtains the fraternal interface element of the interface element according to logical relation, father's interface element and/or Sub-interface element；

Sub-step S33, from the fraternal interface element, the elemental characteristic data of father's interface element and/or sub-interface element In extract the second semantic information；

Sub-step S34 obtains the azimuth information of data structure segment of the interface element where it；

Sub-step S35 constructs information using the azimuth information, first semantic information and second semantic information Array；

Sub-step S36 is matched using the information array with default name knowledge base；

Sub-step S37 obtains the recommendation code variables name of the interface element according to matching result.

The scheme of code variable name name when the embodiment of the present application provides a kind of generation code, is described in detail below:

A. based on aforementioned, obtained structuring semantic code has been one with the tree-like of the logical constructions such as father and son brother Data, data structure frame such as Figure 24.

B. interface element gets semantic information from self attributes configuration, and semantic information is including but not limited to Interface Element The value of plain type name (component), interface element core configuration item (props) and configuration item (other are more), in this, as The included semantic information of interface element.

It should be noted that attribute type, type that semantic information also includes props peer are used for interface identification element Component type name, props is used to describe the core configuration item of such type type interface element.Example: type=button, Props={ size: ' large ', shape: ' rectangle ' } etc..

C. interface element collected from brother, father, child node brother, father, child node semantic information.

D. interface element from global data structures go out obtain interface element where spatial position (bearing data), include but It is not limited to: head, body, footer, aside etc..

E. by all semantic informations, constitute a information array according to the weight of information, the format of information array include but It is not limited to: array, object, character string etc..

Information array is one data structure (array, object, character string) of application, the semantic information that acquisition is come, deposit In data structure, and the weighted value of each semantic information is marked, and data structure presses weight assembled arrangement from big to small.

F. information array and name knowledge base carry out matching operation；Matching operation rule, comprising being singly not limited to: array ratio Compared with, charactor comparison, object compare, word relatively etc..

G. it is named if finding matching result using the variable name recommended in name knowledge Kuku, or name knowledge The way of recommendation that library is recommended is named.

Specifically, being used to carry the data structure of knowledge as described in step e first is an array, object, character string Etc. data structures, be equal to data structure described in step e in the data structure of knowledge in knowledge base；Carry out array, object, character String etc. data structure similarity-rough set, specific comparative approach such as: array, object, character string compare character after character Duplication.

The data structure illustrated below for knowledge base are as follows:

[KEYWORD, TAG, PARENT, CHILDREN, SIBLING],

Data are explained: the data structure is an array；

KEYWORD: the core information of the element is recorded such as: " submission "；

TAG: the element type of the element is recorded such as: " button "；

PARENT: the knowledge information and variable for recording father's element of the element are named result；

CHILDREN: the knowledge information and variable for recording the daughter element of the element are named result；

SIBLING: the knowledge information and variable name result of the fraternal element of the element are recorded；

If at this time in knowledge base there are knowledge matching (similar or be equal to) knowledge (matching process as described above, Compared by the laggard line character of array characterization), then the variable naming of the element is carried out using the variable name recommended in knowledge base.

If h. not finding matching result, assembly is carried out to the higher information of weight in the semantic information being collected into, as Variable name, and knowledge base is named in typing.

The embodiment of the present application can also for name knowledge base safeguard, enable name knowledge base information constantly more Newly, it is as follows to specifically describe maintenance process:

A. knowledge base supports knowledge base maintenance person to carry out manual processing to the result in name library, including but not limited to: it beats Point, it corrects manually；

B. knowledge in knowledge base, timing carry out similarity system design, merge to the higher information of similarity, wherein with manual It corrects result and scoring carries out the result after comprehensive descision merging.

Wherein, the record data stored in knowledge base are the data structures as described in step e, determine the method for similarity It is that the data structure that will newly obtain is compared with the data structure in knowledge base, comparison strategy is that array is compared with array (if it is object, then object is compared with object, if it is character string, character string and character string comparison).

It illustrates below and comparison procedure is illustrated, wherein scenario A referring to figure 2. 5, scenario B referring to figure 2. 6.

The data structure of the knowledge base of element 1 in scenario A are as follows:

The knowledge data structure of scenario A illustrates: knowledge indicates the contextual information that element acquisition comes, handmade Indicate correcting manually as a result, rate indicates the marking provided manually, result indicates the final variables name of element；Wherein The array element of knowledge, the smaller predictor weight of array index are maximum.

The data structure of the knowledge base of element 1 in scenario B are as follows:

The difference of scenario A and scenario B is that the keyword of first daughter element in knowledge is different, third height The sibling of element is different；Because other daughter elements are all, it is believed that the element 1 in two scenes is that similarity is higher Element, so merge two records, amalgamation result be all be relevant knowledge with element 1 in scenario A.

The application is being obtained with father and son, after the data structure of brotherhood, so that it may a tree data structure is constructed, Spatially it can be reentered into this tree data structure according to principle is closed between interface element, realize elasticity layout.

In the embodiment of the present application, every record is one for recording an interface element context letter in knowledge base Breath, interface element variable name result, the variable name result manually corrected, the variable name manually to score scoring number.So it can be achieved The single interface element information of knowledge base record, while including the information of static acquisition, it also simultaneously include the result manually corrected The scoring score manually given a mark.Flow chart such as Figure 27.

According to above content it is found that the main innovation point of the embodiment of the present application is as follows:

1. the scheme of the embodiment of the present application is before this by using a kind of calculation device of data conversion, by absolute fix mode Description interface description data are converted into the data that interface information is described with arranged mode, i.e. structuring semantic data, so that interface The logic associations relationship such as brother, father and son is created that between element.

2. the layout habit of programmer is carried out by data structured and typing by scene library, the scheme of scene matching, into And enables to optimize data, the logic association between interface element is optimized.

3. the name of programmer is accustomed to precipitating in knowledge base, is made by knowledge base, knowledge base matched scheme The variable naming of interface element is optimized.

Completely realize that above-mentioned flow chart of data processing figure is referred to shown in Figure 28, due to step implementation procedure and aforementioned phase It is similar, with regard to no longer carrying out repeating.

Referring to Figure 29, the step flow chart of the processing method embodiment of another interface element of the application is shown, is had Body may include steps of:

Step 201, it provides and freely builds interface tool；

Step 202, when it is described freely build in interface tool receive interface element process instruction when, obtain the place The interface description data that reason instruction is directed to；The interface description data include interface element and the corresponding member of the interface element Plain characteristic；

Step 203, the interface element according to the elemental characteristic data layout is obtained describing between interface element and be patrolled The structuring semantic code for the relationship of collecting；

Step 204, the recommendation code variables name of the interface element according to the elemental characteristic data acquisition；

Step 205, the interface element in the structuring semantic code is ordered using the recommendation code variables name Name.

In the embodiment of the present application, one can be provided and freely build interface tool, realized freedom at present on the market One group of interface element set of interface tool output is built, automatic editing is organized into relationships such as brotherhood, set memberships Interface element set, meanwhile, interface tool is freely built based on this can be generated structuring semantic code, allow the cloth at interface Office's mode and corresponding code reach and are generated to freely building class tool all close to the code of the manual output of programmer Code can carry out the ability of secondary modification.

Specifically, if freely building interface tool and receiving interface element process instruction at this, from freely building Corresponding interface description data are obtained in interface tool, then according to the elemental characteristic data of interface description data automatically for boundary Surface element carries out layout, to obtain describing the structuring semantic code of logical relation between interface element, the application is implemented The resulting structuring semantic code of example has the logical relations such as brotherhood, set membership, changes first interface description data Absolute layout type, realize Interfacial elasticity layout.Further, the embodiment of the present application is also according to elemental characteristic data acquisition circle The recommendation code variables name of surface element, is named for the interface element for structuring semantic code, can be more in line with The layout of programmer is accustomed to, and does it yourself without programmer, saves many human resources.

It should also be noted that, the method to interface element processing that the embodiment of the present application is realized, can freely take Build interface tool, an independent tool can also be designed, then again with freely build interface tool and establish connection, go processing from By building the interface description data in interface tool, the embodiment of the present application does not limit this.

It should be noted that for simple description, therefore, it is stated as a series of action groups for embodiment of the method It closes, but those skilled in the art should understand that, the embodiment of the present application is not limited by the described action sequence, because according to According to the embodiment of the present application, some steps may be performed in other sequences or simultaneously.Secondly, those skilled in the art also should Know, the embodiments described in the specification are all preferred embodiments, and related movement not necessarily the application is implemented Necessary to example.

Referring to Figure 30, a kind of structural block diagram of the processing device embodiment of interface element of the application is shown, specifically may be used To include following module:

Interface description data acquisition module 301, for obtaining interface description data；The interface description data include interface Element and the corresponding elemental characteristic data of the interface element；

Structuring semantic code obtains module 302, is used for the interface element according to the elemental characteristic data layout, obtains To describing the structuring semantic code of logical relation between interface element；

Code variables name is recommended to obtain module 303, for the interface element according to the elemental characteristic data acquisition Recommend code variables name；

Interface element names module 304, for using the recommendation code variables name in the structuring semantic code Interface element be named.

In a preferred embodiment of the present application, the structuring semantic code obtains module 302, comprising:

Matrix creates submodule, for creating matrix；

In a preferred embodiment of the present application, the structuring semantic code generates submodule, comprising:

In a preferred embodiment of the present application, the structuring semantic code is made of multiple data structure segments, Further include:

In a preferred embodiment of the present application, the data model have corresponding interface element element type and Logical relation between interface element, the data structure segment have the element type and interface element of corresponding interface element Between logical relation, the data model matching module, comprising:

In a preferred embodiment of the present application, the data structure segment modified module, comprising:

In a preferred embodiment of the present application, the recommendation code variables name obtains module 303, comprising:

In a preferred embodiment of the present application, the recommendation code variables name obtains module, comprising:

Referring to Figure 31, a kind of structural block diagram for freely building interface tool embodiment of the application is shown, it specifically can be with Including following module:

It freely builds interface tool and module 401 is provided, freely build interface tool for providing；

Interface description data acquisition module 402 receives interface element in described freely build for working as in interface tool When process instruction, the interface description data that the process instruction is directed to are obtained；The interface description data include interface element with And the corresponding elemental characteristic data of the interface element；

Structuring semantic code obtains module 403, is used for the interface element according to the elemental characteristic data layout, obtains To describing the structuring semantic code of logical relation between interface element；

Code variables name is recommended to obtain module 404, for the interface element according to the elemental characteristic data acquisition Recommend code variables name；

Interface element names module 405, for using the recommendation code variables name in the structuring semantic code Interface element be named.

For device embodiment, since it is basically similar to the method embodiment, related so being described relatively simple Place illustrates referring to the part of embodiment of the method.

Embodiment of the disclosure can be implemented as using any suitable hardware, firmware, software, or and any combination thereof into The system of the desired configuration of row.Figure 32, which is schematically shown, can be used for realizing showing for each embodiment described in the disclosure Example property system (or device) 1300.

For one embodiment, Figure 32 shows exemplary system 1300, which has one or more processors 1302, the system control module (chipset) 1304, quilt of at least one of (one or more) processor 1302 are coupled to It is coupled to the system storage 1306 of system control module 1304, is coupled to the non-volatile memories of system control module 1304 Device (NVM)/storage equipment 1308, the one or more input-output apparatus 1310 for being coupled to system control module 1304, with And it is coupled to the network interface 1312 of system control module 1306.

Processor 1302 may include one or more single or multiple core processors, and processor 1302 may include general processor Or any combination of application specific processor (such as graphics processor, application processor, Baseband processor etc.).In some embodiments In, system 1300 can be as the data platform described in the embodiment of the present application.

In some embodiments, system 1300 may include with instruction one or more computer-readable mediums (for example, System storage 1306 or NVM/ store equipment 1308) and mutually merge with the one or more computer-readable medium and be configured To execute instruction the one or more processors 1302 to realize module thereby executing movement described in the disclosure.

For one embodiment, system control module 1304 may include any suitable interface controller, with to (one or It is multiple) at least one of processor 1302 and/or any suitable equipment or component that are communicated with system control module 1304 Any suitable interface is provided.

System control module 1304 may include Memory Controller module, to provide interface to system storage 1306.It deposits Memory controller module can be hardware module, software module and/or firmware module.

System storage 1306 can be used for for example, load of system 1300 and storing data and/or instruction.For one Embodiment, system storage 1306 may include any suitable volatile memory, for example, DRAM appropriate.In some implementations In example, system storage 1306 may include four Synchronous Dynamic Random Access Memory of Double Data Rate type (DDR11SDRAM)。

For one embodiment, system control module 1304 may include one or more i/o controllers, with to NVM/ stores equipment 1308 and (one or more) input-output apparatus 1310 provides interface.

For example, NVM/ storage equipment 1308 can be used for storing data and/or instruction.NVM/ stores equipment 1308 Any suitable nonvolatile memory (for example, flash memory) and/or may include that any suitable (one or more) is non-volatile Equipment is stored (for example, one or more hard disk drives (HDD), one or more CD (CD) drivers and/or one or more A digital versatile disc (DVD) driver).

NVM/ storage equipment 1308 may include a part for the equipment being physically mounted on as system 1300 Storage resource or its can by the equipment access without a part as the equipment.For example, NVM/ stores equipment 1308 It can be accessed by network via (one or more) input-output apparatus 1310.

(one or more) input-output apparatus 1310 can provide interface for system 1300 appropriate to set with any other Standby communication, input-output apparatus 1310 may include communication component, audio component, sensor module etc..Network interface 1312 can Interface is provided for system 1300 with by one or more network communications, system 1300 can be according to one or more wireless network marks The quasi- and/or arbitrary standards in agreement and/or agreement are carried out wireless communication with the one or more components of wireless network, such as The wireless network based on communication standard is accessed, such as WiFi, 2G or 3G or their combination are carried out wireless communication.

For one embodiment, at least one of (one or more) processor 1302 can be with system control module 1304 The logics of one or more controllers (for example, Memory Controller module) be packaged together.For one embodiment, (one It is a or multiple) at least one of processor 1302 can seal with the logic of one or more controllers of system control module 1304 It is fitted together to form system in package (SiP).For one embodiment, in (one or more) processor 1302 at least one It is a to be integrated on same mold with the logic of one or more controllers of system control module 1304.One is implemented Example, at least one of (one or more) processor 1302 can be with one or more controllers of system control module 1304 Logic is integrated on same mold to form system on chip (SoC).

In various embodiments, system 1300 can be, but not limited to be: browser, work station, desk-top calculating equipment or shifting It is dynamic to calculate equipment (for example, lap-top computing devices, handheld computing device, tablet computer, net book etc.).In each embodiment In, system 1300 can have more or fewer components and/or different frameworks.For example, in some embodiments, system 1300 Including one or more video cameras, keyboard, liquid crystal display (LCD) screen (including touch screen displays), nonvolatile memory Port, mutiple antennas, graphic chips, specific integrated circuit (ASIC) and loudspeaker.

Wherein, if display includes touch panel, display screen may be implemented as touch screen displays, be used by oneself with receiving The input signal at family.Touch panel includes one or more touch sensors to sense the hand on touch, slide, and touch panel Gesture.The touch sensor can not only sense the boundary of a touch or slide action, but also detect and the touch or sliding Operate relevant duration and pressure.

The embodiment of the present application also provides a kind of non-volatile readable storage medium, be stored in the storage medium one or Multiple modules (programs) when the one or more module is used in terminal device, can make the terminal device execute The instruction (instructions) of each step of the above method in the embodiment of the present application.

A kind of device is provided in one example, comprising: one or more processors；With what is stored thereon has instruction One or more machine readable medias, when by one or more of processors execute when so that described device execute as this Apply for the instruction (instructions) of each step of the above method in embodiment.

All the embodiments in this specification are described in a progressive manner, the highlights of each of the examples are with The difference of other embodiments, the same or similar parts between the embodiments can be referred to each other.

It should be understood by those skilled in the art that, the embodiments of the present application may be provided as method, apparatus or calculating Machine program product.Therefore, the embodiment of the present application can be used complete hardware embodiment, complete software embodiment or combine software and The form of the embodiment of hardware aspect.Moreover, the embodiment of the present application can be used one or more wherein include computer can With in the computer-usable storage medium (including but not limited to magnetic disk storage, CD-ROM, optical memory etc.) of program code The form of the computer program product of implementation.

In a typical configuration, the computer equipment includes one or more processors (CPU), input/output Interface, network interface and memory.Memory may include the non-volatile memory in computer-readable medium, random access memory The forms such as device (RAM) and/or Nonvolatile memory, such as read-only memory (ROM) or flash memory (flash RAM).Memory is to calculate The example of machine readable medium.Computer-readable medium includes that permanent and non-permanent, removable and non-removable media can be with Realize that information is stored by any method or technique.Information can be computer readable instructions, data structure, the module of program or Other data.The example of the storage medium of computer includes, but are not limited to phase change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other kinds of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory techniques, CD-ROM are read-only Memory (CD-ROM), digital versatile disc (DVD) or other optical storage, magnetic cassettes, tape magnetic disk storage or Other magnetic storage devices or any other non-transmission medium, can be used for storage can be accessed by a computing device information.According to Herein defines, and computer-readable medium does not include non-persistent computer readable media (transitory media), such as The data-signal and carrier wave of modulation.

The embodiment of the present application is referring to according to the method for the embodiment of the present application, terminal device (system) and computer program The flowchart and/or the block diagram of product describes.It should be understood that flowchart and/or the block diagram can be realized by computer program instructions In each flow and/or block and flowchart and/or the block diagram in process and/or box combination.It can provide these Computer program instructions are set to general purpose computer, special purpose computer, Embedded Processor or other programmable data processing terminals Standby processor is to generate a machine, so that being held by the processor of computer or other programmable data processing terminal devices Capable instruction generates for realizing in one or more flows of the flowchart and/or one or more blocks of the block diagram The device of specified function.

These computer program instructions, which may also be stored in, is able to guide computer or other programmable data processing terminal devices In computer-readable memory operate in a specific manner, so that instruction stored in the computer readable memory generates packet The manufacture of command device is included, which realizes in one side of one or more flows of the flowchart and/or block diagram The function of being specified in frame or multiple boxes.

These computer program instructions can also be loaded into computer or other programmable data processing terminal devices, so that Series of operation steps are executed on computer or other programmable terminal equipments to generate computer implemented processing, thus The instruction executed on computer or other programmable terminal equipments is provided for realizing in one or more flows of the flowchart And/or in one or more blocks of the block diagram specify function the step of.

Although preferred embodiments of the embodiments of the present application have been described, once a person skilled in the art knows bases This creative concept, then additional changes and modifications can be made to these embodiments.So the following claims are intended to be interpreted as Including preferred embodiment and all change and modification within the scope of the embodiments of the present application.

Finally, it is to be noted that, herein, relational terms such as first and second and the like be used merely to by One entity or operation are distinguished with another entity or operation, without necessarily requiring or implying these entities or operation Between there are any actual relationship or orders.Moreover, the terms "include", "comprise" or its any other variant meaning Covering non-exclusive inclusion, so that process, method, article or terminal device including a series of elements not only wrap Those elements are included, but also including other elements that are not explicitly listed, or further includes for this process, method, article Or the element that terminal device is intrinsic.In the absence of more restrictions, being wanted by what sentence "including a ..." limited Element, it is not excluded that there is also other identical elements in process, method, article or the terminal device for including the element.

Processing method to a kind of interface element provided herein and a kind of processing unit of interface element above, into It has gone and has been discussed in detail, specific examples are used herein to illustrate the principle and implementation manner of the present application, the above implementation The explanation of example is merely used to help understand the present processes and its core concept；Meanwhile for the general technology people of this field Member, according to the thought of the application, there will be changes in the specific implementation manner and application range, in conclusion this explanation Book content should not be construed as the limitation to the application.

Claims

1. a kind of processing method of interface element characterized by comprising

Obtain interface description data；The interface description data include that interface element and the corresponding element of the interface element are special Levy data；

According to interface element described in the elemental characteristic data layout, obtain describing the structure of logical relation between interface element Change semantic code；

2. the method according to claim 1, wherein the interface according to the elemental characteristic data layout Element obtains describing the structuring semantic code of logical relation between interface element, comprising:

Create matrix；

Corresponding interface element is marked in the matrix according to the elemental characteristic data；The elemental characteristic data include inclined Move data, width data and altitude information；

Record is overlapped in other interface elements of same interface element, by other described interface elements as interface element, and returns The step of matrix is created described in receipt row；

Logical relation between each interface element is determined using the modification matrix, and structure is generated according to the logical relation Change semantic code.

3. according to the method described in claim 2, it is characterized in that, described determine each interface element using the modification matrix Between logical relation, comprising:

Each interface element in the modification matrix is converted, structuring semantic code is obtained；The structuring is semantic The brotherhood of interface element is described in code；

When the interface element has the interface element of overlapping, then the Interface Element is constructed in the structuring semantic code Element with the set membership between Chong Die interface element.

4. the method according to claim 1, wherein the structuring semantic code is by multiple data structure segments Composition, after the acquisition interface description data, further includes:

When the data structure segment is there are when matched data model, data structure segment is modified according to the data model.

5. according to the method described in claim 4, it is characterized in that, the data model has the element of corresponding interface element Logical relation between type and interface element, the data structure segment have element type and the boundary of corresponding interface element Logical relation between surface element, the determination data structure segment whether there is matched data model, comprising:

Judge whether the element type of the data model is consistent with the element type of the data structure segment, and, judgement Whether the logical relation of the data model is consistent with the logical relation of the data structure segment；

If the element type of the data model is consistent with the element type of the data structure segment, and, the data mould The logical relation of type is consistent with the logical relation of the data structure segment, it is determined that there are matched for the data structure segment Data model.

6. according to the method described in claim 4, it is characterized in that, described modify data structure piece according to the data model Section, comprising:

Obtain the processing function that the data model has been declared；

It is modified using the processing function for the data structure segment.

7. the method according to claim 1, wherein the interface according to the elemental characteristic data acquisition The recommendation code variables name of element, comprising:

From the fraternal interface element, the second language is extracted in the elemental characteristic data of father's interface element and/or sub-interface element Adopted information；

It is matched using the information array with default name knowledge base；

8. the method according to the description of claim 7 is characterized in that described obtain pushing away for the interface element according to matching result Recommend code variables name, comprising:

When the matching result is multiple candidate code variable names, the multiple candidate is obtained from the default name knowledge base The corresponding scoring of code variables name；

9. a kind of processing method of interface element characterized by comprising

Interface tool is freely built in offer；

When it is described freely build in interface tool receive interface element process instruction when, obtain what the process instruction was directed to Interface description data；The interface description data include interface element and the corresponding elemental characteristic data of the interface element；

10. a kind of processing unit of interface element characterized by comprising

Interface description data acquisition module, for obtaining interface description data；The interface description data include interface element with And the corresponding elemental characteristic data of the interface element；

Structuring semantic code obtains module, is used for the interface element according to the elemental characteristic data layout, is described The structuring semantic code of logical relation between interface element；

Code variables name is recommended to obtain module, the recommendation code for the interface element according to the elemental characteristic data acquisition Variable name；

Interface element names module, for using the recommendation code variables name to the Interface Element in the structuring semantic code Element is named.

11. a kind of freely build interface tool characterized by comprising

Interface description data acquisition module receives interface element process instruction in described freely build in interface tool for working as When, obtain the interface description data that the process instruction is directed to；The interface description data include interface element and the boundary The corresponding elemental characteristic data of surface element；

12. a kind of device characterized by comprising

One or more processors；With

One or more machine readable medias of instruction are stored thereon with, when being executed by one or more of processors, are made Obtain the processing method that described device executes such as claim 1-8 or one or more interface elements as claimed in claim 9.

13. one or more machine readable medias, are stored thereon with instruction, when executed by one or more processors, so that Described device executes the processing method such as claim 1-8 or one or more interface elements as claimed in claim 9.