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
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.
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
attribute and specify which webpage to open:
The behavior of the editor is slightly different however: the link is opened on
Cmd-click rather than simple click.
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
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,
two possible values:
HyperlinkStyle.URL for simple 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
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.
|Simple to use||✅||❌||❌|
|Works without dependencies||✅||✅||❌|
|Activated by simple click||❌||✅||✅|
|Reacts to mouse hover||❌||❌||✅|