Sunday, June 21, 2009

Synchronized editors with TMF/Xtext and GMF

Well, here it is, the screencast showing a textual TMF/Xtext and a graphical GMF editor synchronized on the same model.


The example has been implemented with only a few changes to generated code: In Xtext, the following modifications were applied:


  • A Formatter to define where to use what kind of whitespace, when the textual representation is derived from the semantic model.
  • An IFragmentProvider that generates name-based fragments (IDs) for elements in an Xtext resource. That way, the correspondence of graphical nodes to semantic elements is preserved even if you delete a preceeding entity.
  • An AbstractEntitiesJavaValidator has been implemented for Java based validation

On the GMF side:

  • In the mapping model, I had to use feature initializers to make sure names are initialized properly on creation, to always have serializable models.
  • In the generator model, I had to manually set the domain genmodel and the file extension.
  • In the generator model, I enabled validation decorators and printing, and added the plug-in de.itemis.gmf.runtime.extensions from the GMFTools project containing a more sophisticated layout.


Additionally, I added a bit of glue code:

  • An action to navigate from an EditPart to the textual representation, using Xtext's NodeAdapter.
  • A listener that warns the user if (s)he's about to change a file that has already been changed in another dirty editor, and allows to abandon the changes.


The editor are synchronizing on save, to avoid GMF's canonical edit policies pruning nodes/edges belonging to temporarily lost elements.

Xtext plays well with EMF. It registers

  • A resource factory for a specific XtextResource implementation that encapsulates the parser (text->model) as well as the serializer (model->text).
  • An EValidator with a declarative Java implementation

19 comments:

Uli said...
This comment has been removed by the author.
Uli said...

Hi Jan,

great demo what is possible in the mix between text and graph.

Is there a place to get more info (perhaps download) of this demonstration?

Thanks, Uli

SeuAndré said...

Nice! :)

rod said...

Very impressive, this will make for some awesome use cases for combined editors.

Looks better than I had hoped given how the Xtext AST branches get contunually rebuilt.

Would love to see the demo code, something like this would be great as an Xtext example project with the plugins.

Martin Kuhn said...

really nice demo.

it would beneficial to have a simple tutorial (with source) how it is possible to get the GMF stuff from an xtext project.

HeikoB said...

This is a great achievement, Jan. I have recommended your screencast to many people already and won't stop that soon...

Andreas said...

Hi Jan, this is really cool.
It would help if you could provide the sample source code of the project in the screen cast.
Cheers
Andreas

Maurice said...

Would love to get the source for this!

Jan Köhnlein said...

I've just published the source code. Please have a lok at http://koehnlein.blogspot.com/2009/07/source-code-for-screencast-of-xtext-and.html. Sorry for the long delay.

Thang said...

Hi Jan,

Is it possible to integrate Xtext and GMF? For example, when we double click on a GMF Node, Xtext editor will be open. Therefore we can add executable code.

Thanks, Thang.

Jan Köhnlein said...

Thang -

yes, have a look at the GMF example shipped with the HEAD version of Xtext. Please note it is not production ready code, but it shows how to do this in general.

Regards
Jan

Adrian said...

Hey, Jan

I've tried following the instructions and making your example to work, but I am not able to do so. The xtext model seems ok, but the gmf model has lots of errors. In the dependencies, the runtime.diagram jar's were versions 1.0, but I have higher versions and it gave errors on those dependencies. I've replaced them with the new versions and now no classes used in the gmf part are found. What do you reccomend? I must add that I am just a beginner and I don't know very much.

Thank you,
Adrian

Jan Köhnlein said...

As already stated, this code is now shipped with Xtext. Xtext and GMF have changed since the first version posted here, so don't expect that to work.

Instructions are
1) Get Eclipse Helios with Xtext 1.0. There is no final release yet, but an RC2.
2) Of course you have to additionally install additional components, e.g. GMF and its dependencies. This is currently a bit difficult because of bug 314436.
3) In the running Eclipse, choose New->Example->Xtext->Xtext GMF Integration
4) If you are having compilation problems in the projects that this wizard creates, you're most likely lacking some required Eclipse features.

There is also rather extensive documentation in the Xtext help.

Note that this is kind of experimental stuff, dealing with lots of internals of the required frameworks. If you're completely new, consider learning more about Eclipse, GMF and Xtext first.

Adrian said...

Hello, Jan

I've managed to learn about both Xtext and GMF and tried to do a plugin following your example, with a bit different language and I can't "glue" the xtext and gmf parts together. They work fine separately. What do you propose I do (i.e. read something) to better understand the process I want to implement.
Thank you.

Adrian

Adrian said...

Hello again,

I am trying to do my own plugin following your example (the modified version shipped with xtext) and I have some problems. I don't get what to do in order to make the two files work together. Naturally, a diagram file has a domain model file attached to it, right? And I want to replace this file with an xtext file. Is it enough to change the file extension for the domain model in the gmfgen file? Because I tried that and now no new diagram file is created when I try to run the plugin. Thank you.

Adrian

Amine said...

Hi Jan,

I am trying to apply your method to integrate an Xtext editor in a GMF RCP application. I have designed my own dsl, generated the RCP using GMF plugin, and I succeeded to generate the Xtext grammar following the tutorials.

Now what I want to do, is to popup an Xtext editor and move to the textual representation when I right clic on some particular GMF shapes.

Unfortunately, I am facing troubles to get both editors working on the same instance. Moreover, I did not find any tutorial/topic showing how to combine GMF and Xtext within an RCP application.

Is this combination feasable ? If yes, what should I do to achieve the integration ? Any suggestion is welcome.

Thank you.

darie17 said...

Hi Jan,

great tutorial + thanks for the source code.

I managed to synchronize my Xtext and GMF editors and they work properly so far (there are some little errors, but I'll fix them). There is only one thing which I don't like - maybe you can help: every time I make a change in the GMF Editor to an element, say renaming an element, I get this annoying message from Eclipse about concurrent modification (which is true), but I it always appears two times (sometimes even 3 times), although I agree with the modifications. So I have to click two or three times on Yes, before my change is applied to the element. The same thing in the other editor, when I edit the text. How would you explain that behaviour? It's sometimes annoying, I must say... :)

Thanks in advance.

Jan Köhnlein said...

Sorry for answering so late.

There is an example shipped with Xtext showing this kind of integration. You can instantiate it in your workspace using "New->Example->Xtext->Xtext GMF Integration". There is also an extensive section in the Xtext docs. Feel free to post any further questions in the TMF newsgroup.

Junior said...

Hi, its a very interesting example. Could it be possible to synchronize the the GMF editor to simultaneously write 2 different textual files? And preserving the two files generated by default by the GMF editor?

And do you know if xtext has an automatic way to generate the code to process an xmi model generated by the gmf editor? Like an alternative for not sincrozing both editors.

Thanks!!