Even fancier RAP Tables with Templates & native CSS

Even fancier RAP Tables with Templates & native CSS

In RAP 2.2 we introduced the Row Templates feature, which allows you to layout the cells of table rows in different ways than just in columns. In RAP 2.3 we improve on this a bit by allowing not just absolute (pixel) but also percentage values for positioning. However, another cool feature that isn’t documented (because it’s considered experimental) is that you can now style your cells with native CSS.

Let me explain: Each cell in a template can be given a name. This string is meant to identify which cell was clicked in an selection event, but as of RAP 2.3 it is also used as an HTML „class“ attribute. This means that you can address the cell element using a central CSS rule.

A pretty neat and simple way to use this feature is to display some cells only when the row is hovered. If, for example, you have a clickable icon on the right side of each row, it would normally look like this:

ImageCell arrow = new ImageCell( this );
// [...layout, image, etc...]
arrow.setName( "arrow" );
arrow.setSelectable( true );

template-no-css

Now we add a little bit of CSS:

.arrow {
  visibility: hidden;
}
div:hover > .arrow {
  visibility: visible;
}

And the result is this:

template-with-css

This feature is considered experimental because getting the CSS into the browser isn’t entirely straight-forward. As you may know, RAP has a theming system based on CSS, but this isn’t „real“ native browser CSS. The files are parsed and applied partly on the server and partly on the client using JavaScript. While this ensures that your CSS will look the same on all browsers, it also limits you to a few properties per widget and cannot be used to style HTML elements based on their id or class attributes. (However, we hope to eventually change this so that the theming CSS is actually applied using HTML classes.)

So to get the above CSS rules into the browser you need a little workaround: RAP lets you add some HTML to the application’s document head and/or body. (Use either the ApplicationConfiguration or Branding API for this.) This also lets you add <style> tags to either load your CSS from an external file or inline it like this:

<style type="text/css">
  .arrow {
    visibility: hidden;
  }
  div:hover > .arrow {
    visibility: visible;
  }
</style>
Please remember that unlike the RAP theming CSS, there is no cross-browser handling at all, so while you can use awesome CSS3 features like transformations and transitions, you have to ensure yourself that they work on all targeted browsers.