This example shows a consistent example provided by all GLSP components.
It implements a simple flow chart diagram editor with different types of nodes and edges.
The Workflow Example
is the main example used for development and integrates all GLSP features.
diagramanimated.mp4
The following libraries/frameworks need to be installed on your system:
The examples are heavily interweaved with Eclipse Theia, so please also check the prerequisites of Theia.
The examples has been developed using Visual Studio Code.
This project template is compatible with Theia >=1.49.1
.
The example can be built with:
yarn
To start the Theia web app with the integrated workflow example simply run
yarn start
This will launch the example in the browser on localhost:3000.
It's also possible to start the Theia browser application in external mode. This means the Workflow
GLSP server will not be started as an embedded process and is expected to be already running. This can be used for debugging purposes, where you first start the GLSP server in debug mode and let the Theia application connect to it:
yarn start:external
To debug the involved components launch configs are available in the Run and Debug
view (Ctrl + Shift + D).
Here you can choose between four different launch configurations:
Launch Workflow Theia Backend (Embedded GLSP Server)
This config launches the Theia browser backend application and will start the GLSP server as embedded process which means you won't be able to debug the GLSP Server source code.Launch Workflow Theia Backend (External GLSP Server)
This config launches the Theia browser backend application but does not start the GLSP server as embedded process. It expects that the GLSP Server process is already running and has been started externally with theLaunch Workflow GLSP Server
config.Launch Theia Frontend
Launches a Google chrome instance, opens the Theia browser application athttp://localhost:3000
and will automatically open an example workspace that contains aexample.wf
file. Double-click the file in theExplorer
to open it with theWorkflow Diagram Editor
.Launch Workflow GLSP Server
This config can be used to manually launch the TaskList GLSP Server node process. Breakpoints in the source files of theworkflow-server
package will be picked up. In order to use this config, the Theia application backend has to be launched in External server mode (seeLaunch Workflow Theia Backend (External GLSP Server)
).
To run TypeScript in watch-mode so that TypeScript files are compiled as you modify them execute:
yarn watch