Styling prompt text separately from text in JFXTextField

Question

I am using JFoenix library elements. I have a simple login interface. I use JFXTextfields with a LabelFloat option. When the text field is empty the prompt text weight is normal. But when the text field is unfocused and non-empty I need the text weight to be changed to be bold and its size increased, I also need the label Float to stay with th initial font size and a normal weight.

This is my 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;
}

This is my fxml file:

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

I have this interface:

But what I want:

Is there anyway to do that ?

Answer 1

You should add a custom class to your css and toggle this if the focused state or the length state changes.

Add the following to your css file:

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

Now in your controller add a checkState method which adds or removes the not-empty-and-unfocused class. Add listeners to lengthProperty and focusedProperty in the initialize method. Here is the important part for your controller:

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:

Another option you may want to consider is using a custom PseudoClass. Therefore you have to change your css to the following:

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

In your Controller you create an PseudoClass and change the checkState method a bit:

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));
}