Electronic manual display method, device and equipment
By using slice container technology to manage menu directory hierarchy attributes, the process of implementing the view of the electronic manual is simplified, loading efficiency and maintenance convenience are improved, and the problem of high complexity of multi-level directories and search functions in existing technologies is solved.
Patent Information
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2025-12-17
- Publication Date
- 2026-04-03
AI Technical Summary
Existing electronic manual display solutions suffer from high complexity, low loading efficiency, and poor maintenance, especially in the implementation of multi-level directories and search functions, where the nested layers of TableView increase the complexity of the implementation process.
By employing slice container technology, menu directory hierarchy attributes are managed through custom data variables. Slice containers are used to draw and display views at each menu level, simplifying the view implementation process and improving loading efficiency.
By simplifying the view implementation process and loading flow, the efficiency of electronic manual display and the ease of maintenance are improved, especially in the implementation of multi-level menus and search functions, which greatly reduces the complexity.
Smart Images
Figure CN121785503A_ABST
Abstract
Description
Technical Field
[0001] This application relates to the field of interface display technology, and more specifically, to a method, apparatus, and device for displaying electronic manuals. Background Technology
[0002] The vehicle owner's electronic manual, also known as the digital owner's manual or online owner's manual, is an electronic version of the traditional paper vehicle instruction manual.
[0003] Currently, displaying electronic manuals on vehicle-related apps typically uses TableView. However, this approach involves complex page loading processes due to the need to redraw data and confirm index positions. Furthermore, since the electronic manual's table of contents is multi-layered, expansion and collapse functionality for each layer is required. Implementing this using TableView necessitates nesting multiple layers of TableViews corresponding to the table of contents hierarchy, involving numerous variables and further increasing the complexity of the loading process.
[0004] In summary, existing electronic manual display solutions suffer from complex implementation processes and low loading efficiency. Summary of the Invention
[0005] The purpose of this application is to provide a method, apparatus, and device for displaying electronic manuals, so as to simplify the implementation process of electronic manuals and improve loading efficiency.
[0006] In a first aspect, embodiments of this application provide a method for displaying an electronic manual, including: The page display data variables are assigned values based on the currently received page display source data; the source data structure used by the page display data variables includes a menu directory, which includes nested directory levels and specific content paths; The menu directory attribute of the data variable is displayed on the page. Based on the nested directory level attribute in each menu directory, an auto-incrementing value is assigned and the corresponding directory level attribute is generated. Each subview component is created based on the directory hierarchy attributes and their corresponding associated menu directory data; wherein each subview component is used to draw the view according to its corresponding directory hierarchy attributes and corresponding menu directory data; Add each subview component to the slice container object to generate an electronic manual display page.
[0007] In this embodiment, menu directory hierarchy attributes are managed by custom data variables, and slice containers are used to draw and display views of each menu hierarchy, which effectively simplifies the view implementation process and improves view loading efficiency.
[0008] In some embodiments, before traversing the page to display the menu directory attributes of the data variables, the method further includes: Clear the existing child view components in the slice container object.
[0009] In this embodiment of the application, the previously loaded view data is cleared before loading a new user manual view, thus avoiding the situation of being easily contaminated by historical data.
[0010] In some embodiments, the method for displaying the electronic manual further includes: The expansion or collapse state of each menu item is controlled based on preset expansion attribute variables.
[0011] In this embodiment, the expansion or collapse state of each menu directory is controlled by a custom expansion attribute variable, which further simplifies the implementation process of the multi-level menu manual.
[0012] In some embodiments, controlling the expanded or collapsed state of each menu item based on a preset expanded attribute variable includes: In response to the user's click on the target item, switch the assignment state of the expanded attribute variable corresponding to the target item; If the expansion attribute variable corresponding to the target item is switched to represent the expansion state, the nested directory hierarchy attribute corresponding to the target item is traversed and the corresponding subview component is generated. Each subview component is added to the slice container object corresponding to the target item to generate the expanded view of the target item.
[0013] In this embodiment of the application, when responding to a click event and needing to expand the menu, the corresponding subview component is generated by traversing the nested directory hierarchy attributes corresponding to the target item, which further simplifies the implementation process of expanding multi-level menus.
[0014] In some embodiments, traversing the nested directory hierarchy attributes corresponding to the target entry and generating the corresponding subview components includes: If the nested directory hierarchy attribute corresponding to the target entry indicates that there is a sub-menu directory, then a corresponding subview component is created based on the menu directory attribute corresponding to each sub-menu directory.
[0015] In this embodiment, when it is determined that there is a sub-menu based on the nested directory hierarchy attribute, a subview component is created based on the corresponding menu directory attribute, which further simplifies the implementation process of expanding multi-level menus.
[0016] In some embodiments, traversing the nested directory hierarchy attributes corresponding to the target entry and generating the corresponding subview components includes: If the nested directory hierarchy attribute corresponding to the target entry indicates that there is no sub-menu directory, obtain the specific content path corresponding to the target entry; Retrieve detailed content data based on the specific content path, and create corresponding subview components based on the detailed content data.
[0017] In this embodiment, when it is determined that there is no sub-menu based on the nested directory hierarchy attribute, the details page is directly loaded based on the specific content path, effectively realizing the specific switching display from the menu to the details page.
[0018] In some embodiments, the method for displaying the electronic manual further includes: If the expanded attribute variable corresponding to the target entry is switched to the table collection state, the target slice container object corresponding to the target entry is obtained, and the existing subview components of the target slice container object are cleared.
[0019] In this embodiment, when the state is switched to the collapsed state based on the expanded attribute variable, the collapsed effect is achieved by clearing the subview component corresponding to the item, which further simplifies the implementation process of collapsing multi-level menus.
[0020] In some embodiments, the method for displaying the electronic manual further includes: In response to a user's search request, the system retrieves the keywords associated with the search request. By determining whether the name of each level of menu directory contains the keyword, the first type of entries whose menu directory name itself contains the keyword and the second type of entries whose sub-menu directory names contain the keyword are filtered out as a set of search results entries; Each search result item in the search result item set is set to an expanded state, and a corresponding search result subview component is generated for each item. Each search result subview component is added to the search slice container object to generate the search result view corresponding to the search request.
[0021] In this embodiment of the application, when searching for keywords, the process of displaying keyword search results is effectively simplified by assigning keywords layer by layer, filtering out all menu items that meet the keyword conditions, and generating subview components of each menu directory through a slice container.
[0022] Secondly, embodiments of this application provide an electronic manual display device, comprising: The variable assignment module is used to assign values to page display data variables based on the currently received page display source data; the source data structure used by the page display data variables includes a menu directory, which includes nested directory levels and specific content paths; The hierarchy setting module is used to traverse the menu directory attributes of the page display data variables, increment the value based on the nested directory hierarchy attributes in each traversed menu directory, and generate the corresponding directory hierarchy attributes. The view creation module is used to create corresponding subview components based on each of the directory hierarchy attributes and their corresponding associated menu directory data; wherein, each subview component is used to draw the view according to its corresponding directory hierarchy attributes and corresponding menu directory data; The page display module is used to add various subview components to the slice container object to generate an electronic manual display page.
[0023] Thirdly, embodiments of this application provide an electronic device, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor, when executing the program, can implement the method described in any embodiment of the first aspect. Attached Figure Description
[0024] To more clearly illustrate the technical solutions of the embodiments of this application, the accompanying drawings used in the embodiments of this application will be briefly introduced below. It should be understood that the following drawings only show some embodiments of this application and should not be regarded as a limitation of the scope. For those skilled in the art, other related drawings can be obtained based on these drawings without creative effort.
[0025] Figure 1 A flowchart illustrating a method for displaying an electronic manual as provided in an embodiment of this application; Figure 2 Example diagram of the electronic manual interface provided in the embodiments of this application; Figure 3 This is a schematic diagram of the electronic manual view component structure provided in an embodiment of this application; Figure 4 The electronic manual provided in this application provides a schematic diagram of the implementation process. Figure 5 This is a schematic diagram illustrating the implementation process of the click event in the electronic manual provided in this application embodiment; Figure 6 A schematic diagram of the structure of an electronic manual display device provided in an embodiment of this application; Figure 7 This is a schematic diagram of the structure of an electronic device provided in an embodiment of this application. Detailed Implementation
[0026] The technical solutions in the embodiments of this application will now be described with reference to the accompanying drawings.
[0027] It should be noted that similar reference numerals and letters in the following figures indicate similar items; therefore, once an item is defined in one figure, it does not need to be further defined and explained in subsequent figures. Furthermore, in the description of this application, terms such as "first," "second," etc., are used only to distinguish descriptions and should not be construed as indicating or implying relative importance.
[0028] It should be noted that the existing technology uses TableView to display electronic manuals, but this approach has the following problems: 1. Factors such as data redrawing and index position confirmation need to be considered. Each Tableview cell (list item) needs to be assigned different data, making the implementation process relatively complex and offering fewer reusable functions.
[0029] 2. Since the electronic manual's table of contents is multi-layered with nested sub-directories, an expand / collapse function needs to be implemented. If a Tableview is used, a nested Tableview needs to be built within a Tableview, and so on, which further increases the complexity of the implementation process. This is because each nested Tableview requires further calculation of data redrawing, confirmation of index positions, and assignment of different data to each Tableview cell.
[0030] 3. In implementing the search function for the electronic manual, if TableView is used, it is necessary to repeatedly expand / collapse TableViews at different levels based on keywords, which further increases the complexity.
[0031] In summary, existing technologies for displaying multi-level electronic manuals suffer from at least the problems of high complexity, low loading efficiency, and poor maintenance convenience.
[0032] To address the problems existing in the prior art, this application provides a method for displaying an electronic manual. By using a slice container to implement the entire interface, each directory is implemented using the same slice, ensuring the simplicity of variables and interface structure, thereby improving page loading efficiency and maintenance convenience.
[0033] like Figure 2 As shown, the electronic manual has N levels of directory, each level of which can be collapsed or expanded. Reaching the last level of directory will jump to the corresponding specific page to present the detailed content.
[0034] like Figure 1As shown in the figure, this application embodiment provides a method for displaying an electronic manual, which may include the following steps: S1. Assign values to the page display data variables based on the currently received page display source data; the source data structure used by the page display data variables includes the menu directory, which includes nested directory levels and specific content paths.
[0035] It should be noted that the embodiments of this application can be executed by an in-vehicle infotainment system or an app on a mobile terminal. The electronic manual can be an electronic version of the vehicle's owner's manual.
[0036] When an application system needs to display an electronic manual, it first requests the source data of the manual from the server via an interface (the source data displayed on the page). A `data` member variable (the data variable displayed on the page) can be declared in advance on the electronic manual page; it has a specific source data structure and can be configured according to requirements.
[0037] For example, the source data structure used by the page display data variables may include a menu directory (e.g., defined as body), which includes a nested directory hierarchy (e.g., defined as children) and a specific content path (e.g., defined as contentPath).
[0038] Based on this, the page display data variables can be assigned values based on the obtained page display source data.
[0039] It should be noted that the data variable `data` displayed on the page contains the `didSet` function. The `didSet` function is executed the instant the `data` variable is assigned a value. Any actions written in the function will be executed the instant the variable is assigned a value, thereby achieving the goal of using variables to drive interface changes.
[0040] S2. Traverse the menu directory attributes of the page display data variables, increment the value of the nested directory level attribute in each traversed menu directory, and generate the corresponding directory level attribute.
[0041] It should be noted that the execution of the didSet function initiates the specific process of page loading and display.
[0042] Specifically, the process first iterates through the menu directory attribute (body attribute) of the page display data variable `data`. Since the electronic manual's menu directory contains nested levels, by iterating through the nested directory level attribute (children attribute) of each menu directory, a directory level attribute (diy_level) can be obtained through an incrementing assignment. For example, the value of the directory level attribute can be initialized to 0 or 1. Each time a child menu directory attribute is encountered, the value is incremented by 1, ultimately resulting in the directory level attribute `diy_level` corresponding to different levels of the child menu directory attribute. Based on this, the corresponding `diy_level` attribute can represent the menu display at different levels.
[0043] S3. Create corresponding subview components based on the directory hierarchy attributes and their associated menu directory data; each subview component is used to draw the view according to its corresponding directory hierarchy attributes and corresponding menu directory data.
[0044] Then, for each directory level attribute diy_level, create a child view component (a child view, which can be defined as UserManualItemView), and associate each child view with the menu directory data.
[0045] It should be noted that for each level of the directory in the user manual, whether it is the top, middle or bottom level, the view is drawn using a UserManualItemView object. The display and interaction of different levels of the directory are distinguished based on the different directory level attributes diy_level and their corresponding menu directory data.
[0046] S4. Add each subview component to the slice container object to generate the electronic manual display page.
[0047] Finally, add the generated subview components (subviews) to the slice container object (i.e., the container on the current page used to hold multiple subview components) to generate the electronic manual display page. Each subview is equivalent to a slice in the slice container object.
[0048] Based on this, menu directory hierarchy attributes are managed by custom data variables (page display data variables data), and slice containers are used to implement the view drawing and display of each menu level, which effectively simplifies the view implementation process and improves view loading efficiency.
[0049] In some embodiments, before traversing the page to display the menu directory attributes of the data variables, the following may also be included: Clear the existing child view components in the slice container object.
[0050] It should be noted that before loading a new e-manual, you can first clear the data of the previously loaded e-manual to avoid the page being contaminated by historical page data during the current page display.
[0051] The following examples illustrate the display process of electronic manual pages: First, define the source data structure: Data: --body --children --contentPath --iconPath --menuName --sort --uuid --contentFile --url --version Therefore, the source data structure of the electronic manual can be divided into two parts: the menu directory body and the offline file compressed package information contentFile.
[0052] The menu body contains 5 elements: 1. children: Nested directory hierarchy. In the electronic manual, the children at different levels are nested in a hierarchical relationship. There may be multiple levels or one level. Each level of data structure has a body (referred to as the menu directory in this embodiment), and the body also has its own children.
[0053] When you reach the bottom level of the directory, its children list is empty, indicating that it is the last level of the directory. If you click on it, you will be redirected to an HTML file containing detailed information about the corresponding electronic manual for that directory.
[0054] 2. contentPath: The specific content path. After the electronic manual data archive is decompressed and placed in the sandbox, the relative path of each specific HTML file in the folder.
[0055] Therefore, when a directory is a specific file, its children are empty, while contentPath has a value.
[0056] 3. iconPath is the download address of the icon image on the design draft, used to display the icons of this directory, and is not important in this example.
[0057] 4. menuName: Menu name, which is not important in this example.
[0058] 5. UUID: Menu ID, which is not important in this example.
[0059] The offline file archive information contentFile contains two elements: 1. URL: The download address for the compressed electronic manual file; 2. version: Used for version updates. If the version number changes, you need to download the compressed file of the electronic manual again.
[0060] II. Data-Driven Display Process It should be noted that the embodiments of this application employ data-driven interface changes. By assigning values to core data, a series of chain reactions are triggered to achieve multi-level menu display. Furthermore, the principle of minimizing the number of variables is used, employing only the most necessary variables to solve this display process, and controlling the page display flow as much as possible through chain reactions.
[0061] (1) Design of slicing container: like Figure 3 As shown, on the page, the content is first placed in a ScrollView object (the scroll view component, the part in red in the figure); Furthermore, by placing a UIView object (user interface component, shown by the green line in the diagram) inside a ScrollView object, you can set its background color to white.
[0062] Furthermore, place a UIStackView object (a slice container, where each of its child views is a slice of itself, and multiple slices are placed in the slice container) inside a UIView object, and set its size to be the same as the UIView.
[0063] (2) Page displays the data variable data: It should be noted that when declaring a member variable (the data variable is displayed on the page) on the electronic manual page, the structure type of the data variable adopts the source data structure introduced in the first point above.
[0064] The `data` variable contains the `didSet` function, which is executed when the variable is assigned a value.
[0065] In the `didSet` function of `data`, perform the following steps: 1. Clean the slicing container Get the list of child views (slices) of the UIStackview object (slice container), and delete each child view. The purpose of doing this is to avoid the data drawn last time from polluting the data to be displayed this time.
[0066] 2. Refill the slicing container Iterate through the `body` property in the `data` variable. As mentioned earlier, `body` is essentially a menu directory list. For each `body`: 2.1 Set the diy_level (directory level attribute) of the menu directory to 0 or 1. It doesn't matter whether it starts with 0 or 1, because it is the first level. Setting it will trigger a chain reaction, which will be introduced in detail in (3) below.
[0067] It should be noted that the `diy_level` attribute is a custom member attribute added to the menu directory in this embodiment, representing the directory's hierarchy. This attribute improves convenience during the subsequent drawing process. Through this attribute, the menu directory can know its position within the entire directory hierarchy. Without this attribute, the menu directory would have to perform a full tree-structure search to determine its position. Therefore, this attribute effectively saves performance in the multi-level menu directory display process.
[0068] 2.2 Create a new child view (a child view component, defined as UserManualItemView), and use the child view's initialization function to associate the child view with the list item data (menu directory data). That is, each child view will hold its own corresponding menu directory data, so it can draw differently based on the data and display the relevant data.
[0069] 2.3 Add the child view to the slice container UIStackview object.
[0070] (3) Directory level attribute diy_level This is the hierarchy of the manual list, and it is also an attribute field added to the source data menu directory in this embodiment.
[0071] In the didSet method, each option of the children in the source data menu directory is iterated through, and its diy_level is set to the current diy_level + 1.
[0072] This triggers a chain reaction, because each option has its own children. So when setting the diy_level for a sub-option, it will also let its children set it. As a result, the diy_level for each menu item is set, and the diy_level value increases layer by layer.
[0073] (4) Subview: UserManualItemView Every category in the user manual, whether it's the top, middle, or bottom level, is drawn using this UserManualItemView object. However, the display and interaction of different levels of categories will naturally differ. This can be distinguished by checking the diy_level value and other data in the data table. For example: 1. For example Figure 2 In the user manual, since there are icons in the first-level directory, the icon is drawn only when the diy_level value is 0 or 1. 2. Whether to draw a dropdown arrow depends on whether the `children` property of `data` has a value: if `children` is empty, do not draw a dropdown arrow; if `children` is not empty, draw a dropdown arrow. 3. Whether to draw a bottom line is determined by the diy_level value, because only the top-level directory has a bottom line. That is, the bottom line is only drawn when diy_level = 0 or 1.
[0074] like Figure 4 As shown above, the process of creating an electronic manual during page initialization can be summarized as follows: 1. Request data from the API and assign a value to the `data` variable; 2. Clean the slicing container; 3. Iterate through the children property of the body attribute of data and assign the value of diy_level to each level. 4. Create a UserManualItemView for each menu item; 5. Each UserManualItemView is drawn differently based on its diy_level and other attributes; 6. Add the UserManualItemView to the slice container, repopulate the slice container, and then display the page.
[0075] Therefore, in the process of creating an electronic manual, a single data variable is used to trigger a chain reaction, eliminating the need for complex variables and drawing processes. Compared to the TableView solution, this greatly simplifies the implementation process, thereby improving page loading efficiency and maintenance convenience.
[0076] In some embodiments, the method of displaying an electronic manual further includes: The expansion or collapse state of each menu item is controlled based on preset expansion attribute variables.
[0077] It should be noted that by setting the expand attribute variable, the expansion or collapse of the menu directory can be easily implemented, thereby further simplifying the implementation process of multi-level menu manuals.
[0078] For example, the expand attribute variable can be defined as diy_isOpened. Each level of menu directory has a corresponding diy_isOpened variable, whose default value is false, indicating the collapsed state. When the directory is clicked, its corresponding diy_isOpened is switched to the opposite value, that is, it is assigned true from false, indicating the expanded state.
[0079] In some embodiments, the expanded or collapsed state of each menu item is controlled based on a preset expanded attribute variable, including: In response to the user's click on the target item, switch the assignment state of the expanded attribute variable corresponding to the target item; Once the expanded attribute variable corresponding to the target item is switched to represent the expanded state, the nested directory hierarchy attribute corresponding to the target item is traversed and the corresponding subview component is generated. Add each subview component to the slice container object corresponding to the target item to generate the expanded view of the target item.
[0080] It should be noted that each item can also contain a slice container. When an item is clicked and switched to diy_isOpened=true (expanded state), the children property corresponding to this item is traversed through the data, and the corresponding child view components are generated. Finally, these child view components are added to the slice container object corresponding to the item to generate the view that expands after the item is clicked.
[0081] In some embodiments, traversing the nested directory hierarchy attributes corresponding to the target entry and generating the corresponding child view components includes: If the nested directory hierarchy attribute corresponding to the target item indicates that there is a sub-menu directory, then create corresponding subview components based on the menu directory attribute of each sub-menu directory.
[0082] Specifically, when a target item is clicked, if its diy_isOpened variable switches to true (i.e., in the expanded state), the system first checks the children attribute of the body corresponding to the item to determine if the children attribute is empty. If it is not empty, it means that the item has a sub-menu directory. In this case, the system iterates through the menu directory attribute body corresponding to each sub-menu directory and creates the corresponding child view component based on it.
[0083] Based on this, when it is determined that there is a sub-menu based on the nested directory hierarchy attribute, a subview component is created based on the corresponding menu directory attribute, which further simplifies the implementation process of expanding multi-level menus.
[0084] In some embodiments, traversing the nested directory hierarchy attributes corresponding to the target entry and generating the corresponding child view components includes: If the nested directory hierarchy attribute corresponding to the target entry indicates that there is no sub-menu directory, obtain the specific content path corresponding to the target entry. Retrieve detailed content data based on the specific content path, and create corresponding subview components based on the detailed content data.
[0085] It should be noted that, based on the children attribute of the body corresponding to the item, if the children attribute is empty, it means that the item does not have a sub-menu directory. In this case, the specific content path (contentPath) value of the body corresponding to the item is directly obtained, and the corresponding subview component is constructed based on this to realize the display of the details page.
[0086] Based on this, when it is determined that there is no submenu based on the nested directory hierarchy attribute, the details page is loaded directly based on the specific content path, effectively realizing the specific switching display from the menu to the details page.
[0087] In some embodiments, the method of displaying an electronic manual further includes: Once the expanded attribute variable corresponding to the target entry is switched to the table collection state, obtain the target slice container object corresponding to the target entry, and clear the existing subview components of the target slice container object.
[0088] It should be noted that when a target item is clicked, its diy_isOpened variable switches to false, i.e., in the collapsed state. Then, the target slice container object corresponding to the target item is obtained (this target slice container object is used to hold the child views corresponding to multiple sub-items in the currently clicked item). Then, the existing child view components (child views) in the target slice container object are cleared, thereby realizing the collapse operation of the menu of the target item.
[0089] Based on this, when switching to the collapsed state based on the expanded attribute variable, the collapsed effect is achieved by clearing the subview component corresponding to the item, further simplifying the implementation process of collapsing multi-level menus.
[0090] The following specific examples illustrate the click event implementation process of this application's embodiments: Specifically, first, add a slice container: UIStackview object to each UserManualItemView.
[0091] Here we introduce the second variable added to the source data menu directory in this embodiment: the expand attribute variable (diy_isOpened), which indicates whether it is in an expanded state. Its value is true to indicate expanded, and its value is false to indicate collapsed. The default value is false.
[0092] By checking the value of diy_isOpened in the click event, if it expands, the children property of data is accessed. A new UserManualItemView object is created for each menu item, and the child view and the menu item are associated with each other through the initialization function. This will also cause a chain reaction.
[0093] It's understandable that the initialization function of the UserManualItemView object also iterates through the children objects of this menu directory. For each submenu directory, a new UserManualItemView object is created... until the children list of a certain menu directory is empty, at which point it indicates that it is the last level.
[0094] Then, each UserManualItemView object is added to its own slice container. The final result is the expanded view when an item is clicked to expand.
[0095] It should be noted that the above process mainly implements the flow of expanding and displaying the directory based on click events when the directory is not expanded. However, click events do not only occur in the above scenario (the state when the directory is not collapsed by clicking). After the directory is expanded, it can also be collapsed by clicking. Therefore, the click events are described systematically below: (1) By judging the number of children attribute of data stored on UserManualItemView, we can know whether the item will be a menu or jump to the HTML details after being clicked.
[0096] (2) If it is necessary to jump to the HTML details, then get the menu directory data bound to the view, get its member variable: directory address contentPath, and jump to the details page based on this; (3) If it is a menu directory, then check the value of diy_isOpene mentioned above. If it is true, it means that it is expanded. Then access the children of data. For each menu directory, perform the aforementioned steps of creating child views.
[0097] (4) If diy_isOpened is false, indicating that the slice container is collapsed, then perform the aforementioned "clean up the slice container" step and delete the submenu directory.
[0098] like Figure 5 As shown, based on the expandable attribute variable diy_isOpened, the implementation flow of the click event is as follows: 1. All menu items are collapsed; 2. When a user clicks on a target item, the corresponding diy_isOpened value is set to true; 3. Iterate through the children property of the body property of data; 4. For each menu item, create a UserManualItemView; each UserManualItemView has its own unified click event; 5. Each UserManualItemView selects whether to create child views based on the children attribute of the data; 6. Add the child view to the slice container corresponding to the UserManualItemView, and repopulate the slice container.
[0099] In some embodiments, the method of displaying an electronic manual further includes: Respond to the user's search request and obtain the keywords of the search request; By determining whether the menu directory name at each level contains a keyword, the first type of entries whose menu directory name itself contains a keyword and the second type of entries whose sub-menu directory names contain a keyword are filtered out as a set of search results entries. Set each search result in the search result collection to an expanded state and generate a corresponding search result subview component. Add each search result subview component to the search slice container object to generate the search result view corresponding to the search request.
[0100] It should be noted that when implementing the keyword search function, the process can be based on a hierarchical traversal of the keyword, checking whether the menu directory name at each level contains the keyword. This yields the first category of entries containing the keyword and the second category of entries containing the keyword in their sub-menus, which are then used as search result entries. For these filtered search result entries, the process is simultaneously switched to an expanded state, and corresponding subview components are generated for each of these search result entries. Finally, these subview components are added to the search slice container object (a search slice container object refers to a container used to hold one or more search result entries to be displayed, where each search result entry can be a different level of menu entry that matches the keyword, or specific page content containing the keyword), to obtain the search result view corresponding to the search request.
[0101] Based on this, when searching for keywords, the process of assigning keywords layer by layer and filtering out all menu items that meet the keyword conditions is effectively simplified by generating subview components for each level of menu directory through a slice container.
[0102] The following examples illustrate the specific process of keyword search display: For example, the rules for searching and displaying electronic manuals are defined as follows: The table of contents of an electronic manual is as follows: Level 1: AABBCC Level 2: AA1, AA2, AA3BB1, BB2E, BB3CC1, CC2, CC3 Assuming the current search keyword is E, the search results will be displayed as follows: Level 1: BB (Expanded) Level 2: BB1 (collapsed state, but can be expanded), BB2E (expanded state), BB3 (collapsed state, but can be expanded state).
[0103] Therefore, menus containing keywords, whether themselves or their submenus, will be expanded. Thus, two keyword variables are defined to record the state of each level: 1. Menus containing keywords: diy_searchIsSelfContain; 2. Submenus containing keywords: diy_searchIsSubContain.
[0104] The following is the specific implementation process: Once the user enters a keyword, we obtain that keyword and then begin the following logical processing: (1) For each element in the body attribute of the data variable: Assign a keyword to its `diy_searchText` property, which is a custom property. In its `didSet` function, perform the following steps to trigger the setting of the data (mainly the two keyword variables mentioned above): 1. Set diy_searchText For each element of children (i.e., each level of the menu directory), assign its diy_searchText to the keyword of the current search input.
[0105] 2. Set diy_searchIsSelfContain for each level of the menu directory: If menuName contains diy_searchText, set diy_searchIsSelfContain to true; If menuName does not contain diy_searchText, set diy_searchIsSelfContain to false.
[0106] 3. Set diy_searchIsSubContain: The menu directory accesses the children elements at its current level, calls the contains() method, and finds elements that meet the following conditions: if such an element exists, diy_searchIsSubContain is set to true; otherwise, it is set to false.
[0107] The conditions are: If the number of children of an element is empty, return its diy_searchIsSelfContain; If the number of children of an element is not empty, then return its diy_searchIsSubContain.
[0108] Understandably, since setting diy_searchText in step 1 will cause all elements to go through didSet once, the values of diy_searchIsSelfContain and diy_searchIsSubContain for each element are calculated. This allows the diy_searchIsSubContain value of the parent element to be returned layer by layer.
[0109] 4. Set diy_searchIsOpen This step sets the conditions for collapsing, which can be controlled by a custom variable diy_searchIsOpen: true for expand, false for collapse.
[0110] In this step, assign it the following value: diy_searchIsOpen = diy_searchIsSubContain In other words, by assigning a value to diy_searchIsOpen based on diy_searchIsSubContain, when diy_searchIsSubContain is true, the corresponding diy_searchIsOpen is also true, controlling the expansion of the directory at that level.
[0111] (2) Filter the elements that meet the following conditions from the body attribute of data: 1. Elements where diy_searchIsSubContain is true; these elements indicate that their submenu names contain keywords. 2. If diy_searchIsSelfContain is true, these elements indicate that their menu names contain keywords.
[0112] (3) Triggering UI logic If the number of elements filtered in step (2) is 0, it means that no directory or content related to the keyword was found. If the elements filtered in step (2) are not 0, these elements are stored, for example, by using a member variable searchlist (representing the collection of search results entries) to store them, and the interface logic is executed in its didSet method.
[0113] Understandably, the interface logic is similar to the drawing scheme for initializing the electronic manual, using slice containers to implement the interface display: Specifically, first place a slice container UIStackView on the interface; Then, for each element in the searchlist, set its diy_level to 0 or 1; Create a UserManualSearchItemView (i.e., a subview component in the search function), and set its data to the data corresponding to each element of the searchlist mentioned above; finally, similar to the UserManualItemView mentioned earlier, add each UserManualSearchItemView to the slice container to display the search results.
[0114] It should be noted that the embodiments of this application mainly use three variables (data, diy_isOpened and diy_searchText) to realize the functions of displaying, clicking and searching the electronic manual, which greatly simplifies the variables in the implementation process of the electronic manual and effectively improves the page loading efficiency and maintenance convenience.
[0115] Please refer to Figure 6 , Figure 6 A block diagram illustrating the composition of an electronic manual display device provided in some embodiments of this application is shown. It should be understood that this electronic manual display device is similar to the one described above. Figure 1 Corresponding to the method embodiments, it is able to perform each step involved in the above method embodiments. The specific functions of the display device of this electronic manual can be found in the description above. To avoid repetition, detailed descriptions are appropriately omitted here.
[0116] Figure 6 The electronic manual display device includes at least one software function module that can be stored in memory or embedded in the electronic manual display device in the form of software or firmware. The electronic manual display device includes: The variable assignment module 610 is used to assign values to page display data variables based on the currently received page display source data; the source data structure used by the page display data variables includes a menu directory, which includes nested directory levels and specific content paths; The hierarchy setting module 620 is used to traverse the menu directory attributes of the page display data variables, and to increment the corresponding directory hierarchy attributes based on the nested directory hierarchy attributes of each traversed menu directory. The view creation module 630 is used to create corresponding subview components based on each directory hierarchy attribute and its corresponding associated menu directory data; wherein, each subview component is used to draw the view according to its corresponding directory hierarchy attribute and corresponding menu directory data; Page display module 640 is used to add various subview components to the slice container object to generate an electronic manual display page.
[0117] It is understood that the above-described device embodiments correspond to the method embodiments of the present invention. The electronic manual display device provided by the embodiments of the present invention can realize the electronic manual display method provided by any one of the method embodiments of the present invention.
[0118] Those skilled in the art will understand that, for the sake of convenience and brevity, the specific working process of the device described above can be referred to the corresponding process in the aforementioned method, and will not be elaborated further here.
[0119] like Figure 7 As shown, some embodiments of this application provide an electronic device 700, which includes a memory 710, a processor 720, and a computer program stored on the memory 710 and executable on the processor 720. When the processor 720 reads the program from the memory 710 via a bus 730 and executes the program, it can implement any of the methods shown in the above electronic manual.
[0120] Processor 720 can process digital signals and can include various computing architectures. For example, it can be a complex instruction set computer architecture, a reduced instruction set computer architecture, or an architecture that implements multiple instruction set combinations. In some examples, processor 720 can be a microprocessor.
[0121] The memory 710 can be used to store instructions executed by the processor 720 or data related to the execution of instructions. These instructions and / or data may include code for implementing some or all of the functions of one or more modules described in the embodiments of this application. The processor 720 of this disclosure embodiment can be used to execute the instructions in the memory 710 to implement the methods shown above. The memory 710 includes dynamic random access memory, static random access memory, flash memory, optical memory, or other memories well known to those skilled in the art.
[0122] Some embodiments of this application also provide a computer-readable storage medium storing a computer program that, when executed by a processor, describes the method described in the method embodiments.
[0123] Some embodiments of this application also provide a computer program product that, when run on a computer, causes the computer to perform the methods described in the method embodiments.
[0124] It should be noted that the various embodiments in this specification are described in a progressive manner, with each embodiment focusing on the differences from other embodiments. Similar or identical parts between embodiments can be referred to interchangeably. For apparatus embodiments, since they are basically similar to method embodiments, the description is relatively simple; relevant parts can be referred to the descriptions in the method embodiments.
[0125] It should be understood, in the several embodiments provided in this application, that the disclosed apparatus and methods can also be implemented in other ways. The apparatus embodiments described above are merely illustrative; for example, the flowcharts and block diagrams in the accompanying drawings illustrate the architecture, functionality, and operation of possible implementations of apparatus, methods, and computer program products according to various embodiments of this application. In this regard, each block in a flowchart or block diagram may represent a module, segment, or portion of code containing one or more executable instructions for implementing a specified logical function. It should also be noted that in some alternative implementations, the functions marked in the blocks may occur in a different order than those marked in the drawings. For example, two consecutive blocks may actually be executed substantially in parallel, and they may sometimes be executed in reverse order, depending on the functions involved. It should also be noted that each block in a block diagram and / or flowchart, and combinations of blocks in block diagrams and / or flowcharts, can be implemented using a dedicated hardware-based system that performs the specified function or action, or using a combination of dedicated hardware and computer instructions.
[0126] In addition, the functional modules in the various embodiments of this application can be integrated together to form an independent part, or each module can exist independently, or two or more modules can be integrated to form an independent part.
[0127] If the aforementioned functions are implemented as software functional modules and sold or used as independent products, they can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, or a portion of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods described in the various embodiments of this application. The aforementioned storage medium includes various media capable of storing program code, such as USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical disks.
[0128] The above description is merely an embodiment of this application and is not intended to limit the scope of protection of this application. Various modifications and variations can be made to this application by those skilled in the art. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of this application should be included within the scope of protection of this application. It should be noted that similar reference numerals and letters in the following figures indicate similar items; therefore, once an item is defined in one figure, it does not need to be further defined and explained in subsequent figures.
[0129] The above description is merely a specific embodiment of this application, but the scope of protection of this application is not limited thereto. Any variations or substitutions that can be easily conceived by those skilled in the art within the scope of the technology disclosed in this application should be included within the scope of protection of this application. Therefore, the scope of protection of this application should be determined by the scope of the claims.
[0130] It should be noted that, in this document, relational terms such as "first" and "second" are used only to distinguish one entity or operation from another, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Furthermore, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. Without further limitations, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes said element.
Claims
1. A method for displaying an electronic manual, characterized in that, include: The page display data variables are assigned values based on the currently received page display source data; wherein, the source data structure used by the page display data variables includes a menu directory, and the menu directory includes nested directory levels and specific content paths; The menu directory attribute of the data variable is displayed on the page. Based on the nested directory level attribute in each menu directory, an auto-incrementing value is assigned and the corresponding directory level attribute is generated. Each subview component is created based on the directory hierarchy attributes and their corresponding associated menu directory data; wherein each subview component is used to draw the view according to its corresponding directory hierarchy attributes and corresponding menu directory data; Add each subview component to the slice container object to generate an electronic manual display page.
2. The method for displaying an electronic manual according to claim 1, characterized in that, Before traversing the page to display the menu directory attributes of the data variables, the following is also included: Clear the existing child view components in the slice container object.
3. The method for displaying an electronic manual according to claim 1, characterized in that, Also includes: The expansion or collapse state of each menu item is controlled based on preset expansion attribute variables.
4. The method for displaying an electronic manual according to claim 3, characterized in that, The control of the expanded or collapsed state of each menu item based on preset expanded attribute variables includes: In response to the user's click on the target item, switch the assignment state of the expanded attribute variable corresponding to the target item; If the expansion attribute variable corresponding to the target item is switched to represent the expansion state, the nested directory hierarchy attribute corresponding to the target item is traversed and the corresponding subview component is generated. Each subview component is added to the slice container object corresponding to the target item to generate the expanded view of the target item.
5. The method for displaying an electronic manual according to claim 4, characterized in that, The step of traversing the nested directory hierarchy attributes corresponding to the target entry and generating the corresponding child view components includes: If the nested directory hierarchy attribute corresponding to the target entry indicates that there is a sub-menu directory, then a corresponding subview component is created based on the menu directory attribute corresponding to each sub-menu directory.
6. The method for displaying an electronic manual according to claim 4, characterized in that, The step of traversing the nested directory hierarchy attributes corresponding to the target entry and generating the corresponding child view components includes: If the nested directory hierarchy attribute corresponding to the target entry indicates that there is no sub-menu directory, obtain the specific content path corresponding to the target entry; Retrieve detailed content data based on the specific content path, and create corresponding subview components based on the detailed content data.
7. The method for displaying an electronic manual according to claim 4, characterized in that, Also includes: If the expanded attribute variable corresponding to the target entry is switched to the table collection state, the target slice container object corresponding to the target entry is obtained, and the existing subview components of the target slice container object are cleared.
8. The method for displaying an electronic manual according to claim 1, characterized in that, Also includes: In response to a user's search request, the system retrieves the keywords associated with the search request. By determining whether the name of each level of menu directory contains the keyword, the first type of entries whose menu directory name itself contains the keyword and the second type of entries whose sub-menu directory names contain the keyword are filtered out as a set of search results entries; Each search result item in the search result item set is set to an expanded state, and a corresponding search result subview component is generated for each item. Each search result subview component is added to the search slice container object to generate the search result view corresponding to the search request.
9. A display device for an electronic manual, characterized in that, include: The variable assignment module is used to assign values to page display data variables based on the currently received page display source data; The source data structure used for the data variables displayed on the page includes a menu directory, which includes nested directory levels and specific content paths; The hierarchy setting module is used to traverse the menu directory attributes of the page display data variables, increment the value based on the nested directory hierarchy attributes in each traversed menu directory, and generate the corresponding directory hierarchy attributes. The view creation module is used to create corresponding subview components based on each of the directory hierarchy attributes and their corresponding associated menu directory data; wherein, each subview component is used to draw the view according to its corresponding directory hierarchy attributes and corresponding menu directory data; The page display module is used to add various subview components to the slice container object to generate an electronic manual display page.
10. An electronic device, characterized in that, It includes a memory, a processor, and a computer program stored on the memory and executable on the processor, wherein the processor, when executing the program, can implement the method of displaying the electronic manual as described in any one of claims 1-8.