Как получить похожий внешний вид CSS как в MobileApplication, так и в приложении? - PullRequest
Новая
       12

Как получить похожий внешний вид CSS как в MobileApplication, так и в приложении?

0 голосов
/ 05 февраля 2019

Применение CSS при MobileApplication ведет себя иначе, чем при Application.

Вот пример файла CSS, с которым нужно работать (в следующих примерах он называется "/stylesheet/transparent.css"): 

.list-cell {
    -fx-background-color: red;
}

.tab-pane .tab {
    -fx-background-color: blue;
}

.tab-pane .tab:selected {
    -fx-background-color: blue;
}

.tab .tab-label { 
    -fx-text-fill: gold;
    -fx-alignment: CENTER;
    -fx-font-size: 12px;
    -fx-font-weight: bold;
}

.tab {
    -fx-background-insets: 0 1 0 1,0,0;
}

MCVE для Application: 

public class ControlCSS extends Application {

    static final String CSS = ControlCSS.class.getResource("/stylesheet/transparent.css").toExternalForm();

    @Override
    public void start(Stage stage) {
        ObservableList<String> list = FXCollections.observableArrayList("ASA", "GFDG", "FDGFSD");
        ListView<String> listView = new ListView<>(list);

        TabPane tabs = new TabPane();
        tabs.getTabs().add(new Tab("NEW", listView));

        tabs.getStylesheets().add(CSS);
        listView.getStylesheets().add(CSS);

        Scene scene = new Scene(tabs);
        stage.setScene(scene);
        stage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

Получается так:

enter image description here

AnMCVE для MobileApplication с тем же содержанием: 

public class ControlCSS extends MobileApplication {

    static final String CSS = ControlCSS.class.getResource("/stylesheet/transparent.css").toExternalForm();

    @Override
    public void init() {
        addViewFactory(HOME_VIEW, () -> new BasicView(HOME_VIEW));
    }

    public static void main(String[] args) {
        launch(args);
    }
}


public class BasicView extends View {

    BasicView(String name) {
        super(name);

        ObservableList<String> list = FXCollections.observableArrayList("ASA", "GFDG", "FDGFSD");
        ListView<String> listView = new ListView<>(list);

        TabPane tabs = new TabPane();
        tabs.getTabs().add(new Tab("NEW", listView));

        listView.getStylesheets().add(ControlCSS.CSS);
        tabs.getStylesheets().add(ControlCSS.CSS);
        setCenter(tabs);
    }
}

Получается так:

enter image description here

Я понимаю, что Glisten имеет свое собственное мнение в CSS, но результат для Application кажется правильным, а для MobileApplication нет.Как я могу получить те же результаты?

1 Ответ

0 голосов
/ 13 февраля 2019

Если вы хотите применить свою собственную таблицу стилей CSS к приложению Gluon Mobile, вы можете избавиться от CSS Glisten, поставляемого с библиотекой.

Это действительно экстремально, конечно, поскольку оно удалит стиль MaterialDesign, который он применяет по умолчанию ко всем встроенным элементам управления JavaFX и к пользовательским элементам управления в библиотеке.

Если вытем не менее, в вашем классе MobileApplication замените add на setAll: 

@Override
public void postInit(Scene scene) {
    Swatch.BLUE.assignTo(scene);

    scene.getStylesheets().setAll(
        getClass().getResource("style.css").toExternalForm()); 
}

После того, как вы поймете, что не хотите этого делать, следующий вариант - проверить CSSдля компонента, который вы хотите стилизовать.

Примечание: вместо этого: 

listView.getStylesheets().add(ControlCSS.CSS);
tabs.getStylesheets().add(ControlCSS.CSS);

вы можете просто применить один раз таблицы стилей ко всему узлу представления: 

getStylesheets().add(ControlCSS.CSS);

ListView

Вы хотите применить пользовательский фон к каждой ячейке: 

.list-cell {
    -fx-background-color: red;
}

Опубликованное изображение показывает, что оно применяется только ко всем другим строкам.Объяснение этому - псевдокласс odd.Glisten.css применяет некоторые стили к нему, поэтому вам также необходимо переопределить его: 

.list-cell, 
.list-cell:odd {
    -fx-background-color: red;
}

То же самое можно применить к другим свойствам (цвет или ширина рамки, отступы, цвет текста).

Вкладки

Glisten применяет рекомендации по проектированию материалов для вкладок , но вы, конечно, можете изменить это.

Заменить: 

.tab-pane,
.tab-pane .tab:selected {
    -fx-background-color: blue;
}

с помощью: 

.tab-pane > .tab-header-area > .headers-region > .tab,
.tab-pane > .tab-header-area > .headers-region > .tab:selected {
    -fx-background-color: blue;
}

для установки цвета фона.

Возможно, вы захотите восстановить границы и вставки, поэтому вам нужно будет посмотреть, как это было определено в Модене.css.

Замените также это: 

.tab {
    -fx-background-insets: 0 1 0 1,0,0;
}

следующим: 

.tab-pane > .tab-header-area > .headers-region > .tab,
.tab-pane > .tab-header-area > .headers-region > .tab:selected {
    -fx-background-color: blue;
    -fx-background-insets: 0 1 1 0;
    -fx-background-radius: 3 3 0 0;
    -fx-padding: 0.083333em 0.5em 0.0769em 0.5em; /* 1 6 0.99 6 */
}

Последний отсутствующий стиль - это текстовая заливка метки вкладки.Если вы применили Swatch, текстовая заливка будет взята из -primary-swatch-500.Но вы можете переопределить его: 

.tab-pane > .tab-header-area > .headers-region > .tab > .tab-container > .tab-label,
.tab-pane > .tab-header-area > .headers-region > .tab:selected > .tab-container > .tab-label {
    -fx-text-fill: gold;
}

В заключение: для всего, что вы хотите переопределить в glisten css, просто посмотрите определение по умолчанию Модены и добавьте его в свой стиль css.

...