TUTORIAL - Membuat Aplikasi Kalkulator Sederhana Menggunakan JavaFX

March 19, 2015 [YUNI NOVIA – MEMBUAT APLIKASI KALKULATOR SEDERHANA 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


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


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


Property pada button jumlah

Property pada button kurang

Property pada button kali

Property pada button bagi


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>


</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;


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


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


Aksi button kali aplikasi

Aksi button bagi aplikasi

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

JavaFX.

TUTORIAL - Membuat Aplikasi Kalkulator Sederhana Menggunakan JavaFX

Documents