JavaFX Dashboard

This JavaFX Dashboard is a flexible and versatile template, designed to be used as a starting point for your own custom dashboard projects. It features a theme changer with both dark and light modes, a customizable table builder, and a user-friendly interface.

Features • Themes • Theme Changer • Table Builder • Adding Tabs • License

💫 Features

Custom title bar
Rounded movable window
Resizeable
Theme Changer (with local storage)
Table Builder

🎨 Themes

Theme	Light	Dark
Standard
Backify

🌗 Theme Changer

To add a new theme, you need to create a new enumerated value in the Theme enum:

public enum Theme {
    STANDARD, BACKIFY, /* YOUR_NEW_THEME */;
    // ...
}

Then create the corresponding CSS files:

dark.css (Color variables for the dark theme)
light.css (Color variables for the light theme)
theme.css (Semantic color variables and font for the theme)

in the theme directory:

📦javafx-dashboard
 ┗ 📂src
 ┃ ┗ 📂main
 ┃ ┃ ┣ 📂java
 ┃ ┃ ┗ 📂resources
 ┃ ┃ ┃ ┗ 📂com
 ┃ ┃ ┃ ┃ ┗ 📂jannikbuscha
 ┃ ┃ ┃ ┃ ┃ ┗ 📂dashboard
 ┃ ┃ ┃ ┃ ┃ ┃ ┗ 📂css
 ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┗ 📂theme
 ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂backify
 ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂standard
 ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┗ 📂your_new_theme
 ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📜dark.css
 ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📜light.css
 ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┗ 📜theme.css
 ┗ ...

How to structure the content of these files can be found in the standard theme.

After changing the theme in the dashboard, it is stored locally in java.io.tmpdir properties using the LocalUserData class.

🛠 Table Builder

The table methods in FXUtils simplify the process of building tables and populating the TableView, making it easier to create a well-formatted table of data from the ObservableList.

Example usage:

final ObservableList<User> data = FXCollections.observableArrayList(
        new User("Violet", 56, "USA"),
        new User("Brianna", 44, "Germany"),
        // ...
);

List<TableColumn<User, ?>> columns = Arrays.asList(
        FXUtil.createColumn("Name", User::getName),
        FXUtil.createColumn("Age", User::getAge),
        FXUtil.createColumn("Country", User::getCountry)
);

TableView<User> table = FXUtil.createTable(data, columns);

More context can be found for this in the Options-Tab class.

🗂 Adding Tabs

To create a new tab, you must first create a new HBox in the Dashboard FXML as follows in the VBox fx:id="vbxMenuNavigation":

<HBox alignment="CENTER_LEFT" spacing="16.0" styleClass="sidebar-tab">
    <StackPane maxHeight="20.0" maxWidth="20.0" minHeight="20.0" minWidth="20.0">
        <!-- Your Icon (e.g. SVGPath) -->
    </StackPane>
    <Label styleClass="regular" text="Your New Tab" />
</HBox>

Then the Tab class in the Tab package must be created as follows:

public class YourNewTab extends StackPane {
    public YourNewTab() {
        this.getChildren().add(new Label(this.getClass().getSimpleName()));
    }
}

Finally, create an object in the initialize() method of the Dashboard Controller inside the tabs Pane array:

Pane[] tabs = {new Home(), new Users(), new Builder(), new Options(), /*new YourNewTab()*/};

📝 License

MIT

CRY-D / javafx-common-dashboard