In this article we will look into creating a simple table editor for JetBrins MPS. For this we will use the "de.slisson.mps.tables" language that is part of the Mbeddr Platform.
To explore the basic concepts of the tables language we create a language that represents a simple social network. The social network has the root concept SocialNetwork and the concepts Person and Friendship.
To be able to use the tables language we need to install the "MPS Table Editor Component" plugin.
The tables language needs to be imported. The language import screen can be opened wit "Ctrl + L".
First we define a editor for the root concept called Social Network: The first item in the layout is just a list of persons and is not relevant for this tutorial.
The important part is the table section. What we do here, is create a table row for every friendship that exists in the social network. And since each friendship is a relationship between two persons, there are two columns: Friend1 and Friend2.
To accomplish this, we create a row for each friendship by using the vertical% keyword. This iterates over all friendships and refers to the editor of the Friendship concept. In addition we specify the column headers here. To be able to specify multiple columns, we use { }.
Next we define an editor for the friendship concept. We use the partial table to indicate that this is part of an already existing table. With the horizontal keyword, we can specify that the cells are aligned horizontally. Now we just have to create a cell for the individual persons. Since the persons are references, we can simply use %% to access them.
Here we can see the simple editor that we created:
If you want to see how this same language can be represented as a diagram have a look here: JetBrains MPS Diagram.