Style your form with css

kevinsdooapp edited this page Feb 20, 2018 · 13 revisions

FXForm defines CSS classes and IDs for most form components, so that they can be easily styled: Anatomy of a form

CSS files

CSS files defining the styles must be added to the scene. For each form, FXForm will automatically try to load a corresponding CSS file whose directory and name matches the package and name of the class using the form.

Classes

The default FXForm skin defines the following classes

Component Class
labels form-label
editors form-editor
tooltips form-tooltip
the title of the form form-title
the form background form-content-box
constraint violation form-constraint
global constraint violation global-form-constraint

Example

.form-label {
    -fx-font-size: 20;
}

.form-editor {
    -fx-font-size: 20;
}

.form-title {
    -fx-font-size: 20;
    -fx-text-fill: dimgray;
}

.form-tooltip {
    -fx-font-size: 11;
    -fx-text-fill: gray;
}

.form-constraint .label {
    -fx-font-size: 20;
    -fx-text-fill: red;
}

.form-constraint ImageView {
    -fx-image: url("myWarning.jpg");
}

.form-content-box {
    -fx-background-color : linear (0%,0%) to (0%,20%) stops (0%, rgba(225,225,225,1)) (100%, white);
    -fx-background-radius : 5, 5, 5, 5;
    -fx-border-color: linear (0%,0%) to (0%,20%) stops (0%, dimgray) (100%, white);
    -fx-border-radius: 5;
}

ID

If you need to finer tune the style of a single field label or editor you can access it using their id selector:

where field-name is the name of the field as defined in the bean.

Component ID
label field-name-form-label
editor field-name-form-editor
tooltip field-name-form-tooltip
constraint violation field-name-form-constraint
global constraint violation global-form-constraint

Example

#lucky-form-label {
    -fx-text-fill: blue;
}

#name-form-editor {
    -fx-text-fill: green;
}

How to retrieve a specific node of the form

Using the id assigned by FXForm to the form nodes, you can retrieve those nodes using the lookup method :

TextField nameTextField = (TextField) fxForm.lookup("#name-form-editor");