Its super simple to show component badges like:
Just use styles:
Show 9 as label
Style.addStyleNames(comp, "f_badge_text_9");
Set border size and color:
Style.addStyleNames(comp, "f_badge_border_2_#aa0000");
Set alignment:
Style.addStyleNames(comp, "f_badge_align_bottomRight");
Possible values are: topLeft, topRight, bottomLeft, bottomRight, center
Set an offset for x and y position:
Style.addStyleNames(comp, "f_badge_offset_10_5");
or just x:
Style.addStyleNames(comp, "f_badge_offset_20");
Set color:
Style.addStyleNames(comp, "f_badge_color_#888888");
Set text color:
Style.addStyleNames(comp, "f_badge_textcolor_#0000aa");
But it's much easier to use the API:
BadgeUtil.setOption(comp, BadgeUtil.OPTION_TEXT, "9");
which is the same as:
BadgeUtil.setBadge(this, comp, "9");
The last method supports multiple options like:
BadgeUtil.setBadge(this, comp, "9", BadgeUtil.OPTION_COLOR + "#205090", BadgeUtil.OPTION_ALIGN + BadgeUtil.Alignment.bottomLeft, BadgeUtil.OPTION_OFFSET + "20", BadgeUtil.OPTION_BORDER + "2_" + UIColor.white.toHex());
The API calls will replace available styles! If you set the style on your own, you should replace style names correctly, e.g.
Style.addStyleNames(comp, "f_badge_text_9"); Style.removeStyleNames(comp, "f_badge_text_9"); Style.addStyleNames(comp, "f_badge_text_10");
It's also possible to set screen badges (for the menu):
BadgeUtil.setBadge(this, UsersWorkScreen.class, Integer.valueOf(1));
This will show a badge in the menu, e.g.: