JavaFX Material Design : Setting Up and Making Login Application

One problem I have faced when developing java applications was the old look. Even after the introduction of Nimbus look and feel, the user interface components felt too static and dead. Then JavaFX came in to the scene and provided a much better interface and control elements.

In this post, I would like to discuss on how to design our JavaFX applications using material design components. The developers at JFoenix had done an impressive job on developing material library for JavaFX. All that we have to do is to download the library and add it into Scene Builder and our application. I have made a video tutorial on setting-up the JFoenix library and making a material login interface.

Adding JFoenix to Scene Builder

First, download the library from https://github.com/jfoenixadmin/Jfoenix. Once you get the Jar file, you have to add it into Scene Builder. Once you add this library to Scene Builder, you can use components available in JFoenix library in your project with just drag and drop.

Within SceneBuilder GUI, there is a setting button, as you can see in the following screenshot. Once you click on it, you will get a context menu. Select JAR/FXML manager which will open the library manager window.

JavaFX Scene Builder add external jar
JavaFX Scene Builder JAR/FXML manager

Then, select Add Library/FXML from file system from the window. This will open a file selection window. Select the JFoenix Jar file. This will open another window listing all the components available in the library. Just select all. Once you successfully add this library, it can be seen under installed libraries/FXML files list.

Scene Builder Library Manager
External  library window

After adding the components to Scene Builder, It’s pretty much drag drop. For JFXButton, you can set ripples, set it as RAISED…. oh my goodness! I have been developing desktop applications for a long time and this is the first time getting my hands on these much cool UI components. 

Watch Video Tutorial about using JFoenix library to make a login Application

I have posted a video tutorial in Genuine Coder YouTube channel about using JFoenix library. Watch it right from here.

Download Sample Project Source Code : Google Drive
Download Sample Project Application : Google Drive

Complete JFoenix Components Tutorial

Watch JFoenix tutorial from following playlist. Contains 19 videos about JFoenix components.

JavaFX Material Design Library Management Software Development

I have created a complete library management program using JavaFX and JFoenix based on Material Design. The Complete tutorial of the development is available in Genuine Coder YouTube Channel.  Read more about this project

JavaFX Library Management Software
JavaFX Library Management Software

Material UI Components available in JFoenix

    • JFXBadge
    • JFXButton
    • JFXCheckBox
    • JFXColorPicker
    • JFXComboBox
    • JFXDatePicker
    • JFXDialog
    • JFXDialogLayout
    • JFXDrawer
    • JFXDrawerStack
    • JFXHamburger
    • JFXListCell
    • JFXListView
    • JFXNodesList
    • JFXPasswordField
    • JFXPopup
    • JFXProgressbar
    • JFXRadioButton
    • JFXRippler
    • JFXSlider
    • JFXSnackbar
    • JFXSpinner
    • JFXTabPane
    • JFXTextArea
    • JFXTextField
    • JFXToggleButton
    • JFXToggleNode
    • JFXTogglePane
    • JFXToolbar
    • JFXTreeTableCell
    • JFXTreeTableRow
    • JFXTreeTableView
    • NumberValidator
    • RequireFieldValidator
       
Muhammed Afsal Villan
Muhammed Afsal Villan
https://afsalv.com
Muhammed Afsal Villan is an experienced full-stack developer, specialized in desktop and mobile application development. He also regularly publishes quality tutorials on his YouTube channel named 'Genuine Coder'. He likes to contribute to open-source projects and is always enthusiastic about new technologies.
Facebook Instagram Linkedin Mail Youtube

RELATED ARTICLESMORE FROM AUTHOR

37 COMMENTS

  1. Hi Genuine coder

    I cannot open a fxml file with a jfeonix component by right click the file in NetBean ide. I have to open scene builder first and then open that fxml file. Why ? Can u give advice thanks

  2. Hi,

    In some cases, NetBeans couldn't automatically detect scene builder installed. So the solution is to set the installation path of Scene Builder by yourself.

    Steps:-

    From the IDE's Main menu, select Tools and choose Options.
    On the Mac OS platform, select NetBeans and choose Preferences from the Main menu.

    In the Options window, click Java and then the JavaFX tab.

    Specify the location of the Scene Builder installation folder and then click OK.

    Source :https://docs.oracle.com/javase/8/scene-builder-2/work-with-java-ides/sb-with-nb.htm