Стилизация текста подсказки отдельно от текста в JFXTextField - PullRequest
0 голосов
/ 14 марта 2019

Я использую элементы библиотеки JFoenix. У меня есть простой интерфейс входа в систему. Я использую JFXTextfields с опцией LabelFloat. Когда текстовое поле пусто, вес текста подсказки нормальный. Но когда текстовое поле не сфокусировано и не пусто, мне нужно изменить вес текста, чтобы оно было выделено жирным шрифтом, а его размер увеличен, мне также нужна метка Float, чтобы остаться с th исходным размером шрифта и нормальным весом.

Это мой css:

.input-field-blue {
    -fx-prompt-text-fill: #a1a1a1;
    -jfx-unfocus-color : #bcbcbc;
    -fx-background-repeat : no-repeat;
    -fx-background-position: right center;
    -fx-padding : 0 -8 4 0;
    -fx-text-fill : #3fc9ee;
}
.input-field-blue:filled {
    -fx-font-size: 14;
    -fx-font-weight: bold;
    -fx-text-fill : #00adde;
    -jfx-unfocus-color : #00adde;
}

Это мой fxml файл:

<AnchorPane fx:id="backPanel" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity"
            prefHeight="675.0" prefWidth="1200.0" stylesheets="@../sample/sylesheet.css"
            xmlns="http://javafx.com/javafx/8.0.171" xmlns:fx="http://javafx.com/fxml/1" fx:controller="View.LoginView">
    <children>
        <Pane fx:id="frontPanel" layoutX="396.0" layoutY="164.0" prefHeight="351.0" prefWidth="450.0"
              style="-fx-background-color: #ffffff;" styleClass="front-panel">
            <children>
                <Label fx:id="hiLabel" layoutX="166.0" layoutY="43.0" styleClass="title-blue" text="Bonjour !"
                       textAlignment="CENTER"/>
                <Label fx:id="highlightLabel" layoutX="115.0" layoutY="99.0" styleClass="highlight"
                       text="Veuillez vous authentifier s’il vous plaît"/>
                <JFXPasswordField fx:id="pwd" focusColor="#3fc9ee" labelFloat="true" layoutX="77.0" layoutY="207.0"
                                  prefHeight="26.0" prefWidth="297.0" promptText="Mot de passe" unFocusColor="#bcbcbc">
                    <styleClass>
                        <String fx:value="input-field-blue"/>
                    </styleClass>
                </JFXPasswordField>
                <JFXButton fx:id="authButton" layoutX="155.0" layoutY="277.0" prefHeight="38.0" prefWidth="140.0"
                           styleClass="button-blue" text="S'authentifier" textAlignment="CENTER"/>
                <JFXTextField fx:id="userName" focusColor="#3fc9ee" labelFloat="true" layoutX="76.0" layoutY="147.0"
                              prefHeight="26.0" prefWidth="297.0" promptText="Nom d'utilisateur" unFocusColor="#bcbcbc">
                    <styleClass>
                        <String fx:value="input-field-blue"/>
                    </styleClass>
                </JFXTextField>
            </children>
        </Pane>
    </children>
    <styleClass>
        <String fx:value="back-panel"/>
        <String fx:value="back-panel-blue"/>
    </styleClass>
</AnchorPane>

У меня есть этот интерфейс:

Label Float has a bold weight

Но что я хочу:

Label Float should have a normal font weight

Есть ли что-нибудь для этого?

1 Ответ

1 голос
/ 15 марта 2019

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

Добавьте следующее в ваш CSS-файл:

.input-field-blue.not-empty-and-unfocused {
    -fx-font-weight: bold;
}

Теперь в вашем контроллере добавьте метод checkState, который добавляет или удаляет класс not-empty-and-unfocused. Добавьте слушателей к lengthProperty и focusedProperty в методе initialize. Вот важная часть для вашего контроллера:

public class LoginView implements Initializable {
    @FXML
    public JFXPasswordField pwd;
    @FXML
    public JFXTextField userName;

    @Override
    public void initialize(URL location, ResourceBundle resources) {
        userName.lengthProperty().addListener((observable, oldValue, newValue) -> checkState(userName));
        userName.focusedProperty().addListener((observable, oldValue, newValue) -> checkState(userName));
        pwd.lengthProperty().addListener((observable, oldValue, newValue) -> checkState(pwd));
        pwd.focusedProperty().addListener((observable, oldValue, newValue) -> checkState(pwd));
    }

    private void checkState(TextField field) {
        if (field.isFocused() || field.getLength() == 0) {
            field.getStyleClass().remove("not-empty-and-unfocused");
        } else {
            field.getStyleClass().add("not-empty-and-unfocused");
        }
    }
}

EDIT:

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

.input-field-blue:not-empty-and-unfocused {
    -fx-font-weight: bold;
}

В вашем контроллере вы создаете псевдокласс и немного меняете метод checkState:

private static final PseudoClass NOT_EMPTY_AND_UNFOCUSED = PseudoClass.getPseudoClass("not-empty-and-unfocused");

private void checkState(TextField field) {
    field.pseudoClassStateChanged(NOT_EMPTY_AND_UNFOCUSED, !(field.isFocused() || field.getLength() == 0));
}
...