Compensator – A code editor and a code dev environment written in JavaFX

If you’ve followed the release of e(fx)clipse 1.2.0 and my latest blogs on this, you might have noticed that we have spent quite some time on components like a styled text editor, a filesystem viewer and other basic stuff one needs to build a code editor application.

e(fx)clipse Compensator – a simple code editor

The reason for that was, that we have simultaneously been working on a project named Compensator.

Compensator is a code editor/framework which supports syntax highlighting and outline views for (programming) languages like Java, JavaScript, Groovy, XML, … while not providing high-level features like auto-completion, error-reporting and such fancy things. Stripping of those features allows Compensator to work directly with the filesystem, not requiring the core.resources-plugin from the Eclipse IDE.

The following video should provide you first glance at it

Let’s summarize the basic features introduced in the video above:

  • Compensator is a lightweight editor application which does not require the creation
    of a workspace, project, etc. … which the Eclipse IDE does
  • Compensator comes (as of now) with syntax highlighting support for
    Java, JavaScript, Groovy, XML
  • Compensator supports (as of now) basic outline view for Java and
  • Compensator is themeable and includes (as of now) a bright and dark

e(fx)clipse Compensator – an extensible code editor

While syntax highlighting for the above listed languages is supported in Compensator by default (more to come hopefully in future), you might want to enable this support also for other languages. As this should be as trivial as possible – and at least not require a PhD from the MIT – we designed Compensator to allow contributing highlighting definitions in the following ways:

  • (for specific cases) Java code & CSS: we kept the code as close as the one you write for the Eclipse IDE
  • (the preferred way) through a DSL named hsl & CSS: The DSL makes is easy to define highlightings and even allows you to install them on the fly e.g. for python it looks like this python

The 2nd area the basic code editor application is extensible at is the outline view for JavaScript. JavaScript itself has no specified way of defining what you call a class-definition in the Java world so many frameworks came up with their own idea how to define a “class”, import other class/components, … . To make sense of an outline view an editor has to understand these different concepts. As a proof-of-concept we implemented a custom outline for Qooxdoo.

The following video demonstrates both of those features

It is important to note that Compensator is NOT designed to be indefinitely extensible like the Eclipse IDE! If you want something different then take the building blocks and assemble your own editor/development environment!

e(fx)clipse compensator – a code development environment

As Compensator was introduced above as a light weight code editor, which comes with basic syntax highlighting and outline support, I can say this was only half of the truth. Compensator also has support you expect from an advanced code development environment with the following featureset:

  • autocompletion and error reporting (as of today for Java and soon JavaScript)
  • VCS integration (as of today git)
  • Bugtracker integration (as of today github)
  • CI-System integration (as of today travis)

The following video demonstrates the basic interactions and features you’ll get:

Before I describe some of the ideas we had in mind when creating the UI I’d like to define what the term “Project” means to Compensator:

A project is a business process unit which is made up of a set of source-modules, vcs-repositories, bugtrackers and common integration jobs doing the build and tests on your behalf.

I guess the UI without a main toolbar is fairly controversial, but we
are certain in development processes this toolbar (like e.g. in the
Eclipse IDE) is not too much used as keyboard shortcuts or the usage of
Quick Access are the more effective options here.

The project explorer (on the left side) is the center of user interaction, holding all relevant information on the project:

  • the (nested) module structure of your project including the sources
  • bugtrackers configured for the project
  • CI-systems configured to build the project (when sources are
  • VCS-repositories configured for the project and allowing you to commit the sources

In Compensator we payed a lot of attention on tightly integrating these four outlined development services/components with each other (somehow similar to what mylyn & egit add to the Eclipse IDE). The video above highlights this integration only between the editor, the bugtracker and the version control system but we plan to extend this tight integration to other project type needs as well e.g. to control your Heroku or OpenShift application when developing for a SaaS platform.

The technologies at play

As many of you are developers we thought you might be interested in the technology mix we used to implement Compensator.

  • Equinox as the OSGi-Container
  • e4 as the application framework
  • e(fx)clipse e4 runtime layer providing support for JavaFX
  • e(fx)clipse runtime components and controls
  • Eclipse Text Framework for text partitioning and tokenizing
  • e(fx)clipse port of JFace-Text components to present the tokenized stuff as editors
  • Oracle Nashorn JavaScript parser to get an AST for JavaScript files
  • Eclipse JDT to get an AST for Java files, background compilation, error reporting and auto-completion
  • Eclipse JGit for git integration
  • Eclipse EGit Github REST API

EclipseCon NA 2015

Interested in developing applications like this? Just drop us a note and/or maybe we can have a brief meeting/talk at EclipseCon NA 2015 in the second week of March. Or just come to my talk on Thursday March 12th 12:00 … you can be sure, I will have cool stuff with me, like RCP applications with animated 3d models, Compensator – the “Back-to-the-roots-code-development-environment” and other cool things.

This entry was posted in e(fx)clipse. Bookmark the permalink.

12 Responses to Compensator – A code editor and a code dev environment written in JavaFX

  1. andy says:

    can i haz code – plx?

    …no, seriously: Your work is very impressing and I’d love to utilize your developments – but where can I find documentation, a demo application and the needed libraries (is there a maven group-/artifact ID/repo)?

    Keep up the good work!

    Best regards,

    • Tom Schindl says:

      All code is opensource and part of the e(fx)clipse repo. Many of the components are marked as experimental. You need to understand that the code is fairly young (~2 months) and we are still experimenting what the best strategy is to implement our vision but we decided implement our interaction visions and features in the first iteration and rework the code in the next iteration

  2. Cole says:

    How hard would it be to make an Eclipse editor using these tools? I have to work with a few obscure languages, and it would be great to have at least syntax highlighting in Eclipse.

  3. reportmill says:

    What are your hopes and plans for Compensator?

    • Tom Schindl says:

      As of today we are working on getting the initial set of features implemented once and then in the next iteration we’ll rework the internals and stream line things. Compensator is not planned to be an IDE for all and everything.

      We’ll focus ourselves on language tooling for Java/JavaScript/HTML, git for version control. On the CI and Bugtracker side we are more open to integrated stuff like JIRA, Hudson, Jenkins, … . The other big topic is that we want to connect ourselves to cloud tools like Eclipse Flux and integrate OpenShift and other Cloud platforms

  4. Marco says:

    where can I get Compensator? Sounds like a nice tool.

  5. Pingback: JavaFX links of the week, February 23 // JavaFX News, Demos and Insight // FX Experience

  6. Pingback: Democamp Double Feature: Munich and Zurich « Eclipse Scout Blog

  7. Pingback: Eclipse Democamp Season – JavaFX smart code editors (eg for Google Dart) | Tomsondev Blog

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.