[YUNI NOVIA – MEMBUAT APLIKASI KALKULATOR SEDERHANA

March 19, 2015 MENGGUNAKAN JAVAFX]

Membuat Aplikasi Kalkulator Sederhana Menggunakan JavaFX

a. Sekilas tentang JavaFX

JavaFX merupakan perkembangan dari Java Swing yang pada umumnya digunakan untuk
membuat aplikasi berbasi dekstop. JavaFX diperkenalkan langsung oleh kepala Developer Sun
Microsystem.
Dalam penggunaan JavaFX kali ini aplikasi yang digunakan adalah Netbeans. Sebelum memulai
membuat aplikasi pastikan Netbeans yang terinstal pada komputer anda sudah terinstal juga
paket JavaFX nya, sehingga ketika membuat project baru tersedia pilihan JavaFX. Selain
Netbeans aplikasi yang mendukung pembuatan aplikasi kalkulator sederhana kali ini yaitu
JavaFX Scene Builder yang membatu dalam pembuatan antar muka aplikasi.
Apabila sudah terinstal kedua aplikasi tersebut, silahkan ikuti tutorial ini hingga akhir agar
mendapatkan hasil yang maksimal.
b. Tutorial membuat Aplikasi Kalkulator Sederhana
Berikut langkah-langkah membuat aplikasi kalkulator sederhana:
1. Bukalah aplikasi netbeans yang sudah terinstal pada komputer anda

2. Pada tab menu file, pilihlah New Project dan buat project JavaFX FXML Aplication baru,
seperti pada gambar dibawah
 [YUNI NOVIA – MEMBUAT APLIKASI KALKULATOR SEDERHANA
March 19, 2015 MENGGUNAKAN JAVAFX]

3. Window dibawah ini adalah tempat membuat nama projek dan memilih posisi dari project
tersebut, silahkan diisi sesuai keinginan atau boleh mengikuti tutorial ini. setelah mengisi
data-data yang dibutuhkan, klik finish untuk memulai membuat aplikasi

4. Ketika sudah selesai membuat nama project maka pada window project akan muncul
project yang telah dibuat sebelumnya, seperti pada gambar dibawah ini

Dapat dilihat pada gambar diatas, dalam package kalkulator terdapat dua file dengan
format java dan satu file yang memili format fxml. Index.fxml merupakan tampilan dari
aplikasi, sedangkan KalkulatorController.java merupakan control dari tampilan aplikasi atau
yang mengontrol setiap aktifitas index.fxml, sedangkan Kalkulator.java merupakan tempat
mengatur bentuk tampilan atau dapat diibaratkan sebagai canvas untuk melukis tampilan
 [YUNI NOVIA – MEMBUAT APLIKASI KALKULATOR SEDERHANA
March 19, 2015 MENGGUNAKAN JAVAFX]

5. Klik kanan pada Index.fxml dan pilih open, secara otomatis index.fxml akan dibuka dengan
JavaFX Scene Builder, lakukan pembuatan textfiled dengan mengikuti gambar dibawah ini

Window containers yang berada disamping kiri merupakan palet yang tersedia dan yang
digunakan dalam design aplikasi kalkulator sederhana. Pada kali ini palet yang digunakan
adalah label, textfield dan button. Setiap palet yang telah digunakan pada aplikasi dapat
dilihat pada window hieracrchy yang berada dibawah windows containers. Sedangkan
windows yang disebelah kanan merupakan window property dari palet yang diseleksi.
Lakukan pengaturan seleksi seperti pada gambar dibawah ini:

Property pada textfied nilai1

Property pada textfield nilai2

 [YUNI NOVIA – MEMBUAT APLIKASI KALKULATOR SEDERHANA
March 19, 2015 MENGGUNAKAN JAVAFX]

Property pada button jumlah

Property pada button kurang

Property pada button kali

Property pada button bagi

 [YUNI NOVIA – MEMBUAT APLIKASI KALKULATOR SEDERHANA
March 19, 2015 MENGGUNAKAN JAVAFX]

Property pada label hasil

6. Jika telah selesai membuat pengaturan seperti pada gambar diatas, silahkan disave dan
aplikasi JavaFX Scene Builder dapat di close, dan dilanjutkan pemberian aksi pada program.
7. Semua pengaturan yang dilakukan pada Java FX Scene Buider, secara otomatis Index.fxml
akan membuat programnya seperti coding dibawah ini :
<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.*?>

<AnchorPane id="AnchorPane" prefHeight="187.0" prefWidth="274.0"

xmlns:fx="http://javafx.com/fxml/1"
xmlns="http://javafx.com/javafx/2.2" fx:controller="kalkulator.KalkulatorController">
<children>
<Label layoutX="35.0" layoutY="36.0" text="Angka 1" textFill="BLACK" />
<Label layoutX="35.0" layoutY="77.0" text="Angka 2" textFill="BLACK" />
<TextField fx:id="nilai1" layoutX="88.0" layoutY="33.0" prefWidth="123.0" />
<TextField fx:id="nilai2" layoutX="88.0" layoutY="74.0" prefWidth="123.0" />
<Button fx:id="button" layoutX="40.0" layoutY="111.0" mnemonicParsing="false"
onAction="#jumlahkan" text="+" textFill="BLACK" />
<Label fx:id="jumlah" layoutX="35.0" layoutY="151.0" prefWidth="176.0" text="Hasil"
textFill="#990000">
<font>
<Font size="15.0" />
</font>
</Label>
<Button fx:id="kurang" layoutX="84.0" layoutY="111.0" mnemonicParsing="false"
onAction="#kurangkan" text="-" textFill="BLACK" />
<Button fx:id="kali" layoutX="125.0" layoutY="110.0" mnemonicParsing="false"
onAction="#kalikan" text="x" textFill="BLACK" />
<Button fx:id="bagi" layoutX="175.0" layoutY="111.0" mnemonicParsing="false"
onAction="#bagikan" text="/" textFill="BLACK" />
<Label id="welcome" fx:id="wel" layoutX="35.0" layoutY="6.0" prefWidth="133.0"
text="Kalkulator Ku.." textFill="#cc3100">
<font>
<Font size="16.0" />
</font>
</Label>
</children>
 [YUNI NOVIA – MEMBUAT APLIKASI KALKULATOR SEDERHANA
March 19, 2015 MENGGUNAKAN JAVAFX]

</AnchorPane>
8. Sintak " fx:controller="kalkulator.KalkulatorController"> merupakan sintak
mengarahkan control dari program pada file KalkulatorController.java yang telah
dibuat sebelumnya. Semua aksi dari aplikasi akan dibuat pada file tersebut.

9. Aksi yang ada pada KalkulatorController.java merupakan aksi function untuk

menjalankan button-button pada index.fxml yang sudah didesign menggunakan
JavaFX Scene Builder. Isikan sintak aksi sepeti pada sintak dibawah ini :
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
package kalkulator;

import java.net.URL;
import java.util.ResourceBundle;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;

/**
*
* @author Yuni
*/
public class KalkulatorController implements Initializable {

@FXML
private TextField nilai1 = new TextField();
@FXML
private TextField nilai2 = new TextField();
@FXML
private Label jumlah = new Label();

@FXML
public void jumlahkan(ActionEvent event) {
int a = Integer.valueOf(nilai1.getText());
int b = Integer.valueOf(nilai2.getText());
int jum = a + b;
String jumab = String.valueOf(jum);
String jmlhab = "Hasil Jumlah =" + jumab;
 [YUNI NOVIA – MEMBUAT APLIKASI KALKULATOR SEDERHANA
March 19, 2015 MENGGUNAKAN JAVAFX]

jumlah.setText(jmlhab);

public void kurangkan(ActionEvent event) {

int a = Integer.valueOf(nilai1.getText());
int b = Integer.valueOf(nilai2.getText());
int jum = a - b;
String jumab = String.valueOf(jum);
String jmlhab = "Hasil Kurang =" + jumab;
jumlah.setText(jmlhab);
}

public void kalikan(ActionEvent event) {

int a = Integer.valueOf(nilai1.getText());
int b = Integer.valueOf(nilai2.getText());
int jum = a * b;
String jumab = String.valueOf(jum);
String jmlhab = "Hasil Kali =" + jumab;
jumlah.setText(jmlhab);
}

public void bagikan(ActionEvent event) {

int a = Integer.valueOf(nilai1.getText());
int b = Integer.valueOf(nilai2.getText());
float jum = a / b;
String jumab = String.valueOf(jum);
String jmlhab = "Hasil Bagi =" + jumab;
jumlah.setText(jmlhab);
}

@Override
public void initialize(URL url, ResourceBundle rb) {
// TODO
}

10. Nama method yang diberi warna merah merupakan aksi dari setiap buttonnya.
Sebagai catatan nama method harus disamakan dengan nama aksi button pada
index.fxml, untuk lebih jelas silahkan perhatikan kedua gambar dibawah ini:

Sintak membuat button kurang pada index.fxml

 [YUNI NOVIA – MEMBUAT APLIKASI KALKULATOR SEDERHANA
March 19, 2015 MENGGUNAKAN JAVAFX]

Sintak aksi dari button kurang pada KalkulatorController.java

11. Jika sudah selesai membuat aksi dari button-button, berarti telah selesai membuat
aplikasi kalkulator. Jalankan aplikasi, dan akan muncul seperti pada gamba dibawah
ini :

Tampilan awal aplikasi

Aksi button jumlah aplikasi

Aksi button kurang aplikasi

 [YUNI NOVIA – MEMBUAT APLIKASI KALKULATOR SEDERHANA
March 19, 2015 MENGGUNAKAN JAVAFX]

Aksi button kali aplikasi

Aksi button bagi aplikasi

Sekian tutorial ini, semoga dapat membantu para pemula lebih paham mengenai
JavaFX.