Tabris 1.4 Preview: Markup to Style Text

April 30, 2014 | 2 min Read

As we are working towards our next Tabris release 1.4 in June, we decided to post regular feature previews. This one is about the upcoming feature we call “markup support”. Markup support is available in RAP since version 1.5 milestone 6. Now we will get it into Tabris, too.

Markup support is your tool of choice if you want to pimp the styling of any (non-editable) text widget. Using markup can significantly improve your UI by drawing attention to the important bits of information.

The following widgets support markup in Tabris:

Tabris supports the following tags to style your text:

  • <b>, <strong> bold
  • <i>, <em> italic
  • <br/> linebreak

How to use markup?

After you have enabled it on a widget, it is possible to use HTML tags in the text you set on the widget.

label = new Label();
label.setData( RWT.MARKUP_ENABLED, Boolean.TRUE );
label.setText("regular bold italic");
Label with markup enabled Label with markup disabled

With widgets that are compounds of different parts like lists, tables, and trees it is important to remember that you enable markup on the main widget but you set the text on the single rows or cells. Here is an example of a virtual tree:

// where you create the TreeViewer
treeViewer.getTree().setData( RWT.MARKUP_ENABLED, Boolean.TRUE );

// where you implement your LabelProvider
@Override
public void update( final ViewerCell cell ) {
  Object element = cell.getElement();
  cell.setText( /* text containing markup goes here */ );
}
A VirtualTree with markup A Table with markup

You may have noticed that we don’t list HTML’s link tag: <a href="https://foo">link text</a>. The problem with links is that iOS and Android do not support them in the same way as part of text with markup. If you want to include some text with a link in it in your app, for example in your “about” page/dialog, you can use the browser widget or a custom styled Button with a dedicated event handler to open the link in whatever way you like.

Documentation

A short look into RAP’s Java doc of the constant RWT.MARKUP_ENABLED will always refresh your memory on how to use markup.

We are looking forward to a lot of pretty UIs ;-). Please feel free to send us your screenshots!

Please Note: The feature described above is a preview of the upcoming Tabris 1.4 features. Tabris 1.4 will be available on June 26th 2014. If you want to try it out before the release just send us a quick request.