包含图像和 MultiSpanButton 的列表

Question

我想用图像显示数据列表。

我可以将图像加载到 CSS 中，但我几乎无法控制图像的大小和位置。

我可以使用 CSS 在标签上设置图像，但无法设置标签大小，因此它会将自身设置为宽度 0 和高度 0（使其不可见）。如果我在将标签添加到表单之前在 CSS 或 Java 代码中设置宽度和高度，则该设置将被忽略。

Container list = new Container(BoxLayout.y());
list.setScrollableY(true);

// resultset is a List<Map<String, Object>> returned by an API
for (Map<String, Object> obj : resultset) {
    String id = obj.containsKey("id") ? (String) obj.get("id") : "";

    String startDate = "";
    String s = (String) obj.get("start_date");
    if ((s != null) && (!s.isEmpty())) {
       try {
          long l = Long.parseLong(s);

          SimpleDateFormat sdf = new SimpleDateFormat(Constants.DATE_FORMAT);
          startDate = sdf.format(new Date(l));
       } catch (Exception e) {
          e.printStackTrace();
       }
    }

    String name = obj.containsKey("name") ? (String) obj.get("name") : "";
    String description = obj.containsKey("description") ? (String) obj.get("description") : "";
    String eventType = obj.containsKey("event_type") ? (String) obj.get("event_type") : "";

    Container c = new Container(BoxLayout.x());
    Label img = new Label();
    // img.setWidth() img.setHeight() has no effect here
    img.setIconUIID("meeting"); // I will change this dynamically depending on the eventType later
    c.add(img);

    SpanMultiButton mb = new SpanMultiButton();
    mb.setTextLine1(startDate + ": " + name);
    mb.setTextLine2(description);
    mb.setTextLine3(eventType);

    mb.addActionListener(ee -> {
       // TODO: Handle the click on the item
    });

    c.add(mb);
    list.add(c);
}

form.add(CN.CENTER, list);

“会议”的 CSS

meeting {
    background-image: url("img/meeting.png");
    background-repeat: no-repeat;
}

meeting.png 文件位于 src/main/css/img 中。如果我将其设置为 MultiSpanButton 上的 UIID，我可以在背景中看到图像，所以我知道这不是文件或文件位置的问题。

我基本上想让列表显示如下：

+------------------------+
| IMG  | SpanMultiButton |
+------------------------+
| IMG  | SpanMultiButton |
+------------------------+
| IMG  | SpanMultiButton |
+------------------------+
| IMG  | SpanMultiButton |
+------------------------+

但是，IMG 不显示，SpanMultiButton 出现在最左侧。如果我在模拟器中检查它，我可以看到 IMG 在那里。

我无法打开 GuiBuilder，因此无法将图像放入资源文件中以尝试打开并将其添加为图像。

上面的代码是有效的，除了图像（标签的背景）没有显示，因为标签大小是 0 x 0。

Answer 1

Codename One 不支持 CSS 布局，因为它与高级布局管理器逻辑冲突，因此宽度和高度等元素总是被忽略。此外，宽度/高度属性仅在执行布局后才包含有效值。

您不应使用

setWidth

和类似的 API，因为它们是为

LayoutManager

使用而设计的，这将覆盖您的设置。即使它确实有效，旋转手机时也会损坏。

在 Codename One 中，非纯粹设计图像（背景等）的图像被视为代码的一部分，而不是 CSS 的一部分，因为它们适用于所有元素。由于您的图像出现在元素列表中，因此它是内容，而不是设计，并且是 Java 代码的一部分。

在这种情况下，如果您只想要一个图标，请使用

setIcon

并提供图像。如果图像在 CSS 中硬编码，您仍然可以将其包含在那里，然后从

Resources

类获取它，因为它将成为默认主题的一部分。

如果图像是内容，您可以使用

URLImage

等类来动态获取它。两者都会根据图像正确调整标签尺寸。