CN1：更改选项卡中内容的背景颜色

Question

所以我有这段代码：

//Tabs for filter
    Tabs t = new Tabs();
    Style s = UIManager.getInstance().getComponentStyle("Tab");
    FontImage icon1 = FontImage.createMaterial(FontImage.MATERIAL_QUESTION_ANSWER, s);
    t.addTab("All", icon1, conOrders);
    //t.addTab("Done", icon1, conOrdersCompleted);
    t.addTab("Processing", icon1, conOrdersProcessing);
    this.add(t);
    initGuiBuilderComponents(resourceObjectInstance);

现在，我想更改内容选项卡的背景颜色。现在看起来像这样：

我希望红色区域的背景是白色。我正在使用新的GUI构建器。

Answer 1

如果您希望每个标签使用不同的颜色，则可以执行以下操作：

conOrdersProcessing.setUIID("Tab1Background");

并相应地设置样式。这可能是最好的方法。

您还可以使用UIID为Tabs容器的各个部分设置样式：

TabbedPane，TabsContainer和Tabs。注意，您可以使用模拟器中的Component Inspector工具来发现组件的UIID。

Answer 2

我目前正在处理CN1中的标签，其想法是分别设置标签的样式。下面的代码是对示例here的改编。

要使其正常工作，您需要激活内部css支持，或在主题编辑器中添加UIID。

    Tabs tb = new Tabs() {
        @Override
        protected Component createTab(String title, Image icon) {
            SpanButton custom = new SpanButton(title);
            custom.setIcon(icon);
            custom.setUIID(title); // title of the tabs, stylable background 
            custom.setTextUIID("Tab");
            custom.setIconPosition(BorderLayout.NORTH);
            custom.setIconUIID(title);
            return custom;
        }

        @Override
        protected void setTabSelectedIcon(Component tab, Image icon) {
            ((SpanButton) tab).setPressedIcon(icon);
        }

        protected void selectTab(Component tab) {
        }

        @Override
        protected void bindTabActionListener(Component tab, ActionListener l) {
            ((SpanButton) tab).addActionListener(l);
        }
    };

    Container container1 = BoxLayout.encloseY(labelOne, labelTwo);
    Container container2 = BoxLayout.encloseY(labelThree, labelFour);

    // style the containers inside the tabs
    container1.setUIID("Tab1Background");
    container2.setUIID("Tab2Background");

    // when adding the tabs, the title matches the UIID in css style-sheet
    tb.addTab("Tab1Background", FontImage.MATERIAL_3D_ROTATION, 4, container1);
    tb.addTab("Tab2Background", FontImage.MATERIAL_ACCESSIBILITY, 4, container2);

    // css

    Tab1Background {

        background-color: red;
        text-align: center;
    }

    Tab2Background {

        background-color: yellow;
        text-align: center;
     }