CN117055994B - Data-driven-based interactive interface implementation method and processing terminal - Google Patents
Data-driven-based interactive interface implementation method and processing terminal Download PDFInfo
- Publication number
- CN117055994B CN117055994B CN202310956577.9A CN202310956577A CN117055994B CN 117055994 B CN117055994 B CN 117055994B CN 202310956577 A CN202310956577 A CN 202310956577A CN 117055994 B CN117055994 B CN 117055994B
- Authority
- CN
- China
- Prior art keywords
- linked list
- list set
- controls
- interactive interface
- data
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
- 230000002452 interceptive effect Effects 0.000 title claims abstract description 43
- 238000000034 method Methods 0.000 title claims abstract description 41
- 230000004048 modification Effects 0.000 claims description 5
- 238000012986 modification Methods 0.000 claims description 5
- 238000007792 addition Methods 0.000 claims description 3
- 238000012217 deletion Methods 0.000 claims description 3
- 230000037430 deletion Effects 0.000 claims description 3
- 238000010586 diagram Methods 0.000 description 3
- 230000000694 effects Effects 0.000 description 2
- 230000001360 synchronised effect Effects 0.000 description 2
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 230000006870 function Effects 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/445—Program loading or initiating
- G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The invention discloses a data-driven-based interactive interface implementation method and a processing terminal, wherein the method comprises the following steps: creating ItemsControl controls and loading N unit controls on a target interactive interface; respectively declaring a first linked list set micList and a second linked list set micUiList with the type being generic, and declaring a counter; creating a plurality of text controls and picture controls on the ItemsControl controls; loading original data used in an interactive interface through an asynchronous thread; binding the elements of the second linked list set micUiList with the ItemsControl control; a background asynchronous thread is built, and the bound elements are loaded by adopting an AddItemAsync method of delegation of declaration. The invention realizes the data-driven interactive interface, loads and displays a plurality of unit controls without jamming, and has high loading speed.
Description
Technical Field
The invention relates to the technical field of computers, in particular to a data-driven-based interactive interface implementation method and a processing terminal.
Background
Many controls are often available in some interactive interfaces to display related information, through which information desired by a user is presented. As shown in fig. 2 and 3, the interactive interface includes a plurality of controls, each control represents a corresponding conference participant in the digital conference system, if the conference participant enters the digital conference system, the control is displayed, and if the conference participant is absent or leaves the digital conference system, the control is not displayed. Controls include numbers (upper digits, such as 217), names (lower text, chairman), and icons (one microphone icon). In the interactive interface of the digital conference system, a plurality of controls need to be loaded and displayed, the traditional method is slow to load, a user needs to wait for a period of time, and the longer the number of the controls is, the longer the loading time is, and the longer the waiting time is. In addition, in the interactive interface, where the content of the element of one or more controls changes (such as number updating), how to ensure that the elements can be updated synchronously in the interactive interface is also a problem.
Disclosure of Invention
Aiming at the defects of the prior art, the invention aims to provide a data-driven-based interactive interface implementation method and a processing terminal, which can solve the problems described in the background art.
The technical scheme for realizing the purpose of the invention is as follows: a method for realizing an interactive interface based on data driving comprises the following steps:
step 1: on the target interactive interface, an ItemsControl control is created, the ItemsControl control is used for loading N unit controls which need to dynamically display contents in the interactive interface, N is more than or equal to 1,
the unit control comprises a first component MicEntity and a second component MicUiEntity which are formed based on class object-oriented languages, wherein the first component is used for loading the attribute of the unit control, and the second component is used for declaring the data object of the unit control;
step 2: respectively declaring a first linked list set micList and a second linked list set miculilist with the type being generic, wherein the first linked list set micList is used for loading objects declared by a first component MicEntity, the second linked list set miculilist is used for loading objects declared by a second component MicUiEntity, and a counter is used for counting the number of the objects loaded in the linked list set micList;
step 3: creating a plurality of text controls and picture controls on the ItemsControl controls, wherein the text controls are used for binding data of a text type of an object loaded in the second linked list set micUIList so as to display the text on the unit controls, one text control is bound with one text object TextBlock, different text controls are bound with different text objects, the picture controls are used for binding data of a picture type of the object loaded in the second linked list set micUIList, one picture control is bound with one picture object, and different picture controls are bound with different picture objects;
step 4: if the number of elements in the first linked list set micList is more than 0, executing the step 6, otherwise, executing the step 5;
step 5: loading original data used in an interactive interface through an asynchronous thread, and storing the loaded original data into a first linked list set micList;
step 6: binding elements of the second linked list set micuiList with the ItemsControl control, and binding the elements of the second linked list set micuiList to the element set on the ItemsControl control to be a body ItemCtrl, so that the ItemsControl control can sense element changes in the second linked list set micuiList and display corresponding unit controls based on the changes;
step 7: creating a background asynchronous thread for a set body ItemCtrl of an ItemsControl control, loading the bound element in the background through the asynchronous thread and adopting a declared delegation to an AddItemAsync method, wherein the AddItemAsync method is internally provided with a recursive logic code block so as to load the bound element in a recursive manner;
step 8: the background asynchronous thread executes the AddItemAsync method, exits after the execution is finished, and ends the processing.
Further, in step 1, the attributes of the element control typically include ID, name, type.
Further, in step 2, the first linked List set micList adopts List class, and the second linked List set miculilist adopts observalblecolselect class.
Further, in step 6, the element changes include one or more of additions, deletions, and modifications.
Further, the declaration type of the second linked list set micUiList is an observalblec selection class, and the second component micuiactivity inherits an inotifypertychanged interface.
Further, the background asynchronous thread executes an AddItemAsync method, and the specific implementation of the method comprises the following steps:
step 81: comparing the current counting result of the counter with the number of elements in the first linked list set micList, if the counting result is smaller than the number of elements in the first linked list set micList, executing step 82, otherwise, ending the processing;
step 82: extracting the attribute of the current element in the first linked list set micList, and assigning the extracted attribute to a variable temp;
step 83: assigning the attribute of the variable temp to a temporary variable uiEy preset on the second component MicUiiEntity in one-to-one correspondence;
step 84: adding a temporary variable uiEy to the second linked list set micUIST;
step 85: adding 1 to the counting result of the counter and updating;
step 86: the process jumps again to step 81, and the recursive call is performed again.
A processing terminal, comprising:
a memory for storing program instructions;
and the processor is used for running the program instructions to execute the steps of the data-driven interactive interface implementation method.
The beneficial effects of the invention are as follows: according to the method and the device, the background asynchronous thread senses the data change, and then drives the element change of the unit control of the interactive interface, so that synchronous updating of the data is realized, the data-driven interactive interface is realized, loading and displaying of a plurality of unit controls on the interactive interface can be better realized, and the loading speed is high.
Drawings
FIG. 1 is a schematic flow chart of the present invention;
FIG. 2 is a schematic diagram of an interactive interface for a digital conference;
FIG. 3 is a partial schematic view of FIG. 2;
fig. 4 is a schematic diagram of a processing terminal.
Detailed Description
The invention will be further described with reference to the accompanying drawings and detailed description:
as shown in fig. 1, a method for implementing an interactive interface based on data driving includes the following steps:
step 1: on the target interactive interface, an ItemsControl control is created, and the ItemsControl control is used for loading N unit controls which need to dynamically display contents in the interactive interface, wherein N is more than or equal to 1.
Referring to fig. 2, fig. 2 is a schematic diagram of an interactive interface for a digital conference, in fig. 2, an ItemsControl control is created, where the ItemsControl is used to load all unit controls for showing whether a conference participant participates in the conference, each unit control characterizes a seat, if the conference participant enters the digital conference, the corresponding unit control is displayed, otherwise, the unit control is not displayed at the corresponding position.
The unit control comprises a first component MicEntity and a second component MicUiEntity which are formed by class-based object-oriented languages, wherein the first component is used for loading the attribute of the unit control, and the second component is used for declaring the data object of the unit control.
Attributes of element controls typically include ID, name, type, etc., only attributes, no method.
Taking an interactive interface applied to a digital conference as an example, a first component MicEntity is defined based on classes, and the first component MicEntity contains field attributes such as a microphone ID, a microphone participant name, a microphone type and the like. The second component MicUiEntity is defined based on the class, the field attribute of the second component MicUiEntity comprises a microphone ID, a participant name PeopleName, a microphone type MicType and a microphone icon MicImg, and the second component MicUiEntity inherits an INOTifyPropertyChanged interface to realize a field attribute change notification function.
Step 2: a first linked list set micList and a second linked list set miculilist, respectively, of which the types are generic, and a counter. The first linked list set micList is used for loading the object declared by the first component MicEntity, and the second linked list set miculilist is used for loading the object declared by the second component MicUiEntity. The counter is used for counting the number of objects loaded in the linked list set micList, namely, every time an object declared by the first component MicEntity is loaded in the linked list set micList, the count is increased by 1, namely, the current count result is increased by 1 to obtain a new count result.
The first linked List set micList adopts a List class, and the second linked List set micUiList adopts an ObservbleControlselect class.
Step 3: and creating a plurality of text controls and picture controls on the ItemsControl controls, wherein the text controls are used for binding the data of which the objects loaded in the second linked list set micUILIST are of the text types so as to display the text on the unit controls, one text control is bound with one text object TextBlock, and different text controls are bound with different text objects. For example, one text control binds a microphone ID and the other text control binds a participant name peopleName. The picture control is used for binding the data of which the object loaded in the second linked list set micuiList is of a picture type, one picture control is bound with one picture object, and different picture controls are bound with different picture objects. For example, one picture control binds the microphone icon MicImg. The microphone image in fig. 2 and 3 is the picture control.
Step 4: if the number of elements in the first linked list set micList is greater than 0, executing step 6, otherwise, executing step 5.
Step 5: and loading the original data used in the interactive interface through the asynchronous thread, and storing the loaded original data into a first linked list set micList.
Step 6: binding the elements of the second linked list set micuiList with the ItemsControl control, and binding the elements of the second linked list set micuiList to the element set on the ItemsControl control to be the body ItemCtrl, so that the ItemsControl control can sense the element change in the second linked list set micuiList and display corresponding unit controls based on the change, wherein the element change comprises one or more of addition, deletion and modification.
In the step, the ItemsControl control can sense element changes of the unit control in real time, so that the interactive interface can be changed in real time to show the required unit control and elements on the unit control. The declaration type of the second linked list set micuiList is an observalbleC selection class, and the object of the second component MicuiEntity is loaded, and the second component MicuiEntity inherits the INOTifyPropertyChanged interface, so that element change of the unit control can be perceived, and the effect of driving the interactive interface based on element (namely data) change of the unit control is realized, namely the effect of driving the UI by data is realized.
Step 7: a background asynchronous thread is created for a set body ItemCtrl of the ItemsControl control, bound elements are loaded in the background through the asynchronous thread and adopting a declared delegation to an AddItemAsync method, and the AddItemAsync method is internally provided with a recursive logic code block and can load the bound elements in a recursive mode.
Step 8: the background asynchronous thread executes the AddItemAsync method, exits after the execution is finished, and ends the processing.
The background asynchronous thread executes an AddItemAsync method, and the method specifically comprises the following steps:
step 81: comparing the current counting result of the counter with the number of elements in the first linked list set micList, if the counting result is smaller than the number of elements in the first linked list set micList, executing step 82, otherwise, ending the processing.
When the count result is equal to the number of elements in the first linked list set micList, it means that the recursion needs to end, that is, the processing ends and the execution of the additemsync method is exited.
Step 82: and extracting the attribute of the current element in the first linked list set micList, and assigning the extracted attribute to the variable temp.
Step 83: and assigning the attribute of the variable temp to a temporary variable uiEy preset on the second component MicUiiEntity in one-to-one correspondence.
The command of this step is as follows:
micuiactivity uiey=new micuiactivity { id= temp.ID, peopleName = temp.PeopleName, micType =temp. Here, temp.id is ID, temp.PeopleName as a variable temp and PeopleName as a variable temp, and others.
Step 84: the temporary variable uiEy is added to the second linked list set miculilist.
Namely, adding elements to the second linked list set miculilist, wherein the adding elements can adopt an Add () method. For example, the miculilist. Add (uiEy) command code may implement adding an element to the second linked list set miculilist.
Step 85: the count result of the counter is incremented by 1 and updated, i.e., the new count result=the original count result+1. An operation command of adding 1 to the count result of the counter, such as micindex=micindex+1, where MicIndex on the left side of the equation represents the updated count result (i.e., the new count result), and MicIndex on the right side of the equation represents the original count result.
Step 86: the process jumps again to step 81, and the recursive call is performed again.
Through the steps, loading of all unit elements of the interactive interface is completed.
According to the method and the device, the background asynchronous thread senses the data change, and then drives the element change of the unit control of the interactive interface, so that synchronous updating of the data is realized, the data-driven interactive interface is realized, loading and displaying of a plurality of unit controls on the interactive interface can be better realized, and the loading speed is high.
As shown in fig. 4, the present invention further provides a processing terminal 100, which includes:
a memory 101 for storing program instructions;
and a processor 102 for executing the program instructions to perform the steps of the data-driven based interactive interface implementation method.
The embodiment disclosed in the present specification is merely an illustration of one-sided features of the present invention, and the protection scope of the present invention is not limited to this embodiment, and any other functionally equivalent embodiment falls within the protection scope of the present invention. Various other corresponding changes and modifications will occur to those skilled in the art from the foregoing description and the accompanying drawings, and all such changes and modifications are intended to be included within the scope of the present invention as defined in the appended claims.
Claims (7)
1. The method for realizing the interactive interface based on the data driving is characterized by comprising the following steps:
step 1: on the target interactive interface, an ItemsControl control is created, the ItemsControl control is used for loading N unit controls which need to dynamically display contents in the interactive interface, N is more than or equal to 1,
the unit control comprises a first component MicEntity and a second component MicUiEntity which are formed based on class object-oriented languages, wherein the first component is used for loading the attribute of the unit control, and the second component is used for declaring the data object of the unit control;
step 2: respectively declaring a first linked list set micList and a second linked list set miculilist with the type being generic, wherein the first linked list set micList is used for loading objects declared by a first component MicEntity, the second linked list set miculilist is used for loading objects declared by a second component MicUiEntity, and a counter is used for counting the number of the objects loaded in the first linked list set micList;
step 3: creating a plurality of text controls and picture controls on the ItemsControl controls, wherein the text controls are used for binding data of a text type of an object loaded in the second linked list set micUiList so as to display the text on the unit controls, one text control is bound with one text object TextBlock, different text controls are bound with different text objects, the picture controls are used for binding data of a picture type of the object loaded in the second linked list set micUiList, one picture control is bound with one picture object, and different picture controls are bound with different picture objects;
step 4: if the number of elements in the first linked list set micList is more than 0, executing the step 6, otherwise, executing the step 5;
step 5: loading original data for an interactive interface through an asynchronous thread, and storing the loaded original data into a first linked list set micList;
step 6: binding elements of the second linked list set micuiList with the ItemsControl control, and binding the elements of the second linked list set micuiList to the element set on the ItemsControl control to be a body ItemCtrl, so that the ItemsControl control can sense element changes in the second linked list set micuiList and display corresponding unit controls based on the changes;
step 7: creating a background asynchronous thread for a set body ItemCtrl of an ItemsControl control, loading the bound element in the background through the asynchronous thread and calling a delegation method AddItemAsync, wherein a recursion logic code block is built in the delegation method AddItemAsync so as to load the bound element in a recursion mode;
step 8: the background asynchronous thread executes the AddItemAsync method, exits after the execution is finished, and ends the processing.
2. The method according to claim 1, wherein in step 1, the attributes of the unit control include ID, name, and type.
3. The method according to claim 1, wherein in step 2, the first linked List set micList is a List type, and the second linked List set micUiList is an observallblefuel type.
4. The data-driven based interactive interface implementation method of claim 1, wherein in step 6, the element change comprises one or more of addition, deletion, and modification.
5. The method for implementing a data-driven interactive interface according to claim 1, wherein the declaration type of the second linked list set miculilist is an observalblec selection class, and the second component micuiactivity inherits an inotifypertychange interface.
6. The method for implementing a data-driven interactive interface according to claim 1, wherein the background asynchronous thread executes an AddItemAsync method, which comprises the following steps:
step 81: comparing the current counting result of the counter with the number of elements in the first linked list set micList, if the counting result is smaller than the number of elements in the first linked list set micList, executing step 82, otherwise, ending the processing;
step 82: extracting the attribute of the current element in the first linked list set micList, and assigning the extracted attribute to a variable temp;
step 83: assigning the attribute of the variable temp to a temporary variable uiEy preset on the second component MicUiiEntity in one-to-one correspondence;
step 84: adding a temporary variable uiEy to the second linked list set micUIST;
step 85: adding 1 to the counting result of the counter and updating;
step 86: the process jumps again to step 81, and the recursive call is performed again.
7. A processing terminal, characterized in that it comprises:
a memory for storing program instructions;
a processor for executing the program instructions to perform the steps of the data-driven based interactive interface implementation method as claimed in any one of claims 1-6.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310956577.9A CN117055994B (en) | 2023-07-31 | 2023-07-31 | Data-driven-based interactive interface implementation method and processing terminal |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310956577.9A CN117055994B (en) | 2023-07-31 | 2023-07-31 | Data-driven-based interactive interface implementation method and processing terminal |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN117055994A CN117055994A (en) | 2023-11-14 |
| CN117055994B true CN117055994B (en) | 2024-02-27 |
Family
ID=88665503
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202310956577.9A Active CN117055994B (en) | 2023-07-31 | 2023-07-31 | Data-driven-based interactive interface implementation method and processing terminal |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN117055994B (en) |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103218230A (en) * | 2013-04-23 | 2013-07-24 | 浪潮集团山东通用软件有限公司 | Method for dynamically creating entity class under frame of Silverlight |
| CN104699498A (en) * | 2014-12-10 | 2015-06-10 | 上海斐讯数据通信技术有限公司 | Android platform based optimization method for asynchronously loading picture through list control |
| CN105120119A (en) * | 2015-09-14 | 2015-12-02 | 徐宁 | Interface interaction control method and system of multi-party conference call |
| CN110688187A (en) * | 2019-09-27 | 2020-01-14 | 福建工程学院 | Data interaction method for control and function in application program customized function interface |
-
2023
- 2023-07-31 CN CN202310956577.9A patent/CN117055994B/en active Active
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103218230A (en) * | 2013-04-23 | 2013-07-24 | 浪潮集团山东通用软件有限公司 | Method for dynamically creating entity class under frame of Silverlight |
| CN104699498A (en) * | 2014-12-10 | 2015-06-10 | 上海斐讯数据通信技术有限公司 | Android platform based optimization method for asynchronously loading picture through list control |
| CN105120119A (en) * | 2015-09-14 | 2015-12-02 | 徐宁 | Interface interaction control method and system of multi-party conference call |
| CN110688187A (en) * | 2019-09-27 | 2020-01-14 | 福建工程学院 | Data interaction method for control and function in application program customized function interface |
Also Published As
| Publication number | Publication date |
|---|---|
| CN117055994A (en) | 2023-11-14 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US5815153A (en) | Multifunction control with changeable appearance | |
| US5880729A (en) | Graphical user interfaces having animated control elements | |
| US8627217B2 (en) | Window display system, window display method, program development support device, and server device | |
| CN103914450A (en) | Method and device for presenting web graphics in mobile terminal platform | |
| US7603624B2 (en) | System and method for styling content in a graphical user interface control | |
| JP6817253B2 (en) | Display control device, display control method, and display control program | |
| CN108304234B (en) | Page display method and device | |
| JPH10240746A (en) | Method for generating single-frame multimedia title | |
| US7447993B2 (en) | System and method for displaying a user interface object using an associated style | |
| US11675479B2 (en) | List display method and apparatus, computer device and computer-readable medium | |
| CN111898056A (en) | Webpage display method and device, storage medium and electronic equipment | |
| CN110286991B (en) | Information processing method and device | |
| CN110471700B (en) | Graphic processing method, apparatus, storage medium and electronic device | |
| CN112445564A (en) | Interface display method, electronic device and computer readable storage medium | |
| CN103257788A (en) | Windows desktop dynamic icon forming method | |
| CN117055994B (en) | Data-driven-based interactive interface implementation method and processing terminal | |
| CN111984887A (en) | Webpage component library loading method and device, storage medium and electronic equipment | |
| CN103914289A (en) | Desktop application access method and device | |
| CN109032728B (en) | UI (user interface) display method, intelligent terminal and computer-readable storage medium | |
| CN112269642A (en) | Application program control method, device, equipment and storage medium based on Windows system | |
| JPH06274304A (en) | Computer system provided with graphical user interface and its control method | |
| CN111078785A (en) | Method and device for visually displaying data, electronic equipment and storage medium | |
| CN111367597A (en) | Color switching method and device and electronic equipment | |
| CN115577676B (en) | Page table control method, device, equipment and storage medium | |
| US6522340B1 (en) | Creating real-world objects |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |