如何在 RAP/RWT 中设置徽章样式

Question

我运行遇到很多问题，试图在我的 RAP 应用程序中获得多个徽章。徽章在 RAP 中的应用方式如下：

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

我也想设置徽章的位置，但请注意下面没有徽章 CSS 支持位置。

RAP 状态的限制：

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.

我已经进入打包 default.css 并使用以下内容自定义了 Widget-Badge：

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;
}

另一种将工具提示设置为始终显示和偏移的尝试，但似乎无法使工具提示背景变为 t运行sparent（我必须创建自定义变体）：

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>");

我考虑过使用剪裁区域绘制事件来绘制具有不同风格的徽章，但需要大量代码更改。

----编辑 1---- 未完全获得所需的输出。

我正在调查：

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() );
}

看看我能否让难以捉摸的 RAP "generated id's which aren't visible on the DOM level" 显示出来，这样我就可以进行 post-render CSS 操作。

我还调查了：

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

但似乎无法正常工作。

Answer 1

控制徽章的位置似乎是一个有用的功能，您可能想file an enhancement request看看 RAP 维护者的想法。

缺少徽章定位的另一种可能的解决方法可能是 ControlDecoration。

您可以指定应放置在控件旁边的任意图像。 SWT.TOP、SWT.BOTTOM、SWT.LEFT、SWT.RIGHT、SWT.CENTER 的组合可用于指定位置。您可能需要即时创建合适的图像以 'render' 数字。

ControlDecoration 的另一个区别是它放置在控件旁边，而不是部分位于控件之上。

如何在 RAP/RWT 中设置徽章样式

How to style badges in RAP/RWT

swt

eclipse-rap

badge