Wiki source code of Running KEITH

Version 13.1 by Soeren Domroes on 2019/04/01 13:53

version	line-number	content
7.1	1	= Running KEITH =
6.1	2
7.1	3
	4
6.1	5	{{toc/}}
	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
5.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
5.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 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
	82	This installs make, gcc, g++, python and all this (I am not sure about yarn, anyway you can always install yarn the same way as in the linux description)
	83
11.1	84	=== Known Problems in this step ===
	85
	86	Python is not correctly registered in the path.
	87
1.1	88	== ... on mac: ==
	89
	90	Get a package manager, something like [[brew>>url:https://brew.sh/index_de\|\|shape="rect"]].
	91
	92	Use brew to install all necessary stuff.
	93
	94	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:
	95
	96	{{code}}
	97	xcode-select --install
	98	{{/code}}
	99
5.1	100	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	101
5.1	102	= Stuff that may help =
1.1	103
5.1	104	== Running the already build LS ==
1.1	105
5.1	106	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	107
5.1	108	[[image:attach:image2019-2-7_17-46-58.png]]
1.1	109
5.1	110	Select Language Server Zip and download the LS and unpack it somewhere.
	111
	112	Locate the kieler.ini file. Depending on the OS it has a different location (linux; toplevel, windows, toplevel, mac: Content/Eclipse/kieler.ini)
	113
	114	Paste the following at the beginning of the ini-file:
	115
1.1	116	{{code language="bash"}}
5.1	117	-application
	118	de.cau.cs.kieler.language.server.LanguageServer
	119	-noSplash
1.1	120	{{/code}}
	121
5.1	122	Since an eclipse application is built, this is needed to start the LS without a splashscreen.
1.1	123
5.1	124	If you want to connect that LS via socket to your Theia application (KEITH) add the following to the vmargs:
3.1	125
5.1	126	{{code}}
	127	-Dport=5007
	128	{{/code}}
1.1	129
5.1	130	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	131
5.1	132	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	133
5.1	134	[[image:attach:image2019-2-7_17-58-22.png]]
1.1	135
5.1	136	Open the {{code language="none"}}package.json{{/code}}. In the{{code language="none"}} package.json{{/code}} are several scripts defined.
3.1	137
5.1	138	[[image:attach:image2019-2-7_18-0-7.png]]
1.1	139
5.1	140	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	141
5.1	142	You can also set these options for an already build [[keith electron app>>url:http://rtsys.informatik.uni-kiel.de/~~kieler/files/nightly/sccharts-integration/\|\|shape="rect"]].
3.1	143
1.1	144	\\
	145
5.1	146	== How run KEITH in developer setup (socket) ==
3.1	147
5.1	148	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	149
5.1	150	{{code language="bash"}}
	151	yarn && cd keith-app && yarn run socket
	152	{{/code}}
	153
13.1	154	//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.
	155
5.1	156	Per default the KEITH opens on localhost:3000.
	157
	158	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	159
13.1	160	=== Known issues for windows: ===
	161
	162	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.
	163
	164	=== Known issues on mac: ===
	165
	166	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.
	167
	168	=== Known issues: ===
	169
	170	Refreshing the browser is not enough for the diagram to work. If the diagram is needed the language server has to be restarted before the browser is refreshed. This is a known issue in theia-sprotty.
	171
7.1	172	= Developing for KEITH =
	173
9.1	174	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:
	175
	176	== ServiceLoader Example ==
	177
	178	This is a LanguageServerExtension. It has to be used in the de.cau.cs.kieler.language.server plugin. Since the language-sever-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.
	179
	180	Here is such an example extension, the KiCoolLanguageServerExtension:
	181
	182	{{code}}
	183	package de.cau.cs.kieler.kicool.ide.language.server
	184
	185
10.1	186	/**
	187	* @author really fancy name
	188	*
	189	*/
9.1	190	@Singleton
	191	class KiCoolLanguageServerExtension implements ILanguageServerExtension, CommandExtension {
	192	// fancy extension stuff
	193	}
	194	{{/code}}
	195
	196	This language server extension is provided by a corresponding contribution, which is later used to access it:
	197
	198	{{code}}
	199	package de.cau.cs.kieler.kicool.ide.language.server
	200
	201	import com.google.inject.Injector
	202	import de.cau.cs.kieler.language.server.ILanguageServerContribution
	203
	204	/**
	205	* @author really fancy name
	206	*
	207	*/
	208	class KiCoolLanguageServerContribution implements ILanguageServerContribution {
	209
	210	override getLanguageServerExtension(Injector injector) {
	211	return injector.getInstance(KiCoolLanguageServerExtension)
	212	}
	213	}
	214	{{/code}}
	215
10.1	216	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	217
10.1	218	{{code}}
	219	de.cau.cs.kieler.kicool.ide.language.server.KiCoolLanguageServerContribution
	220	{{/code}}
	221
11.1	222	This is the fully qualified name of the contribution written earlier.
10.1	223
11.1	224	The language server uses all LanguageServerExtensions like this:
	225
	226	{{code}}
	227	var iLanguageServerExtensions = <Object>newArrayList(languageServer) // list of all language server extensions
	228	for (lse : KielerServiceLoader.load(ILanguageServerContribution)) { // load all contributions
	229	iLanguageServerExtensions.add(lse.getLanguageServerExtension(injector))
	230	}
	231	{{/code}}
	232
	233	The resulting list of implementions is used to add the extensions to the language server.
	234
7.1	235	== Register an extension (on server side) ==
	236
11.1	237	See example above for ServiceLoader and initial stuff.
7.1	238
11.1	239	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.
	240
	241	{{code}}
	242	package de.cau.cs.kieler.kicool.ide.language.server
	243
	244	import java.util.concurrent.CompletableFuture
	245	import org.eclipse.lsp4j.jsonrpc.services.JsonRequest
	246	import org.eclipse.lsp4j.jsonrpc.services.JsonSegment
	247
	248	/**
	249	* Interface to the LSP extension commands
	250	*
	251	* @author really fancy name
	252	*
	253	*/
	254	@JsonSegment('keith/kicool')
	255	interface CommandExtension {
	256
	257	/**
	258	* Compiles file given by uri with compilationsystem given by command.
	259	*/
	260	@JsonRequest('compile')
	261	def CompletableFuture<CompilationResults> compile(String uri, String clientId, String command, boolean inplace);
	262
	263	/**
	264	* Build diagram for snapshot with id index for file given by uri. Only works, if the file was already compiled.
	265	*/
	266	@JsonRequest('show')
	267	def CompletableFuture<String> show(String uri, String clientId, int index)
	268
	269	/**
	270	* Returns all compilation systems which are applicable for the file at given uri.
	271	*
	272	* @param uri URI as string to get compilation systems for
	273	* @param filter boolean indicating whether compilation systems should be filtered
	274	*/
	275	@JsonRequest('get-systems')
	276	def CompletableFuture<Object> getSystems(String uri, boolean filterSystems)
	277	}
	278	{{/code}}
	279
	280	This defines three json-rpc commands: "keith/kicool/compile", "keith/kicool/show", "keith/kicool/get-systems". These are implemented in KiCoolLanguageServerExtension.
	281
	282	== Register and calling an extension (on client side) ==
	283
	284	Language server extension do not have to be registered on the client side. It is just called.
	285
	286	You can send a request or a notification to the language server like this:
	287
	288	{{code}}
	289	const lclient = await this.client.languageClient
	290	const snapshotsDescriptions: CodeContainer = await lclient.sendRequest("keith/kicool/compile", [uri, KeithDiagramManager.DIAGRAM_TYPE + '_sprotty', command,
	291	this.compilerWidget.compileInplace]) as CodeContainer
	292	// or via a thenable
12.1	293	client.languageClient.then(lClient => {
13.1	294	lClient.sendRequest("keith/kicool/compile").then((snapshotsDescriptions: CodeContainer) => {
12.1	295	// very important stuff
	296	}
	297	// await is preferred, since it is shorter.
	298	{{/code}}
11.1	299
13.1	300	In this example client is an instance of a language client. It is usually injected like this:
11.1	301
12.1	302	{{code}}
	303	constructor(
	304	@inject(KeithLanguageClientContribution) public readonly client: KeithLanguageClientContribution
	305	// other injected classes
	306	) {
	307	// constructor stuff
	308	}
11.1	309	{{/code}}
	310
	311	\\
	312
13.1	313	== How to make a new package for KEITH ==
7.1	314
13.1	315	Clone the [[KEITH repository>>url:https://git.rtsys.informatik.uni-kiel.de/projects/KIELER/repos/keith/browse\|\|shape="rect"]].
	316
	317	Open the keith folder in VSCode. You are know in the keith directory in VSCode.
	318
	319	You see something like this: TODO picture
	320
	321	Create a new folder called keith-<your extension name>.
	322
	323	Copy a package.json, a tslint.json, a tsconfig.json, and a src folder into the folder.
	324
	325	Add keith-<your extension name> to workspaces in the top level package.json.
	326
	327	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).
	328
	329	=== What is in the src directory? ===
	330
	331	The source directory has three optional subfolders.
	332
	333	* 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"]].
	334	* common: Holds general helper methods, string constants and some data classes
	335	* browser: Holds all widgets, contribution for commands, menus, and widgets, and the frontend-extension.
	336
	337	==== The frontend-extension ====
	338
	339	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.
	340
	341	==== More examples for stuff ====
	342
	343	See [[Theia examples>>url:https://www.theia-ide.org/doc/Commands_Keybindings.html\|\|shape="rect"]].
	344
7.1	345	== How to write a widget ==
13.1	346
	347	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"]].
	348
	349	* BaseWidget: Very basic
	350	* ReactWidget: A render method has to be implemented that redraws the widget on demand. Additionally several on* event methods can beimplemented.
	351	* TreeWidget: Extends the ReactWidget and draws the contents of the widget in a tree view.
	352
	353	If a widget has a state it should implement the StatefulWidget interface, which allows to imlement a store and restore method.
	354
	355	Look at examples in KEITH or Theia to see how this is done.
	356
	357	\\

Wiki source code of Running KEITH

Navigation

Quick Links