CN113138762A

CN113138762A - UI page development method and device

Info

Publication number: CN113138762A
Application number: CN202110510752.2A
Authority: CN
Inventors: 付威
Original assignee: Advanced New Technologies Co Ltd
Current assignee: Advanced New Technologies Co Ltd
Priority date: 2017-07-27
Filing date: 2017-07-27
Publication date: 2021-07-20
Also published as: CN107562423B; CN107562423A

Abstract

The embodiments of this specification provide a UI page development method and apparatus, the method includes: receiving a component addition instruction triggered by a second type component in the components of the UI page, the second type component is used for the first type component or the design The UI page in the state is annotated; the second-type component pointed to by the component addition instruction is added to the UI page in the design state, so that the second-type component is invisible when the UI page is in the running state. A UI page development method includes: receiving a page construction instruction triggered for a UI page in a design state; in response to receiving the page construction instruction, for each component in the UI page in the design state, if the component is of a first type component, the component is built into the runtime UI page; if the component is the second type component, the component is ignored when the page is created, so that the second type component is invisible when the UI page is in the running state.

Description

UI page development method and device

The present document is a divisional application of patent applications having an application number of "201710622574.6", an application date of "2017, month 07, day 27", and an application name of "UI page development method and apparatus".

Technical Field

The application relates to the technical field of computers, in particular to a UI page development method and device.

Background

An Integrated Development Environment (IDE) is an application program for providing a program Development Environment, and generally includes a code editor, a compiler, a debugger, and a User Interface (UI) page Development tool, where the UI page Development tool is software for developing UI pages, and when developing UI pages, a developer may add some UI components on a UI Interface of the UI page Development tool, and the UI page Development is a very important link for developing applications on the IDE.

In order to improve the efficiency of developing the UI page on the UI page development tool of the IDE, a more convenient UI page development method needs to be provided.

Disclosure of Invention

An object of the embodiments of the present disclosure is to provide a method and an apparatus for developing a UI page, so as to improve efficiency of a developer developing a UI page on a UI page development tool 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 UI page development method is applied to UI page development of an integrated development environment IDE, where components of a UI page of the UI page development include: a first type of component and a second type of component, the method comprising:

receiving a component adding instruction triggered by a second type component in the components of the UI page, wherein the second type component is used for annotating the first type component or the UI page in a design state;

and adding the second type component pointed by the component adding instruction into the UI page in a design state, so that the second type component is invisible when the UI page is in a running state.

In a second aspect, a UI page development method is used for performing page construction on a UI page in a design state, and the method includes:

receiving a page construction instruction triggered by the UI page in the design state;

in response to receiving the page construction instruction, for each component in the UI page in the design state, if the component is a first type component, constructing the component into a runtime UI page; if the component is a second type component, ignoring the component when creating the page, so that the second type component is invisible when the UI page is in an operating state; the second type component is used for annotating the first type component or the UI page in a design state.

In a third aspect, a UI page development apparatus applied to UI page development of an integrated development environment IDE, where components of a UI page of the UI page development include: a first type of component and a second type of component, the apparatus comprising:

the device comprises a component adding instruction receiving unit, a component adding instruction receiving unit and a component adding unit, wherein the component adding instruction receiving unit is used for receiving a component adding instruction triggered by a second type component in components of the UI page, and the second type component is used for annotating the first type component or the UI page in a design state;

and the annotation component adding unit is used for adding the second type component pointed by the component adding instruction received by the component adding instruction receiving unit into the UI page in the design state, so that the second type component is invisible when the UI page is in the running state.

In a fourth aspect, an apparatus for developing a UI page, configured to perform page construction on a UI page in a design state, includes:

the page construction instruction receiving unit is used for receiving a page construction instruction triggered by the UI page in the design state;

the page construction unit is used for responding to the received page construction instruction, and constructing each component in the UI page in the design state into a runtime UI page if the component is a first type component; if the component is a second type component, ignoring the component when creating the page, so that the second type component is invisible when the UI page is in an operating state; the second type component is used for annotating the first type component or the UI page in a design state.

In a fifth aspect, an electronic device comprises:

a processor; and

a memory arranged to store computer executable instructions that, when executed, cause the processor to:

In a sixth aspect, an electronic device comprises:

a processor; and

receiving a page construction instruction triggered by a UI page in a design state;

A seventh aspect, a computer storage medium, the computer readable storage medium storing one or more programs that, when executed by an electronic device comprising a plurality of application programs, cause the electronic device to:

In an eighth aspect, a computer storage medium, the computer readable 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:

According to the technical scheme provided by the embodiment of the specification, in the process of designing the UI page, the second type component can be placed at any position of the UI page, and some cautions in the process of designing the UI page are recorded by adding annotation content in the second type component, so that a developer is assisted to design the UI page, and the development efficiency of the developer is improved. In addition, the second type component bearing the annotation content can be only visible in the design of the UI interface and cannot be visible in the operation of the built UI page, and the normal display of the UI page in the operation cannot be influenced.

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 UI page development method of one embodiment of the specification;

FIG. 2 is a diagram of an example of a UI page design time interface of the UI page development tool of one embodiment of the present description;

FIG. 3 is a flow diagram of a UI page development method of another embodiment of the present description;

FIG. 4 is an example diagram of a UI page in a design state for one embodiment of the specification;

FIG. 5 is a flow diagram of a UI page development method of another embodiment of the present description;

FIG. 6 is an example diagram of a UI page in a run state of one embodiment of the specification;

FIG. 7 is a flow diagram of a UI page development method of another embodiment of the present description;

FIG. 8 is a schematic structural diagram of an electronic device according to one embodiment of the present description;

fig. 9 is a schematic structural diagram of an electronic device according to another embodiment of the present specification;

FIG. 10 is a schematic structural diagram of a UI page development device of an embodiment of the present specification;

fig. 11 is a schematic structural diagram of a UI page development apparatus according to another embodiment of the present specification.

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 UI page development method and device.

First, a UI page development method 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 a computer device, and in practical applications, the computer device may include: notebook computer, desktop computer, etc., and this is not limited in this description.

FIG. 1 is a flow diagram of a UI page development method for UI page development of an integrated development environment IDE, the UI page development UI page components comprising: a first type of component and a second type of component, as shown in fig. 1, the method may comprise the steps of:

s102, receiving a component adding instruction triggered by a second type component in the components of the UI page, wherein the second type component is used for annotating the first type component or the UI page in a design state.

For ease of understanding, some concepts in the embodiments of the present specification are first introduced:

an IDE (Integrated Development Environment) is an application program for providing a program Development Environment, and generally includes a code editor, a compiler, a debugger, and a UI (User Interface) page Development tool. 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 UI page development tool is software for developing the UI page, and some UI components of the user interface can be placed at any position on the UI interface of the UI page development tool in the process of developing the UI page.

In the embodiments of the present specification, a design state and a runtime state refer to two states of a program, where the design state refers to a state in which a program is in a development process, and the runtime state refers to a state in which a program is in a runtime state.

In this embodiment of this specification, in the process of developing an IDE, a first type component and a second type component may be created by defining a type of the component, and a specific creation process may include: creating a component of a UI page; the type of the component of the UI page is set to a first type component or a second type component.

In this embodiment of the present specification, the component addition instruction may be triggered by clicking a second type component in the components of the UI page with a mouse, and the component addition instruction may also be triggered by dragging the second type component in the components of the UI page with the mouse.

In this embodiment of the present specification, the second-type component may be used for annotating the first-type component, and in this case, the second-type component may be preferably placed in the vicinity of the first-type component to be annotated. In addition, the second-type component may also be used to annotate the UI page in the design state, and at this time, the second-type component may be placed at any position of the UI page in the design state.

In embodiments of the present description, the first type of component and the second type of component may be located in a component toolbox. For more intuitive operation, the component toolbox may be displayed in the UI page in the design state by default, and specifically, the component toolbox may be displayed in any position of the UI page in the design state by default, for example, the bottom, the top, the right side, the left side, etc. of the UI page, and the display position of the component toolbox may also be adjusted by a dragging operation of a mouse or a function key of a keyboard.

In addition, in order to enlarge the display area of the development interface and make the development interface simpler, the component toolbox can be hidden when the component toolbox is not needed to be used, and when the component toolbox is needed to be used, the component toolbox is called out, at the moment, the component toolbox can also be displayed in a UI page in a design state after being triggered by preset operation, and particularly, the component toolbox can be called out through operations of right mouse button clicking, left mouse button double clicking, or at least one function key of a keyboard and the like.

In the case that the first type component and the second type component are located in the component toolbox, the component adding instruction may be triggered by clicking on the second type component in the component toolbox with a mouse, or may be triggered by dragging on the second type component in the component toolbox with a mouse.

In this embodiment of the present specification, the first type component may be a UI component, and the second type component may be an annotation component, 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; the annotation component is a component for bearing annotation content, and in the process of developing the UI page, some annotation content can be added to the UI interface through the annotation component to record some notes in the development process, and the annotation content may include content in the form of: text words, pictures, etc.

And S104, adding the second type component pointed by the component adding instruction into the UI page in the design state, so that the second type component is invisible when the UI page is in the running state.

In this embodiment of the present specification, when the component addition instruction is triggered by clicking a second type component in components of a UI page with a mouse, the second type component pointed by the component addition instruction may be added to any position of the UI page in the design state, specifically, the second type component may be added to the right side of any UI component on the UI page in the design state, or added to the right side of a first type component newly added on the UI page in the design state, which is not limited in this embodiment of the present specification.

Under the condition that the component adding instruction is triggered by a second type component in the components dragging the UI page by the mouse, if the dragging track of the mouse finally falls into the UI page in the design state, the second type component pointed by the component adding instruction can be added to the position corresponding to the end point of the dragging track.

For ease of understanding, the embodiment of the present specification is described with reference to the example diagram shown in fig. 2, and as shown in fig. 2, fig. 2 shows a UI page development interface of a UI page development tool, where the UI page development interface includes: the method comprises the steps of a UI page 201 in a design state, a UI component toolbox 202 and a second type component 203, wherein the UI component toolbox 202 comprises a plurality of first type components and second type components 203. The user drags the second type component 203 in the UI component tool box 202 through a mouse to trigger a component adding instruction; thereafter, the second-type component 203 pointed by the component addition instruction is added to the UI page 201 in the design state in accordance with the drag trajectory of the mouse. In practical applications, the annotation content can be input into the second type component 203 to record development information or to record communication between developers.

As can be seen from the above embodiments, in the process of designing the UI page, the second type component can be placed at any position of the UI page, and some cautions in the process of designing the UI page are recorded by adding annotation content in the second type component, so as to assist the developer in designing the UI page, thereby improving the development efficiency of the developer. In addition, the second type component bearing the annotation content can be only visible in the design of the UI interface and cannot be visible in the operation of the built UI page, and the normal display of the UI page in the operation cannot be influenced.

Fig. 3 is a flowchart of a UI page development method according to another embodiment of the present specification, as shown in fig. 3, in order to facilitate a user to distinguish a first type component from a second type component and visually display annotation content carried in the second type component to the user, in this case, the method may include the following steps:

s302, receiving a component adding instruction triggered by a second type component in the components of the UI page, wherein the second type component is used for annotating the first type component or the UI page in a design state.

S304, adding the second type component pointed by the component adding instruction into the UI page in the design state, so that the second type component is invisible when the UI page is in the running state.

S302 to S304 in the embodiment of this specification are similar to S102 to S104 in the embodiment shown in fig. 1, and details of the embodiment of this specification are not repeated herein, and please refer to contents in the embodiment shown in fig. 1 for details.

S306, the first type component and the second type component in the UI page in the design state are displayed in a distinguishing mode.

In this embodiment, the step S306 may include: displaying a first type component in a UI page in a design state according to a preset first shape, color and/or size; and displaying the second type component in the UI page in the design state according to a preset second shape, color and/or size.

In the embodiments of the present specification, the preset second shape may include: rectangular, oval, triangular or rounded rectangular, the predetermined second color may include: yellow, green, red, or gray, and the predetermined second size may be any size larger than the first type of component or any size smaller than the second type of component.

For convenience of understanding, the embodiment of the present specification is described by taking a first type component as a UI component and a second type component as an annotation component as an example, and as shown in fig. 4, a UI page in a design state includes: 4 UI components and 2 annotation components, and the color and the shape of each 2 annotation components are different from those of the UI components, so that the user can distinguish the components conveniently.

As can be seen from the above embodiment, in the process of designing the UI page, the second type component can be placed at any position of the UI page, and some cautions in the process of designing the UI page are recorded by adding annotation content in the second type component, so as to assist the developer in designing the UI page. In addition, the first type component and the second type component in the UI page in the design state can be displayed in a distinguishing mode, so that a user can distinguish the first type component from the second type component, annotation content carried in the second type component is visually displayed to the user, and development efficiency of a developer is improved.

Fig. 5 is a flowchart of a UI page development method according to another embodiment of the present specification, and as shown in fig. 5, the method is used for page construction of a UI page in a design state to generate a corresponding runtime UI page, and the method may include the following steps:

s502, receiving a page construction instruction triggered by the UI page in the design state.

In this embodiment of the present specification, the page building instruction may be triggered by a user clicking a certain function button on a UI page in a design state through a mouse, a keyboard, or a touch screen, and the page building instruction may also be triggered by voice input by the user.

S504, in response to the page construction instruction, for each component in the UI page in the design state, if the component is the first type component, constructing the component into the UI page in operation; and if the component is the second type component, ignoring the component during page creation, so that the second type component is invisible when the UI page is in a running state.

In the embodiment of the present specification, ignoring a component means not building the component into a runtime UI page when creating the runtime UI page. Specifically, when the page is created, the code corresponding to the second type component in the UI page in the design state may be rejected from being added to the code segment of the runtime UI page.

In the embodiment of the present specification, the run-time UI page refers to a UI page that is finally obtained after the page construction is completed.

For convenience of understanding, the first type component is still taken as an example of a UI component, the second type component is taken as an example of an annotation component, and the embodiment of the present specification is described with reference to the example diagrams shown in fig. 4 and fig. 6, where fig. 4 shows a UI page in a design state, where the UI page in the design state includes 4 UI components and 2 annotation components, and after receiving a page creation instruction, for each component in the UI page in the design state, if the component is an annotation component, the component is ignored, that is, the component is not built into a runtime UI page, if the component is a UI component, the component is built into the runtime UI page, and finally the runtime UI page shown in fig. 6 is obtained, where only the UI component is displayed in the runtime UI page, and the annotation component is not seen.

As can be seen from the foregoing embodiments, in this embodiment, for a UI page in a design state that includes a second type component, the second type component in the UI page in the design state may be ignored during page construction, so that the built runtime UI page does not include annotation content and does not affect normal display of the runtime UI page.

In order to improve the page construction efficiency, the page construction may be performed in a page component tree manner, in this case, in an embodiment provided in this specification, the step S304 may include steps S3042 to S3048:

s3042, in response to receiving the page construction instruction, acquiring information of the component in the UI page in the design state.

In this embodiment, the information of the component may include: identification of components, names of components, locations of components in the UI page, relationships between components, and the like.

S3044, generating a page component tree according to the acquired information of the component.

In this embodiment of the present specification, the page component tree belongs to one of Java web page trees, and any component tree construction method in the related art may be adopted to generate the page component tree according to the acquired information of the component.

S3046, reading information of a component from the page component tree, and determining whether the component corresponding to the information is an annotation component, if so, ignoring the component corresponding to the information when creating the page, otherwise, building the component corresponding to the information into the runtime UI page.

In this embodiment of the present specification, it may be determined whether the component is a second-type component by determining a type to which the component belongs, specifically, an identifier of the component corresponding to the information may be obtained, and it is determined whether the component type corresponding to the identifier belongs to a preset component type, and if the component type belongs to the preset component type, the component corresponding to the information is the second-type component, where the preset component type refers to a component type to which the second-type component belongs.

S3048, judging whether the information of the last component in the page component tree is read, if so, finishing the creation of the UI interface during running, otherwise, executing S3046.

As can be seen from the above embodiments, in this embodiment, for a UI page in a design state including a second type component, a page component tree may be generated during page construction, the components in the page component tree are read one by one, whether the component is the second type component is determined, and if the component is the second type component, the component is not constructed in a runtime UI page, so that the runtime UI page after construction does not include annotation content, and normal display of the runtime UI page is not affected.

Fig. 7 is a flowchart of a UI page development method according to another embodiment of the present specification, and as shown in fig. 7, in a case where the first type component is a UI component and the second type component is an annotation component, in order to improve page construction efficiency, page construction may be performed in a page component tree manner, where the method may include the following steps:

s702, receiving a page construction instruction triggered by the UI page in the design state.

In the embodiments of the present specification, a design state and a runtime state refer to two states of a program, where the design state refers to a state of a program in a development process, and the runtime state refers to a state of a program in a runtime state.

S704, in response to receiving the page construction instruction, acquiring information of the component in the UI page in the design state.

S705, generating a page component tree according to the acquired component information.

S706, reading the information of one component from the page component tree, and judging whether the component corresponding to the information is a comment component, if so, executing S708, otherwise, executing S710.

In this embodiment of the present specification, an identifier of a component corresponding to the information may be obtained, whether a component type corresponding to the identifier belongs to a preset annotation component type is determined, and if the component type belongs to the preset annotation component type, the component corresponding to the information is determined to be an annotation component.

S708, ignoring the component corresponding to the information when creating the page.

In the embodiment of the present specification, ignoring a component during page creation means that the component is not built into a runtime UI page when the runtime UI page is created, and specifically, when page creation is performed, code corresponding to an annotation component in a UI page in a design state may not be added to a code segment of the runtime UI page.

And S710, constructing the component corresponding to the information into a runtime UI page.

In the embodiment of the present specification, when creating a page, adding a code corresponding to a UI component in a UI page in a design state to a code segment of a run-time UI page.

And S712, judging whether the information of the last component in the page component tree is read, if so, finishing the creation of the UI interface during running, otherwise, executing S706.

As can be seen from the above embodiments, in this embodiment, for a UI page in a design state including an annotation component, when the page is constructed, a page component tree may be generated, the components in the page component tree are read one by one, whether the component is the annotation component is determined, and if the component is the annotation component, the component is not constructed in a runtime UI page, so that the constructed runtime UI page does not include annotation content, and normal display of the runtime UI page is not affected.

Fig. 8 is a schematic structural diagram of an electronic device according to an embodiment of the present specification. Referring to fig. 8, 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. 8, 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.

And the processor reads the corresponding computer program from the nonvolatile memory into the memory and then runs the computer program to form the UI page development device 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:

The method executed by the UI page development device according to the embodiment shown in fig. 8 in this specification can 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 shown in fig. 1 and implement the functions of the UI page development apparatus 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.

Fig. 9 is a schematic structural diagram of an electronic device according to an embodiment of the present specification. Referring to fig. 9, 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. 9, but this does not indicate only one bus or one type of bus.

The method executed by the UI page development device according to the embodiment shown in fig. 9 in this specification can 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 of fig. 5, and implement the functions of the UI page development apparatus in the embodiment shown in fig. 5, which are not described herein again in this specification.

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:

This specification embodiment also proposes 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. 5, and in particular for performing the method of:

Fig. 10 is a schematic structural diagram of a UI page development apparatus according to an embodiment of the present specification. Referring to fig. 10, in one software implementation, the UI page development apparatus 1000 is applied to UI page development of an integrated development environment IDE, and components of a UI page of the UI page development include: the UI page development device 1000 may include: a component addition instruction receiving unit 1001 and a comment component adding unit 1002, wherein,

a component addition instruction receiving unit 1001 configured to receive a component addition instruction triggered by a second type component in components of a UI page, where the second type component is used to annotate the first type component or the UI page in a design state;

an annotation component adding unit 1002, configured to add the second type component pointed by the component adding instruction received by the component adding instruction receiving unit 1001 to the UI page in the design state, so that the second type component is invisible when the UI page is in the running state.

As can be seen from the above embodiments, in the process of designing the UI page, the second type component can be placed at any position of the UI page, and some cautions in the process of designing the UI page are recorded by adding annotation content in the second type component, so as to assist the developer in designing the UI page, thereby improving the development efficiency of the developer. In addition, the annotation content can be ensured to be visible only when the UI interface is designed, but not visible when the UI page is constructed and operated, and the normal display of the UI page in operation cannot be influenced.

Optionally, as an embodiment, the UI page development device 1000 may further include:

and the display unit is used for displaying the first type component and the second type component in the UI page in the design state in a distinguishing way.

Optionally, as an embodiment, the display unit may include:

the annotation component display subunit is used for displaying the first type component in the UI page in the design state according to a preset first shape, color and/or size; and displaying the second type component in the UI page in the design state according to a preset second shape, color and/or size.

Optionally, as an embodiment, the creating process of the first type component and/or the second component includes:

creating a component of a UI page;

setting the type of the component of the UI page as a first type component or a second type component.

Optionally, as an embodiment, the first type component and the second type component are located in a component toolbox, and the component toolbox is displayed in the UI page in the design state by default; or the component tool box is displayed in the UI page in the design state after being triggered by preset operation.

Optionally, as an embodiment, the first type component may be a UI component, and the second type component may be an annotation component.

The UI page development device 1000 may also execute the method in the embodiment shown in fig. 1, and implement the function of the UI page development device in the embodiment shown in fig. 10, which is not described herein again in this specification.

Fig. 11 is a schematic structural diagram of a UI page development apparatus according to an embodiment of the present specification. Referring to fig. 11, in one software embodiment, the UI page development device 1100 may include: a page building instruction receiving unit 1101 and a page building unit 1102, wherein,

a page construction instruction receiving unit 1101, configured to receive a page construction instruction triggered for the UI page in the design state;

a page building unit 1102, configured to, in response to receiving the page building instruction, build, for each component in the UI page in the design state, the component into a run-time UI page if the component is a first type component; if the component is a second type component, ignoring the component when creating the page, so that the second type component is invisible when the UI page is in an operating state; the second type component is used for annotating the first type component or the UI page in a design state.

Optionally, as an embodiment, the page building unit 1102 may include:

the information acquisition subunit is used for responding to the received page construction instruction and acquiring the information of the components in the UI page in the design state;

the component tree generation subunit is used for generating a page component tree according to the information of the component acquired by the information acquisition submodule;

a judging subunit, configured to read information of one component from the page component tree generated by the component tree generating subunit, and judge whether a component corresponding to the information is a second type component; until the information of the last component in the page component tree is read;

the page construction subunit is used for neglecting the component corresponding to the information when the page is created under the condition that the judgment result of the judgment subunit is yes; and under the condition that the judgment result of the judgment subunit is negative, constructing the component corresponding to the information into a runtime UI page.

Optionally, as an embodiment, the determining subunit may include:

the identifier acquiring subunit is configured to read information of one component from the page component tree generated by the component tree generating subunit, and acquire an identifier of a component corresponding to the information;

and the component type judging subunit is used for judging whether the component type corresponding to the identifier belongs to a preset component type.

The UI page development device 1100 may also execute the method in the embodiment shown in fig. 5, and implement the function of the UI page development device in the embodiment shown in fig. 11, which is not described herein again in this embodiment of the present 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

1. a UI page development method, applied to the UI page development of an integrated development environment IDE, the component of the UI page developed by the UI page includes a second type component, and the method includes:

Receive a component addition instruction triggered by a second type component in the components of the UI page, the second type component is used for annotation, and the annotation content added in the second type component is used for recording in the process of UI page design Matters needing attention in the UI page design process to assist developers in designing UI pages;

The second type component pointed to by the component adding instruction is added to the UI page in the design state, so that the second type component is invisible when the UI page is in the running state.

2. The method of claim 1, wherein the second type component is used to annotate a UI page in a design state.

3. The method according to claim 1, wherein the components of the UI page developed by the UI page further comprise a first type component, and the second type component is used to annotate the first type component.

4. The method of claim 3, further comprising:

The first type components and the second type components in the UI page in the design state are displayed differently.

5. The method according to claim 4, wherein the different display of the first type component and the second type component in the UI page in the design state comprises:

Display the first type of components in the UI page in the design state according to a preset first shape, color and/or size; The second type of component in the UI page is displayed.

6. The method of claim 3, wherein the creation process of the first type component and/or the second type component comprises:

Components for creating UI pages;

The type of the component of the UI page is set as the first type component or the second type component.

7. The method according to claim 3, wherein the first type component and the second type component are located in a component toolbox, and the component toolbox is displayed in the UI page in a design state by default; or, the The component toolbox is displayed in the UI page in the design state after being triggered by a preset operation.

8. The method of claim 3, wherein the first type of component is a UI component, and the second type of component is an annotation component.

9. The method according to claim 1, adding the second type component pointed to by the component adding instruction to the UI page in the design state, comprising:

The second type component pointed by the component adding instruction is added to any position in the UI page in the design state.

10. A UI page development method, for carrying out page construction to a UI page in a design state in the UI page development method of claim 1, the method comprising:

receiving a page construction instruction triggered for the UI page in the design state;

In response to receiving the page construction instruction, for each component in the UI page in the design state, if the component is a second type component, the component is ignored when the page is created, so that the UI page The second type component is invisible when in the running state; the second type component is used for annotation, and the annotation content added in the second type component is used to record the UI page design process during the UI page design process to assist developers in designing UI pages.

11. The method of claim 10, the second type of component is used to annotate a UI page in a design state.

12. The method of claim 10, in response to receiving the page building instruction, for each component in the UI page in the design state, further comprising:

If the component is the first type component, the component is built into the runtime UI page.

13. The method of claim 12, the second type component is used to annotate the first type component.

14. The method of claim 12, wherein in response to receiving the page construction instruction, for each component in the UI page in the design state, if the component is a first type component, The component is built into the runtime UI page; if the component is a second type component, the component is ignored when the page is created, including:

In response to receiving the page construction instruction, acquiring information of the component in the UI page in the design state;

Generate a page component tree according to the acquired component information;

Read information of a component from the page component tree, and determine whether the component corresponding to the information is a second type component;

If the component corresponding to the information is the second type component, the component corresponding to the information is ignored when the page is created; if the component corresponding to the information is the first type component, the component corresponding to the information is built into the runtime UI page ;

Until the information of the last component in the page component tree is read.

15. The method according to claim 14, wherein said judging whether the component corresponding to the information is a second type component, comprises:

Obtain the identifier of the component corresponding to the information;

It is judged whether the component type corresponding to the identifier belongs to a preset component type.

16. The method of claim 10, said ignoring said component at page creation time, comprising:

When the page is created, the code corresponding to the component is refused to be added to the code segment of the runtime UI page.

17. The method of claim 12, wherein the first type of component is a UI component and the second type of component is an annotation component.

18. A UI page development device, applied to UI page development of an integrated development environment IDE, the components of the UI page developed by the UI page include second-type components, and the device includes:

A component addition instruction receiving unit, configured to receive a component addition instruction triggered by a second type component in the components of the UI page, the second type component is used for making comments, and the content of the annotation added in the second type component is used for In the process of UI page design, record the precautions in the UI page design process to assist developers in designing UI pages;

An annotating component adding unit, configured to add the second-type component pointed to by the component adding instruction received by the component adding instruction receiving unit to the UI page in the design state, so that the UI page is in the running state. Second type components are not visible.

19. A UI page development device for performing page construction on a UI page in a design state in the UI page development device according to claim 18, the device comprising:

a page construction instruction receiving unit, configured to receive a page construction instruction triggered for the UI page in the design state;

A page construction unit, configured to, in response to receiving the page construction instruction, for each component in the UI page in the design state, if the component is a second type component, ignore the component when the page is created , so that the second-type component is invisible when the UI page is in a running state; the second-type component is used for annotation, and the annotation content added in the second-type component is used in the UI page design process Notes in the UI page design process are recorded in , to assist developers in designing UI pages.

20. An electronic device comprising:

processor; and

memory arranged to store computer-executable instructions which, when executed, cause the processor to:

21. An electronic device for carrying out page construction to the UI page in the design state in the UI page development method of claim 1, comprising:

processor; and

Receive a page construction instruction triggered for a UI page in a design state;

22. A computer storage medium storing one or more programs that, when executed by an electronic device comprising a plurality of application programs, cause the electronic device to perform the following operations:

23. A computer storage medium for performing page construction on a UI page in a design state in the UI page development method according to claim 1, wherein the computer-readable storage medium stores one or more programs, the one or The plurality of programs, when executed by the electronic device including the plurality of application programs, cause the electronic device to perform the following operations: