JavaFX Material Design : Setting Up and Making Login Application



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.

Today, I want to show you, 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.


JFoenix requires Java 1.8 u60 and above.

You can download the jar library from https://github.com/jfoenixadmin/Jfoenix. The next step is to add it into Scene Builder. Actually, I searched on google to find out how to add an external library to scene builder since finding the option was tricky. 

Adding External JAR to scene builder

Scene builder Library Manager.png


As you can see in the image, click on the JAR/FXML Manager to load Library Manager. In the library manager click on Add Library/FXML from the System select an add the Jfoenix.jar. Then the added components can be found on the custom section of components in Scene Builder.

After adding the components to Scene Builder, It's pretty much drag drop. For JFXButtons, you can set ripples, set it as RAISED... oh my god! 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. 
Download Project Source
Download Sample Executable JAR




  

Subscribe on YouTube or Facebook for more programs and tutorials. :--)

Available Material UI Components

  • 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







How to add JavaFX Charts / Graphs : Tutorial


JavaFX Chart Area Chart and Scatter Chart

JavaFX provides a powerful set of Charts/Graphs that can be added very easily to your programs. Frankly, It is even easier than adding a Table in JavaFX. Graphical charts are available in the javafx.scene.chart package. 

Bar Chart

This video describes how to add Bar Chart to your JavaFX program.

Bar Chart data can be represented using an XYChart.Series object. All that you have to do is to make a new object and add data to it.

XYChart.Series set1 = new XYChart.Series<>();  

Data can be added to this set using the code. Here XYChart.Data() takes two parameters. First one is for the X-Axis(Horizontal) and the second one is for Y-Axis(Vertical).

 set1.getData().add(new XYChart.Data("James", 5000));  
 set1.getData().add(new XYChart.Data("Alice", 10000));  
 set1.getData().add(new XYChart.Data("Alex", 2000)); 

Finally, Connect the created series with your JavaFX Bar Chart object using getData().addAll() method. 
 
 SalaryChart.getData().addAll(set1);

AddAll() method allows to add more than one series of data to your chart. For example if i have set1,set2 and set3 then i can add all of them by using a comma seperated list.

 SalaryChart.getData().addAll(set1,set2,set3);  

Pie Chart

JavaFX Pie Chart uses an ObservableList which is very similar to XYSeries.Series we used for Bar Chart. This video explains how to use pie chart.


ObservableList<PieChart.Data> pieChartData  
    = FXCollections.observableArrayList(  
     new PieChart.Data("Cars", 13),  
     new PieChart.Data("Bikes", 25),  
     new PieChart.Data("Buses", 10),  
     new PieChart.Data("Cycles", 22));  
pieChart.setData(pieChartData);   

Here i have created an ObservableList and added 4 values. The pie chart takes all of these values and allocate a percentage for each one.

For eg, Percentage of cars = 13/(13+25+10+22) = 18.5%

The data then can be associated with the chart using the same code used for Bar chart or using a simple alternative

 pieChart.setData(pieChartData);  

provided, pieChart is the Pie Chart object and pieChartData is the ObservableList.

Line Chart

Construction of Line Chart in Java is very much similar to Bar Chart. It takes the same XYChart.Series object.

XYChart.Series series = new XYChart.Series(); //Make a new XYChart object  
 //Add Data  
 series.getData().add(new XYChart.Data(“1”, 23));  
 series.getData().add(new XYChart.Data(“2”, 14));  
 series.getData().add(new XYChart.Data(“3”, 15));  

Finally, associate the data with Line Chart.

 LineChart.getData().addAll(series);

Area Chart and Scatter Chart

These two are explained together because, both of these Charts takes same type of data. Yes, the XYChart.Series object. We can use the same example used above.


XYChart.Series series = new XYChart.Series(); //Make a new XYChart object  
 //Add Data  
 series.getData().add(new XYChart.Data(“1”, 23));  
 series.getData().add(new XYChart.Data(“2”, 14));  
 series.getData().add(new XYChart.Data(“3”, 15));  

Finally, associate the data with both charts.
 AreaChart.getData().addAll(series);  
 ScatterChart.getData().addAll(series);  


So that's how we add a chart /Graph to our JavaFX program and i hope you understood these things well enough.

Text Editor in Java with Source Code

Today, I am going to make a Text Editor program using our Java. Yeah, Like notepad. I want to add some basic functionalities like Opening a file, Saving a file and option to change the font size. It will only take less than 100 lines of code to do this (Excluding User Interface).

I started with the toolbar javax.swing.JToolBar and added 4 buttons. Button with simple label logo and text for open,save and font size changing. The display area is simply a JTextArea with monotype font.

Opening a Text File

It is pretty straight forward to use JFileChooser to select a file. When I started thinking about opening a file, I wanted a File Chooser that filter and display only text files.Thanks to FileNameExtensionFilter from javax.swing.filechooser.FileNameExtensionFilter. I am able to display only text files on the JFileChooser using the code

FileNameExtensionFilter filter = new FileNameExtensionFilter("TEXT FILES", "txt", "text");  
fileOpener.setFileFilter(filter);  

When the user selects a file and click open, The Scanner from java.util.Scanner is used to read the file.

Scanner scn = new Scanner(file);  
   String buffer = "";  
   while (scn.hasNext()) {  
     buffer += scn.nextLine() + "\n";  
   }  
display.setText(buffer);  

The “file” is nothing but the file taken from the JFileChooser and the while loop will continue until the end of file. “display” is the name of JTextArea, our display.

Saving a Text File

A global file variable called “currentEditingFile” is maintained to know whether we are working on a new, unsaved data or on an opened file. If “currentEditingFile” is null we have a new uncreated file. So the saving method will look to “currentEditingFile” and if it is null a JFileChooser will be opened to select the location for the new file. After selecting the directory, file name is taken from JOptionPane input dialog. 

The file is then written onto the file Using PrintWriter from java.io.PrintWriter.

Changing Font Size

A global variable with default font size as 14 is maintained and increased or decreased depending upon the button pressed.

display.setFont(new java.awt.Font("Monospaced", 0, ++fontSize));  //Increase font size
display.setFont(new java.awt.Font("Monospaced", 0, --fontSize)); //Decrease font size

Extra Works

It is not acceptable to exit the program without any notice when the user clicks on the Close button. In order to add a save confirmation, i made an override on the Window Closing operating and added a confirmation message. It is done from the constructor itself

 this.addWindowListener(new WindowAdapter() {  
       @Override  
       public void windowClosing(WindowEvent e) {  
         super.windowClosing(e); //To change body of generated methods, choose Tools | Templates.  
         int ans = JOptionPane.showConfirmDialog(rootPane, "Save Changes ?", "Confirm", JOptionPane.YES_NO_OPTION, JOptionPane.QUESTION_MESSAGE);  
         if (ans == JOptionPane.YES_OPTION) {  
           //Write Changes 
           saveChanges();  
         }  
       }  
     });  


So that's it. Download the program / source code from below buttons. If this was helpful please like me on facebook and keep visiting for more cool programs and sources.

Recommended Read

https://drive.google.com/open?id=0B1WF0QtbznAhSjNsNUlSUkdHWG8https://drive.google.com/open?id=0B1WF0QtbznAhT3hnVjBXbk1JazA

Screenshots:-
Java Text Editor Notepad Main Window
Detachable Tool panel

Java Text Editor Large font
Increased Font Size

Java Text Editor Open new file window
Open File Window

Java Text Editor Saved message
File saved message

Find Perfect Domain Name with Domain Suggestion Tools



We all like to have a short yet meaningful domain names for our website or blog. But searching for available domains on GoDaddy or Big Rock is very time consuming and frustrating. In my case, I wanted a simple domain name related to programming. I searched and searched. Finally bought www.genuinecoder.com from GoDaddy. The truth is, I named this blog as Genuine Coder after purchasing the domain name.

So that's not your case, right? Well, there are a number of ways to find out available domain names. Let's see how we can find a perfect domain name for you.

Lean Domain Search

Lean domain search asks to enter a word that you want your domain name to include. I have used “programming” and got 3,875 available domains. Lean domain search provides options to sort result according to popularity, length or alphabetical order. Moreover, it searches on twitter to find out whether “@yourdomain” is available on twitter.
Lean domain search for Domain Suggestion

  • When sorted based on popularity, I got “ProgrammingMarket.com” as the first result
  • When sorted according to length of the domain, I got “ExProgramming.com”.
  • Sorting based on alphabetical order gave me “AbacusProgramming.com”

Lean domain search also provides Search Term Filter that helps to filter the result based on domain names starting with search term or ending with search term.

Domains Bot

Domains bot work like Lean domain search. Once you enter a keyword, you will get list of available domains. You can choose whether you want particular TLD (Top Level Domain) like .com, .org etc. It is also possible to choose the words from English, Deutsch, Español, Italiano, Français and Dutch.
Domains Bot for Domain Suggestion

NameMesh

Name Mesh is also a good choice. Simply enter in your keywords and results will be sorted into eight categories of results, including Common, New, Short, Extra, Similar, SEO, Fun and Mix. You can refine your result by limiting the maximum characters or showing only ones that available with particular registrar like GoDaddy or BlueHost.

Name mesh for Domain Suggestion

Domainr

Domainr is a simple tool to find available domains. It has less options compared to above ones. When you search for a specific keyword in domainr, you will get a list of .com, .org, .co.in etc variations. Unlike above tools, it does not provide any added keywords as prefix and suffix. 

I searched for eye and got eye.com, eye.net etc. as taken and eye.org for sale.

Domainr for Domain Suggestion

Conclusion

It is better to do a thorough research before buying a domain. Because After setting one domain for your website/blog, it is hard to change since all the search engine entries and back-links will be lost. Moreover, you will loose your precious Alexa ranking too.

All of these tools are very helpful. Yet, I prefer LeanDomainSearch and NameMesh since they have a lot of search refining options. 

Emulating Fingerprint in Android Emulator


Android Emulators are simply the best way to test our application during development or when we want to use apps on PC. Currently fingerprint smart phones are not that common, but surely it will become one of the basic features like Bluetooth or Camera. So it is necessary to start making maximum use of the fingerprint scanner.

Android Fingerprint prompt
When i started developing applications with fingerprint scanner, i had to find a way to emulate the scanner in my emulator. Thanks to Android Developer website.

Before explaining how to Emulate a fingerprint scanner, you have to make sure that the following requirements are satisfied in your system.

1.     Currently, the Fingerprint API is only supported from Marshmallow. Make sure your emulator is running on Android M (API 23) or better.
2.     Android SDK Tools Revision 24.3 or better. 

Watch my video on How to use fingerprint for emulator


  • Activate Screenlock from Settings -> Security. Then Go to Fingerprint option to add new fingerprint
    Adding New Fingerprint to android emulator
    Add caption

  • When prompt to place your finger on the scanner, emulate the fingerprint using adb command.

    Android Using Fingerprint Authentication Dialog

    adb -e emu finger touch <finger_id>
    example: adb -e emu finger touch 1155aa1155

  • You should see fingerprint detected message. That's it. Done.
    Fingerprint Authentication Successful
  •   Whenever an application prompts for fingerprint, just use the previously used adb command with the given finger_id to authenticate.

Comments System

Disqus Shortname