<
From version < 23.1 >
edited by Soeren Domroes
on 2019/05/16 10:53
To version < 26.1 >
edited by Soeren Domroes
on 2019/07/09 10:44
>
Change comment: There is no comment for this version

Summary

Details

Page properties
Content
... ... @@ -139,16 +139,29 @@
139 139  
140 140  Open the {{code language="none"}}package.json{{/code}}. In the{{code language="none"}} package.json{{/code}} are several scripts defined.
141 141  
142 -[[image:attach:image2019-2-7_18-0-7.png]]
142 +{{code language="js"}}
143 +"scripts": {
144 + "prepare": "yarn run clean && yarn build",
145 + "clean": "theia clean",
146 + "build": "theia build --mode development",
147 + "start": "theia start --root-dir=../workspace",
148 + "socket": "node ./src-gen/backend/main.js --root-dir=../workspace --LSP_PORT=5007 --port=3000 --loglevel=debug",
149 + "watch": "theia build --watch --mode development"
150 + },
151 +{{/code}}
143 143  
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}}.
145 -
146 146  \\
147 147  
155 +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}}.
156 +
148 148  == How run KEITH in developer setup (socket) ==
149 149  
150 150  Run the following to build and run KEITH in its developer setup (in socket mode, so the LS has to be started separately)
151 151  
161 +=== Running KEITH in the browser ===
162 +
163 +\\
164 +
152 152  {{code language="bash"}}
153 153  yarn && cd keith-app && yarn run socket
154 154  {{/code}}
... ... @@ -157,285 +157,42 @@
157 157  
158 158  Per default the KEITH opens on localhost:3000.
159 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.
173 +{{info}}
174 +If you previously build keith electron, you have to execute {{code language="none"}}yarn run rebuild: browser{{/code}}
175 +{{/info}}
161 161  
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 -
172 172  \\
173 173  
174 -= Developing for KEITH =
179 +=== Running KEITH as (unbundled) electron app ===
175 175  
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 -
178 -== Register LanguageServerExtensions (ServiceLoader Example) ==
179 -
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.
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 -
188 -/**
189 - * @author really fancy name
190 - *
191 - */
192 -@Singleton
193 -class KiCoolLanguageServerExtension implements ILanguageServerExtension, CommandExtension, ILanguageClientProvider {
194 - // fancy extension stuff
195 -
196 - var KeithLanguageClient client
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 - }
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 - }
213 -
214 -}
181 +{{code language="bash"}}
182 +yarn && yarn run rebuild:electron && cd keith-app-electron && yarn run socket
215 215  {{/code}}
216 216  
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)"]]
185 +//yarn// builds all the stuff. //yarn run socket// in keith-app-electron 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-electron. Now refreshing your browser is enough to apply the changes.
218 218  
219 -The ILanguageClientProvider should be implemented by an extension that plans to send [[messages from the server to the client>>doc:||anchor="ServerClientcommunicationinterface"]].
187 +{{info}}
188 +If you previously build keith electron, you have to execute {{code language="none"}}yarn run rebuild: browser{{/code}}
189 +{{/info}}
220 220  
221 -This language server extension is provided by a corresponding contribution, which is later used to access it:
191 +=== Known issues for windows: ===
222 222  
223 -{{code}}
224 -package de.cau.cs.kieler.kicool.ide.language.server
193 +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.
225 225  
226 -import com.google.inject.Injector
227 -import de.cau.cs.kieler.language.server.ILanguageServerContribution
195 +=== Known issues on mac: ===
228 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}}
197 +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.
240 240  
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:
199 +=== Known issues: ===
242 242  
243 -{{code}}
244 -de.cau.cs.kieler.kicool.ide.language.server.KiCoolLanguageServerContribution
245 -{{/code}}
201 +* KEITH works in the browser/electron app, but not in the electron app/browser with the following error message:(((
202 +{{code language="none"}}symbol lookup error: ... symbol lookup error: .../keith/node_modules/nsfw/build/Release/nsfw.node: undefined symbol: _ZN2v816FunctionTemplate3NewEPNS_7IsolateEPFvRKNS_20FunctionCallbackInfoINS_5ValueEEEENS_5LocalIS4_EENSA_INS_9SignatureEEEiNS_19ConstructorBehaviorENS_14SideEffectTypeE {{/code}}{{code language="none"}}Done in 0.90s.{{/code}}
246 246  
247 -This is the fully qualified name of the contribution written earlier.
204 +* run
248 248  
249 -The language server uses all LanguageServerExtensions like this:
206 +{{code language="none"}}
207 +yarn run rebuild:electron/browser
208 +{{/code}} after yarn to fix this.
209 +)))
250 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 -
260 -== Register an extension (on server side) ==
261 -
262 -See example above for ServiceLoader and initial stuff.
263 -
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 -
266 -{{code title="Example CommandExtension"}}
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 -
307 307  \\
308 -
309 -== Server Client communication interface ==
310 -
311 -Not only messages from client to server but rather messages from server client might be needed.
312 -
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 -
337 -{{code}}
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 -
343 -{{code}}
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 -
352 -{{code}}
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 -
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 -
368 -{{code}}
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
373 -client.languageClient.then(lClient => {
374 -lClient.sendRequest("keith/kicool/compile").then((snapshotsDescriptions: CodeContainer) => {
375 - // very important stuff
376 -}
377 -// await is preferred, since it is shorter.
378 -{{/code}}
379 -
380 -In this example client is an instance of a language client. It is usually injected like this:
381 -
382 -{{code}}
383 -constructor(
384 - @inject(KeithLanguageClientContribution) public readonly client: KeithLanguageClientContribution
385 - // other injected classes
386 - ) {
387 - // constructor stuff
388 -}
389 -{{/code}}
390 -
391 -\\
392 -
393 -== How to make a new package for KEITH ==
394 -
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 -
425 -== How to write a widget ==
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 -
437 -== How to make a new module for sprotty (see actionModule, ...) ==
438 -
439 -WIP
440 -
441 -\\
Confluence.Code.ConfluencePageClass[0]
Id
... ... @@ -1,1 +1,1 @@
1 -57802999
1 +60522742
URL
... ... @@ -1,1 +1,1 @@
1 -https://rtsys.informatik.uni-kiel.de/confluence//wiki/spaces/KIELER/pages/57802999/Running KEITH
1 +https://rtsys.informatik.uni-kiel.de/confluence//wiki/spaces/KIELER/pages/60522742/Running KEITH