Karena JavaFX mulai berkembang sebagai kerangka kerja GUI de-facto Java, cepat atau lambat akan menggantikan Swing. JavaFX UI dan JDBC dapat menjadi kombinasi yang efektif saat membuat aplikasi berbasis database, terutama dalam sistem offline atau tertanam. Artikel ini pada dasarnya menunjukkan bagaimana hal ini dapat dilakukan dengan contoh skenario.
Ikhtisar Aplikasi JDBC
Evolusi kerangka Java GUI sekarang bertumpu pada perpustakaan JavaFX. Ini memberikan alternatif yang kuat namun fleksibel untuk pengembangan GUI, berbeda dengan kerangka Swing dan AWT yang ada. JavaFX menyediakan array besar atau kontrol dan komponen yang membantu dalam membangun antarmuka GUI dengan cepat dan efektif. Sangat mudah untuk mengembangkan aplikasi desktop yang berinteraksi dengan database back-end. JDBC (Konektivitas Basis Data Java) aplikasi terutama memiliki sistem database back-end seperti MySQL, Derby, Oracle, atau database lainnya. Kode Java ditulis untuk mengambil record dari satu atau lebih tabel dalam database. SQL (Bahasa Kueri Terstruktur) query dipecat dari kode Java dan dikirim ke mesin database untuk diproses. Pengandar JDBC bertindak sebagai perantara antara program Java dan database dan menginterpretasikan sejumlah informasi ke sana kemari, sehingga kedua pihak yang tidak cocok, seperti database, dan program Java dapat berdamai ke solusi yang bisa diterapkan. Basis data sama sekali tidak tahu tentang kode Java, sintaksisnya, atau apa pun tentangnya. Itu hanya memahami SQL dan hanya dapat berkomunikasi dengannya. Java, di sisi lain, adalah OOP (Pemrograman Berorientasi Objek) bahasa dan tidak tahu tentang SQL atau sintaksnya. Untuk memungkinkan komunikasi, vendor database menyediakan driver asli bersama dengan database. Ini disebut driver JDBC. Perhatikan bahwa ada empat jenis driver yang tersedia. Mereka secara sehari-hari disebut driver Tipe-1, Tipe-2, Tipe-3, dan Tipe-4. Driver asli adalah driver Tipe-4 dan paling sering digunakan. Mereka juga lebih efisien daripada jenis lainnya. Program Java dapat menyertakan driver JDBC ini sebagai library eksternal ke dalam program Java, karena driver tersebut biasanya datang dalam file arsip JAR.
JavaFX ke TKP
Setiap aplikasi basis data memerlukan antarmuka agar pengguna dapat berinteraksi dengan informasi basis data. Lebih baik, jika itu adalah antarmuka GUI di mana kita tidak harus membungkuk ke antarmuka perintah tingkat rendah yang mengintimidasi tetapi mendapatkan apa yang kita inginkan dengan mengklik tombol. Dalam aspek ini, JavaFX dengan JDBC dapat menjadi kombinasi yang mematikan karena memiliki cukup banyak komponen GUI yang menarik secara visual yang dapat digunakan untuk mewakili catatan database dengan cara yang lebih bermakna. Misalnya, catatan dapat ditampilkan dalam bentuk tabel dengan TableView kontrol. Atau, kita bisa membuat formulir untuk menambahkan catatan baru ke dalam tabel database. Input data oleh pengguna dapat diverifikasi melalui kode Java sebelum dikirim ke database. Mesin database back-end mendapat jeda dari validasi data dan pemrosesan yang terhenti karena kesalahan input. Selain itu, pengguna akhir mungkin orang awam dengan sedikit atau tidak tahu sama sekali tentang batasan input data. Ini idealnya dilakukan ketika formulir input dibuat dengan TextField , Label , Kotak Kombo , dan ListView kontrol di JavaFX. Peristiwa yang dihasilkan oleh Tombol dan kontrol lainnya ditangani sedemikian rupa sehingga pengguna merasa nyaman saat berinteraksi dengan antarmuka GUI.
Menjadi Contoh Skenario
Dalam contoh ilustrasi berikut, kami akan menerapkan ListView operasi pencarian dengan memasukkan teks dalam TextField . Item yang dipilih di ListView diambil sesuai dari database back-end dan ditampilkan di TableView kontrol. Jadi, ini terutama merupakan jenis aplikasi pengambilan dan tampilan. Operasi basis data lainnya—seperti penyisipan, penghapusan, dan pembaruan catatan—tidak diimplementasikan karena batasan ukuran. Ini akan menjadi latihan yang bagus untuk menerapkannya sendiri.
Jadi, sebelum kita mulai, kita harus membuat tabel database dan proyek Java. Kami akan menggunakan MySQL sebagai database back-end; Anda dapat memilih yang lain tetapi pastikan untuk menyertakan driver yang sesuai di pom.xml . Anda mengajukan. Berikut adalah beberapa kode SQL untuk membuat tabel, menyisipkan beberapa data dummy, dan beberapa operasi lainnya.
CREATE DATABASE addressbook;
USE DATABASE addressbook;
DROP TABLE IF EXISTS contact;
CREATE TABLE contact(
id INT UNSIGNED NOT NULL AUTO_INCREMENT,
name VARCHAR(100) NOT NULL,
nick_name VARCHAR(20),
address VARCHAR(128),
home_phone VARCHAR(10),
work_phone VARCHAR(10),
cell_phone VARCHAR(10),
email VARCHAR(100),
birthday date,
web_site VARCHAR(100),
profession VARCHAR(100),
PRIMARY KEY (id)
);
INSERT INTO contact (name, nick_name, address, home_phone,
work_phone, cell_phone, email, birthday, web_site,profession)
VALUES ('Bruce Wayne', 'batman', 'XYZ Batcave', '9876543210',
'6278287326', '9182872363', '[email protected]',
'1976/02/03', 'batblog.com', 'Super Hero');
...
INSERT INTO contact (...) VALUES (...);
Maven Project: pom.xml
<project
xmlns_xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0
http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>org.mano.jdbc.examples</groupId>
<artifactId>JavaFXJDBCApp</artifactId>
<version>1.0-SNAPSHOT</version>
<packaging>jar</packaging>
<name>JavaFXJDBCApp</name>
<url>http://maven.apache.org</url>
<properties>
<project.build.sourceEncoding>
UTF-8
</project.build.sourceEncoding>
</properties>
<build>
<plugins>
<plugin>
<groupId>
org.apache.maven.plugins
</groupId>
<artifactId>
maven-compiler-plugin
</artifactId>
<version>2.5.1</version>
<configuration>
<source>1.8</source>
<target>1.8</target>
</configuration>
</plugin>
</plugins>
</build>
<dependencies>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>3.8.1</version>
<scope>test</scope>
</dependency>
<!-- https://mvnrepository.com/artifact/mysql/
mysql-connector-java -->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>5.1.6</version>
</dependency>
</dependencies>
</project>
Sekarang, mari kita buat objek domain yang akan kita gunakan di keduanya ListView dan Tampilan Tabel karena keduanya terkait, seperti yang dinyatakan dalam kasus kami. TableView akan berisi daftar orang yang dapat diamati (ContactPerson ) berdasarkan nama orang yang dipilih dari ListView kontrol. Kami juga memiliki TextField untuk melakukan pencarian item dengan cepat (ContactPerson name) yang terdapat dalam ListView . Saat memilih item tertentu dari ListView , kueri SQL diaktifkan dan catatan yang relevan diambil untuk mengisi TableView kontrol yang sesuai.
Objek Domain:ContactPerson
ContactPerson class tidak lain adalah representasi POJO dari kontak atribut tabel. Ini berisi konstruktor dan getter-setter simple sederhana metode.
package org.mano.jdbc.examples;
import java.util.Date;
public class ContactPerson {
private int id;
private String name;
private String nickName;
private String address;
private String homePhone;
private String workPhone;
private String cellPhone;
private String email;
private Date birthDate;
private String webSite;
private String profession;
public ContactPerson() {
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getNickName() {
return nickName;
}
public void setNickName(String nickName) {
this.nickName = nickName;
}
public String getAddress() {
return address;
}
public void setAddress(String address) {
this.address = address;
}
public String getHomePhone() {
return homePhone;
}<
public void setHomePhone(String homePhone) {
this.homePhone = homePhone;
}
public String getWorkPhone() {
return workPhone;
}
public void setWorkPhone(String workPhone) {
this.workPhone = workPhone;
}
public String getCellPhone() {
return cellPhone;
}
public void setCellPhone(String cellPhone) {
this.cellPhone = cellPhone;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public Date getBirthDate() {
return birthDate;
}
public void setBirthDate(Date birthDate) {
this.birthDate = birthDate;
}
public String getWebSite() {
return webSite;
}
public void setWebSite(String webSite) {
this.webSite = webSite;
}
public String getProfession() {
return profession;
}
public void setProfession(String profession) {
this.profession = profession;
}
}
Objek Akses Data:ContactDAO
ContactDAO adalah kelas objek akses data yang terutama mencakup operasi akses database. Ini mengimplementasikan DAO antarmuka. Antarmuka ini mungkin tidak penting dalam contoh kita tetapi dapat dimanfaatkan dengan baik jika aplikasi diperluas dengan lebih banyak kelas objek akses data. Di sini, DAO antarmuka termasuk string koneksi, driver, dan nama pengguna dan kata sandi untuk mengakses database MySQL.
DAO.java
package org.mano.jdbc.examples;
public interface DAO {
public static final String DB_URL =
"jdbc:mysql://localhost:3306/"+
"addressbook?zeroDateTimeBehavior=convertToNull";
public static final String DRIVER =
"com.mysql.jdbc.Driver";
public static final String USER = "root";
public static final String PASS = "secret";
}
ContactDAO.java
package org.mano.jdbc.examples;
import java.sql.*;
import java.util.ArrayList;
import java.util.List;
public class ContactDAO implements DAO {
private ontactPerson createContactPerson(ResultSet rs) {
ContactPerson p = new ContactPerson();
try {
p.setId(rs.getInt("id"));
p.setName(rs.getString("name"));
p.setNickName(rs.getString("nick_name"));
p.setAddress(rs.getString("address"));
p.setHomePhone(rs.getString("home_phone"));
p.setWorkPhone(rs.getString("work_phone"));
p.setCellPhone(rs.getString("cell_phone"));
p.setEmail(rs.getString("email"));
p.setBirthDate(rs.getDate("birthday"));
p.setWebSite(rs.getString("web_site"));
p.setProfession(rs.getString("profession"));
} catch (SQLException ex) {
}
return p;
}
public List<ContactPerson> getContacts() {
String sql = "Select * from contact order by name";
List<ContactPerson> list = new ArrayList<>();
try {
Class.forName(DRIVER);
Connection con = DriverManager.getConnection
(DB_URL, USER, PASS);
Statement stmt = con.createStatement();
ResultSet rs = stmt.executeQuery(sql);
while (rs.next()) {
ContactPerson p = createContactPerson(rs);
list.add(p);
}
rs.close();
con.close();
} catch (ClassNotFoundException | SQLException ex) {
}
return list;
}
public List<ContactPerson> getContactsForName(String name) {
String sql = "Select * from contact where name like '%" +
name + "%'";
List<ContactPerson> list = new ArrayList<>();
try {
Class.forName(DRIVER);
Connection con = DriverManager.getConnection
(DB_URL, USER, PASS);
Statement stmt = con.createStatement();
ResultSet rs = stmt.executeQuery(sql);
while (rs.next()) {
ContactPerson p = createContactPerson(rs);
list.add(p);
}
rs.close();
con.close();
} catch (ClassNotFoundException | SQLException ex) {
}
return list;
}
}
Antarmuka GUI JavaFX:ContactBrowser
Dalam aplikasi JavaFX bernama ContactBrowser , kami menyiapkan semua kontrol secara terprogram. Ini juga dapat diatur menggunakan FXML atau alat utilitas pembangun seperti Scene Builder. Namun, menurut pendapat juru tulis, mereka dapat digunakan setelah seseorang memperoleh pengalaman yang cukup tentang apa yang terjadi di balik layar di JavaFX. GUI terutama merupakan interaksi dari tiga kontrol, seperti TextField (searchField ), sebuah ListView (ListView ), dan Tampilan Tabel (contactTableView ). Kode ini cukup jelas, dengan komentar yang diberikan di tempat yang tepat. Ekspresi Lambda digunakan di mana pun berlaku untuk menjaga kode tetap singkat. Lihat dokumentasi JavaFX API jika diperlukan.
package org.mano.jdbc.examples;
import javafx.application.Application;
import javafx.beans.value.*;
import javafx.collections.*;
import javafx.collections.transformation.*;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.control.cell.PropertyValueFactory;
import javafx.scene.layout.*;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
public class ContactBrowser extends Application {
// List of contact table properties
private String[] propertyName = {"id",
"name", "nickName", "address",
"homePhone", "workPhone", "cellPhone",
"email", "birthDate", "webSite",
"profession"};
private String[] propertyLabel = {"ID",
"Name", "Nick Name", "Address",
"Home Phone", "Work Phone", "Cell Phone",
"Email", "Birth Date", "Website",
"Profession"};
private ContactDAO contact = new ContactDAO();
private final GridPane gridPane = new GridPane();
private final Label lblName = new Label("Search by Name");
private final TextField searchField = new TextField();
private ObservableList<ContactPerson> observableNames;
private FilteredList<ContactPerson> filteredData;
private SortedList<ContactPerson> sortedData;
private final ListView<ContactPerson> listView;
TableView<ContactPerson> contactTableView =
new TableView<>();
public ContactBrowser2() {
lblName.setTextFill(Color.web("#0076a3"));
observableNames = FXCollections.observableArrayList
(contact.getContacts());
filteredData = new FilteredList<>
(observableNames, p -> true);
sortedData = new SortedList<>(filteredData);
listView = new ListView<>(sortedData);
}
@Override
public void start(Stage primaryStage) {
primaryStage.setTitle("Address Book");
primaryStage.setMaximized(true);
BorderPane borderPane = new BorderPane();
Scene scene = new Scene(borderPane,650,400,true);
gridPane.setPadding(new Insets(10));
gridPane.setHgap(5);
gridPane.setVgap(5);
gridPane.add(lblName, 0, 0);
gridPane.add(searchField, 0, 1);
// Search TextField event handling
searchField.textProperty()
.addListener((observable, oldValue, newValue) ->
filteredData.setPredicate(str -> {
if (newValue == null || newValue.isEmpty())
return true;
if (str.getName().toLowerCase().contains
(newValue.toLowerCase()))
return true;
return false;
}));
listView.getSelectionModel().setSelectionMode
(SelectionMode.SINGLE);
listView.setPrefHeight(Integer.MAX_VALUE);
// Sets a new cell factory to use in the ListView.
// This throws away all old list cells and new ListCells
// created with the new cell factory.
listView.setCellFactory(listView-> {
Tooltip tooltip = new Tooltip();
ListCell<ContactPerson> cell = new
ListCell<ContactPerson>() {
@Override
public voidupdateItem(ContactPerson contactPerson,
Boolean empty) {
super.updateItem(contactPerson, empty);
if (contactPerson != null) {
setText(contactPerson.getName());
tooltip.setText(contactPerson.getNickName());
setTooltip(tooltip);
} else
setText(null);
}
};
return cell;
});
gridPane.add(listView, 0, 2);
// Create and initializing TableView
ObservableList<ContactPerson> contactPeopleList
= FXCollections.observableArrayList();
contactTableView.setItems(contactPeopleList);
contactTableView.setColumnResizePolicy(
TableView.CONSTRAINED_RESIZE_POLICY);
for (int i = 0; i <
propertyLabel.length; i++) {
TableColumn<ContactPerson, Object> col
= new TableColumn<>(propertyLabel[i]);
col.setCellValueFactory(new
PropertyValueFactory<>(propertyName[i]));
contactTableView.getColumns().add(col);
}
borderPane.setCenter(contactTableView)
borderPane.setLeft(gridPane);
// TableView will populate from the contactPeopleList
// contactPeopleList will have value according to the
// item selected in the ListView
listView.getSelectionModel()
.selectedItemProperty()
.addListener(new ChangeListener<ContactPerson>() {
@Override
public void changed(
ObservableValue<? extends
ContactPerson> observable,
ContactPerson oldValue, ContactPerson newValue) {
if (observable != null &&
observable.getValue() != null) {
contactPeopleList.clear();
contactPeopleList.addAll(
contact.getContactsForName
(newValue.getName()));
}
}
});
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch (args);
}
}
Keluaran
Gambar 1: Keluaran kode
Kesimpulan
Aplikasi JDBC dengan JavaFX pada dasarnya berarti bahwa kerangka kerja JavaFX GUI digunakan sebagai mesin pengembangan front-end dan JDBC digunakan untuk interaksi database back-end. Mereka bisa dari berbagai jenis dengan N jumlah fungsionalitas yang ditentukan di dalamnya. Dasarnya adalah aplikasi CRUD. Kami telah menerapkan bagian dari operasi pencarian dan tampilan. Inilah yang dapat Anda lakukan untuk memperluasnya:terapkan Buat , Hapus , dan Perbarui operasi; juga, Anda dapat menambahkan nama dengan gambar di ListView . Selamat membuat kode
