De­vel­op­ing a Ba­sic GUI Ap­pli­ca­tion Us­ing JavaFX in Eclipse

This tu­to­rial takes read­ers through the process of de­vel­op­ing a ba­sic GUI ap­pli­ca­tion us­ing JavaFX in Eclipse, and is sim­ple enough for even a be­gin­ner to fol­low.

OpenSource For You - - Con­tents - By: Vi­nayak Vaid The au­thor works as an au­toma­tion en­gi­neer at In­fosys Limited, Pune. He has worked on dif­fer­ent test­ing tech­nolo­gies and au­toma­tion tools like QTP, Se­le­nium and Coded UI. He can be con­tacted at vinayak­

Agraph­i­cal user in­ter­face or GUI is a com­puter pro­gram that makes it easy to talk to your de­vice. GUIs are used in al­most ev­ery elec­tronic de­vice world­wide ow­ing to their ease of use, in­ter­ac­tive de­signs and higher ac­ces­si­bil­ity. Even the OS in­stalled in your com­puter is an ex­am­ple of a GUI. In this tu­to­rial, we will look at de­vel­op­ing a ba­sic GUI in Java us­ing the JavaFX li­brary. The only pre-req­ui­site for this tu­to­rial is that you need a ba­sic un­der­stand­ing of the Java lan­guage and of the Eclipse IDE. But be­fore that, let’s take an over­view of JavaFX.

JavaFX: The fu­ture

Or­a­cle de­fines JavaFX as “…the next step in the evo­lu­tion of Java as a rich client plat­form.” JavaFX was first launched by Sun Mi­crosys­tems in 2007 and JavaFX 1.0 was re­leased in De­cem­ber 2008. The lat­est re­lease is JavaFX 8 and it comes bun­dled with JRE/JDK for Java 8; hence, the name. It is widely re­garded as the fu­ture in de­vel­op­ing so­phis­ti­cated ap­pli­ca­tions – whether Web based, desk­top based or for the mo­bile – and is rapidly re­plac­ing Swing ow­ing to its var­i­ous ad­van­tages. These in­clude be­ing light­weight, hav­ing CSS styling, sleek de­sign con­trols, and the use of FXML and Scene Builder.

Scene Builder and its role in GUI de­vel­op­ment

Or­a­ de­fines Scene Builder as “… a vis­ual lay­out tool that lets users quickly de­sign JavaFX ap­pli­ca­tion user in­ter­faces, with­out cod­ing.” That’s right—you can ac­tu­ally de­sign dif­fer­ent con­trols in your ap­pli­ca­tion, like textboxes, drop­downs, la­bels, but­tons, etc, with­out ac­tu­ally cod­ing them in your favourite in­te­grated de­vel­op­ment en­vi­ron­ment (IDE). Isn’t that easy and time sav­ing? This is a stand­alone tool, which can be em­bed­ded in your IDE workspace for rapid de­vel­op­ment. A drag-and-drop fea­ture is avail­able (the same

as in the cur­rent ver­sion of Vis­ual Stu­dio), in which users can se­lect their re­quired con­trols and add them to their re­spec­tive work area, mod­ify them and de­sign them by ap­ply­ing CSS stylesheets. An FXML file gets gen­er­ated au­to­mat­i­cally in the project you are work­ing on, which is the essence of JavaFX.

After Java 8 up­date 40, Or­a­cle has stopped pro­vid­ing in­stall­ers for Scene Builder. They will be pro­vided only as source code. But users need not worry, since an or­gan­i­sa­tion named Gluon has taken up the task of help­ing the de­vel­oper com­mu­nity by man­ag­ing and up­dat­ing the Scene Builder project. You only have to down­load it from the Gluon web­site http://glu­­ucts/scene-builder/ free of cost, and the in­staller will in­stall it on your ma­chine.

Con­fig­ur­ing JavaFX in Eclipse IDE

In this tu­to­rial, I will use the Eclipse IDE ver­sion Neon

(4.6) for com­pil­ing and run­ning my code, but you can use any ver­sion above 3.4. Be­fore we go into the ac­tual cod­ing process with JavaFX, let’s see how we can in­stall the JavaFX plugin in Eclipse be­cause the lat­ter doesn’t pro­vide sup­port for JavaFX, by de­fault. The req­ui­site for this is that you should have Eclipse down­loaded on your sys­tem and Java 8 in­stalled, be­cause we will use the lat­est JavaFX 8 to de­velop our ap­pli­ca­tion. If you don’t have Eclipse, you can down­load it from­loads/ and you can also down­load Java 8 from Or­a­cle’s of­fi­cial web­site. Once down­loaded, start Eclipse and set your workspace for your project. There are two ways in which you can pro­vide sup­port for JavaFX in your project. One is by adding a ‘.jar’ file to your Java project and the other is by in­stalling the JavaFX plugin. Go­ing for­ward, we will ex­plore both ways.

Adding a JavaFX jar

1. Cre­ate a new Java project in your workspace by go­ing to File menu > New and giv­ing the ap­pro­pri­ate name.

2. Right-click on your cre­ated project and go to the Prop­er­ties op­tion.

3. Se­lect Java Build Path in the Prop­er­ties di­a­logue box.

4. Se­lect the Li­braries tab and check whether your JRE sys­tem li­brary cor­re­sponds to Java ver­sion 8. If not, add it. 5. Now click on the Add Li­brary but­ton on the right side and se­lect User Li­brary from the di­a­logue box that ap­pears. Click Next.

6. Click on the User Li­braries but­ton on the Add Li­brary di­a­logue box and the Pref­er­ences win­dow will open.

7. Click New, pro­vide a suit­able name for your li­brary and then click OK.

8. Your li­brary will be added to the li­braries list as shown in Fig­ure 1. Se­lect that li­brary and click on the Add Ex­ter­nal JARs but­ton.

9. Now browse the folder where your Java 8 is in­stalled, gen­er­ally in your C: drive, and se­lect the file jfxswt.jar by go­ing into the folder struc­ture as jdk 1.08_101 > jre > lib.

10. Check the li­brary that you have cre­ated and click OK or Ap­ply, wher­ever ap­plied.

After this, you can start de­vel­op­ing your ap­pli­ca­tions in JavaFX. Now, we will take a look at the sec­ond way in which we can as­so­ciate JavaFX with Eclipse. By us­ing this method, you can di­rectly de­fine a JavaFX project, un­like the first method in which we first de­fined a nor­mal Java project and blended it into JavaFX us­ing the JavaFX JARs.

In­stalling the JavaFX plugin

1. In the Eclipse IDE, click on the Help menu on the menu bar.

2. Un­der the Help menu, click on the op­tion to In­stall New Soft­ware.

3. A di­a­logue box to in­stall new soft­ware will open. In Work with textbox, type the URL http://down­load.­clipse/up­dates-re­leased/2.4.0/site and

click on the Add but­ton.

4. The Add Repos­i­tory di­a­logue box will open. Give any re­lated name to the repos­i­tory, and in the lo­ca­tion textbox copy the above URL again and click OK.

5. Click on Se­lect All to se­lect all the com­po­nents and click Next. 6. Again click on Next on the next win­dow of the di­a­logue box. 7. The Re­view Li­cense win­dow will open. Click the I ac­cept terms… ra­dio but­ton or you can also go through the li­cence agree­ment if you wish to. Now click the Fin­ish but­ton. 8. It will take some time to in­stall the plugin.

9. After the progress bar shows that Eclipse has com­pleted its in­stal­la­tion of the plugin, it will ask you to restart the Eclipse IDE. Click Yes to restart it.

After Eclipse has been restarted, you can ver­ify your in­stal­la­tion by cre­at­ing a new JavaFX project. For this, go to File > New > Project and scroll down to the JavaFX op­tion avail­able in the New Project di­a­logue box. Ex­pand it, se­lect the JavaFX project and click Next. Give your project an ap­pro­pri­ate name, click Next and then Fin­ish. Now you can view a newly cre­ated JavaFX project as shown in Fig­ure 2 and you can start work­ing on it.

After hav­ing in­stalled the JavaFX plugin and JAR in the Eclipse IDE, we will start off with the cod­ing of our first JavaFX ap­pli­ca­tion. This will be a ba­sic GUI with a textbox that will ac­cept any text and a but­ton, which on click­ing, will print what­ever text you have en­tered in the textbox. I know it’s a pretty ba­sic im­ple­men­ta­tion, but this will help you to un­der­stand how the code works and the dif­fer­ent com­po­nents nec­es­sary for the de­vel­op­ment of multi-tier ap­pli­ca­tions.

Cod­ing your first JavaFX GUI ap­pli­ca­tion

I know you must be ex­cited to code your first JavaFX ap­pli­ca­tion. You prob­a­bly know by now that there are two ways to cre­ate a project. The first way is to cre­ate a nor­mal Java project and as­so­ciate the nec­es­sary JARs with it. The sec­ond way is to di­rectly cre­ate a JavaFX project. We will use the sec­ond method in this tu­to­rial but to de­velop your ap­pli­ca­tion, you can choose any method, based on your con­ve­nience. To start off, open the Eclipse IDE, set an ap­pro­pri­ate workspace and cre­ate a new JavaFX project as men­tioned above.

1. After you have cre­ated your project, you can view it in your Pack­age Ex­plorer. Ex­pand your project and you will be able to view the src folder and other nec­es­sary files, like the JRE sys­tem li­brary and the JavaFX SDK at­tached to it.

2. Ex­pand the src folder and delete the auto-gen­er­ated pack­age ap­pli­ca­tion by choos­ing the Delete op­tion and right-click­ing on it.

3. Now right-click on the src folder and add one pack­age to it.

4. After your de­fined pack­age has been cre­ated, cre­ate a new class un­der that pack­age. Now we can start with the code.

5. Write the code given be­low in your Java class. This code is with­out ex­cep­tion han­dling and I will ex­plain it after run­ning it.

im­port javafx.ap­pli­ca­tion.Ap­pli­ca­tion; im­port javafx.event.Ac­tionEvent; im­port javafx.event.Even­tHan­dler; im­port­om­e­try.Insets; im­port javafx.scene.Scene; im­port javafx.scene.con­trol.But­ton; im­port javafx.scene.con­trol.Tex­tField; im­port javafx.scene.lay­out.BorderPane; im­port javafx.scene.lay­out.VBox; im­port javafx.stage.Stage;

pub­lic class driverClass ex­tends Ap­pli­ca­tion{

pub­lic static void main(String[] args) { // TODO Auto-gen­er­ated method stub launch(args);


@Over­ride pub­lic void start(Stage pri­ma­ryS­tage) throws Ex­cep­tion { // TODO Auto-gen­er­ated method stub pri­ma­ryS­tage.setTi­tle("Open Source For You - First pro­gram");

Tex­tField tex­tField = new Tex­tField();

But­ton btn = new But­ton("Click me to re­veal the above text");

btn.setOnAc­tion(new Even­tHan­dler<Ac­tionEvent>() {

@Over­ride pub­lic void han­dle(Ac­tionEvent event) {

// TODO Auto-gen­er­ated method stub Sys­tem.out.println("En­tered text is " + tex­tField.getText()); tex­tField.clear();



BorderPane pane = new BorderPane(); pane.setPadding(new Insets(70));

VBox paneCen­ter = new VBox(); paneCen­ter.setS­pac­ing(10); pane.setCen­ter(paneCen­ter); paneCen­ter.getChil­dren().add(tex­tField); paneCen­ter.getChil­dren().add(btn);

Scene scene= new Scene(pane, 400, 200); pri­ma­ryS­tage.setScene(scene); pri­ma­ryS­;

} }

6. Now the cod­ing is com­plete for your first JavaFX ap­pli­ca­tion. Run your project and you will see the win­dow shown in Fig­ure 3.

7. Check your ap­pli­ca­tion by typ­ing some text and click­ing the but­ton. The out­put will be printed on the con­sole. Hav­ing coded your ap­pli­ca­tion and suc­cess­fully run it, let’s take a look at the code and how it works.

Ev­ery JavaFX ap­pli­ca­tion must ex­tend the Ap­pli­ca­tion class as done above, and will con­sist of a Stage which will con­tain Scene, which will, in turn, con­tain Lay­out. Lay­out will con­tain all the wid­gets or con­trols like but­tons, text fields, etc, of your ap­pli­ca­tion.

In the above code, in the Main method, we have called the Launch method, which will launch your ap­pli­ca­tion. In the over­rid­den Start method, we have de­signed our GUI.

First, we have de­fined two con­trols—one text field and one but­ton. To the but­ton, we have added an event han­dler, which per­forms the ac­tion when we click the but­ton.

Then we have de­fined a lay­out, which is BorderPane in this case; next, we have de­fined and added VBox to our border pane (through the pane.setCen­ter() method), which will help us to keep our con­trols ver­ti­cally be­low each other.

Then, we have added con­trols to our VBox (through the getChil­dren() method).

We have then de­fined Scene as ex­plained ear­lier and added our BorderPane to it. Fi­nally, we have added Scene to the Stage, and then we have dis­played the Stage us­ing the show() method.

This con­cludes our tu­to­rial for a ba­sic JavaFX GUI ap­pli­ca­tion de­vel­op­ment through Eclipse. I hope you have got a fair idea about the dif­fer­ent com­po­nents of JavaFX and how to im­ple­ment them in ap­pli­ca­tion de­vel­op­ment. If you have any doubts, you can reach me at my email.

Fig­ure 2: JavaFX project with all the nec­es­sary files and JDKs at­tached

Fig­ure 3: First JavaFX ap­pli­ca­tion

Fig­ure 1: JavaFX user li­brary will be cre­ated

Fig­ure 4: Out­put of the ap­pli­ca­tion

Newspapers in English

Newspapers from India

© PressReader. All rights reserved.