kevoree-web-editor

Kevoree Web Editor - Static Web Client

Kevoree Web Editor

Web app for Kevoree model management
You can use the demo version here editor.kevoree.org

The purpose of Kevoree Web Editor (KWE) is to provide an easy-to-use tool to manage your Kevoree models & runtimes.
It is mostly written in Javascript and has been designed to work as a static standalone Web application.

KWE's UI is composed of 3 main components:

  • a menu bar (top panel)
  • a TypeDefinition list + search/filter field (left panel)
  • a Kevoree model editor (center)

Menu itemDescriptionShortcut
LoadLoad a model from a JSON file client-sideCtrl+L
MergeSame as "Load" but merging given model with the current model in KWECtrl+M
Open from nodeLoad a model from a remote node reachable using Kevoree WebSocket protocolCtrl+O
Merge from nodeSame as "Open from node" but merging retrieved model with the current model in KWECtrl+Shift+M
Save as JSONSave the current model in KWE to a JSON file client-sideCtrl+S
Menu itemDescriptionShortcut
Clear AllReset the current model to an empty one (empty TypeDefinition list and empty model graph)Alt+A
Clear InstancesDelete every instances in the current model (empty model graph)Alt+I
Clear Unused Type DefsParse the current model in order to remove the unused TypeDefinition (no instance means unused)Alt+U
Kevoree Standard LibrariesOpen the Kevoree Standard Libraries popup (see below)Alt+K
From custom repositoryOpen the From custom repository popup (see below)
Custom pushOpen the Custom push popup (see below)
Menu itemDescriptionShortcut
UndoUndo last model modification (:exclamation: NOT IMPLEMENTED YET)Ctrl+Z
RedoRedo last model modification (:exclamation: NOT IMPLEMENTED YET)Ctrl+Y
SettingsConfigure your KWE settings (saved locally using your browser LocalStorage)Ctrl+K
Server settingsOpen the Server settings popup (see below)Ctrl+H

Open the KevScript popup (see below)

Open the Help popup (see below)

Because KWE is a standalone Web application, it gives you the possibility to specify the server you want to connect to.
To specify your own KWE-server, use this popup.
By default, editor.kevoree.org uses an Express web server hosted on the same machine.

You can clone the sources of kevoree/kevoree-web-editor-server and deploy it on your own servers

This popup allows you to merge Kevoree's official TypeDefinitions to your current model.
Kevoree Standard Libraries are available (currently, June 2014) for 3 platforms:

  • Java
  • Javascript
  • Cloud

Once the list loaded, you can select wanted libraries and hit the Merge libraries button and wait for the server you are connected to (specified in the popup title after @), to answer your request with the according Kevoree model.

If you want to merge your own Kevoree libraries from a custom Maven repository you can by using this popup.
This will trigger the resolving server-side, then it will retrieve the model of your library (still server-side) and send it back to KWE, resulting in a merge of your current KWE model and the one you have specified in this popup.

Sometimes you have to edit your model network attributes resulting in the impossibility for you to push your model to your platforms (your group WebSocket server won't be able to receive the model according to the new network attributes, because it is still launched on the old model network attributes)
Using this popup, you can specify a group WebSocket server directly and ask for a push of your current model by pressing Push model

A Kevoree Script (aka KevScript) editor providing syntax highlighting and auto-completion.
By default, this KevScript editor content is dinamically created according to the current model (model2kevs processing), but you can also change the content by using the provided examples (dropdown selector in the top-right corner).
Once you are done editing, you have two choices:

  • Download: saves the current KevScript to a .kevs file client-side
  • Run: process your script and updates the current Kevoree model in KWE

The KevScript Editor also provides some shortcuts to improve user experience:

ActionShortcut
SearchCtrl+F
Find nextCtrl+G
Find previousCtrl+Shift+G
ReplaceCtrl+Shift+F
Replace allCtrl+Shift+R

This popup contains the whole list of shortcuts available in KWE, plus some useful information concerning the editor.

To add TypeDefinition to your model you have multiple choices:

  • Load/Merge a model from a JSON file or a remote platform
  • Merge some Kevoree Std Libraries
  • Merge libraries from your own repositories
  • Add include statements to the KevScript editor and run it

Upon TypeDefinition addition, you will see the left panel being populated with items:

This list has been created using the KevScript method with the following script:

include npm:kevoree-node-javascript:latest
include npm:kevoree-group-websocket:latest
include mvn:org.kevoree.library.java:org.kevoree.library.java.javaNode:latest
include mvn:org.kevoree.library.java:org.kevoree.library.java.ws:latest

To add instances to your model, you have multiple choices:

  • drag'n'drop an item from the TypeDefinition list (left panel) to the model editor canvas (center)
  • add add statements to the KevScript editor and run it

By doing so, KWE will create an instance of the selected TypeDefinition (graphical method: using its latest available version, kevscript method: using the version you have specified).

Using the previous KevScript example (for TypeDefinition), we could do:

include npm:kevoree-node-javascript:latest
include npm:kevoree-group-websocket:latest
include mvn:org.kevoree.library.java:org.kevoree.library.java.javaNode:latest
include mvn:org.kevoree.library.java:org.kevoree.library.java.ws:latest
 
add node0 : JavascriptNode
add node1 : JavaNode

We have added two add statements, one for node0 : Javascript and one for node1 : JavaNode. This will result in the addition of two nodes in the model editor canvas:

Kevoree uses Groups to share models between Node platforms. Each group has there own implementation and therefore uses its own protocol. In order to communicate with the groups, KWE uses the built-in Javascript WebSocket implementation available in modern Web browsers. Thus, your running Kevoree platform must have a compatible WebSocket group in order to communicate with KWE.

TODO