Install the GemsFX demo launcher locally via jdeploy: https://www.jdeploy.com/~gemsfxdemo The demo will automatically update itself when new versions of GemsFX are released. You can also run the demo via Maven (see below).

GemsFX

GemsFX is a collection of custom controls and utilities for JavaFX. The website is located at https://gemsfx.dlsc.com.

The gemsfx library module targets Java 11 and JavaFX 17+. The gemsfx-demo module uses Java 24 / JavaFX 25.0.2.

AtlantaFX

If you want to use AtlantaFX for your application then copy the stylesheet called atlantafx.css from the demo module into your project. You will need to add it to the list of stylesheets that you are attaching to your application's scene. For more information on AtlantaFX please see the AtlantaFX project.

Installation

Adding GemsFX to your project.

Using Maven

Add the following dependency to your pom.xml:

<dependency>
    <groupId>com.dlsc.gemsfx</groupId>
    <artifactId>gemsfx</artifactId>
    <version>2.16.0</version>
</dependency>

Using Gradle

Add the following dependency to your build.gradle:

implementation 'com.dlsc.gemsfx:gemsfx:2.16.0'

Quick Links

• Date & Time Controls

  CalendarView, CalendarPicker, DateRangeView, DateRangePicker,YearView, YearPicker, YearMonthView, YearMonthPicker, TimePicker, DurationPicker

• Text Input Controls

  SearchTextField, SearchField, EnhancedPasswordField, EmailField, TagsField, ExpandingTextArea, ResizableTextArea, LimitedTextArea

• Advanced Panes

  DialogPane, DrawerStackPane, PowerPane, ResponsivePane, ThreeItemsPane

• Image controls

  PhotoView, AvatarView, PaymentOptionControls, SVGImageView

• Other Controls

  CircleProgressIndicator, FilterView, InfoCenterPane, StripView, Spacer, ScreensView, SessionManager, StageManager, TreeNodeView, MultiColumnListView

CalendarView

A nice UI for displaying the month of a year. The view is highly configurable and allows specifying latest and earliest date for selection purposes. The days of the previous or the next month can either be shown or hidden. When clicking on the month the user will be presented with a custom view for quickly selecting a different month. The same happens when clicking on the year. The calendar view uses a selection model which can work in three ways: single date selection, multiple date selection, or date range selection. Last but not least, the layout of the header can be changed, so that the month and year labels are either left, center, or right aligned.

CalendarPicker

A date picker control that uses the calendar view of GemsFX. The field is editable to the user can also enter the date via keyboard.

DateRangeView

A view that allows the user to specify a date range. The view supports defining a couple of presets for quick range selection, e.g. "last week". The left and right month views are bound so that the right calendar will never allow the user to specify a date that is earlier than those dates shown in the left month view.

DateRangePicker

A picker that allows the user to specify a date range via the date range view. The picker supports two different layouts (small, big). The picker shows the selected range and also a name for the range, which is either derived from the name of a selected preset or simply says something like "custom range".

YearView

A view for displaying a configurable number of columns and rows with years. The user can use the grid to quickly select a new year. Properties are available to restrict the earliest and the latest year that is selectable.

YearPicker

A view for picking a year from a dropdown showing the year view control.

YearMonthView

A view for displaying the months of a given year. The user can quickly switch between years. Properties are available to restrict the selection to an earliest and a latest month.

YearMonthPicker

A control for specifying the month of a year (see time API class "YearMonth"). It is very similar to the standard date picker class and actually inherits a lot of styling attributes from it.

TimePicker

A small control used for entering a time. The control can be configured with a "step rate" for the minutes field (e.g. " 15 minutes") that will be used when incrementing or decrementing the minutes field via the keyboard (arrow keys). The control can also be configured to only allow a time within the time range defined by an earliest and a latest time. A popup can be used to work with the mouse only. It is also possible to specify whether the fields should "roll over" or not when they reach their minimum or maximum value. For example: the minute field shows 59 minutes and the user wants to increase it via the arrow key. Then the new value will be "0" when rollover is enabled. If not the value will remain at 59. Rollover combined with "linking fields" will cause the hours field to get increased when the minute field rolls over from 59 to 0 or decreased when the minute field rolls over from 0 to 59.

DurationPicker

A small control used for entering a duration. The control can be configured to only allow a duration within the range defined by a minimum and maximum duration. A popup can be used to work with the mouse only. It is also possible to specify whether the fields should "roll over" or not when they reach their minimum or maximum value. The control supports similar features as the time picker: rollover fields, keyboard support, linking fields, filling fields with leading zeros, etc..

SearchTextField

A textfield that has been nicely decorated to express that it is used for performing searches.

Search Field

An auto-suggest text field with a behaviour similar to the spotlight search experience on Mac. While typing the field will automatically finish the entered text if it has a search result where the name starts with the exact typed text. At any time the typed text and the auto-completed text will be visually distinguishable. The field is also capable of creating a new object for the entered text if no result can be found. For detailed instructions read the WIKI page.

EnhancedPasswordField

The EnhancedPasswordField is a custom password field. It allows the addition of custom nodes like icons or buttons to the sides of the field, supports toggling password visibility between masked and plain text, and enables customization of the echo character used for masking.

Email Field

A text field that has been nicely decorated to express that it is used for entering email addresses. The field will validate the entered text and show an error message if the text is not a valid email address.

Tags Field

An extension of the SearchField control that supports the creation of tags. Selected values are converted into tags when the user hits enter, the right arrow key, or tab. The API of this control allows applications to retrieve the tags, or to monitor the selection state of the tags. The control uses a FlowPane for its layout, which allows the tags to span multiple rows.

Expanding Text Area

A customized text area that grows based on its text content. The text area will never show vertical or horizontal scrollbars.

Resizable Text Area

A custom control that wraps a text area and adds a resize handle to the lower right corner of it. The area can be configured to be resizable in vertical, horizontal, or both directions.

Limited Text Area

LimitedTextArea is derived from ResizableTextArea and offers a character-limiting feature, accompanied by a character counter that indicates the remaining number of characters.

Dialog Pane

The class DialogPane can be used as a layer on top of any application. It offers various methods to display different types of dialogs.

• Information
• Warning
• Error
• Confirmation
• Node (any UI)
• Busy (spinning animation, indeterminate)
• Single line text input
• Multiple line text input

DrawerStackPane

A stackpane with an optional node that can be shown inside a drawer. The drawer is animated and can slide in and out. When the drawer is showing a semi-transparent glass pane will cover the background. In addition the last height of the drawer can be persisted via the preferences API so that next time the drawer will show itself like in the last user session.

PowerPane

The PowerPane is a versatile container that combines specialized panes such as the InfoCenterPane, DialogPane, DrawerStackPane, and HiddenSidesPane. It serves as an ideal foundation for crafting feature-rich client applications.

ResponsivePane

ResponsivePane is a container that allows for responsive behavior of a sidebar and a main content panel. Depending on the specified position of the sidebar (LEFT or RIGHT), it will automatically adjust its visibility based on the width of the pane. When the window width is narrow, the sidebar is hidden, and only the content panel is shown. When the window width is moderate, both a small sidebar and a large sidebar, along with the content panel, are displayed. When the window width is wide, both the large sidebar and the main content pane are shown. Similarly, if the sidebar is positioned at the TOP or BOTTOM, its visibility will be adjusted based on the height of the pane. However, it is also possible to force the sidebar to be displayed regardless of the window size.

ThreeItemsPane

A container that lays out three nodes on the positions left, center, right (when horizontal), or top, center, bottom (when vertical). The container ensures that the center node is truly always centered, independent of the size of the left, right (or top / bottom) nodes.

Photo View

A control for adding and editing a user profile photo (or whatever). The user can click on the control to choose an image file via a file chooser (replacable) or via drag and drop. Once added the user can move the image around and zoom in / out. As a convenience the view always provide a cropped version of the original image. This allows applications to store a smaller file on the server / in the database. The control supports some keyboard shortcuts. The file chooser can be activated by pressing SPACE or ENTER. The photo can be removed by pressing DELETE or BACK_SPACE.

![PhotoView](gemsfx/docs