Component badge

picture_as_pdf

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.: