System modeling tool implementation method integrating web version and standalone version

Abstract

The invention discloses a webpage version and standalone version fused system modeling tool implementation method, which comprises the following steps of: 1, creating an Eclipse graphic language service protocol technical architecture according to a SysML-oriented system modeling tool implementation requirement; step 2, carrying out source model integration based on the created Eclipse graphic language service protocol technical architecture; step 3, based on the integrated source model and the Eclipse graphic language service protocol technical architecture, creating a Vue front-end technical architecture; and step 4, on the basis of the Vue front-end technical architecture and the integrated source model created in the above step, adopting an Electron technology to construct a desktop application. According to the technical scheme, in order to improve support of a tool for SysML model persistence, an extensible model persistence scheme supporting multiple data sources is designed and achieved, and the model mapping relation between the relational database and the graph database is given. The method supports flexible deployment in webpage version and standalone version environments, and has a model persistence solution with a data source switchable.

Description

Technical Field

[0001] The present invention relates to the field of research and development of system modeling tools based on SysML, and in particular to a method for implementing a system modeling tool integrating a web version and a stand-alone version. Background Art

[0002] Model-based systems engineering (MBSE) methods are widely used in system design fields, such as mechanics, electronics, and design and manufacturing. In the field of mechanical engineering, engineers use computer-aided design (CAD) tools to model mechanical design, while the electronics field also has corresponding electronic design automation (EDA) software. In the field of system design, engineers prefer to use graphical modeling to assist in design. To support graphical model-based systems engineering modeling practices, the International Council on Systems Engineering (INCOSE) and the Object Management Group (OMG) released the graphical system modeling language SysML, which has been widely supported by various system modeling tool manufacturers at home and abroad.

[0003] The way web applications are developed has changed dramatically. In the early days, the interactive logic of web pages was simple, and developers usually directly embedded JavaScript code in HTML pages to handle interactions. Later, developers organized the JavaScript code into a JS file, which was imported from the head of the HTML file. At this stage, the resource files of the web application need to be manually built and deployed. Due to the different interfaces of different browser platforms, developers need to determine the platform they use to execute different JavaScript scripts. The emergence of jQuery encapsulates the platform differences and provides a unified interface, which greatly solves the difficulties of developers in cross-browser platform development. The NPM repository was brought about by the emergence of Node.js, which allows developers to freely introduce a variety of code modules. Build tools such as WebPack provide a new automated way to build front-end code for web projects. The emergence of React, Angular, and Vue frameworks enables developers to quickly create web projects in MVVM mode and gradually abandon the use of jQuery. The development of these new technologies has reduced the complexity of the web application development process and brought great convenience to developers to develop web applications faster and better. More and more engineering application modeling tools have begun to provide web versions, and users can perform various modeling operations anytime and anywhere. However, in the field of system engineering, web version modeling tools are still missing. How to develop and build a Web version of SysML modeling tool using a reasonable method and flexibly deploy the application according to the installation environment is a challenging problem. Summary of the invention

[0004] In order to solve the above technical problems, the present invention sorts out the Eclipse graphical language service protocol technical architecture, EMF source model integration, Vue front-end technical architecture, Electron desktop application construction technology, etc., and proposes a system modeling tool implementation method that integrates a web version and a stand-alone version.

[0005] The technical solution of the present invention is: a method for implementing a system modeling tool integrating a web version and a stand-alone version, comprising the following steps: Step 1: Create the Eclipse graphical language service protocol technical architecture based on the SysML-oriented system modeling tool implementation requirements; Step 2: Based on the created Eclipse graphical language service protocol technical architecture, source model integration is performed; Step 3: Create the Vue front-end technical architecture based on the integrated source model and Eclipse graphical language service protocol technical architecture; Step 4: Based on the Vue front-end technology architecture and integrated source model created in the above steps, use Electron technology to build a desktop application.

[0006] Beneficial effects: This method is mainly based on the Eclipse Graphical Language Server Protocol (Eclipse GLSP). This method can support the design and implementation of system modeling tools for SysML (System Modeling language) in web and stand-alone environments, and has detailed design and implementation of server-side, client-side and end-to-end interface communications. This method discusses the design and implementation of SysML modeling tools based on the Eclipse Graphical Language Server Protocol technology architecture. By integrating relevant technologies such as EMF, Vue, Electron and multiple chart component libraries, the visual editor implemented by this method provides a relatively simple interactive interface. Through the structural mode of the visual editor and the management platform, mapping and data processing operations can be performed independently. The proposed implementation method of the modeling tool that integrates the web version and the stand-alone version enriches the use scenarios of the modeling tool and can be flexibly deployed according to the installation environment. BRIEF DESCRIPTION OF THE DRAWINGS

[0007] FIG1 shows a graphical language service protocol architecture according to an embodiment of the present invention; FIG2 shows a technical architecture of a web page implementation of an embodiment of the present invention; FIG. 3 shows a technical architecture for realizing a stand-alone application according to an embodiment of the present invention. DETAILED DESCRIPTION

[0008] The technical solutions in the embodiments of the present invention will be clearly and completely described below in conjunction with the drawings in the embodiments of the present invention. Obviously, the described embodiments are only part of the embodiments of the present invention, rather than all the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the protection scope of the present invention.

[0009] According to an embodiment of the present invention, a method for implementing a system modeling tool integrating a web version and a stand-alone version is proposed, comprising the following steps: Step 1: Create the Eclipse graphical language service protocol technical architecture based on the SysML-oriented system modeling tool implementation requirements; Step 2: Based on the created Eclipse graphical language service protocol technical architecture, source model integration is performed; Step 3: Create the Vue front-end technical architecture based on the integrated source model and Eclipse graphical language service protocol technical architecture; Step 4: Based on the Vue front-end technology architecture and integrated source model created in the above steps, use Electron technology to build a desktop application.

[0010] Specifically, the step 1 creates an Eclipse graphical language service protocol technical architecture according to the requirements of the SysML-oriented system modeling tool, and creates an Eclipse graphical language service protocol technical architecture, including three main components: a server architecture, a client architecture, and a protocol architecture for communication between the two, such as Figure 1 In addition, the Eclipse graphical language service protocol technology architecture also provides an integration plug-in that allows the graphical editor to be seamlessly integrated into the integrated development environment (IDE), such as VS Code, Eclipse Theia, and Eclipse IDE. In fact, the Eclipse graphical language service protocol technology architecture can be integrated into any web application or page, such as Figure 2 The main idea of ​​the Eclipse graphical language service protocol technical architecture is that the client is responsible for presentation and time-critical operations (such as feedback on dragging and dropping modeling elements), while the server is responsible for the logic of the diagram, that is, the semantics or business of the modeling graphical language.

[0011] Create the Eclipse graphical language service protocol technical architecture, including: managing the declarative description of the current state of the graphical editor; using the graphical language service protocol to manage the communication between the client and the server to keep the status of the client and the server synchronized; providing a method for updating the state of the diagram. On the client, the feedback method for the update is usually to change the diagram presented on the screen; providing a hook mechanism to perform user interaction operations. On the server, the most common application is to use some specific domain underlying domain models for logical updates.

[0012] Step one may include: First, the information displayed in the graphical editor is deployed to the server part of the Eclipse graphical language service protocol technology architecture. The information displayed in the graphical editor includes visual effects, such as which nodes and which connections are displayed on the diagram; it also includes tool information, such as which elements are displayed in the palette, the behavior of the containing editor, more precisely the behavior that affects the appearance or user feedback, and the association of anything happening on the back end. Some behaviors are performed directly on the client, such as drag and drop feedback, and do not require a server round trip. Other operations (usually diagram changes) are sent to the server, which can react to these operations and trigger some domain-specific logic. In the simplest case, this is just updating the underlying domain models, which are separated, for example, on a domain model server or just a file.

[0013] Secondly, the SysML model information is rendered on the client. This means implementing domain-specific renderers for the elements of the graphical language, for example, what shapes are used to visualize certain elements in the SysML model. The underlying diagramming framework Eclipse Sprotty provided by the Eclipse Graphical Language Service Protocol technical architecture provides reusable default shapes, such as circles, rectangles, etc., so that clients that implement the corresponding business can reuse the default shapes and add some custom shapes. The basic elements of the graphics, shapes and edges, are implemented based on Eclipse Sprotty converting the graphic model into SVG.

[0014] Furthermore, in the step 2, the source model is integrated in the form of an Eclipse Modeling Framework (EMF) project based on the created Eclipse graphical language service protocol technical architecture. The EMF project is a modeling framework and code generation tool for building tools and other applications based on structured data models. According to the model specification described in XML, EMF provides tools and runtime support to generate a set of Java classes for the model, as well as a set of adapter classes that support viewing and command-based model editing, and a basic editor. EMF (core) is a common standard for data models and is the basis of many technologies and frameworks. This includes server solutions, persistence frameworks, UI frameworks, and support for transformations.

[0015] Step 2 is to integrate the source model based on the created Eclipse graphical language service protocol technical architecture, specifically including: using the EMF mechanism to integrate the EMF-based source model, mainly including the EMF kernel, EMF editor and EMF code generation.

[0016] EMF Core: This framework mainly includes the metamodel (Ecore) for describing models and runtime support for models, including change notifications, persistence support using default XMI serialization, and a reflection API for general manipulation of EMF objects; EMF Editor: This framework includes generic reusable classes for building editors for EMF models. It provides Content and Tag Provider classes, Property Source support, and other convenience classes that allow EMF models to be displayed using standard desktop (JFace) viewers and property sheets. Command Framework, including a set of generic command implementation classes for building editors that support fully automatic undo and redo; EMF Code Generation: The EMF code generation mechanism generates everything needed to build a complete editor for an EMF model, including a GUI from which you can specify generation options and invoke the generator. The generation mechanism makes use of the Eclipse JDT component.

[0017] Step two may include: The source model is integrated with the actual data represented in the SysML model diagram. When the user applies changes in the SysML model diagram, the loaded source model data will be modified. The source model is integrated, and the final format produced includes EMF model, JSON file, and database. The Eclipse graphical language service protocol technology architecture framework has no restrictions on the format of the source model. The diagram is operated by loading the source model, converting it into a graphical model, and editing the source model through the Eclipse graphical language service protocol technology architecture server definition.

[0018] Specifically, in step 3, based on the integrated source model and Eclipse graphical language service protocol technical architecture, the Vue front-end technical architecture is created. The Vue front-end technical architecture is a progressive JavaScript framework that builds applications in a bottom-up and incremental manner. Vue adopts the MVVM (Model View View Mode) mode, realizes the interaction between views and models through componentization, and completes page response development through two-way data binding. Through asynchronous batch processing, DOM elements on the page can be quickly updated to achieve flexible application of components. Using Vue's rich ecosystem, such as iView, Echarts, DataV, Webpack and other components, the functions and performance of the development system are further enhanced.

[0019] Use the Vue framework to develop the front-end system, and improve the performance of the visual modeling tool with a simple and flexible development method and powerful functions. First, Vue's responsive data binding simplifies the synchronization of data and views, and realizes real-time updates of charts and data, which is indispensable for visual modeling tools. Secondly, Vue's componentization capability divides the user interface into reusable and independent components, improves the maintainability and scalability of the code, and also helps to optimize the performance of the modeling tool. Third, the virtual DOM technology is used to build a virtual tree, the Diff algorithm is used to efficiently update the actual DOM, and the asynchronous component loading mechanism is used to improve the initial loading performance, which further improves the performance of the modeling tool. Finally, Vue also includes tools such as VueX and VueRouter, which provide better page state management and application structure to help deal with complex visualization problems.

[0020] Step three may include: Creating the Vue front-end technology architecture includes: combining iView component library, Axios request library, WebSocket protocol and other technologies, integrating multiple popular chart component libraries such as Echarts and DataV, configuring and rendering charts in the client editor, and realizing the development and production of visual modeling tools. For published pages, sharing operations are supported, and pages can be published to third-party systems or platforms. At the same time, changes in chart data can be monitored in real time to achieve reloading of chart data and page rendering. The development process uses editors such as Visual Studio Code, Sublime Text or Atom, which are the most commonly used and popular cross-platform code editors that support Electron development.

[0021] Specifically, in step 4, based on the Vue front-end technology architecture and integrated source model created in the above steps, the Electron technology is used to build desktop applications. Commonly used cross-platform desktop application development frameworks include Mono, QT, etc. in back-end development activities, which require C, C++, and C# programming experience. Software practitioners who have been engaged in front-end Web development for a long time, if they want to engage in back-end desktop application development, face these languages ​​that are completely different from the front-end JavaScript language and need to learn object-oriented programming, which is very difficult for front-end developers. Fortunately, the release of Node.js based on the JavaScript engine has made it easy for front-end engineers who are proficient in HTML, CSS, and JavaScript to develop back-end desktop servers because they use the Electron architecture that integrates Node.js and WebKit technologies.

[0022] Electron is a framework for building desktop applications using JavaScript, HTML, and CSS. Embedding Chromium and Node.js into the binary Electron allows operators to maintain JavaScript code and create cross-platform applications that can run on platforms such as Windows, MacOS, and Linux without the need for local development. In the Electron development architecture, there are the concepts of main process and child process. The file executed by the main process is the file specified in the main data item of the module description JSON file. It is also the entry file for the developed desktop application. It is responsible for building child processes, managing the application life cycle, handling local file systems, network requests, and more. In the Electron application, the main process consists of a Node.js module, through which the APIs and functions of the underlying operating system can be accessed. The main process can also communicate with the child process through the inter-process communication (IPC) mechanism to achieve data transmission and information exchange between the two parties.

[0023] Step 4 may include: Based on the Eclipse graphical language service protocol technology architecture, through the integrated source model, use Electron to create desktop applications. The advantage of using Electron technology is that developers do not need to understand its underlying code base and operating principles, but only need to understand the operation process of Electron and match the official documentation, and then combine basic Web development technology to solve more than 90% of desktop application development problems. The official documentation of Electron clearly gives its operating mechanism: when a desktop application is established through Electron, a main process module Browserwindow will be directly created, and then this module will be used to create a new window called a child process, and interact with the main process window. It should be noted that both the main process and the child process will render the target page in their own independent windows. If you want to make good use of the Electron desktop building library, you need to make good use of the characteristics of the main process and the rendering process rendering separately, by scheduling the main process and the child process in the appropriate place, and by reasonably switching to design and build desktop applications, such as Figure 3 The stand-alone application implementation technical architecture shown.

[0024] Although the above describes the illustrative specific embodiments of the present invention to facilitate those skilled in the art to understand the present invention, and it should be clear that the present invention is not limited to the scope of the specific embodiments, for those of ordinary skill in the art, as long as various changes are within the spirit and scope of the present invention as defined and determined by the attached claims, these changes are obvious, and all inventions and creations using the concept of the present invention are protected.

Claims

1. A method for implementing a system modeling tool integrating a web version and a stand-alone version, characterized in that: The steps include: Step 1: Create the Eclipse graphical language service protocol technical architecture based on the SysML-oriented system modeling tool implementation requirements; Step 2: Based on the created Eclipse graphical language service protocol technical architecture, source model integration is performed; Step 3: Create the Vue front-end technical architecture based on the integrated source model and Eclipse graphical language service protocol technical architecture; Step 4: Based on the Vue front-end technology architecture and integrated source model created in the above steps, use Electron technology to build a desktop application.

2. The method for implementing a system modeling tool integrating a web version and a stand-alone version according to claim 1, characterized in that: Step one includes: First, the information displayed in the graphical editor is deployed to the server part of the Eclipse graphical language service protocol technical architecture; Secondly, the SysML model information is presented on the client.

3. The method for implementing a system modeling tool integrating a web version and a stand-alone version according to claim 1, characterized in that: Step 2 includes: The source model is integrated with the actual data represented in the SysML model diagram. When the user applies changes in the SysML model diagram, the loaded source model data will be modified and the source model will be integrated. The final formats include EMF models, JSON files and databases.

4. The method for implementing a system modeling tool integrating a web version and a stand-alone version according to claim 1, characterized in that: Step three includes: Creating the Vue front-end technical architecture includes: combining the iView component library, Axios request library, WebSocket protocol, integrating Echarts and DataV chart component libraries, configuring and rendering charts in the client editor, and realizing the development and production of visual modeling tools; Monitor the changes of chart data in real time to realize chart data reloading and page presentation.

5. The method for implementing a system modeling tool integrating a web version and a stand-alone version according to claim 1, characterized in that: Step 4 includes: Based on the Eclipse graphical language service protocol technology architecture, use Electron to create desktop applications through an integrated source model.

Images