Data processing method and device, equipment, storage medium and program product

Abstract

The application provides a data processing method, device, equipment, storage medium and program product, which are applied to various focus control scenes such as cloud technology, artificial intelligence, intelligent transportation and vehicle-mounted devices. The data processing method comprises the following steps: executing a first code instruction to perform page focus processing, the first code instruction being obtained by compiling business code and focus control code, the business code being used to display a page in different execution environments, and the focus control code being used to control the display content of the page by a focus; the page focus processing comprises the following steps: displaying a to-be-controlled page, the to-be-controlled page comprising an initial page element in a focus state; in response to a focus control event of the initial page element, determining a focused page element adapted to the focus control event, the focus control event being an event of triggering a change in the focus state of the initial page element; and displaying the focused page element in the focus state. Through the application, the efficiency of data processing can be improved.

Description

Technical Field

[0001] This application relates to data processing technology in the field of computer applications, and more particularly to a data processing method, apparatus, device, storage medium, and program product. Background Technology

[0002] Multi-platform isomorphic development refers to the process of developing a set of front-end code and generating executable code instructions that can be executed in different execution environments based on this front-end code. However, in the process of multi-platform isomorphic development, for execution environments such as television (TV) that are controlled by focus, there are often focus control problems, which affect data processing efficiency. Summary of the Invention

[0003] This application provides a focus-based data processing method, apparatus, device, computer-readable storage medium, and computer program product that can improve the efficiency of data processing.

[0004] The technical solution of this application embodiment is implemented as follows:

[0005] This application provides a focus-based data processing method, including:

[0006] Page focus processing is performed by executing a first code instruction, wherein the first code instruction is obtained by compiling business code and focus control code, the business code being used to display the page in different execution environments, and the focus control code being used to control the displayed content of the page through focus, the page focus processing including:

[0007] Displaying a page to be controlled, wherein the page to be controlled is the currently displayed page, and the page to be controlled includes an initial page element in a focus state, wherein the focus state refers to the state of the position where the focus is located;

[0008] In response to a focus control event for the initial page element, a focusable page element adapted to the focus control event is determined, wherein the focus control event is an event that triggers a change in the focus state of the initial page element;

[0009] Display the focused page element in the focused state.

[0010] This application provides a focus-based data processing apparatus, including:

[0011] An instruction execution module is used to perform page focus processing by executing a first code instruction, wherein the first code instruction is obtained by compiling business code and focus control code, the business code is used to display the page in different execution environments, and the focus control code is used to control the display content of the page through focus; the instruction execution module includes a page display module and a focus processing module.

[0012] A page display module is used to display a page to be controlled, wherein the page to be controlled is the currently displayed page, and the page to be controlled includes an initial page element in a focus state, wherein the focus state refers to the state of the position where the focus is located;

[0013] A focus processing module is used to respond to a focus control event for the initial page element and determine a focusable page element that is compatible with the focus control event, wherein the focus control event refers to an event that triggers a change in the focus state of the initial page element;

[0014] The page display module is also used to display the focused page element in the focused state.

[0015] In this embodiment of the application, the focus control event includes at least one of the following: directional button event, confirmation button event, and page-turning button event; wherein, the directional button event is used to trigger a change in the focus state of the initial page element from a directional perspective, the confirmation button event is used to trigger a change in the focus state of the initial page element from a hierarchical perspective, and the page-turning button event is used to trigger a change in the focus state of the initial page element by turning a page.

[0016] In this embodiment of the application, when the focus control event includes a directional button event, the focus processing module is further configured to, in response to the directional button event for the initial page element, determine the focus movement direction, wherein the focus movement direction refers to the direction determined from the page display perspective and with the initial page element as a reference; based on at least one first page element in the focus movement direction, determine the first page element closest to the initial page element, and determine the determined first page element as the focus-captured page element adapted to the focus control event.

[0017] In this embodiment of the application, when at least one first page element includes multiple first page elements, the focus processing module is further configured to: determine a corresponding first side boundary position for each of the multiple first page elements in the focus movement direction, wherein the direction of the side boundary corresponding to the first side boundary position is opposite to the focus movement direction; obtain a second side boundary position corresponding to the initial page element, wherein the direction of the side boundary corresponding to the second side boundary position is consistent with the focus movement direction; and select the first page element closest to the initial page element from the multiple first page elements based on the distance difference between the first side boundary position and the second side boundary position.

[0018] In this embodiment, the focus processing module is further configured to: when the focus movement direction is horizontal in the page display view, select the first page element closest to the initial page element from a plurality of first page elements based on the straight-line distance difference between the first side boundary position and the second side boundary position, wherein the distance difference between the first side boundary position and the second side boundary position is the straight-line distance difference; when the focus movement direction is vertical in the page display view, select the first page element closest to the initial page element from a plurality of first page elements based on the vertical distance difference between the first side boundary position and the second side boundary position, and the straight-line distance difference between the first side boundary position and the second side boundary position, wherein the distance difference between the first side boundary position and the second side boundary position is the vertical distance difference and the straight-line distance difference.

[0019] In this embodiment of the application, the focus processing module is further configured to determine the specified page element as the focus-acquiring page element adapted to the focus control event when the focus movement direction includes a specified page element corresponding to the initial page element.

[0020] In this embodiment of the application, the focus processing module is further configured to determine the first page element that is closest to the initial page element based on at least one first page element in the focus movement direction when the specified page element corresponding to the initial page element is not included in the focus movement direction.

[0021] In this embodiment of the application, when the focus control event includes a confirmation button event, the focus processing module is further configured to, in response to the confirmation button event for the initial page element, update the confirmation button lock from the closed state to the open state when the confirmation button lock is in the closed state, and determine the focus page element that is compatible with the focus control event.

[0022] In this embodiment of the application, the focus processing module is further configured to cancel the response to a newly received confirmation button event when the confirmation button lock is in the open state; and to update the confirmation button lock from the open state to the closed state when the duration of the confirmation button lock being in the open state is longer than a specified duration.

[0023] In this embodiment of the application, the focus processing module is further configured to obtain a first target height between the focused page element and the top of the viewport; determine a second target height when the focused page element is located in the viewport; determine the height difference between the second target height and the first target height as a scroll distance; and scroll the list containing the focused page element based on the scroll distance.

[0024] In this embodiment of the application, the page display module is further configured to display the focused page element in the focused state when the scrolling of the list containing the focused page element ends.

[0025] In this embodiment of the application, the focus processing module is further configured to obtain the current focus level, wherein the initial page element is the focus-acquired page element of the current focus level, and the focus-acquired page element is the page element in the focus level that is in the focus state when entering the sub-level.

[0026] In this embodiment of the application, the focus processing module is further configured to, in response to the focus control event for the initial page element, determine the next focus level; when the next focus level is a sub-level of the current focus level, determine the focused page element adapted to the focus control event from at least one second page element of the next focus level; when the next focus level is a parent level of the current focus level, determine the focused page element of the next focus level as the focused page element adapted to the focus control event.

[0027] In this embodiment of the application, the focus-based data processing device further includes an instruction acquisition module, configured to package the business code and the first framework library to obtain first code to be compiled when the packaging instruction is a first packaging instruction, wherein the first framework library includes the focus control code; and to compile the first code to be compiled to obtain the first code instruction, wherein the first code instruction is web page data executed in a first execution environment, the first execution environment being content displayed through focus control and different from the development environment of the business code.

[0028] In this embodiment, the instruction acquisition module is further configured to, when the packaging instruction is a second packaging instruction, package the business code and the second framework library to obtain a second code to be compiled, and compile the second code to obtain a second code instruction, wherein the second code instruction is web page data executed in a second execution environment, the second execution environment controls the displayed content through touch and is different from the development environment of the business code; when the packaging instruction is a third packaging instruction, package the business code and the third framework library to obtain a third code to be compiled, and compile the third code to obtain a third code instruction, wherein the third code instruction is client data for execution in a third execution environment, the third execution environment being the same as the development environment of the business code.

[0029] This application provides a focus-based data processing device, including:

[0030] Memory is used to store executable instructions for a computer;

[0031] When a processor executes computer-executable instructions stored in the memory, it implements the focus-based data processing method provided in the embodiments of this application.

[0032] This application provides a computer-readable storage medium storing computer-executable instructions, which, when executed by a processor, implement the focus-based data processing method provided in this application.

[0033] This application provides a computer program product, including a computer program or computer executable instructions. When the computer program or computer executable instructions are executed by a processor, they implement the focus-based data processing method provided in this application.

[0034] The embodiments of this application have at least the following beneficial effects: Since the business code is used to display the page in different execution environments, and the focus control code is used to control the display content of the page through focus, by compiling the focus control code together with the business code to obtain the first code instruction, when the first code instruction is executed, the page can be displayed at the same time, and the page display content can be controlled through focus, thus solving the focus control problem and improving the efficiency of data processing. Attached Figure Description

[0035] Figure 1 This is a schematic diagram of the architecture of the data processing system provided in the embodiments of this application;

[0036] Figure 2 This is provided by the embodiments of this application. Figure 1 A schematic diagram of the terminal's composition structure;

[0037] Figure 3 This is a flowchart illustrating the focus-based data processing method provided in the embodiments of this application. Figure 1 ;

[0038] Figure 4 This is an exemplary schematic diagram of a page to be controlled provided in an embodiment of this application;

[0039] Figure 5 This is a flowchart illustrating the focus-based data processing method provided in the embodiments of this application. Figure 2 ;

[0040] Figure 6 This is a flowchart illustrating the focus-based data processing method provided in the embodiments of this application. Figure 3 ;

[0041] Figure 7 This is a schematic diagram of an exemplary cross-platform development architecture provided in an embodiment of this application;

[0042] Figure 8 This is an exemplary focus movement diagram provided in the embodiments of this application. Figure 1 ;

[0043] Figure 9 This is an exemplary focus movement diagram provided in the embodiments of this application. Figure 2 ;

[0044] Figure 10 This is an exemplary focus movement diagram provided in the embodiments of this application. Figure 3 ;

[0045] Figure 11 This is an exemplary focus movement diagram provided in the embodiments of this application. Figure 4 . Detailed Implementation

[0046] To make the objectives, technical solutions, and advantages of this application clearer, the application will be further described in detail below with reference to the accompanying drawings. The described embodiments should not be regarded as limitations on this application. All other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this application.

[0047] In the following description, references are made to “some embodiments,” which describe a subset of all possible embodiments. However, it is understood that “some embodiments” may be the same subset or different subsets of all possible embodiments and may be combined with each other without conflict.

[0048] In the following description, the terms "first, second, third" are used merely to distinguish similar objects and do not represent a specific ordering of objects. It is understood that "first, second, third" may be interchanged in a specific order or sequence where permitted, so that the embodiments of this application described herein can be implemented in an order other than that illustrated or described herein.

[0049] Unless otherwise defined, all technical and scientific terms used in the embodiments of this application have the same meaning as commonly understood by one of ordinary skill in the art to which this application belongs. The terminology used in the embodiments of this application is for the purpose of describing the embodiments of this application only and is not intended to limit this application.

[0050] Before providing a further detailed description of the embodiments of this application, the nouns and terms involved in the embodiments of this application will be explained, and the nouns and terms involved in the embodiments of this application shall be interpreted as follows.

[0051] 1) Artificial Intelligence (AI) is the theory, method, technology and application system that uses digital computers or machines controlled by digital computers to simulate, extend and expand human intelligence, perceive the environment, acquire knowledge and use knowledge to obtain the best results.

[0052] 2) Machine Learning (ML) is a multidisciplinary field involving probability theory, statistics, approximation theory, convex analysis, and algorithm complexity theory. It specifically studies how computers can simulate or implement human learning behavior to acquire new knowledge or skills; and how to reorganize existing knowledge structures to continuously improve their performance. Machine learning is the core of artificial intelligence and the fundamental way to endow computers with intelligence; its applications span all areas of artificial intelligence. Machine learning typically includes techniques such as artificial neural networks, belief networks, reinforcement learning, transfer learning, and inductive learning.

[0053] 3) Artificial neural networks are mathematical models that mimic the structure and function of biological neural networks. Exemplary structures of artificial neural networks in this application include Graph Convolutional Networks (GCNs, a type of neural network for processing graph-structured data), Deep Neural Networks (DNNs), Convolutional Neural Networks (CNNs), Recurrent Neural Networks (RNNs), Neural State Machines (NSMs), and Phase-Functioned Neural Networks (PFNNs). In this application, the model corresponding to the artificial neural network can determine the focus page element adapted to the focus control event.

[0054] 4) Code instructions refer to native instructions that can be executed by the device and are used to display the page on the device side. For example, the first code instructions, second code instructions, and third code instructions provided in the embodiments of this application.

[0055] It's important to note that in multi-platform isomorphic development, focus control issues often arise in execution environments like TVs where focus is crucial, impacting data processing efficiency. For example, when executable code for a TV scene generated by a cross-platform development framework (React Native) is executed, the displayed web page cannot achieve focus control. Furthermore, in multi-platform isomorphic development, differences in syntax and ecosystem exist between the development and execution environments, leading to migration challenges.

[0056] Based on this, embodiments of this application provide a focus-based data processing method, apparatus, device, computer-readable storage medium, and computer program product, capable of solving focus control and migration problems. The following describes exemplary applications of the focus-based data processing device (hereinafter referred to as the data processing device) provided in embodiments of this application. The data processing device provided in embodiments of this application can be implemented as various types of terminals such as smartphones, smartwatches, laptops, tablets, desktop computers, smart home appliances, set-top boxes, smart in-vehicle devices, portable music players, personal digital assistants, dedicated messaging devices, intelligent voice interaction devices, portable gaming devices, and smart speakers, or it can be implemented as a server. The following will describe exemplary applications when the data processing device is implemented as a terminal.

[0057] See Figure 1 , Figure 1 This is a schematic diagram of the architecture of the data processing system provided in the embodiments of this application; as shown Figure 1 As shown, to support a data processing application, in the data processing system 100, terminals 400 (terminals 400-1 and 400-2 are shown as examples, referred to as data processing devices) are connected to server 200 via network 300. Network 300 can be a wide area network (WAN), a local area network (LAN), or a combination of both. Additionally, the data processing system 100 also includes a database 500 for providing data support to server 200; and... Figure 3 The example shown illustrates a scenario where the database 500 is independent of the server 200. However, the database 500 can also be integrated into the server 200, and this embodiment does not limit this to any particular case.

[0058] Terminal 400 is used to receive a first packaging instruction sent by server 200 via network 300, and to perform page focus processing by executing a first code instruction. The first code instruction is obtained by compiling business code and focus control code. The business code is used to display the page in different execution environments (including a first execution environment, a second execution environment, and a third execution environment). The focus control code is used to control the display content of the page through focus. The page focus processing includes: displaying the page to be controlled, wherein the page to be controlled is the currently displayed page, and the page to be controlled includes an initial page element in a focus state, the focus state referring to the state of the focus position; in response to a focus control event for the initial page element, determining a focus page element adapted to the focus control event, wherein the focus control event refers to an event that triggers a change in the focus state of the initial page element; and displaying the focus page element in the focus state in a graphical interface (graphical interfaces 410-1 and 410-2 are shown as examples).

[0059] Server 200 is used to package the business code and the first framework library to obtain the first code to be compiled when the packaging instruction is the first packaging instruction, wherein the first framework library includes focus control code; to compile the first code to be compiled to obtain the first code instruction, wherein the first code instruction is web page data executed in the first execution environment, the first execution environment displays content through focus control and is different from the development environment of the business code; and to send the first packaging instruction to terminal 400 through network 300.

[0060] It should be noted that the processing of server 200 can be integrated into terminal 400. Of course, the processing of terminal 400 can be integrated into server, and this application embodiment does not limit this.

[0061] In some embodiments, server 200 may be a standalone physical server, a server cluster or distributed system composed of multiple physical servers, or a cloud server providing basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communication, middleware services, domain name services, security services, content delivery networks (CDNs), and big data and artificial intelligence platforms. Terminal 400 may be a smartphone, smartwatch, laptop, tablet, desktop computer, smart TV, set-top box, smart in-vehicle device, portable music player, personal digital assistant, dedicated messaging device, portable gaming device, and smart speaker, but is not limited to these. Terminals and servers can be directly or indirectly connected via wired or wireless communication, which is not limited in this embodiment.

[0062] See Figure 2 , Figure 2 This is provided by the embodiments of this application. Figure 1 A schematic diagram of the terminal's composition structure. Figure 2 The terminal 400 shown includes at least one processor 410, a memory 450, at least one network interface 420, and a user interface 430. The various components in the terminal 400 are coupled together via a bus system 440. It is understood that the bus system 440 is used to implement communication between these components. In addition to a data bus, the bus system 440 also includes a power bus, a control bus, and a status signal bus. However, for clarity, ... Figure 2 The general labeled all buses as Bus System 440.

[0063] The processor 410 can be an integrated circuit chip with signal processing capabilities, such as a general-purpose processor, a digital signal processor (DSP), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. The general-purpose processor can be a microprocessor or any conventional processor, etc.

[0064] User interface 430 includes one or more output devices 431 that enable the presentation of media content, including one or more speakers and / or one or more visual displays. User interface 430 also includes one or more input devices 432, including user interface components that facilitate user input, such as a keyboard, mouse, microphone, touch screen display, camera, other input buttons and controls.

[0065] The memory 450 may be removable, non-removable, or a combination thereof. Exemplary hardware devices include solid-state storage, hard disk drives, optical disk drives, etc. The memory 450 may optionally include one or more storage devices physically located away from the processor 410.

[0066] The memory 450 may include volatile memory or non-volatile memory, or both. The non-volatile memory may be read-only memory (ROM), and the volatile memory may be random access memory (RAM). The memory 450 described in this application embodiment is intended to include any suitable type of memory.

[0067] In some embodiments, memory 450 is capable of storing data to support various operations, examples of which include programs, modules, and data structures or subsets or supersets thereof, as illustrated below.

[0068] Operating system 451 includes system programs for handling various basic system services and performing hardware-related tasks, such as the framework layer, core library layer, driver layer, etc., for implementing various basic business functions and handling hardware-based tasks;

[0069] The network communication module 452 is used to reach other electronic devices via one or more (wired or wireless) network interfaces 420, exemplary network interfaces 420 including: Bluetooth, Wi-Fi, and Universal Serial Bus (USB), etc.

[0070] Presentation module 453 is configured to enable the presentation of information (e.g., a user interface for operating peripheral devices and displaying content and information) via one or more output devices 431 (e.g., a display screen, a speaker, etc.) associated with user interface 430;

[0071] The input processing module 454 is used to detect and translate one or more user inputs or interactions from one or more input devices 432.

[0072] In some embodiments, the focus-based data processing apparatus provided in this application can be implemented in software. Figure 2A focus-based data processing device 455 stored in memory 450 is shown. This device can be software in the form of programs and plug-ins, and includes the following software modules: an instruction execution module 4551 and an instruction fetching module 4552. The instruction execution module 4551 includes a page display module 45511 and a focus processing module 45512. These modules are logically linked and can therefore be arbitrarily combined or further divided according to the functions they implement. The functions of each module will be described below.

[0073] In some embodiments, the focus-based data processing apparatus provided in this application can be implemented in hardware. As an example, the focus-based data processing apparatus provided in this application can be a processor in the form of a hardware decoding processor, which is programmed to execute the focus-based data processing method provided in this application. For example, the processor in the form of a hardware decoding processor can be one or more application-specific integrated circuits (ASICs), DSPs, programmable logic devices (PLDs), complex programmable logic devices (CPLDs), field-programmable gate arrays (FPGAs), or other electronic components.

[0074] In some embodiments, the terminal or server can implement the focus-based data processing method provided in this application by running a computer program. For example, the first code instruction can be a native application (APP), that is, a program that needs to be installed in the operating system to run, such as a live streaming APP or a video APP; it can also be a mini-program, that is, a program that only needs to be downloaded into the browser environment to run; or it can be a mini-program that can be embedded in any APP. In short, the above-mentioned computer program can be any form of application, module or plugin.

[0075] The focus-based data processing method provided in this application will be described below with reference to exemplary applications and implementations of the data processing device provided in the embodiments of this application. Furthermore, the focus-based data processing method provided in the embodiments of this application is applicable to various focus control scenarios such as cloud technology, artificial intelligence, smart transportation, and vehicle-mounted systems.

[0076] See Figure 3 , Figure 3 This is a flowchart illustrating the focus-based data processing method provided in the embodiments of this application. Figure 1 , will combine Figure 3 The steps shown are explained.

[0077] In this embodiment of the application, the data processing device executes a first code instruction to perform page focus processing. The first code instruction is obtained by compiling business code and focus control code. The business code is used to display the page in different execution environments, and the focus control code is used to control the display content of the page through focus. The page focus processing includes steps 301 to 303, and each step is described below.

[0078] Step 301: Display the page to be controlled, wherein the page to be controlled includes the initial page elements in the focus state.

[0079] In this embodiment of the application, the data processing device responds to the code execution instruction by executing the first code instruction to display the page, which in turn displays the page to be controlled; and the display content in the page to be controlled includes the initial page elements.

[0080] It should be noted that the code execution instruction can be a response to a received operation (e.g., receiving a user's operation to enter the member page), or a response to a triggered event (e.g., the current video playback completion event), etc., and this application embodiment does not limit this. The page to be controlled is the currently displayed page, and the focus state refers to the state of the focus position; the initial page element is the page element at the current focus position in the page to be controlled, wherein the page element is the page content that can be controlled by focus, such as buttons, tabs, areas, text, images and graphics, etc.; in addition to displaying the initial page element, the page to be controlled may also include other page elements.

[0081] For example, see Figure 4 , Figure 4 This is an exemplary schematic diagram of a page to be controlled provided in an embodiment of this application; as shown... Figure 4 As shown, the page to be controlled, 4-1, is the member center page; among them, the initial page element 4-11, which is in focus, is the "Switch Account" button; in addition, the page to be controlled, 4-11, also displays personal information such as avatar, nickname, prompt message (Your... number... is a Super Movie Member, click to switch account) and "Purchase Agreement" button, 4-13, price list, 4-14, QR code, button, and personal asset list, 4-16.

[0082] Step 302: In response to the focus control event for the initial page element, determine the focus-controlled page element that is compatible with the focus control event.

[0083] In this embodiment of the application, when the data processing device detects an event that triggers a change in the focus state of the initial page element, it also detects a focus control event for the initial page element; at this time, the data processing device responds to the focus control event and performs focus-finding processing to determine the page element at the next focus position, thereby obtaining a focus page element that is compatible with the focus control event.

[0084] It should be noted that focus control events refer to events that trigger a change in the focus state of an initial page element, also known as focus movement events. Focus movement events are triggered by receiving focus movement commands sent by focus control devices; these focus control devices are used to control the movement of focus, such as keyboards, remote controls, and laser pointers.

[0085] It should also be noted that focus control events include at least one of the following: directional button events, confirmation button events, and page-turning button events. Specifically, a directional button event refers to the event where a directional button is pressed, used to trigger a change in the focus state of the initial page element from an directional perspective; a confirmation button event refers to the event where the confirmation button is pressed, used to trigger a change in the focus state of the initial page element from a hierarchical perspective; and a page-turning button event refers to the event where the page-turning button is pressed, used to trigger a change in the focus state of the initial page element by turning a page.

[0086] Step 303: Display the focused page element that is in focus state.

[0087] In this embodiment, after the data processing device determines the focused page element, it displays the focused page element in the focused state. The focused page element can be a page element within the page to be controlled, or it can be a page element outside the page to be controlled; this embodiment does not limit this. When the focused page element is a page element within the page to be controlled, it indicates that the page to be controlled includes both the initial page element and the focused page element. In this case, the data processing device displays the focused page element in the focused state while simultaneously displaying the initial page element in the out-of-focus state; here, the out-of-focus state refers to a position where the focus is not present, and the out-of-focus state and the focused state are two opposing states.

[0088] It should be noted that the detection and handling of focus control events are implemented through focus control code; the focus control code is the focus control module, which is used to interact with the business components corresponding to page elements (such as Focusable components, ScrollView components, Modal components), handle focus control events (such as browser events, framework events corresponding to the business code development environment (Hippy events)), and return the processing result (called the focused page element) to the business component so that the focused page element in the focused state can be displayed through the business code.

[0089] Understandably, since the business logic code is used to display the page and the focus control code is used to control the content displayed on the page through focus, the first code instruction is obtained by compiling the focus control code together with the business logic code. This allows the page to be displayed while simultaneously controlling the content displayed on the page through focus, thus solving the focus control problem and improving the efficiency of data processing.

[0090] See Figure 5 , Figure 5 This is a flowchart illustrating the focus-based data processing method provided in the embodiments of this application. Figure 2 ;like Figure 5 As shown in the embodiments of this application, when the focus control event includes a directional button event, step 302 can be implemented through steps 3021 and 3022; that is, the data processing device responds to the focus control event for the initial page element and determines the focusable page element that is compatible with the focus control event, including steps 3021 and 3022. Each step will be described below.

[0091] Step 3021: In response to the directional key events for the initial page element, determine the focus movement direction.

[0092] It should be noted that directional button events refer to the focus movement in a direction based on the initial page element. Thus, the data processing device responds to directional button events and can obtain the angle movement direction corresponding to the directional button events. The focus movement direction refers to the direction determined from the page display perspective and based on the initial page element, such as any one of the four directions: up, down, left, and right.

[0093] Step 3022: Based on at least one first page element in the focus movement direction, determine the first page element that is closest to the initial page element, and determine the determined first page element as the focus-acquired page element that is adapted to the focus control event.

[0094] In this embodiment, the data processing device acquires all page elements in the focus movement direction, thus obtaining at least one first page element. Then, the data processing device selects the page element closest to the initial page element from among the at least one first page element. Here, when the at least one first page element is a single first page element, this single first page element is the page element closest to the initial page element; when the at least one first page element is multiple first page elements, the data processing device selects the page element closest to the initial page element from among the multiple first page elements.

[0095] Understandably, when a data processing device responds to directional button events to perform focus searching, it identifies the closest page element based on the focus movement direction as the focus element. This improves the smoothness of the focus movement process and thus enhances the focus movement effect.

[0096] In this embodiment of the application, when at least one first page element includes multiple first page elements, step 3022, in which the data processing device determines the first page element closest to the initial page element based on at least one first page element in the focus movement direction, includes: for each of the multiple first page elements in the focus movement direction, the data processing device determines the corresponding first side boundary position; and obtains the second side boundary position corresponding to the initial page element; and then, based on the distance difference between the first side boundary position and the second side boundary position, selects the first page element closest to the initial page element from the multiple first page elements.

[0097] It should be noted that page elements have side boundaries, including side boundaries whose direction is the same as the focus movement direction, and side boundaries whose direction is opposite to the focus movement direction. Specifically, the first side boundary is the position of the side boundary of the first page element, and its direction is opposite to the focus movement direction; the second side boundary is the position of the side boundary of the initial page element, and its direction is the same as the focus movement direction. Here, the first page element corresponding to the minimum distance difference obtained by the data processing device is the first page element closest to the initial page element.

[0098] In this embodiment of the application, the data processing device selects the first page element that is closest to the initial page element from a plurality of first page elements based on the distance difference between the first side boundary position and the second side boundary position. This includes: when the focus movement direction is the horizontal direction in the page display view, the data processing device selects the first page element that is closest to the initial page element from a plurality of first page elements based on the straight-line distance difference between the first side boundary position and the second side boundary position.

[0099] It should be noted that the focus movement direction is either horizontal or vertical from the page display perspective; and the distance difference between the first and second side boundary positions includes at least one of vertical distance difference and straight-line distance difference. Here, when the focus movement direction is horizontal from the page display perspective (e.g., the focus movement direction obtained when the left button is pressed, or the focus movement direction obtained when the right button is pressed), the distance difference between the first and second side boundary positions is a straight-line distance difference, and the first page element closest to the initial page element obtained by the data processing device is the first page element with the closest straight-line distance to the initial page element.

[0100] In this embodiment of the application, the data processing device selects the first page element that is closest to the initial page element from a plurality of first page elements based on the distance difference between the first side boundary position and the second side boundary position. This includes: when the focus movement direction is vertical in the page display view, the data processing device selects the first page element that is closest to the initial page element from a plurality of first page elements based on the vertical distance difference between the first side boundary position and the second side boundary position, and the linear distance difference between the first side boundary position and the second side boundary position.

[0101] It should be noted that when the focus movement direction is vertical in the page display view (e.g., the focus movement direction obtained when the up button is pressed, the focus movement direction obtained when the down button is pressed), the distance difference between the first side boundary position and the second side boundary position is the vertical distance difference and the straight-line distance difference. The first page element that the data processing device obtains as being closest to the initial page element is the first page element that is closest in both straight-line distance and vertical distance to the initial page element. Furthermore, since the sizes of page elements in the same horizontal direction may differ, the data processing device can combine the vertical distance error range to determine the first page element that is closest in both straight-line distance and vertical distance.

[0102] See also Figure 5 In this embodiment of the application, step 3021 is followed by step 3023; that is, after the data processing device determines the focus movement direction in response to the directional key event for the initial page element, the focus-based data processing method further includes step 3023, which will be described below.

[0103] Step 3023: When the focus movement direction includes a specified page element corresponding to the initial page element, the specified page element is determined as the focus-accepting page element adapted to the focus control event.

[0104] In this embodiment, after obtaining the focus movement direction, the data processing device first determines whether a specified page element has been pre-set in the focus movement direction of the initial page element. When it is determined that a specified page element has been pre-set in the focus movement direction of the initial page element, the focus movement direction includes a specified page element corresponding to the initial page element. Therefore, the data processing device directly determines this specified page element as the focus-capturing page element adapted to the focus control event. The specified page element is a page element pre-set for the initial page element in the focus movement direction to be in focus.

[0105] See also Figure 5In this embodiment of the application, step 3022 is implemented by step 30221; that is, the data processing device determines the first page element closest to the initial page element based on at least one first page element in the focus movement direction, and determines the determined first page element as the focus-capturing page element adapted to the focus control event, including step 30221, which will be described below.

[0106] Step 30221: When the focus movement direction does not include the specified page element corresponding to the initial page element, based on at least one first page element in the focus movement direction, determine the first page element that is closest to the initial page element, and determine the determined first page element as the focus-obtaining page element that is adapted to the focus control event.

[0107] It should be noted that when the data processing device determines that the initial page element does not have a pre-set specified page element in the focus movement direction, it means that the specified page element corresponding to the initial page element is not included in the focus movement direction; therefore, the data processing device determines the focus-capturing page element adapted to the focus control event based on at least one first page element in the focus movement direction.

[0108] Understandably, the data processing device can either pre-set the page element to be focused in the direction of focus movement for the initial page element to determine the page element to be focused, or determine the page element to be focused by the nearest distance in the direction of focus movement. This can improve the flexibility of focus movement.

[0109] In this embodiment of the application, when the focus control event includes a confirmation button event, in step 302, the data processing device responds to the focus control event for the initial page element and determines the focusable page element that matches the focus control event, including: when the confirmation button lock is in a closed state, the data processing device responds to the confirmation button event for the initial page element, updates the confirmation button lock from a closed state to an open state, and determines the focusable page element that matches the focus control event.

[0110] In this embodiment of the application, after the data processing device confirms that the key lock has changed from a closed state to an open state, the focus-based data processing method further includes: when the key lock is confirmed to be in an open state, the data processing device cancels the response to the confirmed key event received again; and when the duration of the key lock being in an open state is greater than a specified duration (e.g., 400 milliseconds), the key lock is confirmed to be changed from an open state to a closed state.

[0111] It should be noted that the data processing device responds to the confirmation button event based on the state of the confirmation button lock; that is, the data processing device only responds to the focus control event when the confirmation button lock is in the closed state, and cancels the response to the focus control event when the confirmation button lock is in the open state.

[0112] It should also be noted that the maximum duration for confirming that the keypad lock is in the open state is a specified duration. Therefore, if the duration for which the keypad lock is in the open state exceeds the specified duration, the data processing device will update the keypad lock to the closed state so as to continue responding to subsequent confirmed keypad events.

[0113] Understandably, when the data acquisition device confirms that the key lock is in the closed state, it will not only respond to the focus control event but also update the key lock from the closed state to the open state to cancel the response to subsequent received focus control events. In this way, it can cancel the response to erroneous operations (such as repeatedly pressing the confirmation key) and improve the accuracy of responding to confirmation key events.

[0114] See Figure 6 , Figure 6 This is a flowchart illustrating the focus-based data processing method provided in the embodiments of this application. Figure 3 ;like Figure 6 As shown in the embodiment of this application, steps 304 to 307 are included after step 302; that is, after the data processing device determines the focusable page element that is adapted to the focus control event in response to the focus control event for the initial page element, the focus-based data processing method further includes steps 304 to 307, and each step will be described below.

[0115] Step 304: Obtain the first target height between the focused page element and the top of the viewport.

[0116] It should be noted that scrolling of the list containing the focused page element will be triggered when the focused page element is not fully within the viewport or is not centered within the viewport. When calculating the scroll distance, the data processing device first obtains the first target height between the focused page element and the top of the viewport; if the sum of the first target height and the height of the focused element is greater than the viewport height, the focused page element is considered not fully within the viewport. Furthermore, the viewport is determined based on the screen's display area.

[0117] Step 305: Determine the second target height when the focused page element is located in the viewport.

[0118] It should be noted that when the data processing device determines the second target height when the focused page element is located in the window, the focused page element being located in the window can be located in the center of the window, the top of the window, the bottom of the window, or any other position in the window, etc. This application embodiment does not limit this.

[0119] Step 306: Determine the height difference between the second target height and the first target height as the rolling distance.

[0120] In this embodiment of the application, the data processing device determines the height difference between the second target height and the first target height as the scroll distance of the list.

[0121] Step 307: Scroll the list containing the focused page element based on the scroll distance.

[0122] It should be noted that the scrolling direction of the focused page element is opposite to the focus movement direction. After the data processing device obtains the scroll distance, it scrolls the list containing the focused page element in the opposite direction to the focus movement direction by the determined scroll distance.

[0123] See also Figure 6 In this embodiment of the application, step 303 is implemented through step 3031; that is, the data processing device displays the focused page element in the focused state, including step 3031, which will be described below.

[0124] Step 3031: When the scrolling of the list containing the focused page element ends, display the focused page element that is in focus state.

[0125] It should be noted that when the data processing device finishes scrolling through the list of elements in the focus page, the elements in the focus page that are currently in focus will also be displayed in the currently displayed window.

[0126] In this embodiment of the application, before the data processing device determines the focus-adapted page element in response to the focus control event for the initial page element in step 302, the focus-based data processing method further includes: the data processing device acquiring the current focus level.

[0127] It should be noted that the data processing device is also used to record the focus level; where the current focus level is the level where the current focus is located, the initial page element is the page element that has gained focus at the current focus level, and the page element that has gained focus at the level is the page element in the focus level that is in focus when entering the sub-level.

[0128] Accordingly, in step 302 of this application embodiment, the data processing device, in response to a focus control event for an initial page element, determines a focusable page element adapted to the focus control event, including: the data processing device, in response to a focus control event for an initial page element, determines a next focus level; when the next focus level is a sub-level of the current focus level, the data processing device determines a focusable page element adapted to the focus control event from at least one second page element in the next focus level; when the next focus level is a parent level of the current focus level, the data processing device determines the level focusable page element of the next focus level as a focusable page element adapted to the focus control event.

[0129] It should be noted that when a focus control event indicates a change in the current focus level, the data processing device first responds to the focus control event and determines the next focus level. The next focus level refers to the level where the next focus point resides; it can be a child level or a parent level of the current focus level. When the next focus level is a child level of the current focus level, the data processing device records the currently focused page element as the initial page element. This initial page element is used when the data processing device re-enters the current focus level by going back through the focus level (i.e., using the current focus level as the parent level), ensuring it is the current focused page element. When the next focus level is the parent level of the current focus level, the data processing device determines the recorded next focus level's focused page element as the focused page element that matches the focus control event.

[0130] In this embodiment of the application, before the data processing device executes the first code package to perform page focus processing, the focus-based data processing method further includes: when the packaging instruction is the first packaging instruction, the data processing device packages the business code and the first framework library to obtain the first code to be compiled; and compiles the first code to be compiled to obtain the first code instruction.

[0131] It should be noted that the first packaging instruction is used to instruct the business logic code to be packaged into page code that runs in the first execution environment and is controlled by focus. The first framework library includes focus control code, the first code instruction is the webpage data executed in the first execution environment, and the first execution environment displays content through focus control and is different from the development environment of the business logic code. For example, when the development environment is the "Hippy" framework development environment, the first execution environment is the execution environment of the embedded WebView engine.

[0132] In this embodiment of the application, the focus-based data processing method further includes: when the packaging instruction is a second packaging instruction, the data processing device packages the business code and the second framework library to obtain the second code to be compiled, and compiles the second code to be compiled to obtain the second code instruction.

[0133] It should be noted that the second packaging instruction is used to instruct the business code to be packaged into page code that runs in a second execution environment and is controlled by touch; wherein, the second code instruction is the web page data executed in the second execution environment, the second execution environment controls the displayed content by touch and is different from the development environment of the business code.

[0134] In this application embodiment, the focus-based data processing method further includes: when the packaging instruction is a third packaging instruction, the data processing device packages the business code and the third framework library to obtain the third code to be compiled, and compiles the third code to be compiled to obtain the third code instruction.

[0135] It should be noted that the third packaging instruction is used to instruct the business code to be packaged into client code that runs in a third execution environment; wherein, the third code instruction is the client data used to execute in the third execution environment, which is the same as the development environment of the business code.

[0136] The following describes an exemplary application of the embodiments of this application in a real-world application scenario. This exemplary application describes the process of generating TV web pages based on a cross-platform development framework (e.g., the Hippy framework).

[0137] See Figure 7 , Figure 7 This is a schematic diagram illustrating an exemplary cross-platform development architecture provided in an embodiment of this application; as shown... Figure 7 As shown, this exemplary cross-platform development architecture includes business code 7-1, framework library 7-2, packaging tool 7-3, and terminal environment 7-4. Each part will be described below.

[0138] Business code 7-1 is the front-end code developed using the Hippy framework, including business page code 7-11 and business base library code 7-12. Business page code 7-11 is developed for different page functions, while business base library code 7-12 is used to implement various functions in the business and is called by business page code 7-11 to display the business page (referred to as the page).

[0139] The terminal environment 7-4 includes a client environment 7-41 (referred to as the third execution environment), a mobile web page environment 7-42 (referred to as the second execution environment), and a TV web page environment 7-43 (referred to as the third execution environment). The client environment 7-41 refers to an execution environment that includes the Hippy engine and enables focus control. The mobile web page environment 7-42 is an execution environment that includes a Webview engine and controls the page content via touch. The TV web page environment 7-43 is an execution environment that includes a Webview engine and controls the page content via focus, such as the execution environment for a smart TV terminal or smart box.

[0140] Framework library 7-2 includes framework libraries corresponding to different execution environments; that is, it includes framework library 7-21 (Hippy-React and React, referred to as the third framework library) corresponding to client environment 7-41, framework library 7-22 (Hippy-React-Web and React, referred to as the second framework library) corresponding to mobile web environment 7-42, and framework library 7-23 (Hippy-React-TV-Web and React, referred to as the first framework library) corresponding to TV web environment 7-43. Since focus control cannot be implemented in TV web environment 7-43, the Hippy-React-TV-Web content in framework library 7-23 includes focus control module 7-231 (referred to as focus control code). This code detects directional key events, searches for and selects adjacent elements (referred to as page elements) in the corresponding direction from the currently focused element, then triggers the defocus event of the initial element and the focus event of the selected element, and finally controls the list scrolling based on the focused element's position within the list so that the focused element can be moved to a suitable position in the viewport.

[0141] The packaging tool 7-3 (Hippy-TV-Pack) is used to combine the business code 7-1 with the corresponding framework library 7-2 to package them into Hippy APP that can be executed in the client environment 7-41, mobile web page that can be executed in the mobile web environment 7-42, and TV web page that can be executed in the mobile web environment 7-42.

[0142] It should be noted that since the focus control module 7-231 is implemented by interacting with the component units of the user page (such as the Focusable component), the Focusable component will be explained first here.

[0143] The Focusable component is used to request a focus control event from the focus control module 7-231 when an element in focus is mounted or when the element's state changes from out of focus to focus. When the received focus control event is a focus event, the focus state is updated by executing the code "handleFocus(e){const{onFocus}=this.props; (the handleFocus() method first calls back the onFocus method set on the business side)}this.setState({isFocus:e.focus})(then the setState method updates the component's isFocus state)". When the received focus control event is a confirmation button event, the response to the confirmation button is implemented by executing the code "handleClick(){const{onClick}=this.props; onClick();}". It is also used to control the focus of an element. For example, by setting the attribute "tabindex=-1", the keyboard navigation can be prevented from focusing on the element, thus solving the problem of focus control confusion. In addition, by setting the attributes (such as view-name, focusableid, and requestfocus), the focus control module 7-231 can also recognize the element as a focusable element ("'view-name': 'focusable'"), send a focus control event request ("focusableid: this.focusableId"), and trigger active focus ("requestfocus=true"), etc. In addition, it also includes the attribute of the current focus state ("isfocus: this.state.isFocus.toString").

[0144] The following describes the focus control process implemented by the focus control module 7-231, including the event detection process, focus seeking process, focus acquisition and click processing process, list scrolling process, and multi-level focus processing process.

[0145] During event detection, the focus control module 7-231 can detect browser events and component events (Hippy events). Browser events can be detected through front-end code libraries (such as the Zepto library, a lightweight JavaScript library), and these browser events include arrow key events (keydown), confirmation key events (keyup), and list scroll end events (transitionend).

[0146] It should be noted that the arrow key event refers to the detection of an arrow key being pressed. The detection code is "$(window.document).on('keydown, (e) => {if ((e.keyCode===KEY_UP||e.keyCode===KEY_RIGHT||e.keyCode===KEY_DOWN||e.keyCode===KEY_LEFT)||&&!listViewScrolling){this.handleKeydownEvent(e)}});". Additionally, the response to arrow key events is canceled during list scrolling to resolve the screen jitter issue.

[0147] The confirm button event refers to the operation of detecting when the confirm button is pressed and then released. The detection code is "$(window.document).on('keyup', (e) => {if(e.keyCode===KEY_ENTER){this.handleClick($currentFocus);}});". It can be understood that by detecting the release of the confirm button, the resource consumption of continuously responding to confirmed button presses when the confirm button is pressed and not released in time can be reduced, thus achieving accurate response.

[0148] The list scrolling end event occurs when the list has finished scrolling. Since the scroll indicator is currently in a scrolling state and does not respond to arrow key events during scrolling, the corresponding scroll indicator is updated to the scrolling end state to restore responsiveness to arrow key events. The corresponding code is "$(window.document).on('transitionend', (e) => {TVFocus.clearListViewScrolling();});".

[0149] Component events include the Focusable component request focus event (request_focus), the scrolling component (e.g., ScrollView component) scrolling to a specified coordinate event (scroll_view_scroll_to), the pop-up component (e.g., Modal component) show / hide event (modal_show / modal_hide), and list scrolling control events (call_dom, events where the business side directly manipulates the DOM via JS). For example, the code to detect the Focusable component request focus event is: "this.listener = new HippyEventListener('request_focus'); this.listener.addCallback((component) => {const DOMNode = findNodeHandle(component); this.handleFocus($(DOMNode));});".

[0150] During the focus search process, the focus indicates the location of the currently selected content. The focus can be moved using a focus control device such as a remote control or keyboard. To achieve smooth and reasonable focus movement, two principles are adopted when moving the focus: cross-shaped movement and moving to the nearest point.

[0151] It should be noted that cross-shaped movement refers to the focus moving in a cross shape according to the up / down / left / right keys on the focus control device (based on the element's display perspective); when the screen content area is well-divided and there are no empty elements, it moves horizontally or vertically. Proximity movement means that during focus movement, the focus moves sequentially, that is, the direction of focus movement corresponds to the operation of the up / down / left / right keys on the focus control device, and it moves sequentially to the nearest position to the previous focus location.

[0152] Here, we'll use finding the next focus to the right as an example to illustrate the process of moving the focus using two principles: cross-shaped movement and moving to the nearest point. See also... Figure 8 , Figure 8 This is an exemplary focus movement diagram provided in the embodiments of this application. Figure 1 ;like Figure 8As shown, the x-axis of the coordinate axes is along the horizontal direction of the element display viewing angle, and the y-axis is along the vertical direction of the element display viewing angle. Position point 8-1 is the coordinate origin (0, 0); element 8-21 in the list is the currently focused element, and the list further includes elements 8-22 to 8-24. First, position information of element 8-21 is obtained, including the center point coordinates (cx1, cy1) and the right boundary midpoint coordinates (cr, cy1) (referred to as the second side boundary position); for each element in the list other than element 8-21, the corresponding center point coordinates (nx1, ny1) are obtained; then, elements satisfying cr1<nx1 are obtained, thereby obtaining the focusable element list ($focusables); finally, the left boundary midpoint coordinates (nl, ny1) (referred to as the first side boundary position) of each focusable element in the focusable element list are obtained, so that based on the distance d between (cr, cy1) and (nl, ny1) as shown in formula (1), among elements 8-22 to 8-24, the element having the smallest distance to element 8-21 is determined as element 8-24; wherein, element 8-22 is an element that does not satisfy cr1<nx1, and element 8-23 is an element that satisfies cr1<nx1 but is not the element with the smallest distance to element 8-21.

[0153] d=(cr-nl) 2 +(cy1-ny1) 2 (I);

[0154] In addition, when obtaining the minimum distance (minOffset) between elements in the focusable element list and element 8-21, the minimum distance obtained up to the current time is recorded during the obtaining process, and each time a distance (tempOffset) is calculated, the calculated distance is compared with the currently found minimum distance, and the smaller distance of the two is stored; this is repeated until all distances have been calculated for the focusable element list, whereby the minimum distance is obtained; the corresponding code is "$focusables.each((i)=>{if(minOffset==null||minoffset>tempOffset){minOffset=tempOffset;$next=$focusable;}});".

[0155] In the embodiment of the present application, the process of searching for the next focus to the left is similar to the process of searching for the next focus to the right. Both processes take the currently focused element as a starting point, first filter out the focusable element list that is located on the key press direction side of the current focused element, then calculate the distance between each focusable element in the focusable element list and the currently focused element, and further determine the focusable element with the minimum distance as the position of the next focus.

[0156] It should be noted that determining the position of the next focal point in the upward and downward directions requires consideration of the layout. Here, we will use finding the next focal point downwards as an example. See [link / reference] Figure 9 , Figure 9 This is an exemplary focus movement diagram provided in the embodiments of this application. Figure 2 ;like Figure 9 As shown, List 9-1 includes three rows of elements. The first row includes elements 9-21 to 9-23, the second row includes elements 9-24, and the third row includes elements 9-25 to 9-27. Among them, element 9-23 in the first row is the currently focused element. Since there are two missing elements in the second row, when a down button is pressed, the position of the next focus is determined to be element 9-27 according to the nearest movement rule, resulting in a row jump. Therefore, by combining the vertical distance between the focusable element and the currently focused element, the position of the next focus in the vertical direction can be accurately determined to solve the row adjustment problem.

[0157] Here, we will use the example of searching downwards for the next focus to illustrate the process of moving the focus using two principles: cross-shaped movement and moving to the nearest focus. See also... Figure 10 , Figure 10 This is an exemplary focus movement diagram provided in the embodiments of this application. Figure 3 ;like Figure 10As shown in the figure, the x-axis of the coordinate axes is along the horizontal direction of the element display view, the y-axis is along the vertical direction of the element display view, and the position point 10-1 is the coordinate origin; the list 10-2 includes three rows of elements, the first row of elements includes elements 10-21 to 10-23, the second row of elements includes element 10-24 and element 10-25, and the third row of elements includes elements 10-26 to 10-28; wherein, the element 10-23 in the first row of elements is the current focused element. First, obtain the position information of element 10-23, including the center point coordinates (cx2, cy2) and the midpoint coordinate of the lower boundary (cx2, cb) (referred to as the second side boundary position), for each element in list 10-2 except element 10-23, obtain the corresponding center point coordinates (nx2, ny2); then, obtain elements satisfying cy2<ny2, thereby obtaining a focusable element list; finally, obtain the midpoint coordinate of the upper boundary (nx2, nt) of each focusable element in the focusable element list (referred to as the first side boundary position), so as to determine the element 10-25 with both the smallest straight-line distance and the smallest vertical distance from element 10-23 among elements 10-24 to 10-28 based on the distance (tempH) between (cx2, cb) and (nx2, nt); wherein, elements 10-21 and 10-22 are elements that do not satisfy cy2<ny2, element 10-24 is an element that satisfies cy2<ny2 and has the smallest vertical distance but not the smallest straight-line distance, and elements 10-26 to 10-28 are elements that satisfy cy2<ny2 but have neither the smallest straight-line distance nor the smallest vertical distance; in addition, when determining the minimum vertical distance, errors are allowed, for example, the vertical distances between element 10-24 and element 10-23, and between element 10-25 and element 10-23 are both the minimum vertical distance. The corresponding code is "const tempH=Math.abs(nt-cb);if(minH!=null&(minH+allowableError<tempH)){return null;}if(minH>tempH+allowableError){minOffset=null;}if(minH=null minH>tempH){minH=tempH;}if(minOffset==null||minOffset>tempOffset){minoffset=tempOffset;$next=$focusable;}", wherein, "minH" represents the minimum vertical distance.

[0158] In this embodiment, the focus control module 7-231 can also employ a designated focus mode, that is, specifying the element corresponding to the next focus (for example, specifying an element corresponding to the next focus in the up, down, left, and right directions of the current focus element, called a designated page element); thus, when the focus control module 7-231 detects a designated focus element for the current focus element, it determines the designated focus element as the element corresponding to the next focus. Here, the designated focus element can be named using the "withRef" attribute, and for the current focus element, the next focus element in the up, down, left, and right directions can be specified using the "nextFocusUpId / nextFocusDownId / nextFocusLeftId / nextFocusRightId" attributes respectively. When the focus control module 7-231 detects that the current focus element includes the designated focus element in the corresponding direction, it first checks whether the designated focus element exists. If it exists, the designated focus element is determined as the element corresponding to the next focus; if it does not exist, it continues to search for the element corresponding to the next focus by moving in two directions: cross-shaped movement and nearest movement. The corresponding code is " <Focusable withRef={'a'}…><Focusable nextFocusUpId={'a'},nextFocusDownId={'b'},nextFocusLeftId={'c'},nextFocusRightId={'d'}…> ".

[0159] During focus acquisition and click processing, for focus acquisition, upon receiving a directional key event and finding the next focusable element, the following steps are taken: First, if a focusable element already exists, its defocus event is triggered. Then, the found focusable element is recorded as the current focusable element. Finally, the focus event of this element is triggered via the Hippy event mechanism. The corresponding code is "this.emitter.emit('focus_${focusableId}',{focus:true})". For click processing, upon receiving a confirmation key event, first, the corresponding element is found using the record of the currently focusable element. Second, it checks whether the lock preventing repeated confirmation key triggers (called the confirmation key lock) is effective. If effective, the process exits; otherwise, the lock is set and the next step is executed. Finally, the click event of this element is triggered via the Hippy event mechanism. The corresponding code is "this.emitter.emit('click_${focusableId}')".

[0160] During list scrolling, first, the relevant information of the list's visible window, the list itself, and the currently focused element is calculated, including the list's visible window information (const{winH} = Helper.getWinInfo($win)), the list height (constlistH = $list.height()), the list's top boundary y-coordinate (const listOffset = $list.offset(); const listTop = listOffset.top()), the list's maximum scrollable distance (const transMaxY = winH - listH), the list's scrolled distance (const transformY = Number($list.data('focus-trans-y'))), the top boundary y-coordinate of the currently focused element (const currentOffset = $current.offset(); const currentTop = currentOffset.top), and the focused element's height (const currentH = currentOffset.height); then, the scroll distance transY is calculated. When the currently focused element is not on the first screen or is set to forced center (isCenter=false), the list scrolls the currently focused element to the center position of the window. Finally, the list scrolling is controlled by setting style (CSS) properties, such as the code "const transform='translate3d($ftransX)px,$[transY)px,1px)';$list.css({'transform':transform'-webkit-transform':transform})".

[0161] It's important to note that moving the focus point in the list triggers scrolling, ensuring the currently focused element remains visible within the list viewport. This is achieved using the CSS `transform` property, where different displacement values ​​are set to implement controlled scrolling. See also... Figure 11 , Figure 11 This is an exemplary focus movement diagram provided in the embodiments of this application. Figure 4 ;like Figure 11As shown, list 11-1 includes elements 11-11 to 11-13. Element 11-11 displayed in window 11-2 is the currently focused element. Height 11-31 represents the top ordinate of the list (listTop), height 11-32 represents the height of window 11-2 (winH), height 11-33 represents the top ordinate of element 11-12 (currentTop), and height 11-34 represents the height of element 11-12 (currentH). When a downward arrow key event is triggered, and the next focused element is determined to be element 11-12, the list scroll distance transY is determined as shown in equation (2).

[0162]

[0163] In multi-level focus handling, when a pop-up window (e.g., a Modal pop-up) appears on the screen, the focus of the element is moved within the Modal pop-up's area. It should be noted that initially, without a pop-up, the focus level is 0; when the first Modal pop-up appears, the focus level within that pop-up is 1; when the second Modal pop-up appears, the focus level is 2; and so on. The recorded information includes: the current focus level (stackIndex), the currently focused element at each level (focusStack[]), and the parent container of each level ($wrapStack[]). When the focus control module 7-231 receives a Modal component pop-up event, it increments the stackIndex by 1 (stackIndex+=1), records the current pop-up container in $wrapStack[stackIndex], and sets the focusStack[stackIndex] variable of the currently focused element to null (focusStack[stackIndex]=null), to record the new focus found at this level. When the focus control module 7-231 receives a Modal component close event, it clears the current level record (focusStack[stackIndex]=null; $wrapStack[stackIndex]=null;), decrements the level stackIndex by 1 (stackIndex-=1), and finally restores the focus of the previous level ($currentFocus=focusStack[stackIndex];).

[0164] In this embodiment, the packaging tool 7-3 is obtained based on the code compilation tool (Webpack). Therefore, to improve compatibility, configuration items (babel-loader) can be used to convert the syntax used in the business (e.g., convert ES6 syntax to ES5); that is, "module: {rules: [{test: / \.(js)$ / use: {loader: 'babel-loader', options: {presets: [['env', {targets: {browsers: '>0.1%, last 2version, Android>=4',}, useBuiltIns: true, modules: false,}], 'react', 'stage-0'],},}, exclude: / node_modules[ / / I\]zepto / ,}],},".

[0165] In this embodiment, style conversion is also included; wherein, the style conversion is determined based on the browser's support for flexible layout (flex style); for example, for devices with adaptive layout (Webkit Box), the code style (display:flex) is converted (to display:-webkit-box). The corresponding code is "const v = obj.display; if (v === 'flex' || v === 'WebkitFlex' || v === '-webkit-flex') { if (flexSupportInfo.isSupportFlex) { obj.display = 'flex'} else if (flexSupportInfo.isSupportWebkitFlex) { obj.display = '-webkit-flex'} else if (flexSupportInfo.isSupportMsFlexBox) { obj.display = '-ms-flexbox'} else if (flexSupportInfo.isSupportWebkitBox) { obj.display = '-webkit-box'}}".

[0166] Understandably, the same business logic code, packaged using tool 7-3, can be used to build pages that run on three different execution environments, improving the efficiency of multi-platform development and reducing code maintenance costs. Furthermore, by adding a TV focus control library (i.e., focus control module 7-231), button event handling and back detection are implemented, style conversion is improved, and issues specific to TV, such as focus control, list scrolling, page back, and device compatibility, are resolved.

[0167] The following continues to describe the exemplary structure of the focus-based data processing device 455 provided in the embodiments of this application as a software module. In some embodiments, such as Figure 4 As shown, the software modules stored in the focus-based data processing device 455 in the memory 450 may include:

[0168] The instruction execution module 4551 is used to execute page focus processing by executing a first code instruction, wherein the first code instruction is obtained by compiling business code and focus control code. The business code is used to display the page in different execution environments, and the focus control code is used to control the display content of the page through focus. The instruction execution module 4551 includes a page display module 45511 and a focus processing module 45512.

[0169] The page display module 45511 is used to display the page to be controlled, wherein the page to be controlled is the currently displayed page, and the page to be controlled includes an initial page element in a focus state, wherein the focus state refers to the state of the position of the focus.

[0170] The focus processing module 45512 is used to respond to a focus control event for the initial page element and determine a focusable page element that is compatible with the focus control event, wherein the focus control event refers to an event that triggers a change in the focus state of the initial page element.

[0171] The page display module 45511 is also used to display the focused page element in the focused state.

[0172] In this embodiment of the application, the focus control event includes at least one of the following: directional button event, confirmation button event, and page-turning button event; wherein, the directional button event is used to trigger a change in the focus state of the initial page element from a directional perspective, the confirmation button event is used to trigger a change in the focus state of the initial page element from a hierarchical perspective, and the page-turning button event is used to trigger a change in the focus state of the initial page element by turning a page.

[0173] In this embodiment of the application, when the focus control event includes a directional button event, the focus processing module 45512 is further configured to, in response to the directional button event for the initial page element, determine the focus movement direction, wherein the focus movement direction refers to the direction determined from the page display perspective and with the initial page element as a reference; based on at least one first page element in the focus movement direction, determine the first page element that is closest to the initial page element, and determine the determined first page element as the focus-captured page element adapted to the focus control event.

[0174] In this embodiment of the application, when at least one first page element includes multiple first page elements, the focus processing module 45512 is further configured to: determine a corresponding first side boundary position for each of the multiple first page elements in the focus movement direction, wherein the direction of the side boundary corresponding to the first side boundary position is opposite to the focus movement direction; obtain a second side boundary position corresponding to the initial page element, wherein the direction of the side boundary corresponding to the second side boundary position is consistent with the focus movement direction; and select the first page element closest to the initial page element from the multiple first page elements based on the distance difference between the first side boundary position and the second side boundary position.

[0175] In this embodiment, the focus processing module 45512 is further configured to: when the focus movement direction is horizontal in the page display view, select the first page element closest to the initial page element from a plurality of first page elements based on the straight-line distance difference between the first side boundary position and the second side boundary position, wherein the distance difference between the first side boundary position and the second side boundary position is the straight-line distance difference; when the focus movement direction is vertical in the page display view, select the first page element closest to the initial page element from a plurality of first page elements based on the vertical distance difference between the first side boundary position and the second side boundary position, and the straight-line distance difference between the first side boundary position and the second side boundary position, wherein the distance difference between the first side boundary position and the second side boundary position is the vertical distance difference and the straight-line distance difference.

[0176] In this embodiment of the application, the focus processing module 45512 is further configured to determine the specified page element as the focus-acquiring page element adapted to the focus control event when the focus movement direction includes a specified page element corresponding to the initial page element.

[0177] In this embodiment of the application, the focus processing module 45512 is further configured to determine the first page element that is closest to the initial page element based on at least one first page element in the focus movement direction when the specified page element corresponding to the initial page element is not included in the focus movement direction.

[0178] In this embodiment of the application, when the focus control event includes a confirmation button event, the focus processing module 45512 is further configured to, in response to the confirmation button event for the initial page element, update the confirmation button lock from the closed state to the open state when the confirmation button lock is in the closed state, and determine the focus page element that is compatible with the focus control event.

[0179] In this embodiment of the application, the focus processing module 45512 is further configured to cancel the response to a confirmed button event received again when the confirmation button lock is in the open state; and to update the confirmation button lock from the open state to the closed state when the duration of the confirmation button lock being in the open state is longer than a specified duration.

[0180] In this embodiment of the application, the focus processing module 45512 is further configured to obtain a first target height between the focused page element and the top of the window; determine a second target height when the focused page element is located in the window; determine the height difference between the second target height and the first target height as a scroll distance; and scroll the list containing the focused page element based on the scroll distance.

[0181] In this embodiment of the application, the page display module 45511 is further configured to display the focused page element in the focused state when the scrolling of the list containing the focused page element ends.

[0182] In this embodiment of the application, the focus processing module 45512 is further configured to obtain the current focus level, wherein the initial page element is the focus-acquired page element of the current focus level, and the focus-acquired page element is the page element in the focus level that is in the focus state when entering the sub-level.

[0183] In this embodiment of the application, the focus processing module 45512 is further configured to, in response to the focus control event for the initial page element, determine the next focus level; when the next focus level is a sub-level of the current focus level, determine the focus-captured page element adapted to the focus control event from at least one second page element of the next focus level; when the next focus level is a parent level of the current focus level, determine the level focus-captured page element of the next focus level as the focus-captured page element adapted to the focus control event.

[0184] In this embodiment of the application, the focus-based data processing device 455 further includes an instruction acquisition module 4552, which is used to package the business code and the first framework library to obtain a first code to be compiled when the packaging instruction is a first packaging instruction, wherein the first framework library includes the focus control code; and to compile the first code to be compiled to obtain the first code instruction, wherein the first code instruction is web page data executed in a first execution environment, the first execution environment is the content displayed through focus control and is different from the development environment of the business code.

[0185] In this embodiment, the instruction acquisition module 4552 is further configured to, when the packaging instruction is a second packaging instruction, package the business code and the second framework library to obtain a second code to be compiled, and compile the second code to obtain a second code instruction, wherein the second code instruction is web page data executed in a second execution environment, the second execution environment controls the displayed content through touch and is different from the development environment of the business code; when the packaging instruction is a third packaging instruction, package the business code and the third framework library to obtain a third code to be compiled, and compile the third code to obtain a third code instruction, wherein the third code instruction is client data for execution in a third execution environment, the third execution environment being the same as the development environment of the business code.

[0186] This application provides a computer program product including a computer program or computer-executable instructions stored in a computer-readable storage medium. A processor of a data processing device reads the computer-executable instructions from the computer-readable storage medium and executes the computer-executable instructions, causing the computer device to perform the focus-based data processing method described above in this application.

[0187] This application provides a computer-readable storage medium storing computer-executable instructions. When these computer-executable instructions are executed by a processor, they cause the processor to execute the focus-based data processing method provided in this application. For example, ... Figure 3 The focus-based data processing method is shown.

[0188] In some embodiments, the computer-readable storage medium may be a memory such as FRAM, ROM, PROM, EPROM, EEPROM, flash memory, magnetic surface memory, optical disk, or CD-ROM; or it may be a variety of devices including one or any combination of the above-mentioned memories.

[0189] In some embodiments, computer-executable instructions may take the form of programs, software, software modules, scripts, or code, written in any form of programming language (including compiled or interpreted languages, or declarative or procedural languages), and may be deployed in any form, including as stand-alone programs or as modules, components, subroutines, or other units suitable for use in a computing environment.

[0190] As an example, computer-executable instructions may, but do not necessarily, correspond to files in a file system. They may be stored as part of a file that holds other programs or data, for example, in one or more scripts in a HyperText Markup Language (HTML) document, in a single file dedicated to the program in question, or in multiple co-located files (e.g., files that store one or more modules, subroutines, or code sections).

[0191] As an example, computer-executable instructions can be deployed to execute on a single electronic device (in which case, this single electronic device is a data processing device), or to execute on multiple electronic devices located at one location (in which case, the multiple electronic devices located at one location are data processing devices), or to execute on multiple electronic devices distributed across multiple locations and interconnected via a communication network (in which case, the multiple electronic devices distributed across multiple locations and interconnected via a communication network are data processing devices).

[0192] It is understood that in the embodiments of this application, data such as the image to be detected are involved. When the embodiments of this application are applied to specific products or technologies, user permission or consent is required, and the collection, use and processing of related data must comply with the relevant laws, regulations and standards of the relevant countries and regions.

[0193] In summary, since business logic code is used to display the page in different execution environments, and focus control code is used to control the content displayed on the page through focus, the first code instruction is obtained by compiling the focus control code together with the business logic code. This allows the page to be displayed while simultaneously controlling the content displayed on the page through focus, thus solving the focus control problem and improving the efficiency of data processing.

[0194] The above description is merely an embodiment of this application and is not intended to limit the scope of protection of this application. Any modifications, equivalent substitutions, and improvements made within the spirit and scope of this application are included within the scope of protection of this application.

Claims

1. A focus-based data processing method, characterized by, The method includes: Page focus processing is performed by executing a first code instruction, wherein the first code instruction is obtained by compiling business code and focus control code, the business code being used to display the page in different execution environments, and the focus control code being used to control the displayed content of the page through focus, the page focus processing including: Displaying a page to be controlled, wherein the page to be controlled is the currently displayed page, and the page to be controlled includes an initial page element in a focus state, wherein the focus state refers to the state of the position where the focus is located; In response to a focus control event for the initial page element, a focusable page element adapted to the focus control event is determined, wherein the focus control event is an event that triggers a change in the focus state of the initial page element; Display the focused page element in the focused state.

2. The method according to claim 1, characterized in that, The focus control event includes at least one of the following: directional key event, confirmation key event, and page turn key event; Specifically, the directional button event is used to trigger a change in the focus state of the initial page element from a directional perspective, the confirm button event is used to trigger a change in the focus state of the initial page element from a hierarchical perspective, and the page-turning button event is used to trigger a change in the focus state of the initial page element by turning a page.

3. The method according to claim 1 or 2, characterized in that, When the focus control event includes a directional key event, the step of determining the focus-adapted page element in response to the focus control event for the initial page element includes: In response to the directional key event for the initial page element, a focus movement direction is determined, wherein the focus movement direction refers to the direction determined from the page display perspective and with the initial page element as a reference. Based on at least one first page element in the focus movement direction, determine the first page element that is closest to the initial page element, and identify the determined first page element as the focus-acquired page element that is adapted to the focus control event.

4. The method according to claim 3, characterized in that, When at least one first page element comprises multiple first page elements, determining the first page element closest to the initial page element based on at least one first page element in the focus movement direction includes: For each of the multiple first page elements in the focus movement direction, a corresponding first side boundary position is determined, wherein the direction of the side boundary corresponding to the first side boundary position is opposite to the focus movement direction. Obtain the position of the second side boundary corresponding to the initial page element, wherein the direction of the side boundary corresponding to the second side boundary position is consistent with the focus movement direction; Based on the distance difference between the first side boundary position and the second side boundary position, select the first page element that is closest to the initial page element from a plurality of first page elements.

5. The method according to claim 4, characterized in that, The step of selecting the first page element closest to the initial page element from a plurality of first page elements based on the distance difference between the first side boundary position and the second side boundary position includes: When the focus movement direction is horizontal in the page display view, the first page element closest to the initial page element is selected from a plurality of first page elements based on the straight-line distance difference between the first side boundary position and the second side boundary position, wherein the distance difference between the first side boundary position and the second side boundary position is the straight-line distance difference; When the focus movement direction is vertical in the page display view, based on the vertical distance difference between the first side boundary position and the second side boundary position, and the straight-line distance difference between the first side boundary position and the second side boundary position, the first page element closest to the initial page element is selected from a plurality of first page elements, wherein the distance difference between the first side boundary position and the second side boundary position is the vertical distance difference and the straight-line distance difference.

6. The method according to claim 3, characterized in that, After determining the focus movement direction in response to the directional key event for the initial page element, the method further includes: When the focus movement direction includes a specified page element corresponding to the initial page element, the specified page element is determined as the focus-acquired page element adapted to the focus control event; The step of determining the first page element closest to the initial page element based on at least one first page element in the focus movement direction includes: When the specified page element corresponding to the initial page element is not included in the focus movement direction, the first page element closest to the initial page element is determined based on at least one first page element in the focus movement direction.

7. The method according to claim 1 or 2, characterized in that, When the focus control event includes a confirmation button event, the step of determining the focus-captured page element that matches the focus control event in response to the focus control event for the initial page element includes: When the confirmation key lock is in the closed state, in response to the confirmation key event for the initial page element, the confirmation key lock is updated from the closed state to the open state, and the focus page element that is adapted to the focus control event is determined. After updating the confirmation button lock from the closed state to the open state, the method further includes: When the confirmation button lock is in the open state, cancel the response to any subsequent confirmation button events; When the duration of the confirmation button lock being in the open state exceeds a specified duration, the confirmation button lock is updated from the open state to the closed state.

8. The method according to claim 1 or 2, characterized in that, After determining the focus-captured page element that matches the focus control event in response to the focus control event of the initial page element, the method further includes: Obtain the first target height between the focused page element and the top of the viewport; Determine the second target height when the focused page element is located in the viewport; The height difference between the second target height and the first target height is determined as the rolling distance; The list containing the focused page element is scrolled based on the scroll distance. The focused page element that displays the focused state includes: When the scrolling of the list containing the focused page element ends, the focused page element in the focused state is displayed.

9. The method according to claim 1 or 2, characterized in that, Before determining the focus-captured page element that matches the focus control event in response to the focus control event of the initial page element, the method further includes: Get the current focus level, wherein the initial page element is the focus-obtaining page element of the current focus level, and the focus-obtaining page element is the page element in the focus level that is in the focus state when entering the sub-level; The step of determining the focused page element that is compatible with the focus control event in response to the focus control event includes: In response to the focus control event for the initial page element, determine the next focus level; When the next focus level is a sub-level of the current focus level, the focus-acquiring page element that is compatible with the focus control event is determined from at least one second page element of the next focus level; When the next focus level is the parent level of the current focus level, the focus page element of the next focus level is determined as the focus page element that is adapted to the focus control event.

10. The method according to claim 1 or 2, characterized in that, Prior to executing the first code package to perform page focus processing, the method further includes: When the packaging instruction is the first packaging instruction, the business code and the first framework library are packaged to obtain the first code to be compiled, wherein the first framework library includes the focus control code; The first code to be compiled is compiled to obtain the first code instruction, wherein the first code instruction is web page data executed in a first execution environment, the first execution environment is different from the development environment of the business code, and the content is displayed through focus control.

11. The method according to claim 1 or 2, characterized in that, The method further includes: When the packaging instruction is the second packaging instruction, the business code and the second framework library are packaged to obtain the second code to be compiled, and the second code to be compiled is compiled to obtain the second code instruction. The second code instruction is web page data executed in the second execution environment. The second execution environment controls the display content through touch and is different from the development environment of the business code. When the packaging instruction is a third packaging instruction, the business code and the third framework library are packaged to obtain a third code to be compiled, and the third code to be compiled is compiled to obtain a third code instruction, wherein the third code instruction is client data for execution in a third execution environment, and the third execution environment is the same as the development environment of the business code.

12. A focus-based data processing device, characterized in that, The data processing device includes: An instruction execution module is used to perform page focus processing by executing a first code instruction, wherein the first code instruction is obtained by compiling business code and focus control code, the business code is used to display the page in different execution environments, and the focus control code is used to control the display content of the page through focus; the instruction execution module includes a page display module and a focus processing module. A page display module is used to display a page to be controlled, wherein the page to be controlled is the currently displayed page, and the page to be controlled includes an initial page element in a focus state, wherein the focus state refers to the state of the position where the focus is located; A focus processing module is used to respond to a focus control event for the initial page element and determine a focusable page element that is compatible with the focus control event, wherein the focus control event refers to an event that triggers a change in the focus state of the initial page element; The page display module is also used to display the focused page element in the focused state.

13. A focus-based data processing device, characterized in that, The data processing device includes: Memory is used to store executable instructions for a computer; A processor, when executing computer-executable instructions stored in the memory, implements the focus-based data processing method according to any one of claims 1 to 11.

14. A computer-readable storage medium storing computer-executable instructions, characterized in that, When the computer-executable instructions are executed by the processor, they implement the focus-based data processing method according to any one of claims 1 to 11.

15. A computer program product comprising a computer program or computer-executable instructions, characterized in that, When the computer program or computer-executable instructions are executed by a processor, they implement the focus-based data processing method according to any one of claims 1 to 11.

Images