JavaFX Material Design : Setting Up and Making Login Application

8
11749

One problem I have faced when developing java applications was the old look. Even after 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 a great 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 scene builder 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

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
     
SHARE

Friends call me Villan (Yeah, that’s my name). I am from Kerala, India. Studied Computer Science and Engineering. Love programming and spends free time on experimenting with new programming languages and things. Happy blogger and YouTuber.

  • Anonymous

    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

  • 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

  • Hello Genuine coder,thank you for your tutorials
    please can you tell me how can i add a sublist to a JFXlistview.
    Thanks again !

  • how to change the circle color of radio button jfoenix?

  • how to change the circle of radio button jfoenix? please reply soon thanks

  • can i create a rating systeme !?

  • Raju Mane

    which version of screen builder should we use

  • paul

    pls how do i use gludon ports for mobile apps on javafx