Method and device for defining webpage interaction behavior through event mechanism and electronic equipment

[0070] The embodiments of the present invention will be described in detail below with reference to the accompanying drawings.

[0071] The following describes the implementation of the present disclosure through specific specific examples, and those skilled in the art can easily understand other advantages and effects of the present disclosure from the content disclosed in this specification. Obviously, the described embodiments are only a part of the embodiments of the present disclosure, rather than all the embodiments. The present disclosure can also be implemented or applied through other different specific embodiments, and various details in this specification can also be modified or changed based on different viewpoints and applications without departing from the spirit of the present disclosure. It should be noted that the following embodiments and the features in the embodiments can be combined with each other if there is no conflict. Based on the embodiments in the present disclosure, all other embodiments obtained by those of ordinary skill in the art without creative work fall within the protection scope of the present disclosure.

[0072] It should be noted that various aspects of the embodiments within the scope of the appended claims are described below. It should be obvious that the aspects described herein can be embodied in a wide variety of forms, and any specific structure and/or function described herein are only illustrative. Based on the present disclosure, those skilled in the art should understand that one aspect described herein can be implemented independently of any other aspects, and two or more of these aspects can be combined in various ways. For example, any number of aspects set forth herein can be used to implement devices and/or methods of practice. In addition, other structures and/or functionalities other than one or more of the aspects set forth herein may be used to implement this device and/or practice this method.

[0073] It should also be noted that the illustrations provided in the following embodiments only illustrate the basic idea of ​​the present disclosure in a schematic manner. The figures only show the components related to the present disclosure rather than the actual implementation of the number, shape and number of components. For size drawing, the type, quantity, and proportion of each component can be changed at will during actual implementation, and the component layout type may also be more complicated.

[0074] In addition, in the following description, specific details are provided to facilitate a thorough understanding of the examples. However, those skilled in the art will understand that the aspects may be practiced without these specific details.

[0075] The embodiments of the present disclosure provide a method for defining web page interactive behaviors through an event mechanism. The method for defining web page interaction behaviors by the event mechanism provided in this embodiment can be executed by a computing device, which can be implemented as software, or as a combination of software and hardware, and the computing device can be integrated in a server, terminal equipment, etc. in.

[0076] First, the usage context of the method for defining web page interactive behaviors by the event mechanism in the embodiment of the present invention is described.

[0077] At present, on user terminals, especially mobile terminals, web pages are usually constructed in a way that customers propose web page presentation effects and functions, and developers implement the UI design and required functions of the web pages in code according to customer needs. For example, in a normal construction, the developer selects the required components and drags and drops to form a web page UI, and then writes the code to realize the function. Among them, the dragged components need to be further rendered and combined to achieve the desired effect.

[0078] In particular, if an element in a webpage is associated with an event, when the element is triggered, the code-level response of the associated event is a JavaScript function. In other words, this means that in the process of developing a webpage, to realize the event correlation function, webpage developers need to manually write the code corresponding to the JavaScript function. Through the call of the function, the response to the associated event when an element is triggered is realized. That is to say, users without software development capabilities who use certain applications to self-service (or semi-self-service) web page production, if they want to add the event response function generated when a certain element is triggered, then Becomes more difficult

[0079] In response to this situation, the embodiments of the present invention have emerged to help users develop webpages for self-service or semi-self-service. Its function is that the developer of the application develops a webpage creation tool, for example, an APP installed on a mobile terminal of a mobile phone. When the user uses this APP, they only need to simply select, drag, and edit the attributes, styles, and By binding associated events, it is relatively easy to design a web page according to one's own wishes, and realize the behavioral interaction between users who browse the web page and the web page according to their own wishes.

[0080] From the above description, it can be seen that the embodiments of the present invention involve three types of "people":

[0081] The first category: application developers, who develop application programs to form tools for making web pages, such as an APP or an EXE file in a computer, which is downloaded and installed in a mobile terminal or computer.

[0082] The second category: people who make webpages download applications or files developed by the first category of people, such as APP, and install them on a local mobile terminal or computer. When making a webpage, open this APP, and design the webpage according to personal wishes based on the provided interface and related tools.

[0083] Because the webpage production code level technology has been encapsulated by the above-mentioned "first kind of people", that is, the application developers, the interface presented to the webpage creators is very friendly. By selecting and dragging the required network elements, The basic attributes, styles, binding events and other information of the network elements can be personally constrained to generate the web pages you need.

[0084] The third category: people who browse the web. For these users, it does not involve how the web page is made. It can see the attributes and styles of the elements in the webpage, and can interact with some bound event function elements.

[0085] Simply put, the embodiment of the present invention is to explain how a web page is constructed by the "first type of person" as the application developer and the "second type of person" as the webpage maker, and how the application developer does What has made the web page production of web page creators easier and more efficient.

[0086] Reference figure 1 , figure 1 It is a step flow chart of a method for defining web page interactive behaviors through an event mechanism provided by an embodiment of the present invention. This embodiment is used for web page production and includes the following steps:

[0087] S101: Acquire a webpage element selected by a webpage producer in a given webpage production interface.

[0088] In one embodiment, the webpage creation interface can refer to figure 2 Shown. From figure 2 It can be seen that the webpage creation interface includes a selection area A of webpage elements, a webpage creation area B, and a control panel area C.

[0089] The above three areas are described below.

[0090] 1) Web page element selection area A

[0091] In this area, various elements that may be used to make a web page are listed, such as buttons, hyperlinks, pictures, sounds, videos, drop-down lists, tables, forms, input boxes, and so on.

[0092] The above-mentioned elements are presented in the element selection area A for users who make webpages to make selections according to their needs.

[0093] 2) Web production area B

[0094] The user who makes the webpage selects a webpage element according to needs and drags it to the webpage creation area B. At this time, the control panel area C will appear in the information corresponding to the web page element.

[0095] 3) Control panel area C

[0096] Reference image 3 , image 3 It shows a style diagram of the control panel area C in an embodiment of the present invention.

[0097] In one embodiment, the control panel area C includes an attribute and style viewing and editing area C1. For some web page elements associated with events, the control panel area C also includes a trigger operation type selection area C2; and an event function type selection area C3, an event function parameter value assignment area C4, and so on.

[0098] The following describes each area in the control panel area.

[0099] 1) Attribute and style view editing area C1

[0100] When a certain web page element is selected, view the edit area C1 through the attributes and styles in the control panel area to constrain the web page element. For example, when the selected web page element is a picture, you need to set its attributes and styles in the C1 area, such as the length of the picture, the height of the picture, and the background color of the picture. If the selected element is a piece of music, the storage address of the music will also be given in this area.

[0101] 2) Trigger operation type selection area C2

[0102] Events are behaviors that can be detected. By setting, each element in the web page can generate certain events that can trigger functions or programs, for example, events that trigger JavaScript functions or programs.

[0103] In a preferred embodiment, the trigger operation type can be set according to different user terminals. For example, if the user terminal is a PC computer, the trigger operation type can be mouse click trigger, mouse double click trigger, mouse long press trigger, PC Keyboard key trigger; if the user terminal is a mobile phone, the trigger operation type can be a single-click trigger, a double-click trigger, a long finger touch on the screen, a mobile phone slide trigger, etc. Of course, other trigger forms of operations can also be included. The present invention is not limited here.

[0104] The selection of the operation type can be achieved through the drop-down box selection. For example, different trigger operations are pre-placed in the drop-down box, and the user who creates the webpage selects the trigger operation by clicking the drop-down box.

[0105] 3) Event function type selection area C3

[0106] The selection area provides various event function types for selection, for example, the function type for calling, the function type for sending mail, the function type for sending text messages, etc.

[0107] 4) Parameter value assignment area C4 of event function

[0108] After the element is triggered, the corresponding function is called, the parameter value in the function is analyzed, and the trigger response is realized. In the embodiment of the present invention, the specific assignment of each parameter in the function can be personalized by the webpage creator.

[0109] For example, if the picture G of the call is selected in the webpage element selection area A, drag it to the webpage creation area B, and then the control panel area C can be edited or selected:

[0110] i) View and edit area C1 for attributes and styles:

[0111] The height of picture G:

[0112] Width of picture G:

[0113] Background color of picture G:

[0114] ii) Trigger operation type selection area C2

[0115] A drop-down box appears, and the user can select the "click" trigger method through the drop-down box

[0116] iii) Event function type selection area C3

[0117] For example, in this embodiment, the function type is selected to call

[0118] Ⅳ) Parameter value assignment area C4 of event function

[0119] Fill in the contact number in the dialog box, for example, 4001234567.

[0120] S102: Obtain an event trigger operation customized for a web page element; and, the response of the event trigger operation is pre-bound by an event function.

[0121] As described above, through the trigger operation type selection area C2 in the control panel area, the event trigger operation customized for the web page element can be obtained.

[0122] The response to the event-triggered operation is pre-bound through the event function, that is, the first type of person mentioned above, the application developer must pre-write the event function in the JavaScript language. In one embodiment, pre-bound through JavaScript .

[0123] S103: Obtain and store the assignment for the parameter included in the event function.

[0124] In order to achieve personalized design, usually, during the development process, the parameter values ​​in the event function are not limited. After the web page author opens this tool, he needs to select the event trigger method and the specific parameters in the given event function The parameter value of, the combination of the two can respond to the event correlation function of the web page production user. That is to say, the assignment of event functions and parameters is used to: if a web page element is triggered during web browsing, the event function and the parameter values ​​in the event function are parsed to realize event-based web page interaction.

[0125] Figure 4 It is a step flow chart of a method for defining web page interactive behaviors through an event mechanism provided by an embodiment of the present invention. Including the following steps:

[0126] S401: Receive a trigger operation of a web page browsing user on a web page element in the browser visual interface.

[0127] After a web browser user opens a web page, if further interaction is required, for example, by clicking a picture on the web page to realize the function of making a call or sending an email, the event will be triggered through a specific trigger method.

[0128] In the webpage completed by the webpage producer and application developer through cooperation, some form of prompt or hint will indicate the trigger form. For example, the flickering of pictures.

[0129] S402: Obtain an event pre-bound to trigger an operation.

[0130] As described above, since the trigger operation and the bound event have been bound, when the trigger occurs, the event corresponding to the trigger operation can be determined.

[0131] S403: Parse the event function corresponding to the event and the parameter values ​​it contains.

[0132] In order to respond to the trigger, it is necessary to call the function, including the analysis of specific parameter values ​​in the function.

[0133] S404: Perform web page interaction according to the event function and the parameter value;

[0134] Wherein, the event bound to the trigger operation is added to the element through the following steps:

[0135] S4021: Acquire selected webpage elements in a given webpage creation interface;

[0136] S4022: Acquire an event trigger operation customized for the webpage element; and, the response of the event trigger operation is pre-bound by an event function;

[0137] S4023: Obtain and store the assignment for the parameter included in the event function.

[0138] The above S4021~S4023 are figure 1 The detailed description of the content in the illustrated embodiment will not be repeated in this embodiment.

[0139] In this embodiment, after the user who browses the webpage opens the webpage, by receiving the signal that triggers the relevant webpage element, the process of realizing the webpage-user interaction behavior based on the associated event.

[0140] and figure 1 The illustrated embodiment is a process of creating a webpage based on a program developed by the user who develops the webpage after the user who makes the webpage opens the production interface.

[0141] To put it simply, based on the embodiment of the present invention, when a software developer develops an application, he uses the element control panel to bind an event (for example, click, drag, tap) to a certain element in the web page. The element control panel is used to view and edit the basic attributes and styles of the elements, and to associate specific events through selection methods (such as drop-down methods). When an event bound to an element is triggered, the pre-customized javascript function in the page will be called. The event and the javascript function bound to the event are associated by the application developer.

[0142] The pre-stored javascript function is provided by the application developer, and the specific value of the specific parameter in the function is provided by the webpage producer and called by the javascript function.

[0143] It can be seen from the above analysis that the embodiments of the present invention have the following technical effects:

[0144] First, it can realize the flexible binding of elements and events;

[0145] Second, for users who use applications to make web pages, if they want to realize that elements have event attributes, there is no need to manually develop or modify code to respond to events. Therefore, it reduces the difficulty of web page production, saves development time, and improves web page production. s efficiency.

[0146] Third, the event response function can be used in different web page production processes. In different web page production processes, event codes are shared, which has good versatility.

[0147] On the other hand, the present invention also provides a device 50 for defining web page interaction behaviors with an event mechanism, which is used for web page creation. Figure 5 ,include:

[0148] The element selection module 501 is used to obtain selected webpage elements in a given webpage creation interface.

[0149] In one embodiment, the webpage creation interface can refer to figure 2 Shown. From figure 2 It can be seen that the webpage creation interface includes a selection area A of webpage elements, a webpage creation area B, and a control panel area C.

[0150] The above three areas are described below.

[0151] 1) Web page element selection area A

[0152] In this area, various elements that may be used to make a web page are listed, such as buttons, hyperlinks, pictures, sounds, videos, drop-down lists, tables, forms, input boxes, and so on.

[0153] The above-mentioned elements are presented in the element selection area A for users who make webpages to make selections according to their needs.

[0154] 2) Web production area B

[0155] The user who makes the webpage selects a webpage element according to needs and drags it to the webpage creation area B. At this time, the control panel area C will appear in the information corresponding to the web page element.

[0156] 3) Control panel area C

[0157] Reference image 3 , image 3 It shows a style diagram of the control panel area C in an embodiment of the present invention.

[0158] In one embodiment, the control panel area C includes an attribute and style viewing and editing area C1. For some web page elements associated with events, the control panel area C will also include a trigger operation type selection area C2; and an event function parameter value assignment area C3, etc.

[0159] The following describes each area in the control panel area.

[0160] 1) Attribute and style view editing area C1

[0161] When a certain web page element is selected, view the edit area C1 through the attributes and styles in the control panel area to constrain the web page element. For example, when the selected web page element is a picture, you need to set its attributes and styles in the C1 area, such as the length of the picture, the height of the picture, and the background color of the picture. If the selected element is a piece of music, the storage address of the music will also be given in this area.

[0162] 2) Trigger operation type selection area C2

[0163] Events are behaviors that can be detected. By setting, each element in the web page can generate certain events that can trigger functions or programs, for example, events that trigger JavaScript functions or programs. The web page may be opened on a PC or on a mobile phone. So the trigger types are diverse.

[0164] In one embodiment, the trigger operation type can be set according to different user terminals. For example, if the user terminal is a PC computer, the trigger operation type can be a mouse click trigger, a mouse double click trigger, a mouse long press trigger, and a PC keyboard Key-press trigger; if the user terminal is a mobile phone, the trigger operation type can be a single-finger trigger, a double-finger trigger, a long-finger screen trigger, and a mobile phone sliding trigger. It can include click, double click, or long mouse click. Of course, other trigger forms of operations can also be included. The present invention is not limited here.

[0165] The selection of the operation type can be achieved through the drop-down box selection. For example, different trigger operations are pre-placed in the drop-down box, and the user who creates the webpage selects the trigger operation by clicking the drop-down box.

[0166] 3. Event function type selection area C3

[0167] The selection area provides various event function types for selection, for example, the function type for calling, the function type for sending mail, the function type for sending text messages, etc.

[0168] 4) Parameter value assignment area C4 of event function

[0169] After the element is triggered, the corresponding function is called, the parameter value in the function is analyzed, and the trigger response is realized. In the embodiment of the present invention, the specific assignment of each parameter in the function can be personalized by the webpage creator.

[0170] For example, if the picture G of a call is selected in the webpage element selection area A, drag it to the webpage creation area B, and then the control panel area C can be edited or selected:

[0171] i) View and edit area C1 for attributes and styles:

[0172] The height of picture G:

[0173] Width of picture G:

[0174] Background color of picture G:

[0175] ii) Trigger operation type selection area C2

[0176] A drop-down box appears, and the user can select the "click" trigger method through the drop-down box

[0177] iii) Event function type selection area C3

[0178] For example, call

[0179] Ⅳ) Parameter value assignment area C4 of event function

[0180] Fill in the contact number in the dialog box, for example, 4001234567.

[0181] The trigger operation adding module 502 is configured to add an event trigger operation customized for the web page element; and the response of the event trigger operation is pre-bound by an event function.

[0182] As described above, through the trigger operation type selection area C2 in the control panel area, the event trigger operation customized for the web page element can be obtained.

[0183] The response to the event-triggered operation is pre-bound through the event function, that is, the first type of person mentioned above, the application developer must pre-write the event function in the html language, in one embodiment, it can be pre-bound through JavaScript .

[0184] The assignment module 503 is used to obtain and store assignments for the parameters included in the event function. Wherein, the assignment of the event function and the parameter is used for: if a webpage element is triggered during webpage browsing, the event function and the parameter value in the event function are parsed to realize event-based webpage interaction.

[0185] Image 6 A structural block diagram of an apparatus 60 for defining web page interaction behaviors with a piece mechanism provided by another embodiment of the present invention includes:

[0186] The trigger operation detection module 601 is configured to receive a trigger operation of a web page browsing user on a web page element in the browser visual interface;

[0187] The event binding query module 602 is used to obtain the pre-bound event of the trigger operation;

[0188] The parsing module 603 is used to analyze the event function corresponding to the event and the parameter values ​​contained therein;

[0189] The interaction module 604 is configured to perform web page interaction according to the event function and the parameter value;

[0190] Wherein, the event binding query module 602 is also connected to an event binding module 605, and the event binding module 605 further includes:

[0191] The element selection unit 6051 is used to obtain the selected webpage element in a given webpage creation interface;

[0192] The trigger operation adding unit 6052 is configured to obtain the event trigger operation customized for the web page element; and the response of the event trigger operation is pre-bound by an event function;

[0193] The assignment unit 6053 is configured to obtain and store the assignment for the parameters included in the event function.

[0194] It should be noted that the device for defining web page interaction behaviors by the event mechanism of the above embodiment is similar in principle to the method embodiment, and the related parts can refer to the above description, and the present invention will not be repeated here.

[0195] In the above device embodiment, the web page element is pre-bound to the associated event, and when the application is used, the web page element can be triggered according to a predetermined operation, and further, the event associated with the web page element is responded to by the event function call. In this way, the developer of the application program created by the webpage writes the associated event of a specific element (including the function corresponding to the associated event) into the webpage creation tool, so that the user who uses the application to create the webpage can be the webpage The element selects the triggering method of binding events. Since the response function of the event is pre-written by the webpage production application developer, the user who makes the webpage does not need to write the function corresponding to the event at the code level, only the correlation in the function The parameters are individually assigned.

[0196] It can be seen from the above analysis that the embodiments of the present invention have the following technical effects:

[0197] First, it can realize the flexible binding of elements and events;

[0198] Second, for users who use applications to make web pages, if they want to realize that elements have event attributes, there is no need to manually develop or modify codes to respond to events. Therefore, it reduces the difficulty of web page production, saves development time, and improves web page production. s efficiency.

[0199] Third, the event response function can be used in different web page production processes. In different web page production processes, event codes are shared, which has good versatility.

[0200] Figure 7 Shows a schematic structural diagram of an electronic device 70 provided by an embodiment of the present invention. The electronic device 70 includes at least one processor 701 (for example, a CPU), at least one input and output interface 704, a memory 702, and at least one communication bus 703 for implementing The connection and communication between these components. The at least one processor 701 is configured to execute computer instructions stored in the memory 702, so that the at least one processor 701 can execute any of the foregoing method embodiments. The memory 702 is a non-transitory memory (non-transitory memory), which may include a volatile memory, such as a high-speed random access memory (RAM: Random Access Memory), and may also include a non-volatile memory (non-volatile memory) , Such as at least one disk storage. The communication connection with at least one other device or unit is realized through at least one input and output interface 704 (which may be a wired or wireless communication interface).

[0201] In some implementation manners, the memory 702 stores a program 7021, and the processor 701 executes the program 7021 for executing content in any of the foregoing method embodiments.

[0202] The electronic device can exist in many forms, including but not limited to:

[0203] (1) Mobile communication equipment: This type of equipment is characterized by mobile communication functions, and its main goal is to provide voice and data communications. Such terminals include: smart phones (such as iPhone), multimedia phones, functional phones, and low-end phones.

[0204] (2) Ultra-mobile personal computer equipment: This type of equipment belongs to the category of personal computers, has calculation and processing functions, and generally also has mobile Internet features. Such terminals include: PDA, MID and UMPC devices, such as iPad.

[0205] (3) Portable entertainment equipment: This type of equipment can display and play multimedia content. Such devices include: audio, video players (such as iPod), handheld game consoles, e-books, as well as smart toys and portable car navigation devices.

[0206] (4) Specific server: a device that provides computing services. The composition of a server includes a processor, hard disk, memory, system bus, etc. The server is similar to a general computer architecture, but due to the need to provide highly reliable services, it is High requirements in terms of performance, reliability, security, scalability, and manageability.

[0207] (5) Other electronic equipment with data interaction function.

[0208] It should be noted that in this article, relational terms such as first and second are only used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply one of these entities or operations. There is any such actual relationship or order between. Moreover, the terms "include", "include" or any other variants thereof are intended to cover non-exclusive inclusion, so that a process, method, article, or device that includes a series of elements includes not only those elements, but also includes Other elements of, or also include elements inherent to this process, method, article or equipment. If there are no more restrictions, the element defined by the sentence "including a..." does not exclude the existence of other same elements in the process, method, article, or equipment including the element.

[0209] The various embodiments in this specification are described in a related manner, and the same or similar parts between the various embodiments can be referred to each other, and each embodiment focuses on the differences from other embodiments.

[0210] In particular, as for the device embodiment, since it is basically similar to the method embodiment, the description is relatively simple, and for related parts, please refer to the partial description of the method embodiment.

[0211] The logic and/or steps represented in the flowchart or described in other ways herein, for example, can be considered as a sequenced list of executable instructions for implementing logic functions, and can be embodied in any computer-readable medium, For use by instruction execution systems, devices, or equipment (such as computer-based systems, systems including processors, or other systems that can fetch instructions from instruction execution systems, devices, or equipment and execute instructions), or combine these instruction execution systems, devices Or equipment. For the purposes of this specification, a "computer-readable medium" can be any device that can contain, store, communicate, propagate, or transmit a program for use by an instruction execution system, device, or device or in combination with these instruction execution systems, devices, or devices. More specific examples (non-exhaustive list) of computer readable media include the following: electrical connections (electronic devices) with one or more wiring, portable computer disk cases (magnetic devices), random access memory (RAM), Read only memory (ROM), erasable and editable read only memory (EPROM or flash memory), fiber optic devices, and portable compact disk read only memory (CDROM). In addition, the computer-readable medium may even be paper or other suitable media on which the program can be printed, because it can be used, for example, by optically scanning the paper or other media, and then editing, interpreting, or other suitable media if necessary. The program is processed in a manner to obtain the program electronically and then stored in the computer memory.

[0212] It should be understood that each part of the present invention can be implemented by hardware, software, firmware or a combination thereof.

[0213] In the above embodiments, multiple steps or methods can be implemented by software or firmware stored in a memory and executed by a suitable instruction execution system. For example, if it is implemented by hardware, as in another embodiment, it can be implemented by any one or a combination of the following technologies known in the art: a logic gate circuit for implementing logic functions on data signals Discrete logic circuits, application-specific integrated circuits with suitable combinational logic gates, programmable gate array (PGA), field programmable gate array (FPGA), etc.

[0214] The above are only specific embodiments of the present invention, but the protection scope of the present invention is not limited thereto. Any person skilled in the art can easily think of changes or substitutions within the technical scope disclosed in the present invention. All should be covered within the protection scope of the present invention. Therefore, the protection scope of the present invention should be subject to the protection scope of the claims.