More clickable URL links

Last time we looked at a simple way to create hyperlinks in MPS. As a reminder, it involved using a constant cell, adding styles to decorate it like a link and creating an action map with a CLICK action.

In reaction to my post, Bernd Kolb has tweeted a much simpler way of creating hyperlinks: using the url style attribute. And Niko Stotz reminded me of the existence of the hyperlink language, com.mbeddr.mpsutil.hyperlink, in mbeddr platform.

Let’s review these two suggestions and compare them with the CLICK action map approach.

The url attribute

Bernd’s suggestion about the url attribute is the simplest one. We still need a constant cell and we need to decorate it using some styles to make the link obvious, but instead of using a separate action map we can just use the url attribute and specify which webpage to open:

The behavior of the editor is slightly different however: the link is opened on Ctrl/Cmd-click rather than simple click.

The com.mbeddr.mpsutil.hyperlink language

This language is part of the mbeddr platform proper (it’s not included in MPS-extensions). It contributes the hyperlink-handler style attribute that lets the language developer specify what should happen when the link is activated:

Adding this attribute is a little involved: we do not return the URL itself but rather a handler that will get called when the link is clicked. In the handler’s body we can use the provided HyperlinkUtil parameter to open the link. The handler will be called outside of a read action/command so we read the URL from the node beforehand (since the style attribute query function is evaluated when the editor is being built, it is running in a read action). Alternatively, we could have started a read action inside the handler to read the URL.

So far we have only duplicated what we could already do with the simple url attribute. However, the hyperlink language is more advanced. When we try it out, we immediately notice a few things:

• The link reacts to mouse hover: it gets underlined if not underlined already, and the cursor changes to a “hand”.
• The link is activated on a simple click by default.

The click behavior can be customized: the hyperlink language provides another attribute, hyperlink-style, with two possible values: HyperlinkStyle.URL for simple clicks, HyperlinkStyle.REFERENCE for Ctrl/Cmd-clicks.

Using this language it is also possible to link to nodes or follow a reference with a single click. Unless you are already using the mbeddr platform in your project it might not be worth adding it just to show some hyperlinks but if you already depend on the platform you may want to look at this language.

Comparing the three approaches

Below is a “feature matrix” comparing all the approaches we discussed. My recommendation would be to use the url attribute as it is the simplest, and if your users ask you to improve the UX (adding mouse hovering or reacting on simple click), consider the other two approaches.