Building a JavaFX Search Bar

The VocabHunter Search Bar

JavaFX and ControlsFX

FontAwesomeFX

Basic Structure of the Search Bar

<ToolBar fx:id="barSearch">
<items>
<Button fx:id="buttonCloseSearch" ... />
<CustomTextField fx:id="fieldSearch" ... />
<Button fx:id="buttonSearchUp" ... />
<Button fx:id="buttonSearchDown" ... />
<Label fx:id="labelMatches"/>
</items>
</ToolBar>

The Search Bar Buttons

<Button fx:id="buttonCloseSearch" styleClass="buttonSearchClose">
<graphic>
<FontAwesomeIconView styleClass="buttonSearchCloseIcon"/>
</graphic>
</Button>
.buttonSearchCloseIcon {
-glyph-size: 15;
-glyph-name: CLOSE;
}
.buttonSearchClose, .buttonSearchUp, .buttonSearchDown {
-fx-background-color: transparent;
-fx-background-insets: 0;
}

The Search Field

<CustomTextField fx:id="fieldSearch" styleClass="searchField">
<left>
<Label styleClass="searchBoxLabel">
<graphic>
<FontAwesomeIconView
styleClass="searchBoxLabelIcon"/>
</graphic>
</Label>
</left>
</CustomTextField>
.searchBoxLabel {
-fx-padding: 0 2 0 7;
}
.searchBoxLabelIcon {
-glyph-size: 13;
-glyph-name: SEARCH;
}

Highlighting Errors

.searchField:fail {
-fx-background-color: -colour-search-fail;
}
private static final PseudoClass CLASS_FAIL
= PseudoClass.getPseudoClass("fail");

public static void updateStateClass(final Node node,
final boolean isFail) {
node.pseudoClassStateChanged(CLASS_FAIL, isFail);
}
searchModel.searchFailProperty().addListener((o, n, v) ->
SearchFieldClassTool.updateStateClass(fieldSearch, v));

Closing Words

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Adam Carroll

Adam Carroll

I’m a Java software developer, based in Barcelona