CN108334341B - Method and device for positioning user interface UI component - Google Patents
Method and device for positioning user interface UI component Download PDFInfo
- Publication number
- CN108334341B CN108334341B CN201710598080.9A CN201710598080A CN108334341B CN 108334341 B CN108334341 B CN 108334341B CN 201710598080 A CN201710598080 A CN 201710598080A CN 108334341 B CN108334341 B CN 108334341B
- Authority
- CN
- China
- Prior art keywords
- component
- positioning
- interface
- ide
- target
- 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.)
- Active
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/34—Graphical or visual programming
Abstract
An embodiment of the specification provides a method and a device for positioning a user interface UI component, wherein the method comprises the following steps: receiving an operation instruction triggered on a code interface of an Integrated Development Environment (IDE); under the condition that the operation instruction meets a preset component positioning triggering condition, positioning to the position of a target UI component; and the target UI component is a component in the UI interface of the IDE corresponding to the code corresponding to the position triggering the operation instruction.
Description
Technical Field
The application relates to the technical field of computers, in particular to a method and a device for positioning a user interface UI component.
Background
An Integrated Development Environment (IDE) is an application program for providing a program Development Environment, and generally includes tools such as a code editor, a compiler, a debugger, and a graphical User Interface (gui), where the code editor is a software for program writing, a UI component can be added on the gui, and the UI component is a visual element for a computer to interact with an operator, such as an input box, a button, and the like.
In writing code using a code editor, an application developer often needs to find a UI component corresponding to the code from a graphical user interface to view the location of the UI component, as well as some other properties. Therefore, it is desirable to provide a faster method for positioning UI components.
Disclosure of Invention
An object of the embodiments of the present specification is to provide a method and an apparatus for locating a UI component of a user interface, so as to help an application developer quickly locate a UI component required by the application developer from a UI interface of an IDE.
In order to solve the above technical problem, the embodiments of the present specification are implemented as follows:
in a first aspect, a method for positioning a UI component is provided, the method comprising:
receiving an operation instruction triggered on a code interface of an Integrated Development Environment (IDE);
under the condition that the operation instruction meets a preset component positioning triggering condition, positioning to the position of a target UI component;
and the target UI component is a component in the UI interface of the IDE corresponding to the code corresponding to the position triggering the operation instruction.
In a second aspect, there is provided an apparatus for positioning a UI component, the apparatus comprising:
the system comprises a receiving unit, a processing unit and a processing unit, wherein the receiving unit is used for receiving an operation instruction triggered by a code interface of an Integrated Development Environment (IDE);
the positioning unit is used for positioning to the position of the target UI component under the condition that the operation instruction received by the receiving unit meets the preset component positioning triggering condition;
and the target UI component is a component in the UI interface of the IDE corresponding to the code corresponding to the position triggering the operation instruction.
In a third aspect, an electronic device is provided, including:
a processor; and
a memory arranged to store computer executable instructions that, when executed, cause the processor to:
receiving an operation instruction triggered on a code interface of an Integrated Development Environment (IDE);
under the condition that the operation instruction meets a preset component positioning triggering condition, positioning to the position of a target UI component;
and the target UI component is a component in the UI interface of the IDE corresponding to the code corresponding to the position triggering the operation instruction.
In a fourth aspect, a computer storage medium is provided that stores one or more programs that, when executed by an electronic device that includes a plurality of application programs, cause the electronic device to:
receiving an operation instruction triggered on a code interface of an Integrated Development Environment (IDE);
under the condition that the operation instruction meets a preset component positioning triggering condition, positioning to the position of a target UI component;
and the target UI component is a component in the UI interface of the IDE corresponding to the code corresponding to the position triggering the operation instruction.
As can be seen from the technical solutions provided by the embodiments of the present specification, the embodiments of the present specification can directly locate the position of the UI component by performing a certain operation on the code corresponding to the UI component in the code interface of the IDE, so as to achieve the purpose of quickly locating the UI component.
Drawings
In order to more clearly illustrate the embodiments of the present specification or the technical solutions in the prior art, the drawings needed to be used in the description of the embodiments or the prior art will be briefly introduced below, it is obvious that the drawings in the following description are only some embodiments described in the present specification, and for those skilled in the art, other drawings can be obtained according to the drawings without any creative effort.
FIG. 1 is a flow diagram of a method for locating a user interface UI component of one embodiment of the present description;
FIG. 2 is an example diagram of a UI interface of an IDE of one embodiment of the specification;
FIG. 3 is a diagram of an example code interface of an IDE of one embodiment of the present description;
FIG. 4 is a flow diagram of a method of positioning a user interface UI component of another embodiment of the present description;
FIG. 5 is a diagram of an example of code in a code interface of a mouse right click IDE according to one embodiment of the present description;
FIG. 6 is a diagram of an example of code in a code interface of a mouse right click IDE according to another embodiment of the present description;
FIG. 7 is a diagram of an example of locating menu options for one embodiment of the present description;
FIG. 8 is a diagram of an example of locating a menu option in another embodiment of the present description;
FIG. 9 is a diagram of an example of locating a menu option in another embodiment of the present description;
FIG. 10 is a flow diagram of a method of positioning a user interface UI component of another embodiment of the present description;
FIG. 11 is a schematic structural diagram of an electronic device according to an embodiment of the present description;
FIG. 12 is a schematic structural diagram of a pointing device of a user interface UI component according to an embodiment of the present disclosure.
Detailed Description
In order to make those skilled in the art better understand the technical solutions in the present specification, the technical solutions in the embodiments of the present specification will be clearly and completely described below with reference to the drawings in the embodiments of the present specification, and it is obvious that the described embodiments are only a part of the embodiments of the present specification, and not all of the embodiments. All other embodiments obtained by a person of ordinary skill in the art based on the embodiments in the present specification without any creative effort shall fall within the protection scope of the present specification.
The embodiment of the specification provides a method and a device for positioning a user interface UI component.
First, a method for positioning a UI component of a user interface provided in an embodiment of the present specification is described below.
It should be noted that the method provided by the embodiment of the present specification is applicable to an electronic device, and in practical application, the electronic device may include: such as a computer device, such as a notebook computer, a desktop computer, etc., and a server, etc., which are not limited in this specification.
FIG. 1 is a flow diagram of a method for positioning a user interface UI component of one embodiment of the present description, which may include the steps of, as shown in FIG. 1:
s102, receiving an operation instruction triggered by a code interface of the integrated development environment IDE.
For ease of understanding, some concepts in the embodiments of the present specification are first introduced:
an Integrated Development Environment (IDE) is an application program for providing a program Development Environment, and generally includes tools such as a code editor, a compiler, a debugger, and a graphical user interface. All software or software suites (sets) with this property can be referred to as integrated development environments, for example, Microsoft Visual Studio series, Borland C + + Builder, Delphi series, etc.
A Code Editor (Code Editor) is a software for programming, and generally has functions of syntax highlighting, sentence formatting, syntax error correction, auto-prompting, etc. in addition to a common text editing function, and the Code Editor may exist independently or be integrated in an IDE.
The graphical User Interface tool (UI Interface) is software for designing an Interface, and in the process of designing the UI Interface, a User Interface (UI) component can be placed at any position on the Interface, where the UI component is a visual element for a computer to interact with an operator, such as an Input box (Input), a button (button), and the like.
JavaScript language: JavaScript (JS for short) is an transliteration type script language, which is a dynamic type, weak type, prototype-based language and is internally provided with a support type. Its interpreter is called JavaScript engine, which is a part of the browser and is widely used in the client's scripting language.
Currently, most visualization IDEs can place a UI component on the UI interface of the IDE and name the UI component, which can facilitate referencing the UI component in code, as shown in fig. 2, which shows: the UI component 201 is placed in the UI interface 200 of the IDE, and the example of naming the UI component 201 is that the naming of the UI component 201 can be completed by inputting the variable name of the UI component 201, such as 'EdtaFatrinonoPause', in the naming box 202. When the UI component is used, the variable name of the UI component is directly used in the code, and the property of the UI component can be set or the UI component method can be called, as shown in fig. 3, where fig. 3 shows: an example of setting the Value attribute 301 of the UI component named "edtaftanonopause" to 0 in the code interface 300 of the IDE.
In this embodiment, the code interface of the IDE refers to a code editing interface of a code editor of the IDE, and the UI interface of the IDE refers to a design interface of a graphical user interface tool of the IDE.
In this embodiment of the present specification, the operation instruction may be triggered by a mouse on the code interface of the IDE, may be triggered by a keyboard on the code interface of the IDE, may be triggered by the mouse and the keyboard together on the code interface of the IDE, and may also be triggered by a touch screen operation of a user on the code interface of the IDE.
In this embodiment of this specification, the operation instruction may be triggered for a certain section of code on the code interface of the IDE, or may be triggered for a blank location on the code interface of the IDE, which is not limited in this specification.
S104, under the condition that the operation instruction meets a preset component positioning triggering condition, positioning to the position of the target UI component; the target UI component is a component in the UI interface of the IDE corresponding to the code corresponding to the position of the trigger operation instruction.
In this embodiment, the preset component location triggering condition refers to a condition for triggering location of a specific UI component by a code interface of the IDE.
In this embodiment of the present specification, in a case that the operation instruction satisfies a preset component positioning trigger condition, the position of the target UI component on the UI interface of the IDE is located, and specifically, the focus of the UI interface of the IDE may be located on the target UI component.
It is understood that the code interface of the IDE generally includes one or more segments of code, and in an alternative embodiment provided in this specification, the S104 may include:
and positioning to the position of the target UI component under the condition that the position corresponding code of the trigger operation instruction contains the variable name of the target UI component.
In this embodiment, the operation instruction may be an instruction triggered by a preset type operation of the mouse, where the preset operation of the mouse may include: right click operation of the mouse, or left double click operation of the mouse.
In this case, the S104 may specifically include:
under the condition that the position corresponding code triggering the operation instruction comprises the variable name of the target UI component and the operation instruction is an instruction triggered by right click operation of a mouse, positioning the position of the target UI component; alternatively, the first and second electrodes may be,
and when the position corresponding code triggering the operation instruction comprises the variable name of the target UI component and the operation instruction is an instruction triggered by the double-click operation of the left key of the mouse, positioning the position of the target UI component.
In the present embodiment, the operation command may be a command triggered by at least one function key of the keyboard. In this case, the S104 may specifically include:
and if the position corresponding code triggering the operation instruction comprises the variable name of the target UI component and the operation instruction is an instruction triggered by at least one function key of the keyboard, positioning the position of the target UI component.
For convenience of understanding, the present embodiment will be described by taking an example of a variable name of a UI component in a code interface of an IDE right-clicking with a mouse. As shown in FIG. 4, FIG. 4 shows a partial code fragment in the code interface of the IDE:
wherein "EdtaFTERNOONPause" in the code fragment is the variable name of a UI component on the UI interface of the IDE.
As shown in fig. 4, "edtaftanoonpause" in the right-click code section of the mouse, since the operation instruction triggered by the right-click operation of the mouse is triggered by the right-click operation of the mouse, and the code at the right-click position of the mouse contains the variable name "edtaftanoonpause" of a UI component, that is, the component location triggering condition is satisfied, the position where the UI component with the variable name "edtaftanoonpause" is located.
In another alternative embodiment provided in this specification, the S104 may include:
and under the condition that the code corresponding to the position of the trigger operation instruction belongs to the method of the target UI component, positioning to the position of the target UI component.
In Java, a method refers to an ordered combination of code used to solve a class of problems. In the present embodiment, a plurality of pieces of code constitute a method of a target UI component.
In this embodiment, the operation instruction may be an instruction triggered by a preset type operation of the mouse, where the preset operation of the mouse may include: right click operation of the mouse, or left double click operation of the mouse.
In this case, the step S104 may include:
under the condition that a code corresponding to the position triggering the operation instruction belongs to a method of a target UI component and the operation instruction is an instruction triggered by right click operation of a mouse, positioning to the position of the target UI component; alternatively, the first and second electrodes may be,
and under the condition that the code corresponding to the position triggering the operation instruction belongs to the method of the target UI component and the operation instruction is an instruction triggered by the double-click operation of the left key of the mouse, positioning to the position of the target UI component.
In the present embodiment, the operation command may be a command triggered by at least one function key of the keyboard. In this case, the step S104 may include:
and under the condition that the code corresponding to the position triggering the operation instruction belongs to the method of the target UI component and the operation instruction is an instruction triggered by at least one function key of the keyboard, positioning to the position of the target UI component.
For the convenience of understanding, the present embodiment will be described by taking a code in a code interface of a right mouse click IDE as an example. As shown in FIG. 5, FIG. 5 shows a partial code fragment in the code interface of the IDE:
wherein, the method of the code fragment is "Private Sub cmdCleer _ Click ()". As shown in FIG. 5, "_____ in the code segment is right-clicked by the mouse, since the operation instruction triggered by the code interface of the IDE is triggered by the right-Click operation of the mouse, and the code" ______ at the right-Click position of the mouse belongs to the "Private Sub cmdClean _ Click ()", i.e. the component location triggering condition is satisfied, the UI component corresponding to the "Private Sub cmdClean _ Click ()" is located.
It can be seen from the above embodiments that, the embodiment can directly locate the position of the UI component by performing a certain operation on the code corresponding to the UI component in the code interface of the IDE, thereby achieving the purpose of quickly locating the UI component.
In this embodiment of the present specification, when the location of the target UI component is located, the UI interface of the IDE may be opened in the background, and the location of the target UI component may be located in the UI interface opened in the background.
In view of more intuitively presenting the UI component to the user, in the case that the operation instruction satisfies the preset component positioning triggering condition, the code interface of the IDE may jump directly to the UI interface of the IDE, and position the location of the target UI component in the UI interface opened in the foreground, at this time, in another embodiment provided in this specification, the following steps may be added to the embodiment shown in fig. 1:
and under the condition that the operation instruction meets the preset component positioning triggering condition, switching to the UI interface of the IDE where the target UI component is located from the code interface of the IDE. That is, in the case that the operation instruction meets the preset component positioning trigger condition, the code interface of the IDE is switched to the UI interface of the IDE where the target UI component is located, and the target UI component is positioned on the UI interface of the IDE.
In this embodiment of the present specification, specifically, under the condition that the position corresponding code of the trigger operation instruction includes the variable name of the target UI component, the code interface of the IDE may be switched to the UI interface of the IDE where the target UI component is located, and the position where the target UI component is located may be located.
In this embodiment of the present specification, the operation instruction may be an instruction triggered by a preset type operation of a mouse, where the preset operation of the mouse may include: right click operation of the mouse, or left double click operation of the mouse. At this time, specifically, under the condition that the position corresponding code triggering the operation instruction includes the variable name of the target UI component and the operation instruction is an instruction triggered by right click operation of the mouse, the code interface of the IDE is switched to the UI interface of the IDE where the target UI component is located, and the position where the target UI component is located; alternatively, the first and second electrodes may be,
and under the condition that the position corresponding code triggering the operation instruction comprises the variable name of the target UI component and the operation instruction is an instruction triggered by the left-key double-click operation of the mouse, switching the code interface of the IDE to the UI interface of the IDE where the target UI component is located and positioning the UI interface to the position where the target UI component is located.
In addition, in the embodiment of the present specification, the operation instruction may also be an instruction triggered by at least one function key of the keyboard. At this time, specifically, when the position corresponding code triggering the operation instruction includes a variable name of the target UI component and the operation instruction is an instruction triggered by at least one function key of the keyboard, the code interface of the IDE may be switched to the UI interface of the IDE where the target UI component is located, and the position of the target UI component may be located.
As can be seen from the above embodiments, in the embodiment, when the operation instruction meets the preset component positioning trigger condition, the code interface of the IDE can directly jump to the UI interface of the IDE, and the position of the target UI component is positioned in the UI interface opened in the foreground, so that the user can intuitively and quickly find the target UI component.
In another embodiment provided in this specification, on the basis of the embodiment shown in fig. 1, when the target UI component is located, the target UI component on the UI interface of the IDE may be differentially displayed, so that the user may find the target UI component at the first time, where the manner of differential display may include at least one of: highlight display, flash display, and zoom display, which are not limited in the embodiments of the present specification.
For example, when the location of the target UI component is located, the target UI component on the UI interface of the IDE is highlighted to be visually distinguished from other UI components on the UI interface of the IDE; or when the position of the target UI component is located, the target UI component on the UI interface of the IDE is subjected to flashing display so as to be distinguished from other UI components on the UI interface of the IDE in appearance; or, when the position of the target UI component is located, the target UI component on the UI interface of the IDE is magnified and displayed, specifically, the original display size can be restored after a period of magnification, so as to distinguish the target UI component from other UI components on the UI interface of the IDE in appearance; in addition, other color (e.g., yellow, red, black, etc.) displays may also be performed on the target UI component on the UI interface of the IDE to distinguish it from other UI components on the UI interface of the IDE in appearance when the position of the target UI component is located.
As can be seen from the above embodiments, in the embodiment, when the position of the target UI component is located, the target UI component on the UI interface of the IDE can be displayed in a differentiated manner so as to be distinguished from other UI components on the UI interface of the IDE in appearance, so that the target UI component is displayed to the user in a striking manner, and the user can find the target UI component intuitively and quickly.
Fig. 6 is a flowchart of a positioning method of a UI component of a user interface according to another embodiment of the present specification, and as shown in fig. 6, in order to avoid that an operation instruction randomly triggered by a user with respect to a code interface of an IDE is mistaken as an operation instruction for triggering positioning of a UI component, the embodiment of the present specification may add a mechanism for further confirmation by the user, at this time, the method may include the following steps:
s602, receiving an operation instruction triggered in a code interface of the integrated development environment IDE.
S602 in the embodiment of this specification is similar to S102 in the embodiment shown in fig. 1, and details of the embodiment of this specification are not repeated herein, please refer to contents of S102 in the embodiment shown in fig. 1.
S604, when the operation instruction meets the preset component positioning triggering condition, popping up a positioning menu option, wherein the positioning menu option comprises a sub option used for confirming the position of the target UI component, and the target UI component is a component in the UI interface of the IDE corresponding to the code corresponding to the position of the triggering operation instruction.
In this specification embodiment, the location menu option may pop up at any position of the code interface of the IDE, for example, the location menu option may pop up at the top of the code interface of the IDE, or the location menu option may pop up at the bottom of the code interface of the IDE, or the location menu option may pop up at the left of the code interface of the IDE, or the location menu option may pop up at the right of the code interface of the IDE, or the location menu option may pop up at the left of the position where the operation instruction is triggered in the code interface of the IDE, or the location menu option may pop up at the right of the position where the operation instruction is triggered in the code interface of the IDE. In consideration of the user's usage habits, it is preferable that a positioning menu option may pop up to the right of the position where the operation instruction is triggered in the code interface of the IDE.
In this embodiment, the positioning menu option may include multiple sub-options, and each sub-option corresponds to a different positioning manner for confirming positioning to the position where the target UI component is located.
It is understood that the code interface of the IDE generally includes one or more segments of code, and in an alternative embodiment provided in this specification, the step S604 may include:
and popping up a positioning menu option under the condition that the position corresponding code of the trigger operation instruction contains the variable name of the target UI component.
In this embodiment, the operation instruction may be an instruction triggered by a preset type operation of the mouse, where the preset operation of the mouse may include: right click operation of the mouse, or left double click operation of the mouse.
In this case, the step S604 may specifically include:
popping up a positioning menu option under the condition that a position corresponding code triggering an operation instruction comprises a variable name of a target UI component and the operation instruction is an instruction triggered by right click operation of a mouse; alternatively, the first and second electrodes may be,
and popping up a positioning menu option under the condition that the position corresponding code triggering the operation instruction comprises the variable name of the target UI component and the operation instruction is an instruction triggered by the double-click operation of the left key of the mouse.
In the present embodiment, the operation command may be a command triggered by at least one function key of the keyboard. In this case, the step S604 may specifically include:
and popping up a positioning menu option under the condition that the position corresponding code triggering the operation instruction comprises the variable name of the target UI component and the operation instruction is an instruction triggered by at least one function key of the keyboard.
For the convenience of understanding, the present embodiment is described with reference to fig. 4, fig. 7 and fig. 8, taking the variable name of a UI component in the code interface of the IDE right-click mouse, and the pop-up pointing menu option as an example. As shown in FIG. 4, FIG. 4 shows a partial code fragment in the code interface of the IDE:
wherein "EdtaFTERNOONPause" in the code fragment is the variable name of a UI component on the UI interface of the IDE.
As shown in fig. 4, "edtaftanoonpause" in the right click code segment of the mouse, since the operation instruction triggered by the right click operation of the mouse is triggered by the right click operation of the mouse, and the code at the right click position of the mouse includes a variable name "edtaftanoonpause" of the UI component, that is, the component location triggering condition is satisfied, the location menu option shown in fig. 7 is popped up, the location menu option is located at the right side of the code at the right click position of the mouse, and the location menu option includes a sub-option "jump to the UI component corresponding to the variable name".
Or when the component positioning triggering condition is met, popping up a positioning menu option shown in fig. 8, wherein the positioning menu option is located on the right side of the code at the right click position of the mouse, and the positioning menu option comprises two sub-options of "jump to the UI component corresponding to the variable name" and "jump to the UI component corresponding to the method to which the code belongs".
Alternatively, when the component positioning trigger condition is satisfied, the positioning menu options shown in fig. 7 and 8 are simultaneously popped up.
In another alternative embodiment provided in this specification, the step S604 may include:
and under the condition that the code corresponding to the position of the trigger operation instruction belongs to the method of the target UI component, popping up a positioning menu option.
In Java, a method refers to an ordered combination of code used to solve a class of problems. In the present embodiment, a plurality of pieces of code constitute a method of a target UI component.
In this embodiment, the operation instruction may be an instruction triggered by a preset type operation of the mouse, where the preset operation of the mouse may include: right click operation of the mouse, or left double click operation of the mouse.
In this case, the step S604 may specifically include:
popping up a positioning menu option under the condition that a code corresponding to the position triggering the operation instruction belongs to a method of a target UI component and the operation instruction is an instruction triggered by right click operation of a mouse; alternatively, the first and second electrodes may be,
and popping up a positioning menu option under the condition that a code corresponding to the position triggering the operation instruction belongs to the method of the target UI component and the operation instruction is an instruction triggered by the double-click operation of the left key of the mouse.
In the present embodiment, the operation command may be a command triggered by at least one function key of the keyboard. In this case, the step S604 may specifically include:
and popping up a positioning menu option under the condition that a code corresponding to the position triggering the operation instruction belongs to the method of the target UI component and the operation instruction is an instruction triggered by at least one function key of the keyboard.
For the convenience of understanding, the embodiment will be described with reference to fig. 5 and 9 by taking a code in the code interface of the IDE right-click mouse and pop-up pointing menu option as an example. As shown in FIG. 5, FIG. 5 shows a partial code fragment in the code interface of the IDE:
wherein, the method of the code fragment is "Private Sub cmdCleer _ Click ()". As shown in FIG. 5, "____ in the code segment is right-clicked by the mouse, since the operation command triggered by the code interface of the IDE is triggered by the right-Click operation of the mouse, and the code" ______ at the right-Click position of the mouse belongs to "Private Sub cmdlear _ Click ()", i.e. the component location triggering condition is met, the location menu Sub-option shown in FIG. 9 is popped up, the location menu option is located at the right side of the code at the right-Click position of the mouse, and the location menu option includes a Sub-option "jump to the UI component corresponding to the method to which the code belongs".
And S606, responding to the click operation of the user on the sub-option in the positioning menu option, and positioning to the position of the target UI component.
Following the example in S604, for example, clicking the sub-option "jump to the UI component corresponding to the variable name" in the positioning menu option shown in fig. 7, the position of the UI component corresponding to the variable name "edtaftanonopause" is positioned.
For another example, if a sub-option "jump to the UI component corresponding to the variable name" in the positioning menu option shown in fig. 8 is clicked, the position of the UI component corresponding to the variable name "edtafnonopause" is positioned; clicking the Sub-option "jump to the UI component corresponding to the method to which the code belongs" in the positioning menu option shown in fig. 8, positions the UI component corresponding to "Private Sub cmdclean _ Click ()".
For another example, if the Sub-option "jump to the UI component corresponding to the method to which the code belongs" in the positioning menu option shown in fig. 9 is clicked, the position of the UI component corresponding to "Private Sub cmdclean _ Click ()" is positioned.
As can be seen from the above embodiments, in the embodiment, when the operation instruction meets the preset component positioning triggering condition, the positioning menu option pops up, so that the user can confirm whether the UI component needs to be positioned in one step, thereby avoiding that the operation instruction randomly triggered by the user for the code interface of the IDE is mistaken as the operation instruction for triggering the positioning of the UI component, and preventing misoperation.
Fig. 10 is a flowchart of a method for locating a UI component in a user interface according to another embodiment of the present specification, and as shown in fig. 10, in this embodiment of the present specification, finding the UI component from the UI interface of the IDE may be implemented by right-clicking a mouse on a variable name of the UI component in a code interface of the IDE, at this time, the method may include the following steps:
s1002, receiving an operation instruction triggered by a code interface of the integrated development environment IDE.
For ease of understanding, some concepts in the embodiments of the present specification are first introduced:
an Integrated Development Environment (IDE) is an application program for providing a program Development Environment, and generally includes tools such as a code editor, a compiler, a debugger, and a graphical user interface. All software or software suites (sets) with this property can be referred to as integrated development environments, for example, Microsoft Visual Studio series, Borland C + + Builder, Delphi series, etc.
A Code Editor (Code Editor) is a software for programming, and generally has functions of syntax highlighting, sentence formatting, syntax error correction, auto-prompting, etc. in addition to a common text editing function, and the Code Editor may exist independently or be integrated in an IDE.
The graphical User Interface tool (UI Interface) is software for designing an Interface, and in the process of designing the UI Interface, a User Interface (UI) component can be placed at any position on the Interface, where the UI component is a visual element for a computer to interact with an operator, such as an Input box (Input), a button (button), and the like.
In this embodiment, the code interface of the IDE refers to a code editing interface of a code editor of the IDE, and the UI interface of the IDE refers to a design interface of a graphical user interface tool of the IDE.
In this embodiment of the present specification, the operation instruction may be triggered by a mouse on the code interface of the IDE, may be triggered by a keyboard on the code interface of the IDE, may be triggered by the mouse and the keyboard together on the code interface of the IDE, and may also be triggered by a touch screen operation of a user on the code interface of the IDE.
In this embodiment of this specification, the operation instruction may be triggered for a certain section of code on the code interface of the IDE, or may be triggered for a blank location on the code interface of the IDE, which is not limited in this specification.
And S1004, when the operation instruction is an instruction triggered by right click operation of the mouse and the code corresponding to the right click position of the mouse comprises a variable name of the target UI component, popping up a positioning menu option, wherein the positioning menu option comprises a sub option for confirming positioning to the position of the target UI component, and the target UI component is a component in the UI interface of the IDE corresponding to the code corresponding to the position of the operation instruction.
And S1006, in response to the click operation of the user on the sub-option in the positioning menu option, positioning to the position of the target UI component.
In this embodiment of the present description, if a right mouse button is clicked on a character of a UI component variable name in the code interface of the IDE, a positioning menu option pops up, preferably, a positioning menu option pops up to the right of a position where an operation instruction is triggered in the code interface of the IDE, a sub-option jumping to the UI component is provided on the positioning menu option, and clicking the sub-option can open the UI interface in the IDE and quickly position the UI component on the UI interface, and in addition, a target UI component can be highlighted. Therefore, the method can be quickly switched between the code interface and the UI interface of the IDE, and can quickly locate the variable name of the UI component and the position of the variable name on the UI interface, so that the development efficiency of developers is greatly improved. Therefore, when code development and UI interface design are carried out in the IDE, the development efficiency can be effectively improved, and developers can more intuitively carry out the code development and the UI interface design.
Fig. 11 is a schematic structural diagram of an electronic device according to an embodiment of the present specification. Referring to fig. 11, at a hardware level, the electronic device includes a processor, and optionally further includes an internal bus, a network interface, and a memory. The Memory may include a Memory, such as a Random-Access Memory (RAM), and may further include a non-volatile Memory, such as at least 1 disk Memory. Of course, the electronic device may also include hardware required for other services.
The processor, the network interface, and the memory may be connected to each other via an internal bus, which may be an ISA (Industry Standard Architecture) bus, a PCI (Peripheral Component Interconnect) bus, an EISA (Extended Industry Standard Architecture) bus, or the like. The bus may be divided into an address bus, a data bus, a control bus, etc. For ease of illustration, only one double-headed arrow is shown in FIG. 11, but that does not indicate only one bus or one type of bus.
And the memory is used for storing programs. In particular, the program may include program code comprising computer operating instructions. The memory may include both memory and non-volatile storage and provides instructions and data to the processor.
The processor reads the corresponding computer program from the nonvolatile memory into the memory and then runs the computer program to form the positioning device of the UI component of the user interface on the logic level. The processor is used for executing the program stored in the memory and is specifically used for executing the following operations:
receiving an operation instruction triggered on a code interface of an Integrated Development Environment (IDE);
under the condition that the operation instruction meets a preset component positioning triggering condition, positioning to the position of a target UI component;
and the target UI component is a component in the UI interface of the IDE corresponding to the code corresponding to the position triggering the operation instruction.
The method performed by the positioning apparatus of the UI component as disclosed in the embodiment of fig. 11 in this specification may be applied to or implemented by a processor. The processor may be an integrated circuit chip having signal processing capabilities. In implementation, the steps of the above method may be performed by integrated logic circuits of hardware in a processor or instructions in the form of software. The Processor may be a general-purpose Processor, including a Central Processing Unit (CPU), a Network Processor (NP), and the like; but also Digital Signal Processors (DSPs), Application Specific Integrated Circuits (ASICs), Field Programmable Gate Arrays (FPGAs) or other Programmable logic devices, discrete Gate or transistor logic devices, discrete hardware components. The various methods, steps and logic blocks disclosed in the embodiments of the present specification may be implemented or performed. A general purpose processor may be a microprocessor or the processor may be any conventional processor or the like. The steps of a method disclosed in connection with the embodiments of the present specification may be embodied directly in a hardware decoding processor, or in a combination of hardware and software modules in the decoding processor. The software module may be located in ram, flash memory, rom, prom, or eprom, registers, etc. storage media as is well known in the art. The storage medium is located in a memory, and a processor reads information in the memory and completes the steps of the method in combination with hardware of the processor.
The electronic device may further execute the method in fig. 1, and implement the functions of the positioning apparatus of the UI component in the embodiment shown in fig. 1, which are not described herein again in this specification.
Of course, besides the software implementation, the electronic device in this specification does not exclude other implementations, such as logic devices or a combination of software and hardware, and the like, that is, the execution subject of the following processing flow is not limited to each logic unit, and may also be hardware or logic devices.
Embodiments of the present specification also propose a computer-readable storage medium storing one or more programs, the one or more programs comprising instructions, which when executed by a portable electronic device comprising a plurality of application programs, are capable of causing the portable electronic device to perform the method of the embodiment shown in fig. 1, and in particular for performing the method of:
receiving an operation instruction triggered on a code interface of an Integrated Development Environment (IDE);
under the condition that the operation instruction meets a preset component positioning triggering condition, positioning to the position of a target UI component;
and the target UI component is a component in the UI interface of the IDE corresponding to the code corresponding to the position triggering the operation instruction.
FIG. 12 is a schematic structural diagram of a pointing device of a user interface UI component according to an embodiment of the present disclosure. Referring to fig. 12, in one software implementation, the positioning apparatus 1200 of the UI component may include: a receiving unit 1201 and a positioning unit 1202, wherein,
a receiving unit 1201, configured to receive an operation instruction triggered on a code interface of an integrated development environment IDE;
a positioning unit 1202, configured to position the target UI component in a case that the operation instruction received by the receiving unit 1201 meets a preset component positioning trigger condition;
and the target UI component is a component in the UI interface of the IDE corresponding to the code corresponding to the position triggering the operation instruction.
It can be seen from the above embodiments that, the embodiment can directly locate the position of the UI component by performing a certain operation on the code corresponding to the UI component in the code interface of the IDE, thereby achieving the purpose of quickly locating the UI component.
Optionally, as an embodiment, the positioning unit 1202 may include:
and the first position positioning subunit is used for positioning to the position of the target UI component under the condition that the position corresponding code triggering the operation instruction contains the variable name of the target UI component.
Optionally, as an embodiment, the positioning unit 1202 may include:
and the second position positioning subunit is used for positioning to the position of the target UI component under the condition that the code corresponding to the position triggering the operation instruction belongs to the method of the target UI component.
Optionally, as an embodiment, the operation instruction is an instruction triggered by a preset type operation of the mouse; or the operation instruction is an instruction triggered by at least one function key of the keyboard.
Optionally, as an embodiment, the preset operation of the mouse may include:
right click operation of the mouse, or left double click operation of the mouse.
Optionally, as an embodiment, the positioning apparatus 1200 of the UI component may further include:
the menu option popup unit is used for popping up a positioning menu option, and the positioning menu option comprises a sub option for confirming the positioning to the position of the target UI component;
an operation response unit, configured to trigger the positioning unit 1202 to perform the operation of positioning to the position where the target UI component is located, in response to a click operation of the user on the sub option in the positioning menu option.
Therefore, the embodiment can pop up the positioning menu option under the condition that the operation instruction meets the preset component positioning triggering condition, so that whether the UI component needs to be positioned or not is confirmed by the user in one step, the operation instruction randomly triggered by the user aiming at the code interface of the IDE is prevented from being mistaken as the operation instruction for triggering the positioning of the UI component, and misoperation is prevented.
Optionally, as an embodiment, the positioning menu option includes multiple sub-options, and each sub-option corresponds to a different positioning manner for confirming positioning to the position where the target UI component is located.
Optionally, as an embodiment, the positioning apparatus 1200 of the UI component may further include:
and the interface switching unit is used for switching the code interface of the IDE to the UI interface of the IDE where the target UI component is located under the condition that the operation instruction meets a preset component positioning triggering condition.
Therefore, in the embodiment, under the condition that the operation instruction meets the preset component positioning triggering condition, the code interface of the IDE can directly jump to the UI interface of the IDE, and the position of the target UI component is positioned in the UI interface opened in the foreground, so that a user can intuitively and quickly find the target UI component.
Optionally, as an embodiment, the positioning apparatus 1200 of the UI component may further include:
and the display unit is used for displaying the target UI components on the UI interface of the IDE in a distinguishing way.
Therefore, when the position of the target UI component is located, the target UI component on the UI interface of the IDE can be displayed in a distinguishing mode so as to be distinguished from other UI components on the UI interface of the IDE in appearance, so that the target UI component can be displayed to a user in a striking mode, and the user can find the target UI component intuitively and quickly.
The positioning apparatus 1200 of the UI component can also execute the method in the embodiment shown in fig. 1, and implement the functions of the positioning apparatus of the UI component in the embodiment shown in fig. 12, which are not described herein again in this specification.
In short, the above description is only a preferred embodiment of the present disclosure, and is not intended to limit the scope of the present disclosure. Any modification, equivalent replacement, improvement and the like made within the spirit and principle of the present specification shall be included in the protection scope of the present specification.
The systems, devices, modules or units illustrated in the above embodiments may be implemented by a computer chip or an entity, or by a product with certain functions. One typical implementation device is a computer. In particular, the computer may be, for example, a personal computer, a laptop computer, a cellular telephone, a camera phone, a smartphone, a personal digital assistant, a media player, a navigation device, an email device, a game console, a tablet computer, a wearable device, or a combination of any of these devices.
Computer-readable media, including both non-transitory and non-transitory, removable and non-removable media, may implement information storage by any method or technology. The information may be computer readable instructions, data structures, modules of a program, or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), Static Random Access Memory (SRAM), Dynamic Random Access Memory (DRAM), other types of Random Access Memory (RAM), Read Only Memory (ROM), Electrically Erasable Programmable Read Only Memory (EEPROM), flash memory or other memory technology, compact disc read only memory (CD-ROM), Digital Versatile Discs (DVD) or other optical storage, magnetic cassettes, magnetic tape magnetic disk storage or other magnetic storage devices, or any other non-transmission medium that can be used to store information that can be accessed by a computing device. As defined herein, a computer readable medium does not include a transitory computer readable medium such as a modulated data signal and a carrier wave.
It should also be noted that the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising an … …" does not exclude the presence of other like elements in a process, method, article, or apparatus that comprises the element.
The embodiments in the present specification are described in a progressive manner, and the same and similar parts among the embodiments are referred to each other, and each embodiment focuses on the differences from the other embodiments. In particular, for the system embodiment, since it is substantially similar to the method embodiment, the description is simple, and for the relevant points, reference may be made to the partial description of the method embodiment.
Claims (10)
1. A method of positioning a user interface, UI, component, the method comprising:
receiving an operation instruction triggered on a code interface of an Integrated Development Environment (IDE);
popping up a positioning menu option under the condition that the operation instruction meets a preset component positioning triggering condition, wherein the positioning menu option comprises a sub option for confirming the positioning to the position of the target UI component; responding to the click operation of the user on the sub-options in the positioning menu option, switching to an IDE UI (integrated development environment) interface where the target UI component is located from an IDE code interface, and positioning to the position of the target UI component on the IDE UI interface;
and the target UI component is a component in the UI interface of the IDE corresponding to the code corresponding to the position triggering the operation instruction.
2. The method of claim 1, wherein in the case that the operation instruction meets a preset component positioning trigger condition, positioning to a position where a target UI component is located comprises:
and under the condition that the position corresponding code triggering the operation instruction contains the variable name of the target UI component, positioning to the position of the target UI component.
3. The method of claim 1, wherein in the case that the operation instruction meets a preset component positioning trigger condition, positioning to a position where a target UI component is located comprises:
and under the condition that the code corresponding to the position triggering the operation instruction belongs to the method of the target UI component, positioning to the position of the target UI component.
4. The method according to claim 2 or 3, wherein the operation instruction is an instruction triggered by a preset type operation of a mouse; or the operation instruction is an instruction triggered by at least one function key of the keyboard.
5. The method of claim 4, the preset operation of the mouse comprising:
right click operation of the mouse, or left double click operation of the mouse.
6. The method of claim 1, wherein the positioning menu option comprises a plurality of sub-options, each sub-option corresponding to a different positioning mode for confirming positioning to a location where the target UI component is located.
7. The method of claim 1, further comprising:
and displaying the target UI components on the UI interface of the IDE in a distinguishing way.
8. An apparatus for positioning a User Interface (UI) component, the apparatus comprising:
the system comprises a receiving unit, a processing unit and a processing unit, wherein the receiving unit is used for receiving an operation instruction triggered by a code interface of an Integrated Development Environment (IDE);
the positioning unit is used for popping up a positioning menu option under the condition that the operation instruction received by the receiving unit meets a preset component positioning triggering condition, wherein the positioning menu option comprises a sub option used for confirming the position of a target UI component; responding to the click operation of the user on the sub-options in the positioning menu option, switching to an IDE UI (integrated development environment) interface where the target UI component is located from an IDE code interface, and positioning to the position of the target UI component on the IDE UI interface;
and the target UI component is a component in the UI interface of the IDE corresponding to the code corresponding to the position triggering the operation instruction.
9. An electronic device, comprising:
a processor; and
a memory arranged to store computer executable instructions that, when executed, cause the processor to:
receiving an operation instruction triggered on a code interface of an Integrated Development Environment (IDE);
popping up a positioning menu option under the condition that the operation instruction meets a preset component positioning triggering condition, wherein the positioning menu option comprises a sub option for confirming the positioning to the position of the target UI component; responding to the click operation of the user on the sub-options in the positioning menu option, switching to an IDE UI (integrated development environment) interface where the target UI component is located from an IDE code interface, and positioning to the position of the target UI component on the IDE UI interface;
and the target UI component is a component in the UI interface of the IDE corresponding to the code corresponding to the position triggering the operation instruction.
10. A computer storage medium storing one or more programs that, when executed by an electronic device including a plurality of application programs, cause the electronic device to:
receiving an operation instruction triggered on a code interface of an Integrated Development Environment (IDE);
popping up a positioning menu option under the condition that the operation instruction meets a preset component positioning triggering condition, wherein the positioning menu option comprises a sub option for confirming the positioning to the position of the target UI component; responding to the click operation of the user on the sub-options in the positioning menu option, switching to an IDE UI (integrated development environment) interface where the target UI component is located from an IDE code interface, and positioning to the position of the target UI component on the IDE UI interface;
and the target UI component is a component in the UI interface of the IDE corresponding to the code corresponding to the position triggering the operation instruction.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710598080.9A CN108334341B (en) | 2017-07-20 | 2017-07-20 | Method and device for positioning user interface UI component |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710598080.9A CN108334341B (en) | 2017-07-20 | 2017-07-20 | Method and device for positioning user interface UI component |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN108334341A CN108334341A (en) | 2018-07-27 |
| CN108334341B true CN108334341B (en) | 2021-11-30 |
Family
ID=62923007
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201710598080.9A Active CN108334341B (en) | 2017-07-20 | 2017-07-20 | Method and device for positioning user interface UI component |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN108334341B (en) |
Families Citing this family (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109901764A (en) * | 2019-01-29 | 2019-06-18 | 深圳点猫科技有限公司 | A kind of code editor right-click menu function realizing method and electronic equipment |
| CN111562917B (en) * | 2019-02-13 | 2023-06-23 | 阿里巴巴集团控股有限公司 | Method and device for configuring input variable group |
| CN113535037A (en) * | 2021-07-23 | 2021-10-22 | 广州博冠信息科技有限公司 | Interactive display method and device for command line terminal, computer readable medium and equipment |
Family Cites Families (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20030033588A1 (en) * | 2001-01-29 | 2003-02-13 | John Alexander | System, method and article of manufacture for using a library map to create and maintain IP cores effectively |
| US9489418B2 (en) * | 2007-04-27 | 2016-11-08 | International Business Machines Corporation | Processing database queries embedded in application source code from within integrated development environment tool |
| US8789014B2 (en) * | 2011-05-13 | 2014-07-22 | Microsoft Corporation | Managing a working set in an integrated development environment |
| CN105389197B (en) * | 2015-10-13 | 2019-02-26 | 北京百度网讯科技有限公司 | Operation method and device for capturing for the virtualization system based on container |
-
2017
- 2017-07-20 CN CN201710598080.9A patent/CN108334341B/en active Active
Non-Patent Citations (1)
| Title |
|---|
| Chrome开发者工具不完全指南（一、基础功能篇）;卖烧烤夫斯基;《https://www.cnblogs.com/constantince/p/4565261.html》;20150615;第1-7页 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN108334341A (en) | 2018-07-27 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US8312383B2 (en) | Mashup application processing system | |
| CN113259224B (en) | Method and device for sending customer service data | |
| US9292156B2 (en) | Enabling a user to invoke a function via a shortcut key in a multi-window computing environment | |
| CN105868166B (en) | Regular expression generation method and system | |
| CN108334341B (en) | Method and device for positioning user interface UI component | |
| CN105843547B (en) | A kind of page sliding method and device | |
| CN113055525A (en) | File sharing method, device, equipment and storage medium | |
| US20180239777A1 (en) | Method and apparatus for dissolving folder and mobile terminal | |
| KR20150132161A (en) | Javascript debugging using just my code | |
| US8984487B2 (en) | Resource tracker | |
| CN112286782A (en) | Control shielding detection method, software detection method, device and medium | |
| CA2868991C (en) | Associating content with a graphical interface window using a fling gesture | |
| CN107562423B (en) | UI page development method and device | |
| CN107818000B (en) | Operation method and device of page table | |
| US20170010805A1 (en) | Character Input Method and Electronic Device | |
| CN111242731B (en) | Service execution method and device | |
| CN109376289B (en) | Method and device for determining target application ranking in application search result | |
| US9600161B2 (en) | Generating and displaying a specific area | |
| CN110968513A (en) | Recording method and device of test script | |
| US9477448B2 (en) | Screen-oriented computing program refactoring | |
| US8775936B2 (en) | Displaying dynamic and shareable help data for images a distance from a pointed-to location | |
| US20150058774A1 (en) | Gesture-based visualization of financial data | |
| Martin et al. | Visual Studio 2013 Cookbook | |
| CN114691259B (en) | Control display method and device, electronic equipment and readable storage medium | |
| CN110928470B (en) | Signature box display method and device, electronic equipment and storage medium |
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 | ||
| TA01 | Transfer of patent application right | ||
| TA01 | Transfer of patent application right |
Effective date of registration: 20200923 Address after: Cayman Enterprise Centre, 27 Hospital Road, George Town, Grand Cayman, British Islands Applicant after: Innovative advanced technology Co.,Ltd. Address before: Cayman Enterprise Centre, 27 Hospital Road, George Town, Grand Cayman, British Islands Applicant before: Advanced innovation technology Co.,Ltd. Effective date of registration: 20200923 Address after: Cayman Enterprise Centre, 27 Hospital Road, George Town, Grand Cayman, British Islands Applicant after: Advanced innovation technology Co.,Ltd. Address before: A four-storey 847 mailbox in Grand Cayman Capital Building, British Cayman Islands Applicant before: Alibaba Group Holding Ltd. |
|
| GR01 | Patent grant | ||
| GR01 | Patent grant |