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 Builder.

Answer 1

В настоящее время я работаю над вкладками из CN1 с той же идеей стилизовать вкладки по отдельности. Код ниже является адаптацией из примера здесь .

Чтобы это работало, вам нужно активировать внутреннюю поддержку 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;
     }

Answer 2

Если вы хотите разные цвета для каждой вкладки, просто сделайте что-то вроде:

conOrdersProcessing.setUIID("Tab1Background");

И стиль, который соответственно. Это, вероятно, лучший подход.

Вы также можете стилизовать различные части контейнера Tabs с помощью UIID:

TabbedPane, TabsContainer и Tabs. Обратите внимание, что вы можете использовать инструмент Component Inspector в симуляторе для обнаружения UIID компонентов.