当组件没有htmlEnabled属性,如何显示空格字符

当caption中前后有空格时会被过滤掉,但是实际业务需求需要前后的空格显示,没有htmlEnabled属性,没法用 ,请问有什么方法可以使空格字符显示

这个是 html 对 space 的压缩,不是我们框架处理的。
你可以给需要显示空格的组件添加一个 styleName,然后通过下面的css 展示空格:

white-space: pre;

请问这种css代码只能扩展主题,写在SCSS文件中吗,因为我们当前项目我们只负责其中一个模块,尽量不要对整体的配置造成影响,所以想问有没有局部实现css代码的途径

这个 stylename,你可以用局部的 styleName,比如 “only-module-a-whitespace” 这种。然后就不会影响全局了。

又或者可以通过 Java 代码对单独的组件设置:

@Inject
private Button createBtn;
@Inject
protected HtmlAttributes html;

@Subscribe
public void onAfterShow(AfterShowEvent event) {

    createBtn.setCaption("         test");
    html.setCssProperty(createBtn,"white-space","pre");
}
1 个赞

第一种方案:不管是全局还是局部的styleName,要实现其css效果,应该都需要扩展主题是吧,创建主题的时候对全局的配置文件就会造成一定的改动,不知道有没有其他地方可以写css代码,实现相应效果

第二种方案:现在主要问题是页面使用的可视化组件是单选按钮组,但是需要设置css的是radioButtonGroup里的单选钮,因此做过如下尝试:

使用HtmlAttributes改变内部单选钮css属性,但是不生效,代码如下:
@Inject
protected HtmlAttributes html;
@Inject
private RadioButtonGroup questionCardField;
@Subscribe
public void onBeforeShow(BeforeShowEvent event) {
List list = new ArrayList<>(100);
for (int i = 0; i < 100; i++) {
list.add(i+1);
}
questionCardField.setOptionsList(list);
html.setCssProperty(questionCardField, “span”, HtmlAttributes.CSS.WIDTH, “20px”);
html.setCssProperty(questionCardField, “.v-radiobutton”, HtmlAttributes.CSS.WIDTH, “20px”);
}

两行代码均不生效,换成getCssProperty方法,result是null
后来将两行代码放在afterShow中依然不生效,getCssProperty方法的result依然是null
image
不知道是什么原因造成的失效

感谢回复,其实主要需求就是想固定单选按钮组内的单选钮的宽度,以及设置margin等其他一些属性,想显示空格字符是希望通过空格控制宽度,现在能想到的方法都没有什么效果,麻烦给看一下不生效的原因在哪

这个问题的原因在于你用的 setOptionsList 方法为 RadioButtonGroup 设置选项,这样的话,在前端界面还没有渲染的时候,代码就已经走到 setCssProperty 了,而此时 HTML 内并没有 .v-radiobutton 的 dom 元素。所以不生效。

我刚才尝试了一些方法,确实无法得知 group 中的这些 radio button 究竟何时能渲染完成。因此,只能用轮询的办法完成,而且得新开线程,不然会阻塞前端界面渲染,这个方法可以在界面生命周期内调用,比如 onInit():

public void setRatioBtnGrpStyle() {
    AppUI current = AppUI.getCurrent();
    Thread thread = new Thread() {
        @Override
        public void run() {
            while (html.getCssProperty(radioBtnGrp, ".v-radiobutton", "background-color") == null) {
                try {
                    Thread.sleep(500);
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
                // 后台线程访问 UI 元素要用这种方法
                current.access(() -> {
                    // 用 applyCss 可以同时设置多个样式
                    html.applyCss(radioBtnGrp, ".v-radiobutton", "background-color:green;width:30px");
                });
            }
        }
    };
    thread.start();
}

你好,感谢回复,后来将两行代码放在aftershow中依然不生效,而且传参时,不传选择器html.getCssProperty(questionCardField, HtmlAttributes.CSS.WIDTH);只获取单选组这个组件的宽度,结果也是null,而且使用了您说的轮询的办法,也没有生效

放在 aftershow 我也试过,不行的,aftershow 还是会在界面渲染之前调用。可以打开我的这个示例项目试试,代码在 BookBrowse 里面,程序运行起来之后打开 Application->Books 菜单就能看到效果:

forum.zip (121.3 KB)

你好,程序跑起来之后看到css并未生效
1637559755(1)
代码中将背景改成绿色了,页面上还是没有变化,f12查看控制台
1637559911
也并没有background-color属性

发现是首次启动不生效,关闭标签页再打开,就生效了

你好,之前setOptionsList的代码,我是放在了beforeshow方法里,将调用轮询的方法同样放在beforeshow里的话,报错UI Shared state was accessed from a background thread,但是您给的demo没有这个问题,不会报错,虽然初次启动不生效,但是之后正常生效,按道理说都是要从非 UI 线程更新 UI 状态,不理解为什么会有差别