Wiki source code of KEITH

Last modified by Richard Kreissig on 2023/09/14 10:16

version	line-number	content
39.1	1
24.1	2	KEITH[1][2] is an IDE for Model -Driven Development (MDE) based on KIELER[3]. It uses KIELER as a [[language server>>url:https://microsoft.github.io/language-server-protocol/\|\|shape="rect"]] (LS) to provide rich client features for SCCharts[4], Lustre, Esterel, ELK, KGraph, and some intermediary languages.
5.1	3
24.1	4	KEITH runs in a browser. You can either start KEITH and connect to an URL (i.e. localhost:3000) via a browser (this will henceforth be called the browser version of KEITH), or start an electron app with a browser that runs KEITH inside (henceforth called the electron version of KEITH). Since the electron app might use a different chromium browser some UI elements might be displayed differently, but both version work the same. The electron version is bundled via the electron-builder framework to build an appimage or an archive into the henceforth called product. Both version have two alternatives to connect to the language server (LS). KEITH can connect to the LS via a socket. This is the only way to debug the LS. In the product KEITH connects to the LS via stdio/out and has to know the relative path to the LS application.
5.1	5
1.1	6	\\
5.1	7
24.1	8	== General Usage Philosophy ==
5.1	9
24.1	10	KEITH is developed via the [[Theia>>url:https://www.theia-ide.org/\|\|shape="rect"]] framework that is based on [[VSCode>>url:https://code.visualstudio.com/\|\|shape="rect"]]. It should be designed to integrate in the look and feel of VSCode. The user should be able to use this tool without clicking buttons in extensive dialogs as it can be the case in Eclipse. Since KIELER is an Eclipse application KEITH should not only focus on adapting everything that is already in KIELER and bring it to another platform but focus on the main features and make them easier accessible and minimize the clutter created via extensive button landscapes and dialogs.
5.1	11
24.1	12	Developing and designing the UI via web technologies promises to make it easier to design user interfaces with Human-computer interaction (HCI) in mind. The KIELER-LS for KEITH requires to separate UI and functionality also in KIELER and allows to develop a KEITH client with less dependencies to language specific implementations and promises are more modular framework. Moreover, the resulting LS could be used to adopt SCCharts toolchain for different IDEs.
5.1	13
24.1	14	As mentioned before, KEITH is able to run in your browser. However, the backend of KEITH and the language must not run on your system. One goal of KEITH is to use it as an online Editor such as [[JSFiddle>>url:https://jsfiddle.net/\|\|shape="rect"]] for JS and use tools such as [[Gitpod>>url:https://www.gitpod.io/\|\|shape="rect"]] which uses the kubernetes framework to manage dockerized workspace and IDE instances. This project is currently work in progress.
21.1	15
	16	\\
	17
	18	\\
	19
22.1	20	{{info}}
	21	Normally the browser version is used for debugging and the electron version is delivered as download, but both work the same and you can also use the developer tools inside the electron version to debug the application.
	22	{{/info}}
18.1	23
	24	{{info}}
	25	You can download the nightly build for the KEITH electron app and the language server [[here>>url:https://rtsys.informatik.uni-kiel.de/~~kieler/files/nightly/sccharts-integration/\|\|shape="rect"]] (currently no working build for MacOS).
	26	{{/info}}
11.1	27
17.1	28	[[image:attach:keith-welcome.png]]
11.1	29
13.1	30
	31
23.1	32	{{toc maxLevel="3" outline="true" indent="10px" style="none"/}}
13.1	33
	34	\\
5.1	35
21.1	36	[[image:attach:keith-abro.png]]
5.1	37
11.1	38	= Downloads =
	39
	40	KEITH Nightly: [[https:~~/~~/rtsys.informatik.uni-kiel.de/~~~~kieler/files/nightly/sccharts-integration/>>url:https://rtsys.informatik.uni-kiel.de/~~kieler/files/nightly/sccharts-integration/\|\|shape="rect"]]
	41
17.1	42	KEITH Language Server: [[https:~~/~~/rtsys.informatik.uni-kiel.de/~~~~kieler/files/nightly/sccharts-integration/>>url:https://rtsys.informatik.uni-kiel.de/~~kieler/files/nightly/sccharts-integration/\|\|shape="rect"]]
11.1	43
	44	\\
	45
	46	\\
	47
5.1	48	[1] Sören Domrös. [[//Moving Model-Driven Engineering from Eclipse to Web Technologies//>>url:https://rtsys.informatik.uni-kiel.de/~~biblio/downloads/theses/sdo-mt.pdf\|\|shape="rect"]], November 2018
	49
	50	[2] Niklas Rentz. //[[Moving Transient Views from Eclipse to Web Technologies>>url:https://rtsys.informatik.uni-kiel.de/~~biblio/downloads/theses/nir-mt.pdf\|\|shape="rect"]],// November 2018
	51
	52	[3] Reinhard von Hanxleden, Hauke Fuhrmann, and Miro Spönemann. “KIELER—The KIELIntegrated Environment for Layout Eclipse Rich Client”. In:Proceedings of the Design,Automation and Test in Europe University Booth (DATE ’11). Grenoble, France, 2011.
	53
	54	[4] Reinhard von Hanxleden, Björn Duderstadt, Christian Motika, Steven Smyth, Michael Mendler, Joaquín Aguado, Stephen Mercer, and Owen O’Brien. SCCharts: [[Sequentially Constructive Statecharts for Safety-Critical Applications>>url:http://rtsys.informatik.uni-kiel.de/~~biblio/downloads/papers/pldi14.pdf\|\|shape="rect"]]. In Proc. ACM SIGPLAN Conference on Programming Language Design and Implementation (PLDI’14), Edinburgh, UK, June 2014.
11.1	55
	56	\\
5.1	57
20.1	58	= Using KEITH =
11.1	59
22.1	60	[[image:attach:keith-dancing-backhoe-explanation.png]]
7.1	61
24.1	62	Theia has four bars: The left var (B), the main bar (C and D), the right bar (E), and the bottom bar (F). All bars are splittable and all widgets can be moved to any bar.
	63
	64	\\
	65
23.1	66	A: Menu bar: Holds the main menu.
7.1	67
23.1	68	B: Left bar: The left bar usally holds the explorer widget and the search widget (only seen as an icon).
7.1	69
24.1	70	C: Left part of Main bar, the editor widget: In the left part of the main bar resides the editor widget. In the top right of the editor widget, in the so called tab bar are some editor specific commands accessible. It is possible to compile or simulate the currently opened model via these buttons. These buttons will not directly invoke the compilation but redirect the user to the [[command palette>>url:https://rtsys.informatik.uni-kiel.de/confluence/display/KIELER/KEITH#KEITH-Thecommandpalette\|\|shape="rect"]].
23.1	71
27.1	72	D: Right part of main bar, the diagram widget: Shows the current model as diagram. Can also be used to show snapshots of a model to model transformation. During simulation the current state is highlighted in red and the last state and taken transition are highlighted in light blue. In the current diagram all "A" states are currently active. In the top right of the diagam widget is the tab bar of this widget. It includes commands to:
23.1	73
27.1	74	* Center the diagram
	75	* Fit the diagram to the widget size
	76	* Compile the shown mode
	77	* Simulate the shown model
	78
24.1	79	E: The right bar: The right bar currently holds the browser preview widget. It can be used to display a visualization of a simulated model. This view can also be opened in another browser tab. The right bar does usually also hold the outline widget, the output widget, and the diagram option widget.
23.1	80
24.1	81	F: The bottom bar: Holds the simulation widget and the compiler widget (in the background). The simulation widget shows the values of a simulated model in form of a table and allows the user to set inputs. Playing, pausing, stepping, and stopping a simulation is supported. On the top right of the simulation widget is the tab bar of this widget. It includes buttons to open the simulation visualization which is currently seen in the right bar.
7.1	82
24.1	83	G: Status bar: Shows the status of tool including:
9.1	84
24.1	85	* errors and warnings in workspace
	86	* Status of compilation and simulation
	87	* Current line number and column
	88	* The end of line sequence (LF)
	89	* Current indentation style (here Tab Size 2)
	90	* Current diagram synthesis (SCChartsSynthesis), which can be changed via clicking it
	91	* The language in the active editor (here SCCharts)
9.1	92
24.1	93	The blue color indicates that the tool has a stable connection to its language server. Yellow indicates a connection loss.
9.1	94
11.1	95	\\
	96
17.1	97	KEITH has some widgets by default, such as the problems-widget, the outline-widget, the output-widget, and the search-widget. All existing widgets are found via the //View// menu entry or via the command palette.
7.1	98
22.1	99	== KIELER compiler widget ==
	100
23.1	101	\\
	102
22.1	103	[[image:attach:keith-compiler.widget.png]]
	104
28.1	105	The compiler widget shows all snapshots created via the model to model transformations of the currently model. These buttons are clickable and send a request to the LS to draw the clicked snapshot in the diagram view. Snapshots are labeled according to their processor label. Snapshots without labels are models of the previous processor.
23.1	106
24.1	107	This widget is only used for displaying these snapshots. All compilation features can be sued via the tab bar of the editor or diagram widget or via the command palette.
	108
28.1	109	\\
	110
23.1	111	{{info title="Hint"}}
	112	You can navigate through the snapshots via //Alt+G/////Alt+J//
	113	{{/info}}
22.1	114
23.1	115	== Diagram-option widget ==
	116
22.1	117	\\
	118
	119	== [[image:attach:keith-diagram-option-widget.png]] ==
	120
24.1	121	The diagram option widget allows to set the diargam options for the currently shown diagram.
	122
	123	On change of the diagram model it updates the options of the diagram via the LSP. The options seen here are SCCharts options.
22.1	124
21.1	125	== The command palette ==
7.1	126
23.1	127	\\
	128
22.1	129	[[image:attach:keith-command-palette2.png]]
	130
10.1	131	The command palette opens by pressing //F1// or opening it via the menu //View>Find Command...//
	132
24.1	133	On open it first displays the recently used commands and after that all commands in lexicographic order. The command palette can be searched via fuzzy search and supports regular expressions. The displayed commands have of a name (on the left side) and optionally a shortcut to invoke them (on the right side of the command palette). Some commands, such as Auto Save also have an icon associated to them.
10.1	134
11.1	135	Via //Ctrl+P //the workspace can be searched for files to open. This can also be access via //F1// and deleting the //>// character in the command palette.
12.1	136
21.1	137	== Modeling SCCharts ==
12.1	138
38.1	139	See [[doc:KIELER.TO DELETE.Quick Start Guide.WebHome\|\|anchor="ModelingSCCharts"]] for details.
29.1	140
	141	== Known Problems ==
	142
	143	=== Mac ===
	144
30.1	145	If the app does not start open it via the terminal with
29.1	146
	147	{{code}}
	148	./keith.app/Contents/MacOS/keith
	149	{{/code}}
39.1	150

Wiki source code of KEITH

Navigation

Quick Links