[go: up one dir, main page]

CN120631339A - Method, equipment, medium and product for developing form editor for hybrid development - Google Patents

Method, equipment, medium and product for developing form editor for hybrid development

Info

Publication number
CN120631339A
CN120631339A CN202510753057.7A CN202510753057A CN120631339A CN 120631339 A CN120631339 A CN 120631339A CN 202510753057 A CN202510753057 A CN 202510753057A CN 120631339 A CN120631339 A CN 120631339A
Authority
CN
China
Prior art keywords
control
project
chart
data
development
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.)
Pending
Application number
CN202510753057.7A
Other languages
Chinese (zh)
Inventor
李丹丹
张聪聪
陈宗娟
何绍清
王超硕
程旭
蔡洁
李旭
王晨
孙鹤玲
马腾
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
China Automotive Software Shenzhen Co ltd
Automotive Data of China Tianjin Co Ltd
Original Assignee
China Automotive Software Shenzhen Co ltd
Automotive Data of China Tianjin Co Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by China Automotive Software Shenzhen Co ltd, Automotive Data of China Tianjin Co Ltd filed Critical China Automotive Software Shenzhen Co ltd
Priority to CN202510753057.7A priority Critical patent/CN120631339A/en
Publication of CN120631339A publication Critical patent/CN120631339A/en
Pending legal-status Critical Current

Links

Landscapes

  • Stored Programmes (AREA)

Abstract

本申请公开了一种混合开发的表格编辑器开发方法、设备、介质及产品,涉及软件技术领域,该方法包括:对开源GridControl项目添加自定义列类型,得到定制后项目;将定制后项目集成于Winform应用程序中,并通过C#调用定制后项目提供的接口函数,得到调用后控件;利用WebView2控件加载HTML页面并集成ECharts图表功能,得到图表功能控件;整合调用后控件和图表功能控件;通过C#进行调用后控件与图表功能控件之间的数据处理与交互,得到表格编辑器。本申请通过合理的步骤设置,充分发挥了C++的高性能、C#的开发效率以及Web技术的可视化能力,实现低成本、高性能的表格编辑和可视化功能。

This application discloses a hybrid development table editor development method, device, medium, and product, relating to the field of software technology. The method includes: adding a custom column type to an open source GridControl project to obtain a customized project; integrating the customized project into a WinForm application and calling the interface function provided by the customized project through C# to obtain a call control; using a WebView2 control to load an HTML page and integrate an ECharts chart function to obtain a chart function control; integrating the call control and the chart function control; and performing data processing and interaction between the call control and the chart function control through C# to obtain a table editor. Through reasonable step settings, this application fully utilizes the high performance of C++, the development efficiency of C#, and the visualization capabilities of Web technology to achieve low-cost, high-performance table editing and visualization functions.

Description

Method, equipment, medium and product for developing form editor for hybrid development
Technical Field
The application relates to the technical field of software, in particular to a method, equipment, medium and product for developing a form editor for hybrid development.
Background
With the rapid development of computer technology, a data table editor has become an indispensable tool in the fields of engineering simulation, data analysis and the like. In particular, in the professional fields of Modelica simulation, a large amount of structured data needs to be processed, and higher requirements are put on the performance and the function of the table editor. Conventional form processing tools such as Excel or notepad, while capable of performing basic data editing tasks, have significant shortcomings in processing complex data structures, enabling high performance computing, and supporting specialized data formats.
In the prior art, the form editor is mainly divided into three types of implementation modes, namely a high-performance form control developed by pure C++, a WinForms form control based on a NET framework and a form component based on Web technology. The technical scheme has the limitations that 1, the pure C++ developed form control has excellent performance, but low development efficiency and poor interface interaction experience, 2, the form control under the NET framework has high development efficiency but relatively low performance and is difficult to process large-scale data, and 3, the form component realized by the Web technology has rich visualization capability, but has low data interaction efficiency and is difficult to deeply integrate with desktop application.
Disclosure of Invention
The application aims to provide a method, equipment, medium and product for developing a form editor for hybrid development, which can realize the functions of form editing and visualization with low cost and high performance.
In order to achieve the above object, the present application provides the following solutions:
in a first aspect, the present application provides a method for developing a hybrid-developed form editor, including:
Adding a custom column type to an open source GridControl project to obtain a customized project, wherein the open source GridControl project is developed by using C++;
integrating the customized item into a Winform application program, and calling an interface function provided by the customized item through C# to obtain a called control;
Loading an HTML page by using a WebView2 control, integrating ECharts chart functions, and obtaining a chart function control;
integrating the control after calling and the chart function control by utilizing a Winform application program;
and carrying out data processing and interaction between the control after the call and the chart function control through C# to obtain a table editor.
Optionally, adding a custom column type to the open source GridControl item to obtain a customized item specifically includes:
Adding a custom column type to the open source GridControl items to obtain added items;
optimizing the data loading speed of the added item to obtain an optimized item;
And packaging the optimized item into an OCX control format to obtain a customized item.
Optionally, integrating the customized item into a Winform application program, and calling an interface function provided by the customized item through C# to obtain a called control, which specifically comprises:
creating a Winform application program item;
adding the customized item into a Visual Studio tool box of the Winform application program item through a registration command, and setting an attribute and an event handler to obtain a set item;
and calling an interface function provided by the set item through C# to obtain a control after calling, wherein the interface function is used for realizing the functions of creating, assigning, style setting and row operation of the table.
Optionally, loading an HTML page by using a WebView2 control and integrating ECharts chart functions to obtain a chart function control, which specifically comprises:
Acquiring a WebView2 control, and loading a dependency item of the WebView2 control by utilizing NuGet;
Writing an Html static page, and loading ECharts libraries in the Html static page to obtain page loading items;
and loading the page loading item by using the WebView2 control, and configuring the chart type and the interaction function by using JavaScriptAPI of ECharts to obtain the chart function control.
Optionally, integrating the control after call and the chart function control by using a Winform application program specifically includes:
placing the called control and the chart function control on a Winform main window;
the control after the calling and the chart function control are set in a coordinated mode;
and carrying out communication interaction between the called control and the chart function control through front and back end interaction interfaces of the WebView2 control.
Optionally, performing data processing and interaction between the invoked control and the chart function control through c# to obtain a table editor, which specifically includes:
Monitoring the form data change in the control after the call by using a C# program;
When the form data changes, converting the form data into json format to obtain format conversion data;
And transmitting the format conversion data to a function code corresponding to the front end through WebView2, and converting the format conversion data into a ECharts interface format, so as to display a ECharts chart view.
Optionally, after the data processing and interaction between the invoked control and the chart function control are performed through c#, a table editor is obtained, the method further includes:
performing a functional test on the form editor;
and generating an operation manual and a help file of the form editor.
In a second aspect, the present application provides a computer device comprising a memory, a processor and a computer program stored on the memory and executable on the processor, the processor executing the computer program to implement a form editor development method of hybrid development of any of the above.
In a third aspect, the present application provides a computer-readable storage medium having stored thereon a computer program which, when executed by a processor, implements a form editor development method of hybrid development as described in any of the above.
In a fourth aspect, the present application provides a computer program product comprising a computer program which when executed by a processor implements a form editor development method of hybrid development of any of the above.
According to the specific embodiment provided by the application, the application discloses the following technical effects:
The application provides a method, equipment, media and products for developing a form editor for hybrid development, which comprise the steps of adding a custom column type to an open source GridControl item to obtain a customized item, developing the open source GridControl item by using C++, integrating the customized item into a Winform application program, calling an interface function provided by the customized item through C#, obtaining a called control, loading an HTML page by using a WebView2 control, integrating ECharts chart functions, obtaining a chart function control, integrating the called control and the chart function control by using the Winform application program, and carrying out data processing and interaction between the called control and the chart function control through C#, so as to obtain the form editor. According to the application, through reasonable step setting, the mixed development is carried out by combining C++, C# and Web technology, the high performance of C++ (used for OCX control development), the development efficiency of C# and the rich visualization capability of Web technology (through WebView2 and ECharts) are fully exerted, the table editing and visualization functions with low cost and high performance are realized, the complex requirements of the professional fields of engineering simulation, data analysis and the like are met, and the method has remarkable technical advantages and wide application prospect.
Drawings
In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings that are needed in the embodiments will be briefly described below, and it is obvious that the drawings in the following description are only some embodiments of the present application, and other drawings may be obtained according to these drawings without inventive effort for a person skilled in the art.
Fig. 1 is a flow chart of a method for developing a hybrid form editor according to an embodiment of the application.
Fig. 2 is a schematic structural diagram of a computer device according to an embodiment of the present application.
Detailed Description
The following description of the embodiments of the present application will be made clearly and completely with reference to the accompanying drawings, in which it is apparent that the embodiments described are only some embodiments of the present application, but not all embodiments. All other embodiments, which can be made by those skilled in the art based on the embodiments of the application without making any inventive effort, are intended to be within the scope of the application.
The current form editor technology mainly has the following technical problems:
1. Contradiction between performance and development efficiency: the development period of the high-performance C++ form control is long, the cost is high, and the development efficiency is high.
2. The visual function is weak, the traditional desktop table editor lacks flexible data visual capability, and complex data chart display requirements are difficult to realize.
3. The cross-technology integration is difficult, and the existing scheme is difficult to organically combine the advantages of different technology stacks, such as high performance of C++, development efficiency of C#, and rich visualization capability of Web technology.
4. The support of professional data formats is insufficient, and for professional simulation data formats such as Modelica, the general table editor lacks targeted optimization and support, so that the data processing efficiency is low.
The application aims to exert the advantages of respective platforms, the table rendering part which is easiest to influence the performance is handed over to c++, the business logic is handed over to C#, the two-dimensional/three-dimensional view part is handed over to Web (html+JavaScript) with the best presentation effect, a browser plug-in (WebView 2) is added to load a static page through a host client (C# Winform), the packaged c++ ocx is used as a control of the Winform client and is added to a window of the client, and then corresponding business development work can be carried out.
The foregoing objects, features, and advantages of the application will be more readily apparent from the following detailed description of the application when taken in conjunction with the accompanying drawings and detailed description.
In an exemplary embodiment, as shown in fig. 1, a table editor development method for hybrid development is provided, and in an embodiment of the present application, the following steps S1 to S5 are included. Wherein:
S1, adding a custom column type to an open source GridControl project to obtain a customized project, wherein the open source GridControl project is developed by using C++.
In this embodiment, the open source GridControl project is developed for the second time and packaged as an OCX control.
GridControl is an open source form control item that provides the underlying form display and manipulation functions. The OCX control is an ActiveX control technology of Microsoft, is a reusable software component and can be embedded and used in different application programs.
The computer system first obtains GridControl open source code for the item, analyzing its core functions and data structures. The system uses development tools to extend and optimize functions for GridControl, including adding custom column types (adding names/remark information for each coordinate axis through a table properties window), optimizing data loading speed, and the like. The system then encapsulates the customized GridControl into an OCX control format using a tool provided by the NET Framework, ensuring that the control can be properly registered and used in the target environment. And (3) creating a test program, writing a unit test, and verifying whether each function of the OCX control is normal, if so, creating a table of n x m normally, adding rows and columns to the table, and if so, performing assignment color setting on the table cells.
Specifically, in this embodiment, the specific steps of developing the open source GridControl project for the second time and packaging the open source GridControl project as an OCX control (post-customization project) include:
And step 1, selecting a development environment specified by a preset standard and importing source codes of the open source GridControl items. The development environment refers to an Integrated Development Environment (IDE) for software development, and includes tools such as a code editor, a compiler, and a debugger. The preset standard specification refers to technical specifications and requirements predetermined according to project requirements.
The computer firstly selects a development environment, such as IDE (integrated development) such as Visual Studio, which accords with the preset standard according to project requirements. The computer then downloads the source code of the open source GridControl item from the code repository and imports it into the selected development environment. And verifying whether the configuration of the development environment meets project compiling and running requirements by the computer, and ensuring that the environment is built correctly.
And 2, analyzing the core functions and the data structures of the open source GridControl items. Core functions refer to the most critical and fundamental functional modules in a software system. Data structures refer to the organization, management, and storage format of data in a computer.
And the computer performs static analysis and dynamic debugging on the imported GridControl source codes, and identifies a core code module for realizing the table editing function. The computer analyzes the data structure definitions in the project and understands the logical relationships of data storage and processing. The computer generates a function module call relation diagram and a data flow diagram, and provides a basis for subsequent function expansion.
And 3, expanding or optimizing the functions of the open source GridControl items. The function expansion refers to adding new function characteristics on the basis of the original functions. Functional optimization refers to improving the performance or user experience of existing functions.
The computer modifies GridControl the source code according to the required document, and adds new functions such as custom column type, data verification, and the like. The computer reconstructs the data processing algorithm and optimizes the table rendering performance under large data volume. The computer adjusts the user interaction logic, and enhances the response speed of operations such as sequencing, screening and the like.
And 4, designing and packaging an interface function of the OCX control. The interface function refers to a public method provided to an external program call. Encapsulation refers to packaging the functional modules into individually usable components.
The computer defines the public interfaces that the OCX control needs to be exposed, including methods such as form operation, data acquisition and the like. The computer writes interface realization codes to ensure that each interface function can correctly call the internal functions. The computer adds the necessary parameter verification and error handling mechanisms for the interface.
And 5, packaging the customized GridControl into the OCX control by using a tool specified by a preset standard. The encapsulation tool refers to a Software Development Kit (SDK) for creating OCX controls.
The step process extends the interpretation in detail that the computer creates an OCX project Framework using an ActiveX template or ATL tool provided by the NET Framework. The computer integrates the modified GridControl code into the OCX project, configuring the necessary compilation options. The computer executes the compiling process to generate the binary file conforming to the OCX specification.
And 6, testing the registration and calling functions of the OCX control in the target environment. The target environment refers to the computer system environment in which the OCX control is to be run. Registration refers to writing control information to a system registry.
The computer registers the OCX control in the system registry using regsvr commands. The computer creates a test application that verifies that the control can be properly loaded and initialized. The computer calls each interface function to check the correctness and performance index of the function realization.
Through systematic implementation of the steps, the computer can efficiently convert the open source GridControl items into the OCX control with perfect functions. This process ensures retention and extension of core table functionality while providing standardized interface specifications. The finally generated OCX control has high-performance data processing capability, can be seamlessly integrated into various Windows application programs, and lays a solid foundation for subsequent form editor development.
S2, integrating the customized item into a Winform application program, and calling an interface function provided by the customized item through C# to obtain a called control.
In this embodiment, the OCX control (post-customization item) is integrated in the form application program to implement the form editing function.
Winform is an abbreviation for Microsoft Windows Forms, a graphical user interface Framework provided by NET Framework for creating Windows desktop applications.
The computer system creates a Winform application program item, and adds the OCX control generated in the step S1 to the tool box of the Visual Studio through a registration command. The system drags and drops the OCX control on the window in the window designer, sets the attribute of the OCX control and the event handler (the function of developing the interface in VS is to open the attribute window by right key, and sets each attribute). The system invokes interface functions provided by the OCX control through C# to realize functions of table creation, assignment, style setting, row operation and the like, and core function integration of the table editor is completed.
In this embodiment, the specific steps of integrating the customized item in the form application program to implement the table editing function include:
These steps describe the complete flow of integrating post customization items (OCX controls) in the form application to implement the form editing function. Firstly, an application program is required to be created and a control is required to be registered, then the control is added into the application program, and then the functions of table creation, assignment, style setting, row operation and the like are gradually realized through an interface function of the control. The steps are arranged in the order from the building of the basic environment to the implementation of specific functions, and have definite dependency relationships.
Step 1, creating the Winform application program and registering the OCX control
The Winform application is a NET Framework based Windows window application that provides a development Framework for Graphical User Interfaces (GUIs). The OCX control is an ActiveX control, is a reusable software component, and can be embedded in an application program to provide specific functions.
The system first creates a new Winform project using the Visual Studio development environment, setting the project name and storage location. The system then registers the OCX control with the Windows operating system via regsvr commands or programmatically enabling the Windows application to recognize and use the control. The registration process involves writing the information of the OCX control to the system registry and ensuring that all necessary dependencies have been installed and configured correctly.
And 2, adding the OCX control to the Winform application program through a toolbox specified by a preset standard.
The toolbox specified by the preset standard refers to a toolbox panel in the Visual Studio development environment, which organizes various available controls according to standard classification. The OCX control automatically appears in the "COM component" or "ActiveX control" class of the toolbox after registration.
The system opens a design view of the Winform application in the Visual Studio, and finds the registered OCX control from the toolbox. The system drags and drops the control on the window, automatically generates a control instance and adds the control instance to the window control set. The system sets the position and size attribute of the control on the window, and ensures that the layout of the control meets the design requirement. The system also checks the license information of the control to ensure legitimate use.
And step3, calling the interface function of the OCX control to realize the creation and assignment of the table.
An interface function is a common set of methods that the OCX control exposes to external applications for controlling and manipulating the functionality of the control. Table creation and assignment refers to the process of initializing a table data structure and populating the initial data.
The system accesses the object model of the OCX control through C#, and invokes an initialization method to create a blank table. The system sets the basic attributes of the rows and columns, the titles and the like of the table, and then invokes a data filling method to load the content of the external data source into the table. The system processes the data type conversion and ensures that different types of data such as numerical values, texts, dates and the like are correctly displayed. The system may also implement data validation logic to prevent invalid data inputs.
And 4, setting the style of the table through the interface function of the OCX control.
The form style refers to the visual presentation mode of the form, and comprises appearance attributes such as fonts, colors, frames, alignment modes and the like. The interface function typically contains a set of methods specific to style setting.
The system calls a style setting method provided by the OCX control to configure the overall appearance of the table. The system sets a header style including font size, color, and background. The system defines a cell pattern including text alignment, a frame pattern, and a background color. The system realizes the conditional format function and dynamically changes the display style according to the cell values. The system also saves style templates, supporting user customization and reuse of common style configurations.
And 5, adding and deleting the rows and columns of the table through the interface function of the OCX control.
The table row operation refers to an editing function for dynamically adjusting a table structure, and includes operations of inserting, deleting, moving rows or columns, and the like. The interface function provides a corresponding method to perform these structural changes.
The system calls the line operation method of the OCX control to insert new lines or delete existing lines at the designated position. The system calls a column manipulation method, adding new columns or removing unwanted columns. The system handles events arising from rank operations, such as data re-indexing and interface refreshing. The system realizes the functions of revocation/redo and records the change history of the lines and columns. The system can also optimize row and column operation performance under large data volume, and reduce interface flicker and delay.
Through the system implementation of the steps, the OCX form control is efficiently integrated in the Winform application program, and a complete form editing function is provided. The integration mode fully utilizes the high-performance data processing capacity of the OCX control and the flexible interface design of the Winform, and realizes the operation of a large number of data tables with quick response. Meanwhile, standardized interface calling ensures the stability and maintainability of function implementation, and provides a professional-level form editing experience for an end user.
And S3, loading an HTML page by using a WebView2 control, and integrating ECharts chart functions to obtain a chart function control.
The embodiment loads the HTML page through the WebView2 control and integrates ECharts chart functions.
WebView2 is a Microsoft provided chrome-based embedded browser control, ECharts is an open source JavaScript visualization chart library.
The computer system adds a WebView2 control component in the Winform item, configures its version and dependency items. HTML page code containing ECharts library references is written to design the layout and style of the chart presentation. The local WebView2 is downloaded from the official network and stored under the program root directory, the local version of the WebView2 is read through the software, relevant dependent items of WebViewe2 are loaded through NuGet, and the WebView2 browser is successfully added into the software. And writing Html static page chat.html, and loading ECharts libraries in the chat.html. The system loads these chat. Html pages via WebView2 controls and configures various chart types and interactive functions using JavaScriptAPI of ECharts. The system realizes a transmission mechanism of the data from the back end to the front end chart, and ensures that the chart can be dynamically updated.
And S4, integrating the control after the call and the chart function control by utilizing a Winform application program.
In this embodiment, the invoked control and the chart function control are integrated into the Winform application program.
Integration refers to the coordinated combination of multiple functional components together to form a complete application.
The computer system designs a user interface layout in the Winform main window, and the control and the chart function control after the call are reasonably placed on the window. The system sets the attribute and the position relation of the two controls, only a single table edit is displayed on part of the types of tables, double-table linkage edit is needed on part of the tables, and coordinated display of the two types of tables in an interface is ensured through control display and hidden control and position size control. The system realizes a communication mechanism between the controls, combines the back-end data into json data through the front-end and back-end interaction interfaces provided by the WebView2 control, transmits the json data to the front-end chat.html for receiving and analyzing, and reassembles the analyzed content into the json format required by the ECharts interface, so that the change of the form data can be reflected in the chart in time. The system can also add necessary interface elements such as menus, tool bars, status bars and the like to provide complete user operation experience.
And S5, carrying out data processing and interaction between the control after the calling and the chart function control through C# to obtain a table editor.
In the embodiment, the data processing and interaction between the control after the calling and the chart function control are realized through C#.
C# is an object oriented programming language developed by Microsoft, and is commonly used for NET platform application development.
The computer system writes a table data change event in the C# listening OCX control. When the data changes, the system converts the tabular data into a json format. And then, the processed character string containing json data is transmitted through a ExecuteScriptAsync method provided by the WebView2, the WebView2 automatically transmits the function code corresponding to the front-end JavaScript according to the content of the character string, and the json data is converted into a ECharts interface format through re-analysis, so that the presentation of the ECharts chart view is completed. The system realizes reverse data flow at the same time, and transmits the interactive operation of the user on the chart to C#, thereby updating the table data in the OCX control.
In this embodiment, the steps of loading the HTML page through the WebView2 control and integrating ECharts chart functions specifically include:
And step 1, configuring the WebView2 control in the Winform application program. This is the first step in achieving integration of WebView2 with ECharts, creating a base environment for subsequent operations.
The Winform application program refers to a desktop application program developed based on Windows Forms technology, and provides a graphical user interface framework. The WebView2 control is a microsoft-provided chromaum-based embedded browser component supporting modern Web technology.
The system creates or opens a target Winform project in the Visual Studio development environment. The system adds Microsoft. Web. WebView2 dependencies via NuGet package manager and automatically downloads the required runtime components. The system drags and drops the WebView2 control to a specified location in the form designer, setting CoreWebView a 2Ready event handler. The system configures the initial attributes of WebView2, including default URL, zoom mode, rights settings, etc.
And 2, writing the HTML page and introducing ECharts preset standard specification files. After the control configuration is completed, a front-end environment for carrying the chart needs to be built.
HTML pages are document files containing hypertext markup language for defining web page structure and content. ECharts is a JavaScript visualization library of hundred degrees open source, and the preset standard specification file refers to a core JS library and a CSS style file thereof.
The system creates a new HTML file and sets up the basic document structure. The system adds ECharts CDN references or local resource paths in part, including the echorts.min.js core file and the required extension components. The system defines a DOM container div element therein with a well-defined size. The system writes an initialization script, creates an echartite. Init () instance and binds to the target DOM element.
And 3, configuring the chart parameters of ECharts. After the library file is imported, a specific presentation mode of the chart needs to be defined.
The chart parameters refer to ECharts configuration objects (options), including attributes such as series, xAxis, yAxis, which define chart types and data mapping rules.
The system builds an option configuration object that meets ECharts specifications. The system sets the chart base type (e.g., line graph, bar graph, etc.) and coordinate system parameters. The system definition dataZoom component implements the zoom function, configures the tooltip prompt interactive behavior. The system adds visualMap a conversion rule that the visual mapping component processes data to color. The system stores the complete option configuration to the JavaScript variable for subsequent calling.
And 4, transmitting the data to the HTML page through the interface of the WebView2 control. And establishing a communication channel between the desktop end and Web content to realize data interaction.
The WebView2 interface refers to PostWebMessageAsString or ExecuteScriptAsync methods provided by CoreWebView class 2 for cross-environment communication.
The system builds a JSON string containing chart data in c#. The ExecuteScriptAsync method of the WebView2 control is called by the system to execute the JavaScript function. The system establishes a bi-directional communication channel through WebMessageReceived event handlers. The system uses InvokeScript method to inject the serialized data into the front-end window object. The system receives and parses the transmitted data at the front end through addEventListener.
And 5, calling the preset standard rule method ECharts to update the chart. And finally, the processed data are visually presented.
The preset standard prescribing method refers to setOption, resize and other core methods provided by ECharts official APIs for dynamically updating charts.
The system defines a chart update function updateChart (data) in the front-end JavaScript. The system converts the received data into ECharts supported formats and merges into the option object. The system applies the new configuration through the myChart. SetOption () method, triggering chart redrawing. The system processes the myChart. Resize () hold responsive layout as the window size changes. The system realizes that the dispose method correctly releases chart resources when the control is unloaded.
The whole technical effect is as follows:
According to the scheme, the deep integration of the Winform desktop application and the Web technology is realized through the WebView2 control, and a high-performance data display solution is constructed by utilizing the strong visualization capability of ECharts. The system adopts a hierarchical architecture design, the responsibilities of data preparation, transmission protocol, rendering display and the like are clearly separated, and the communication between modules is realized through a standardized interface. The design not only reserves the performance advantage of the original application, but also has the flexibility and rich visual effect of the Web technology, and simultaneously, the rendering efficiency and interactive experience under a scene with large data volume are obviously improved through an automatic data pipeline and a responsive updating mechanism.
In this embodiment, after the table editor is obtained, functional testing and optimization are performed.
Functional testing is a process of verifying whether software is working properly according to a required specification, and optimization is an improvement process of improving software performance and user experience.
And executing an automatic test script and a manual test case by the computer system, and verifying whether each function of table editing and chart display works normally. The system tests the performance under large data volume, and optimizes the data loading and rendering algorithm. And collecting test results by the system, repairing the found defects, and adjusting interface layout and interaction flow. The system also performs memory usage analysis and performance profiling to eliminate potential resource leaks and performance bottlenecks.
Finally, a user document is generated to support user operation of the form editor.
User documents are descriptive material, including operating manuals, help files, etc., that assist the user in understanding and using the software product.
The computer system automatically generates a document frame and base content according to the functions and operation flow of the application program. The system extracts the notes in the code and the description information of the interface elements and integrates the notes and the description information into the document. The system generates operation step screenshot and example data, and makes a drawing and using guideline. The system outputs the document in various formats (e.g., PDF, HTML) for easy review by the user. The system also establishes indexing and searching functions for the documents, and improves the efficiency of searching information for users.
The steps together form a high-performance form editor development method for hybrid development. According to the method, the C++ high-performance OCX control is combined with the modern Web technology of WebView2, so that efficient table editing and rich chart display functions are realized under a Winform framework. The system fully utilizes the advantages of each technical stack that C++ provides high-performance data processing, web technology provides flexible visualization capability, and C serves as a middle layer to coordinate interaction of the C++ and the Web technology. Compared with a single technical scheme, the method has better performance, lower development cost and richer functional performance, and can meet the requirements of complex data editing and visualization.
Based on the same inventive concept, the embodiment of the application also provides a method for developing a table editor for hybrid development, which comprises the following specific steps:
open source GridControl project was developed a second time and packaged as an OCX control.
Integrating the OCX control in a Winform application program to realize a table editing function.
The HTML page is loaded through WebView2 control and ECharts chart functions are integrated.
And integrating the OCX control and the WebView2 control into the Winform application program.
And realizing data processing and interaction between the OCX control and the WebView2 control through a C# code.
And performing functional test and optimization on the Winform application program.
A user document is generated to support user operation of the form editor.
The step of secondarily developing and packaging the open source GridControl project into the OCX control includes:
and selecting a development environment specified by preset standards and importing source codes of the open source GridControl items.
The core functions and data structures of the open source GridControl items are analyzed.
Extending or optimizing the functionality of the open source GridControl items.
And designing and packaging the interface function of the OCX control.
And encapsulating the customized GridControl into the OCX control by using a tool specified by a preset standard.
And testing the registration and calling functions of the OCX control in the target environment.
The step of integrating the OCX control in the form application program to implement the table editing function includes:
Creating the Winform application program and registering the OCX control.
And adding the OCX control to the Winform application program through a toolbox specified by a preset standard.
And calling the interface function of the OCX control to realize the creation and assignment of the table.
And setting the style of the table through the interface function of the OCX control.
And adding and deleting the rows and columns of the table through the interface function of the OCX control.
The step of loading the HTML page through the WebView2 control and integrating ECharts chart functions includes:
And configuring the WebView2 control in the Winform application program.
The HTML page is written and a preset standard specification file ECharts is introduced.
And configuring the chart parameters of ECharts.
And transmitting data to the HTML page through the interface of the WebView2 control.
And calling the preset standard stipulation method of ECharts to update the chart.
The step of integrating the OCX control and the WebView2 control into the Winform application program includes:
And designing a user interface of the Winform application program.
And embedding the OCX control and the WebView2 control into the user interface.
And configuring display attributes of the OCX control and the WebView2 control.
The layout of the user interface is adjusted to optimize the operating experience.
The step of implementing data processing and interaction between the OCX control and the WebView2 control through the C# code comprises the following steps:
And reading and processing the table data through the C# code.
And operating the table data through an interface function of the OCX control.
And transmitting the form data to the HTML page through an interface function of the WebView2 control.
And updating the ECharts chart through a JavaScript function in the HTML page.
The step of performing functional test and optimization on the Winform application program comprises the following steps:
and testing the table operation function of the OCX control.
Testing the chart display function of the WebView2 control.
And testing the data interaction function between the OCX control and the WebView2 control.
And optimizing the performance of the Winform application program according to the test result.
In order to implement the above method, the present embodiment further provides a hybrid-development high-performance table editor development device, where the hybrid-development high-performance table editor development device includes:
And the OCX control packaging module is used for carrying out secondary development on the open source GridControl project and packaging the open source GridControl project into an OCX control.
And the table function realizing module is used for integrating the OCX control in the Winform application program to realize a table editing function.
And the chart function realization module is used for loading the HTML page through the WebView2 control and integrating ECharts chart functions.
And the integration module is used for integrating the OCX control and the WebView2 control into the Winform application program.
And the data processing module is used for realizing data processing and interaction between the OCX control and the WebView2 control through the C# code.
And the test optimization module is used for performing functional test and optimization on the Winform application program.
And the document generation module is used for generating a user document to support a user to operate the table editor.
The application provides an innovative technical scheme for hybrid development of a high-performance form editor, which aims at a series of problems existing in the existing form editor and covers a development method, a device, computer equipment and a computer-readable storage medium.
In the development method, the open source GridControl project is developed secondarily. The source codes are imported into a development environment specified by a preset standard, the core functions and the data structures are deeply analyzed, and the functions are expanded or optimized according to actual requirements, such as adding custom column types and optimizing data loading speed. And (3) according to the interface function of the OCX control, the customized GridControl is packaged into the OCX control by using a tool conforming to a preset standard, and the registration and call functions of the OCX control are strictly tested in a target environment.
The OCX control is integrated into the form application to implement the form editing function. When creating a Winform application program, the OCX control is registered according to the standard, and is added into the application program through a tool box specified by the preset standard. And calling an interface function of the OCX control by using the C# code, and realizing the operations of creating, assigning, setting a style and adding and deleting rows of the table. In the operation process, data type conversion and verification are focused, the accuracy and stability of data are guaranteed, multiple formats are supported by style setting, the visual demands of different users are met, the row operation is provided with an efficient algorithm, and the operation delay under a large data volume is reduced.
The HTML page is loaded with WebView2 control and ECharts chart functions are integrated. The WebView2 control is configured in the Winform application program, an HTML page is written, and a ECharts preset standard specification file is introduced. And configuring ECharts chart parameters according to the data visualization requirements, transmitting data to an HTML page through an interface of a WebView2 control, updating the chart by using a preset standard rule method of JavaScript function call ECharts in the HTML page, and realizing the display and interaction functions of various chart types.
The OCX control and the WebView2 control are integrated into the Winform application. The user interface of the Winform application program is carefully designed, and the layout of components such as a table area, a chart area, a toolbar, a menu bar and the like is reasonably planned. Two controls are embedded in the user interface and their display properties, including size, location, visibility, etc., are configured. And the self-adaptive display is realized by adjusting the layout and setting related attributes, such as organizing the control positions by using the layout panel and setting the anchoring attributes, so that the user operation experience is optimized.
And realizing data processing and interaction between the OCX control and the WebView2 control by using the C# code. And reading and processing the table data through the C# code, calling an interface function of the OCX control to operate the table data, transmitting the data to an HTML page through an interface function of the WebView2 control, and finally updating ECharts the chart through a JavaScript function in the HTML page to ensure real-time synchronization and visual display of the data between the two controls.
And performing comprehensive functional test and optimization on the Winform application program. The method comprises the steps of respectively testing the table operation function of an OCX control, the chart display function of a WebView2 control and the data interaction function between the two, and ensuring the accuracy and stability of the functions by adopting a mode of combining an automatic test script and a manual test case. And according to the test result, performing performance optimization on the application program, such as optimizing a data loading and rendering algorithm, adjusting interface layout and interaction flow, and improving the overall performance of the system.
A detailed user document is generated to support user operation of the form editor. According to the functions and operation flow of the application program, automatically generating a document frame and basic contents, extracting notes in codes and description information of interface elements, and integrating the notes and the description information into a document. And screenshot of operation steps and example data are added, so that a use guide of the combined picture and text is manufactured, the use guide is output into various formats, and meanwhile, an index and search function is built for the document, so that the user can conveniently review the document.
The application relates to a hybrid development high-performance form editor development device which consists of a plurality of functional modules. The OCX control packaging module is responsible for carrying out secondary development and OCX control packaging on an open source GridControl project, the table function implementation module is used for integrating OCX controls in a Winform application program and realizing a table editing function, the chart function implementation module is responsible for integrating and implementing a WebView2 control and a ECharts chart, the integration module integrates the OCX controls and the WebView2 controls into the Winform application program, the data processing module realizes data processing and interaction between the two controls through a C# code, the test optimization module carries out comprehensive test and performance optimization on the application program, and the document generation module is responsible for generating a user document. The modules cooperate with each other to ensure the high efficiency of the development process and the quality of the software.
In summary, the invention effectively solves the problems of performance, visualization, cross-technology integration, professional data format support and the like of the existing form editor. Through mixed development, the high performance of C++ (used for OCX control development), the development efficiency of C#, and the rich visualization capability of Web technology (through WebView2 and ECharts) are fully developed, the table editing and visualization functions with low cost and high performance are realized, the complex requirements of the professional fields such as engineering simulation, data analysis and the like are met, and the method has remarkable technical advantages and wide application prospect.
In an exemplary embodiment, a computer device, which may be a server or a terminal, is provided, and an internal structure thereof may be as shown in fig. 2. The computer device includes a processor, a memory, an Input/Output interface (I/O) and a communication interface. The processor, the memory and the input/output interface are connected through a system bus, and the communication interface is connected to the system bus through the input/output interface. Wherein the processor of the computer device is configured to provide computing and control capabilities. The memory of the computer device includes a non-volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system, computer programs, and a database. The internal memory provides an environment for the operation of the operating system and computer programs in the non-volatile storage media. The input/output interface of the computer device is used to exchange information between the processor and the external device. The communication interface of the computer device is used for communicating with an external terminal through a network connection. The computer program, when executed by a processor, implements a hybrid development form editor development method.
It will be appreciated by persons skilled in the art that the architecture shown in fig. 2 is merely a block diagram of some of the architecture relevant to the present inventive arrangements and is not limiting as to the computer device to which the present inventive arrangements are applicable, and that a particular computer device may include more or fewer components than shown, or may combine some of the components, or have a different arrangement of components.
In an exemplary embodiment, a computer device is also provided, comprising a memory and a processor, the memory having stored therein a computer program, the processor implementing the steps of the method embodiments described above when the computer program is executed.
In an exemplary embodiment, a computer-readable storage medium is provided, in which a computer program is stored which, when being executed by a processor, carries out the steps of the method embodiments described above.
In an exemplary embodiment, a computer program product is provided, comprising a computer program which, when executed by a processor, implements the steps of the method embodiments described above.
It should be noted that, the user information (including but not limited to user equipment information, user personal information, etc.) and the data (including but not limited to data for analysis, stored data, presented data, etc.) related to the present application are both information and data authorized by the user or sufficiently authorized by each party, and the collection, use and processing of the related data are required to meet the related regulations.
Those skilled in the art will appreciate that implementing all or part of the above described methods may be accomplished by way of a computer program stored on a non-transitory computer readable storage medium, which when executed, may comprise the steps of the embodiments of the methods described above. Any reference to memory, database, or other medium used in embodiments provided herein may include at least one of non-volatile and volatile memory. The nonvolatile Memory may include Read-only Memory (ROM), magnetic tape, floppy disk, flash Memory, optical Memory, high density embedded nonvolatile Memory, resistive random access Memory (ReRAM), magneto-resistive random access Memory (Magnetoresistive RandomAccess Memory, MRAM), ferroelectric Memory (Ferroelectric RandomAccess Memory, FRAM), phase change Memory (PHASE CHANGE Memory, PCM), graphene Memory, and the like. Volatile memory can include random access memory (RandomAccess Memory, RAM) or external cache memory, and the like. By way of illustration, and not limitation, RAM can be in various forms such as static random access memory (Static RandomAccess Memory, SRAM) or dynamic random access memory (Dynamic RandomAccess Memory, DRAM), etc.
The databases referred to in the embodiments provided herein may include at least one of a relational database and a non-relational database. The non-relational database may include, but is not limited to, a blockchain-based distributed database, and the like. The processor referred to in the embodiments provided in the present application may be a general-purpose processor, a central processing unit, a graphics processor, a digital signal processor, a programmable logic unit, a data processing logic unit based on quantum computing, or the like, but is not limited thereto.
The technical features of the above embodiments may be arbitrarily combined, and all possible combinations of the technical features in the above embodiments are not described for brevity of description, however, as long as there is no contradiction between the combinations of the technical features, they should be considered as the scope of the description.
The principles and embodiments of the present application have been described herein with reference to specific examples, which are intended to facilitate an understanding of the principles and concepts of the application and are to be varied in scope and detail by persons of ordinary skill in the art based on the teachings herein. In view of the foregoing, this description should not be construed as limiting the application.

Claims (10)

1.一种混合开发的表格编辑器开发方法,其特征在于,包括:1. A hybrid development table editor development method, characterized by comprising: 对开源GridControl项目添加自定义列类型,得到定制后项目;所述开源GridControl项目利用C++开发;Adding a custom column type to an open source GridControl project to obtain a customized project; the open source GridControl project is developed using C++; 将所述定制后项目集成于Winform应用程序中,并通过C#调用所述定制后项目提供的接口函数,得到调用后控件;Integrate the customized project into a WinForm application, and call the interface function provided by the customized project through C# to obtain the called control; 利用WebView2控件加载HTML页面并集成ECharts图表功能,得到图表功能控件;Use the WebView2 control to load the HTML page and integrate the ECharts chart function to obtain the chart function control; 利用Winform应用程序整合所述调用后控件和所述图表功能控件;Utilize Winform application program to integrate the post-call control and the chart function control; 通过C#进行所述调用后控件与所述图表功能控件之间的数据处理与交互,得到表格编辑器。The data processing and interaction between the post-call control and the chart function control are performed through C# to obtain a table editor. 2.根据权利要求1所述的混合开发的表格编辑器开发方法,其特征在于,所述对开源GridControl项目添加自定义列类型,得到定制后项目,具体包括:2. The hybrid development table editor development method according to claim 1, wherein the step of adding a custom column type to an open source GridControl project to obtain a customized project specifically comprises: 对开源GridControl项目添加自定义列类型,得到添加后项目;Add custom column types to the open source GridControl project and get the added items; 优化所述添加后项目的数据加载速度,得到优化后项目;Optimizing the data loading speed of the added project to obtain an optimized project; 将所述优化后项目封装为OCX控件格式,得到定制后项目。The optimized project is encapsulated into an OCX control format to obtain a customized project. 3.根据权利要求1所述的混合开发的表格编辑器开发方法,其特征在于,将所述定制后项目集成于Winform应用程序中,并通过C#调用所述定制后项目提供的接口函数,得到调用后控件,具体包括:3. The hybrid development table editor development method according to claim 1, characterized in that the customized project is integrated into a WinForm application, and the interface function provided by the customized project is called through C# to obtain the called control, specifically comprising: 创建Winform应用程序项目;Create a WinForm application project; 通过注册命令将所述定制后项目添加到所述Winform应用程序项目的Visual Studio的工具箱中,并设置属性和事件处理程序,得到设置后项目;Adding the customized project to the Visual Studio toolbox of the WinForm application project through a registration command, and setting properties and event handlers to obtain the set project; 通过C#调用所述设置后项目提供的接口函数,得到调用后控件;所述接口函数用于实现表格的创建、赋值、样式设置以及行列操作功能。The interface function provided by the project after setting is called through C# to obtain the called control; the interface function is used to realize the creation, assignment, style setting and row and column operation functions of the table. 4.根据权利要求1所述的混合开发的表格编辑器开发方法,其特征在于,利用WebView2控件加载HTML页面并集成ECharts图表功能,得到图表功能控件,具体包括:4. The hybrid development table editor development method according to claim 1 is characterized in that the HTML page is loaded using the WebView2 control and the ECharts chart function is integrated to obtain the chart function control, specifically comprising: 获取WebView2控件,并利用NuGet加载所述WebView2控件的依赖项;Get the WebView2 control and use NuGet to load its dependencies. 编写Html静态页面,并在所述Html静态页面中加载ECharts库,得到页面加载项目;Write an HTML static page and load the ECharts library into the HTML static page to obtain a page loading project; 利用所述WebView2控件加载所述页面加载项目,并利用ECharts的JavaScriptAPI配置图表类型和交互功能,得到图表功能控件。The page loading project is loaded using the WebView2 control, and the chart type and interactive function are configured using the JavaScript API of ECharts to obtain a chart function control. 5.根据权利要求1所述的混合开发的表格编辑器开发方法,其特征在于,利用Winform应用程序整合所述调用后控件和所述图表功能控件,具体包括:5. The hybrid development table editor development method according to claim 1, characterized in that the post-call control and the chart function control are integrated using a WinForm application, specifically comprising: 将所述调用后控件和所述图表功能控件放置于Winform主窗体上;Placing the post-call control and the chart function control on the Winform main form; 协调设置所述调用后控件和所述图表功能控件;Coordinate and set the post-call control and the chart function control; 通过WebView2控件的前后端交互接口,进行所述调用后控件和所述图表功能控件的通信交互。The communication interaction between the post-call control and the chart function control is performed through the front-end and back-end interaction interfaces of the WebView2 control. 6.根据权利要求1所述的混合开发的表格编辑器开发方法,其特征在于,通过C#进行所述调用后控件与所述图表功能控件之间的数据处理与交互,得到表格编辑器,具体包括:6. The hybrid development table editor development method according to claim 1, characterized in that the data processing and interaction between the post-call control and the chart function control is performed by C# to obtain the table editor, specifically comprising: 利用C#程序监听所述调用后控件中的表格数据变化;Using C# program to monitor the changes of table data in the control after the call; 当表格数据发生变化时,将所述表格数据转换为json格式,得到格式转换数据;When the table data changes, the table data is converted into json format to obtain format conversion data; 通过WebView2将所述格式转换数据传输至前端对应的函数代码,并将所述格式转换数据转换为ECharts接口的格式,进行ECharts图表视图的呈现。The format conversion data is transmitted to the corresponding function code of the front end through WebView2, and the format conversion data is converted into the format of the ECharts interface to present the ECharts chart view. 7.根据权利要求1所述的混合开发的表格编辑器开发方法,其特征在于,在通过C#进行所述调用后控件与所述图表功能控件之间的数据处理与交互,得到表格编辑器之后,还包括:7. The hybrid development table editor development method according to claim 1, characterized in that after the data processing and interaction between the post-call control and the chart function control are performed in C# to obtain the table editor, the method further comprises: 对所述表格编辑器进行功能测试;Performing functional testing on the table editor; 生成所述表格编辑器的操作手册和帮助文件。Generate an operation manual and help file for the table editor. 8.一种计算机设备,包括:存储器、处理器以及存储在存储器上并可在处理器上运行的计算机程序,其特征在于,所述处理器执行所述计算机程序以实现权利要求1-7中任一项所述的混合开发的表格编辑器开发方法。8. A computer device comprising: a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the computer program to implement the hybrid development table editor development method according to any one of claims 1 to 7. 9.一种计算机可读存储介质,其上存储有计算机程序,其特征在于,该计算机程序被处理器执行时实现权利要求1-7中任一项所述的混合开发的表格编辑器开发方法。9. A computer-readable storage medium having a computer program stored thereon, wherein when the computer program is executed by a processor, the hybrid development table editor development method according to any one of claims 1 to 7 is implemented. 10.一种计算机程序产品,包括计算机程序,其特征在于,该计算机程序被处理器执行时实现权利要求1-7中任一项所述的混合开发的表格编辑器开发方法。10. A computer program product, comprising a computer program, characterized in that when the computer program is executed by a processor, the hybrid development table editor development method according to any one of claims 1 to 7 is implemented.
CN202510753057.7A 2025-06-06 2025-06-06 Method, equipment, medium and product for developing form editor for hybrid development Pending CN120631339A (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202510753057.7A CN120631339A (en) 2025-06-06 2025-06-06 Method, equipment, medium and product for developing form editor for hybrid development

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202510753057.7A CN120631339A (en) 2025-06-06 2025-06-06 Method, equipment, medium and product for developing form editor for hybrid development

Publications (1)

Publication Number Publication Date
CN120631339A true CN120631339A (en) 2025-09-12

Family

ID=96972597

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202510753057.7A Pending CN120631339A (en) 2025-06-06 2025-06-06 Method, equipment, medium and product for developing form editor for hybrid development

Country Status (1)

Country Link
CN (1) CN120631339A (en)

Similar Documents

Publication Publication Date Title
CN112199086B (en) Automatic programming control system, method, device, electronic equipment and storage medium
US7721254B2 (en) Programming interface for a computer platform
US10008009B1 (en) Method for generating dynamic vector graphics
US20110296322A1 (en) Markup Based Extensibility for User Interfaces
JP2008512794A (en) Object processing graph application development system
JP2008508641A (en) Means for editing a document written in a markup language
US9817811B2 (en) Web server system, dictionary system, dictionary call method, screen control display method, and demonstration application generation method
JPWO2006137565A1 (en) Document processing apparatus and document processing method
CN110968294A (en) Business domain model establishing system and method
CN112631585B (en) XML-based rapid parameter interface configuration method
CN118363581A (en) Visual large screen management method, device, program product, equipment and medium
WO2006046666A1 (en) Document processing device and document processing method
US20100077295A1 (en) Document processing device and document processing module
CN117215556A (en) Modularized page rapid construction method, system, equipment and medium
CN120631339A (en) Method, equipment, medium and product for developing form editor for hybrid development
WO2006046668A1 (en) Document processing device and document processing method
WO2006046667A1 (en) Document processing device and document processing method
WO2006051721A1 (en) Document processing device, and document processing method
KR102743354B1 (en) Extend component generation method in user interface platform development system and program performing this
CN114741802B (en) Knowledge packaging method for oxyhydrogen engine
Barth et al. Parameterized schematics
Trivedi User interface implementation of environmental data integration system with React
Nosażewski et al. Implementation of the Turing machine symulator
JPS6379176A (en) Method for producing automatically program by combining parts based on designing specifications
WO2006051973A1 (en) Document processing device and document processing method

Legal Events

Date Code Title Description
PB01 Publication
SE01 Entry into force of request for substantive examination