Wiki source code of Running KEITH

Version 24.1 by Soeren Domroes on 2019/05/16 10:56

version	line-number	content
7.1	1	= Running KEITH =
6.1	2
7.1	3
	4
16.1	5	{{toc maxLevel="2"/}}
6.1	6
5.1	7	== Setting up your eclipse ==
1.1	8
8.1	9	For everything not mentioned here refer to [[Getting Eclipse>>doc:KIELER.Getting Eclipse\|\|shape="rect"]] guide.
1.1	10
15.1	11	Use the installer go to advanced mode, add the KIELER url. Then select first pragmatics and after that semantics (that is very important).
1.1	12
15.1	13	Select the Theia stream for semantics and the Keith stream for pragmatics and use the latest eclipse if possible. Set the targetplatform to photon (or latest?) and finish.
1.1	14
8.1	15	Wait till everything installs and the setup tasks finish. If you have any problems in this stage refer to the [[Getting Eclipse>>doc:KIELER.Getting Eclipse\|\|shape="rect"]] guide.
1.1	16
5.1	17	\\
1.1	18
13.1	19	The setup tasks for Modular Target will fail. Disable it after this happens and execute them again via //Help>Perform Setup Tasks//. Open the //plug-in development// perspective. Select working sets as top level elements. Run //clean build//. Several pragmatics projects have errors. Just close them and you will be fine.
1.1	20
5.1	21	To run the language server go to //Run Configurations// create a new //eclipse application// run configuration and select //Run an application// and //de.cau.cs.kieler.language.server.LanguageServer//
1.1	22
5.1	23	== [[image:attach:Screenshot from 2019-02-15 14-10-50.png]] ==
1.1	24
5.1	25	\\
1.1	26
5.1	27	You have to edit the arguments too. The Vm arguments host and port are added to connect the LS via socket.
1.1	28
5.1	29	[[image:attach:Screenshot from 2019-02-15 14-13-34.png]]
1.1	30
5.1	31	The default port to which KEITH tries to connect is 5007.
1.1	32
	33	== Setting up a KEITH developer setup... ==
	34
	35	General requirements:
	36
	37	* node
	38	* npm (whatever node installs)
	39	* yarn (latest version)
	40	* Python (2.7.X)
	41	* gcc, g++, and make (for native dependencies of some npm packages)
	42	* [[Visual Studio Code>>url:https://code.visualstudio.com/\|\|shape="rect"]] (latest version)
	43	* a cloned [[keith >>url:https://git.rtsys.informatik.uni-kiel.de/projects/KIELER/repos/keith/browse\|\|shape="rect"]]repository
	44
	45	== ... on linux: ==
	46
	47	(Theia has a [[guide >>url:https://www.theia-ide.org/doc/authoring_extensions\|\|shape="rect"]]for extension development that might be helpful)
	48
	49	install node 8:
	50
	51	{{code}}
	52	curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.5/install.sh \| bash
	53	nvm install 8
	54	{{/code}}
	55
	56	Install python if you haven't (remember: Python 2: , Python 3: ).
	57
	58	{{code language="none"}}
	59	Install yarn (a package manager build on the package manager npm):
	60	{{/code}}
	61
	62	{{{}}}
	63
	64	\\
	65
	66	{{code}}
	67	npm install -g yarn
	68	{{/code}}
	69
	70	\\
	71
	72	== ... on windows: ==
	73
	74	Install [[node 8>>url:https://nodejs.org/download/release/v8.15.0/\|\|shape="rect"]] for windows. I personally used the {{code language="none"}}.msi{{/code}}.
	75
11.1	76	Use that to install windows-build-tools by executing the command in an administrative powershell.
1.1	77
	78	{{code}}
	79	npm install -g windows-build-tools
	80	{{/code}}
	81
15.1	82	This installs make, gcc, g++, python and all this. Somehow this does not really terminate. If nothing happens anymore it may be finished, just kill the process if it does not terminate.
1.1	83
15.1	84	All the installed executables are not in the path and that is okay. This is not needed since yarn/npm knows how to call them when needed.
	85
14.1	86	Yarn can be downloaded and installed from [[here>>url:https://yarnpkg.com/lang/en/docs/install/#windows-stable\|\|shape="rect"]].
	87
11.1	88	=== Known Problems in this step ===
	89
15.1	90	If python3 was already installed this may cause some problems.
11.1	91
1.1	92	== ... on mac: ==
	93
	94	Get a package manager, something like [[brew>>url:https://brew.sh/index_de\|\|shape="rect"]].
	95
	96	Use brew to install all necessary stuff.
	97
	98	Apparently there is an issue with xcode-select: [[Theia developers>>url:https://github.com/theia-ide/theia/blob/master/doc/Developing.md\|\|shape="rect"]] recommend the following:
	99
	100	{{code}}
	101	xcode-select --install
	102	{{/code}}
	103
5.1	104	After doing this for your OS all that is missing is running KEITH (in developer setup) and setting up your eclipse for language server development).
1.1	105
5.1	106	= Stuff that may help =
1.1	107
5.1	108	== Running the already build LS ==
1.1	109
5.1	110	Go to the latest [[Bamboo build>>url:https://rtsys.informatik.uni-kiel.de/bamboo/browse/KISEMA-NSI\|\|shape="rect"]] and go to Artifacts.
1.1	111
5.1	112	[[image:attach:image2019-2-7_17-46-58.png]]
1.1	113
5.1	114	Select Language Server Zip and download the LS and unpack it somewhere.
	115
	116	Locate the kieler.ini file. Depending on the OS it has a different location (linux; toplevel, windows, toplevel, mac: Content/Eclipse/kieler.ini)
	117
	118	Paste the following at the beginning of the ini-file:
	119
1.1	120	{{code language="bash"}}
5.1	121	-application
	122	de.cau.cs.kieler.language.server.LanguageServer
	123	-noSplash
1.1	124	{{/code}}
	125
5.1	126	Since an eclipse application is built, this is needed to start the LS without a splashscreen.
1.1	127
5.1	128	If you want to connect that LS via socket to your Theia application (KEITH) add the following to the vmargs:
3.1	129
5.1	130	{{code}}
	131	-Dport=5007
	132	{{/code}}
1.1	133
5.1	134	5007 is the standard port KEITH is currently connecting to in socket mode. You can find this port in your Theia application at the following location:
1.1	135
5.1	136	Assume you are in the [[keith >>url:https://git.rtsys.informatik.uni-kiel.de/projects/KIELER/repos/keith/browse\|\|shape="rect"]]repository. Go to {{code language="none"}}keith-app{{/code}}, you should see something like this:
1.1	137
5.1	138	[[image:attach:image2019-2-7_17-58-22.png]]
1.1	139
5.1	140	Open the {{code language="none"}}package.json{{/code}}. In the{{code language="none"}} package.json{{/code}} are several scripts defined.
3.1	141
5.1	142	[[image:attach:image2019-2-7_18-0-7.png]]
1.1	143
5.1	144	The {{code language="none"}}LSP_PORT{{/code}} option is used to activate the connection via socket. It is also possible to specify a relative location to a LS via {{code language="none"}}LS_PATH=<path to LS>{{/code}}.
3.1	145
1.1	146	\\
	147
5.1	148	== How run KEITH in developer setup (socket) ==
3.1	149
5.1	150	Run the following to build and run KEITH in its developer setup (in socket mode, so the LS has to be started separately)
3.1	151
5.1	152	{{code language="bash"}}
	153	yarn && cd keith-app && yarn run socket
	154	{{/code}}
	155
13.1	156	//yarn// builds all the stuff. //yarn run socket// in keith-app starts the application. After an initial build via yarn you can run //yarn watch // to watch the changes in your repository. In another console you run yarn run socket in keith-app. Now refreshing your browser is enough to apply the changes.
	157
5.1	158	Per default the KEITH opens on localhost:3000.
	159
	160	It is required to restart the language server if KEITH is restarted, since the diagram view has a problem (since theia-sprotty is used) to reconnect after that.
7.1	161
13.1	162	=== Known issues for windows: ===
	163
	164	nsfw.code not found: In the top level package.json exists a script called postinstall. Remove this on windows, delete the node_modules folder and rebuilt the application. This is a known issue of electron-builder.
	165
	166	=== Known issues on mac: ===
	167
	168	Since SWT is still used as part of the diagram synthesis (but is not relevant anymore). Since it is not called on the main thread this causes a deadlock. Therefore mac just does not work.
	169
	170	=== Known issues: ===
	171
23.1	172	\\
13.1	173
7.1	174	= Developing for KEITH =
	175
9.1	176	We use java ServiceLoader to register stuff. Here is a small example how a LanguageServerExtension is registered via a ServiceLoader and how it is used:
	177
19.1	178	== Register LanguageServerExtensions (ServiceLoader Example) ==
9.1	179
19.1	180	This is a LanguageServerExtension. It has to be used in the de.cau.cs.kieler.language.server plugin. Since the language-server-plugin should not have dependencies to all plugins that define a language server extension dependency inversion is used to prevent that. A ServiceLoader does exactly that.
9.1	181
	182	Here is such an example extension, the KiCoolLanguageServerExtension:
	183
	184	{{code}}
	185	package de.cau.cs.kieler.kicool.ide.language.server
	186
	187
10.1	188	/**
	189	* @author really fancy name
	190	*
	191	*/
9.1	192	@Singleton
19.1	193	class KiCoolLanguageServerExtension implements ILanguageServerExtension, CommandExtension, ILanguageClientProvider {
	194	// fancy extension stuff
	195
21.1	196	var KeithLanguageClient client
19.1	197	// A language server extension must implement the initialize method,
	198	// it is however only called if the extension is registered via a language.
	199	// This should never be the case, so this is never called.
	200	override initialize(ILanguageServerAccess access) {
	201	this.languageServerAccess = access
	202	}
21.1	203
	204	// implement ILanguageClientProvider
	205	override setLanguageClient(LanguageClient client) {
	206	this.client = client as KeithLanguageClient
	207	}
	208
	209	// implement ILanguageClientProvider
	210	override getLanguageClient() {
	211	return this.client
	212	}
19.1	213
9.1	214	}
	215	{{/code}}
	216
20.1	217	The CommandExtension defines all commands (requests or notifications) that are send from client to server. An example how this looks like can be seen in the code snippet Example CommandExtension is an example how to [[define a server side extension interface.>>doc:\|\|anchor="Registeranextension(onserverside)"]]
19.1	218
21.1	219	The ILanguageClientProvider should be implemented by an extension that plans to send [[messages from the server to the client>>doc:\|\|anchor="ServerClientcommunicationinterface"]].
19.1	220
9.1	221	This language server extension is provided by a corresponding contribution, which is later used to access it:
	222
	223	{{code}}
	224	package de.cau.cs.kieler.kicool.ide.language.server
	225
	226	import com.google.inject.Injector
	227	import de.cau.cs.kieler.language.server.ILanguageServerContribution
	228
	229	/**
	230	* @author really fancy name
	231	*
	232	*/
	233	class KiCoolLanguageServerContribution implements ILanguageServerContribution {
	234
	235	override getLanguageServerExtension(Injector injector) {
	236	return injector.getInstance(KiCoolLanguageServerExtension)
	237	}
	238	}
	239	{{/code}}
	240
10.1	241	Create a file called de.cau.cs.kieler.language.server.ILanguageServerContribution in <plugin>/META-INF/services/ (in this example this is de.cau.cs.kieler.kicool.ide). The name of the file refers to the contribution interface that should be used to provide the contribution. The content of the file is the following:
9.1	242
10.1	243	{{code}}
	244	de.cau.cs.kieler.kicool.ide.language.server.KiCoolLanguageServerContribution
	245	{{/code}}
	246
11.1	247	This is the fully qualified name of the contribution written earlier.
10.1	248
11.1	249	The language server uses all LanguageServerExtensions like this:
	250
	251	{{code}}
	252	var iLanguageServerExtensions = <Object>newArrayList(languageServer) // list of all language server extensions
	253	for (lse : KielerServiceLoader.load(ILanguageServerContribution)) { // load all contributions
	254	iLanguageServerExtensions.add(lse.getLanguageServerExtension(injector))
	255	}
	256	{{/code}}
	257
	258	The resulting list of implementions is used to add the extensions to the language server.
	259
7.1	260	== Register an extension (on server side) ==
	261
11.1	262	See example above for ServiceLoader and initial stuff.
7.1	263
11.1	264	What is still missing are the contents of the CommandExtension implemented by the KiCoolLanguageServerExtension. This is an interface defining all additional commands. The CommandExtension looks like this.
	265
19.1	266	{{code title="Example CommandExtension"}}
11.1	267	package de.cau.cs.kieler.kicool.ide.language.server
	268
	269	import java.util.concurrent.CompletableFuture
	270	import org.eclipse.lsp4j.jsonrpc.services.JsonRequest
	271	import org.eclipse.lsp4j.jsonrpc.services.JsonSegment
	272
	273	/**
	274	* Interface to the LSP extension commands
	275	*
	276	* @author really fancy name
	277	*
	278	*/
	279	@JsonSegment('keith/kicool')
	280	interface CommandExtension {
	281
	282	/**
	283	* Compiles file given by uri with compilationsystem given by command.
	284	*/
	285	@JsonRequest('compile')
	286	def CompletableFuture<CompilationResults> compile(String uri, String clientId, String command, boolean inplace);
	287
	288	/**
	289	* Build diagram for snapshot with id index for file given by uri. Only works, if the file was already compiled.
	290	*/
	291	@JsonRequest('show')
	292	def CompletableFuture<String> show(String uri, String clientId, int index)
	293
	294	/**
	295	* Returns all compilation systems which are applicable for the file at given uri.
	296	*
	297	* @param uri URI as string to get compilation systems for
	298	* @param filter boolean indicating whether compilation systems should be filtered
	299	*/
	300	@JsonRequest('get-systems')
	301	def CompletableFuture<Object> getSystems(String uri, boolean filterSystems)
	302	}
	303	{{/code}}
	304
	305	This defines three json-rpc commands: "keith/kicool/compile", "keith/kicool/show", "keith/kicool/get-systems". These are implemented in KiCoolLanguageServerExtension.
	306
21.1	307	\\
	308
	309	== Server Client communication interface ==
	310
22.1	311	Not only messages from client to server but rather messages from server client might be needed.
21.1	312
22.1	313	Messages that can be send from server to client are defined in the KeithLanguageClient:
	314
	315	{{code title="Example KeithLanguageLCient"}}
	316	/**
	317	* LanguageClient that implements additional methods necessary for server client communication in KEITH.
	318	*
	319	* @author really fancy name
	320	*
	321	*/
	322	@JsonSegment("keith")
	323	interface KeithLanguageClient extends LanguageClient {
	324
	325	@JsonNotification("kicool/compile")
	326	def void compile(Object results, String uri, boolean finished);
	327
	328	@JsonNotification("kicool/cancel-compilation")
	329	def void cancelCompilation(boolean success);
	330
	331	// Not only notifications, but also server client requests should be possible, but currently there is no use case for that.
	332	}
	333	{{/code}}
	334
	335	These messages can be caught on the client side by defining the message that is caught like this:
	336
24.1	337	{{code title="Client side message definition"}}
22.1	338	export const snapshotDescriptionMessageType = new NotificationType<CodeContainer, void>('keith/kicool/compile');
	339	{{/code}}
	340
	341	This message type is bound to a method that should be called whenever the client receives such a message.
	342
24.1	343	{{code title="Client side message registration"}}
22.1	344	const lClient: ILanguageClient = await this.client.languageClient
	345	lClient.onNotification(snapshotDescriptionMessageType, this.handleNewSnapshotDescriptions.bind(this))
	346	{{/code}}
	347
	348	The method should receive all parameters specific in the KeithLanguageClient interface on the serevr side.
	349
	350	Such a notification from server to client is send like this:
	351
24.1	352	{{code title="Server side message sending"}}
22.1	353	future.thenAccept([
	354	// client is the KeithLanguageClient registered in a LanguageServerExtension that implements a ILanguageClientProvider
	355	// compile is the command defined in the KeithLanguageClientInterface
	356	client.compile(new CompilationResults(this.snapshotMap.get(uri)), uri, finished)
	357	])
	358	{{/code}}
	359
	360	\\
	361
11.1	362	== Register and calling an extension (on client side) ==
	363
	364	Language server extension do not have to be registered on the client side. It is just called.
	365
	366	You can send a request or a notification to the language server like this:
	367
24.1	368	{{code title="Client side message sending"}}
11.1	369	const lclient = await this.client.languageClient
	370	const snapshotsDescriptions: CodeContainer = await lclient.sendRequest("keith/kicool/compile", [uri, KeithDiagramManager.DIAGRAM_TYPE + '_sprotty', command,
	371	this.compilerWidget.compileInplace]) as CodeContainer
	372	// or via a thenable
12.1	373	client.languageClient.then(lClient => {
13.1	374	lClient.sendRequest("keith/kicool/compile").then((snapshotsDescriptions: CodeContainer) => {
12.1	375	// very important stuff
	376	}
	377	// await is preferred, since it is shorter.
	378	{{/code}}
11.1	379
13.1	380	In this example client is an instance of a language client. It is usually injected like this:
11.1	381
24.1	382	{{code title="Client side LanguageClientContribution injection"}}
	383	@inject(KeithLanguageClientContribution) public readonly client: KeithLanguageClientContribution
12.1	384	constructor(
24.1	385	// other injected classes that are relevant for the constructor
12.1	386	) {
	387	// constructor stuff
	388	}
11.1	389	{{/code}}
	390
	391	\\
	392
13.1	393	== How to make a new package for KEITH ==
7.1	394
13.1	395	Clone the [[KEITH repository>>url:https://git.rtsys.informatik.uni-kiel.de/projects/KIELER/repos/keith/browse\|\|shape="rect"]].
	396
	397	Open the keith folder in VSCode. You are know in the keith directory in VSCode.
	398
	399	You see something like this: TODO picture
	400
	401	Create a new folder called keith-<your extension name>.
	402
	403	Copy a package.json, a tslint.json, a tsconfig.json, and a src folder into the folder.
	404
	405	Add keith-<your extension name> to workspaces in the top level package.json.
	406
	407	Add "keith-<your extension name>(% style="color: rgb(0,0,0);" %)": (%%)"0.1.0"(% style="color: rgb(0,0,0);" %) to the dependencies in the top level package.json and the product package.json files (e.g. the package.json in keith-app).
	408
	409	=== What is in the src directory? ===
	410
	411	The source directory has three optional subfolders.
	412
	413	* node: Holds all backend related classes. This does currently only exist in the [[keith-language package>>url:https://git.rtsys.informatik.uni-kiel.de/projects/KIELER/repos/keith/browse/keith-language\|\|shape="rect"]].
	414	* common: Holds general helper methods, string constants and some data classes
	415	* browser: Holds all widgets, contribution for commands, menus, and widgets, and the frontend-extension.
	416
	417	==== The frontend-extension ====
	418
	419	This binds all necessary classes. Look at existing frontend extension in [[KEITH>>url:https://git.rtsys.informatik.uni-kiel.de/projects/KIELER/repos/keith/browse\|\|shape="rect"]] or [[Theia>>url:https://github.com/theia-ide/theia/tree/master/packages\|\|shape="rect"]] to see how this is done.
	420
	421	==== More examples for stuff ====
	422
	423	See [[Theia examples>>url:https://www.theia-ide.org/doc/Commands_Keybindings.html\|\|shape="rect"]].
	424
7.1	425	== How to write a widget ==
13.1	426
	427	There are different kinds of widgets that are commonly used in [[KEITH>>url:https://git.rtsys.informatik.uni-kiel.de/projects/KIELER/repos/keith/browse\|\|shape="rect"]] or in existing [[Theia packages>>url:https://github.com/theia-ide/theia/tree/master/packages\|\|shape="rect"]].
	428
	429	* BaseWidget: Very basic
	430	* ReactWidget: A render method has to be implemented that redraws the widget on demand. Additionally several on* event methods can beimplemented.
	431	* TreeWidget: Extends the ReactWidget and draws the contents of the widget in a tree view.
	432
	433	If a widget has a state it should implement the StatefulWidget interface, which allows to imlement a store and restore method.
	434
	435	Look at examples in KEITH or Theia to see how this is done.
	436
18.1	437	== How to make a new module for sprotty (see actionModule, ...) ==
	438
	439	WIP
	440
13.1	441	\\

Wiki source code of Running KEITH

Navigation

Quick Links