How to style badges in RAP/RWT

I ran into many problems attempting to get multiple badges in my RAP application. Badges are applied like such in RAP:

someButton.setData(RWT.BADGE, "badge colored red");

I would like to set the location of the badge too but note below that there is no badge CSS support for position.

Limitations of RAP state:

To adjust the look of badges (see above), the "Widget-Badge" element can be used. It currently supports the properties font, color, background-color, border and border-radius.

I have gone into the packaged default.css and customized the Widget-Badge with:

Widget-Badge {
  background-color: #dd0000;
  border: none;
  border-radius: 10px;
  font: 10px Verdana, "Lucida Sans", Arial, Helvetica, sans-serif;
  color: #ffffff;
  border-top: 12px solid blue; 
  border-left: 12px solid transparent;
}

Another attempt with tooltips set to always show and offset, but can not seem to get the tooltip background to be transparent (I would have to create a custom variant):

Button.setToolTipText("<span style='background-color: #dd0000;border: none;border-radius: 10px;font: 10px Verdana, Arial, Helvetica, sans-serif;border-top: 0px solid transparent;border-left: 12px solid blue;'>"+00+"</span>");

I have considered paint events with clipping regions to draw a badge with a different style but would require a lot of code change.

----EDIT 1---- Not exactly getting desired output.

I'm investigating:

static void setTestId( Widget widget, String value ) {
  if( uiTestsEnabled && !widget.isDisposed() ) {
    String $el = widget instanceof Text ? "$input" : "$el";
    String id = WidgetUtil.getId( widget );
    exec( "rap.getObject( '", id, "' ).", $el, ".attr( 'test-id', '", value + "' );" );
  }
}

private static void exec( String... strings ) {
  StringBuilder builder = new StringBuilder();
  builder.append( "try{" );
  for( String str : strings ) {
    builder.append( str );
  }
  builder.append( "}catch(e){}" );
  JavaScriptExecutor executor = RWT.getClient().getService( JavaScriptExecutor.class );
  executor.execute( builder.toString() );
}

to see if I can get the elusive RAP "generated id's which aren't visible on the DOM level" to show so I can do post-render CSS manipulation.

I also looked into:

button.setData(SWT.SKIN_ID, "customID");

but couldn't seem to get it to work.

Solution

Controlling the position of a badge seems like a useful feature and you may want to file an enhancement request to see what the RAP maintainer think.

Another possible workaround for the missing badge positioning may be the ControlDecoration.

You can assign an arbitrary image that should be placed next to a control. A combination of SWT.TOP, SWT.BOTTOM, SWT.LEFT, SWT.RIGHT, SWT.CENTER can be used to specify the placement. You would probably need to create suitable images on the fly to 'render' the numbers.

Another difference of the ControlDecoration is that it is placed next to the control and not partially on top of it.