如何在 NatTable 单元格中插入两个文本（每个文本具有不同的字体）和一张图像？并设置边距？

Question

两个问题：

1) 如何在 NatTable 单元格中插入两个文本（每个文本具有不同的字体）和一个图像？

2) 如何设置如下图的边距？

在以下情况下：

a) 使用 java 1.6（没有 RichTexCellEditor，没有 css）。
b) 使用 java 1.7（使用 RichTexCellEditor，没有 css）。
c) 使用 java 1.8（使用 RichTexCellEditor，使用 css）。

非常感谢您。

Answer 1

NatTable 样式基于 [1] 中所述的样式和画家。有关 NatTable 配置和 NatTable 入门的更多信息，请查看我们的入门教程 [2]
要创建所问的组合，需要注册 ICellPainter 的组合。
要在单元格边框和内容之间添加填充（不是边距），请使用 PaddingDecorator
要在文本中添加图像，请使用 CellPainterDecorator 以文本画家为基础，并使用 ImagePainter 作为装饰器。
只有 NatTable Nebula Extension 的 RichTextCellPainter 支持使用不同字体渲染文本。那个需要 Java 1.7.
CSS NatTable 中的样式用于通过 CSS 创建样式配置。尽管如此，没有额外的支持。 CSS 支持包含在需要 Java 1.8 的 NatTable E4 扩展中。解释可在 1.4 新增和值得注意的页面 [3]

所以 a) 的答案是：NatTable Core 不支持使用两种不同字体呈现文本，因此您需要实现支持该功能的自定义 ICellPainter。

b）的答案是创建一个复杂的画家并像这样注册它：

configRegistry.registerConfigAttribute(
    CellConfigAttributes.CELL_PAINTER,
    new BackgroundPainter(
            new PaddingDecorator(
                    new CellPainterDecorator(
                            new PaddingDecorator(new RichTextCellPainter(), 10, 0, 0, 0), 
                            CellEdgeEnum.LEFT, 
                            new ImagePainter()),
                    2, 5, 2, 5)),
    DisplayMode.NORMAL,
    ColumnLabelAccumulator.COLUMN_LABEL_PREFIX + 0);

上面的示例暗示 ColumnLabelAccumulator 应用了列标签，画家应该只为第一列配置。另请注意，该具体单元格的样式需要属性 CellStyleAttributes.IMAGE 集，然后由 ImagePainter 呈现。如果要固定图片，需要将其设置为构造函数参数。

当然，内容需要包含必要的 HTML 标记以呈现不同的字体。类似于：

<p><strong><span style="font-size:14px">This is a test</span></strong></p>
<p><span style="color:rgb(128, 128, 128)"><span style="font-size:12px">This is a test</span></span></p>

c) 的答案并不那么简单。首先，CSS 无法完成上面显示的复杂画家结构。原因是需要配置多个padding，NatTable不支持CSS。其次，E4 扩展不知道 RichTextPainter。因此需要手动注册到CellPainterFactory，例如

CellPainterFactory.getInstance().registerContentPainter(
    "richtext",
    (painterProperties, underlying) -> {
        return new RichTextCellPainter();
    });

需要以某种方式考虑额外属性的处理。

在 CSS 中它看起来像这样：

painter: background padding decorator richtext;
decoration: left url('./nebula_logo_16.png') 5 true;
padding: 2 5;

[1] https://www.eclipse.org/nattable/documentation.php?page=styling
[2] http://www.vogella.com/tutorials/NatTable/article.html
[3] https://www.eclipse.org/nattable/nandn/nandn_140.php

如何在 NatTable 单元格中插入两个文本（每个文本具有不同的字体）和一张图像？并设置边距？

How to insert into NatTable cell two texts (each with a different font) and one image? and set the margins?

java

html

css

nattable