Revision as of 15:22, 22 May 2011

User Guide

This is the User Guide for Javascript for EMF. Here you'll find information about the "normal" use of how to enrich Ecore models with Javascript using the various views.

EMF Delegates view

The EMF Delegates View is used for enriching Ecore models with Javascript. The view lets the user attach Javascript to the currently selected EModelElement (EClass, EOperation, ...) to define invariants, constraints, derived features and operation bodies, and relieves the user from having to edit the corresponding EAnnotations. A figure of the view is shown below (here an EClass with one constraint has been selected).

An EClass with one constraint has been selected, and the user may edit the corresponding Javascript

Since the EMF delegates mechanism is independent of language, the toolbar contains a selector for the language. Currently Javascript and OCL is supported, with Javascript as the default. New languages may be added by using an extension point. Ideally, we should be automatically support any engine, but the annotation details is not standardized, hence each language must be configured in an extension.

The actual behaviour of the view depends on the type of the selected EModelElement, as follows:

EClass selection

The view wil show how many constraints there are, provide a selector for them and select the first one by default. The editor can be used for editing the Javascript (or script in other language) that implements the selected constraint. An example of this is shown above.

The buttons for adding a constraint or an invariant, will be enabled. If the Add constraint button is selected, you will be asked for the name and if the Add invariant is selected, you will be asked for the name of the implementing EOperation. In both cases, the appropriate EModelElements and annotations will be correctly configured.

EOperation selection

The view show the Javascript (or script in other language) that implements the method's body. For Javascript, you may refer to the object itself using this, its properties using this.propertyName and the arguments by their name.

Derived feature selection

The view shows the Javascript (or script in other language) that computes the feature's value. For Javascript, you may refer to the object itself using this and its properties using this.propertyName.

The EMF Invoke EOperation view

An EClass may contain zero or more EStructuralFeatures and zero or more EOperations. The standard EMF editors (reflective or generated) will allow you to edit the data, and now the EMF Invoke EOperation view allows you to invoke the EOperations on arguments from the model. Note that although this view is part of JS4EMF, it is completely generic and should support any modelled (and implemented) EOperation for any EClass. The figure below shows an example model with a selected EObject and an opened EMF Invoke EOperation view.

Example model and EMF Invoke EOperation view

The view populates a selector with the methods (EOperations) that the selected EObject supports and configures a property sheet so the user may enter arguments for the selected method (EOperation). In the figure, the user has selected the getLoansDueBefore(EDate) method and has entered a value for the EDate argument. The property sheet is based on the standard EMF property source providers and supports selecting EObjects from the model and entering EDataType values. The EOperation is invoked by selecting the Invoke! button, and the result will be shown in a separate EMF Result view (see below).

The EMF Javascript Scrapbook view

The EMF Javascript Scrapbook view is used for executing arbitrary Javascript in the context of the currently selected EObject (in the active editor). The code is effectively used as the body of a newly defined method, and this method is called. This means that this refers to the selected EObject. The figure above shows the execution of a call to the getLoansDueBefore method on a Library object with an EDate instance as the argument. The result is shown below the code and in the EMF Results view.

The EMG Javascript Scrapbook view has three main elements. The Javascript text field allows the user to enter Javascript code. The editor is currently primitive, with no support for syntax coloring, code completion, etc., but in the future we hope to integrate a real Javascript editor (e.g. from WTP or based on XText's XBase). Below the Javascript editor is the output field, where the result is printed. To execute the Javascript snippet you selected the Eval button in the view's toolbar. There's an important detail: If you select some text this selection is executed, rather than the whole editor content. E.g. if you're not sure about the date syntax in the example above, you can select the text corresponding to the argument and evaluate it first. Then, when you get it right, you unselect and evaluate the whole content.

The EMF Javascript Source view

The EMF Result view

The EMF Result view is used for showing the result of invoking EOperations or executing Javascript snippets. It supports showing any object (or value) that is supported by the EMF Edit framework, and will thus let you open and inspect EObject hierarchies. Editing is (deliberately) not supported.

The EMF Result view with the result of invoking an EOperation (see example above)