Bagian 6: Bagan Statistika

Tangkapan layar AddressApp bagian 6

Pembahasan di bagian 6 6

Membuat Bagan Statistika untuk menampilkan tanggal lahir.

Statistika Tanggal lahir

Semua orang di AddressApp memiliki tanggal lahir. Bukankan akan lebih menyenangkan jika ada statistika tentang ketika mereka merayakannya.

Kita akan menggunakan Bagan Palang berisi sebuah palang untuk tiap bulan. Tiap palang menampilkan berapa banyak orang yang memiliki tanggal lahir di bulan tersebut.

Tampilan FXML Statistik

Kita mulai dengan membuat berkas BirthdayStatistics.fxml didalam paket ch.makery.address.view (Klik kanan pada paket | New | other… | New FXML Document).
Buka berkas BirthdayStatistics.fxml di Scene Builder.
Pilih akar AnchorPane. Pada kelompok Layout atur Pref Width ke 620 dan Pref Height ke 450.
Tambah BarChart ke AnchorPane.
Klik kanan padaBarChart dan pilih Fit to Parent.
Simpan berkas fxml, pada Eclipse segarkan (f5).

Sebelum kita beralih ke Scene Builder, kita akan terlebih dahulu membuat pengendali dan menghubungkan semuanya pada MainApp.

Pengendali Statistika

DI paket tampilan ch.makery.address.view buat kelas java bernama BirthdayStatisticsController.java.

Mari kita lihat pada keseluruhan kelas pengendali sebelum saya mulai menjelaskan:

BirthdayStatisticsController.java

package ch.makery.address.view;

import java.text.DateFormatSymbols;
import java.util.Arrays;
import java.util.List;
import java.util.Locale;

import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.fxml.FXML;
import javafx.scene.chart.BarChart;
import javafx.scene.chart.CategoryAxis;
import javafx.scene.chart.XYChart;
import ch.makery.address.model.Person;

/**
 * The controller for the birthday statistics view.
 * 
 * @author Marco Jakob
 */
public class BirthdayStatisticsController {

    @FXML
    private BarChart<String, Integer> barChart;

    @FXML
    private CategoryAxis xAxis;

    private ObservableList<String> monthNames = FXCollections.observableArrayList();

    /**
     * Initializes the controller class. This method is automatically called
     * after the fxml file has been loaded.
     */
    @FXML
    private void initialize() {
        // Get an array with the English month names.
        String[] months = DateFormatSymbols.getInstance(Locale.ENGLISH).getMonths();
        // Convert it to a list and add it to our ObservableList of months.
        monthNames.addAll(Arrays.asList(months));
        
        // Assign the month names as categories for the horizontal axis.
        xAxis.setCategories(monthNames);
    }

    /**
     * Sets the persons to show the statistics for.
     * 
     * @param persons
     */
    public void setPersonData(List<Person> persons) {
        // Count the number of people having their birthday in a specific month.
        int[] monthCounter = new int[12];
        for (Person p : persons) {
            int month = p.getBirthday().getMonthValue() - 1;
            monthCounter[month]++;
        }

        XYChart.Series<String, Integer> series = new XYChart.Series<>();
        
        // Create a XYChart.Data object for each month. Add it to the series.
        for (int i = 0; i < monthCounter.length; i++) {
            series.getData().add(new XYChart.Data<>(monthNames.get(i), monthCounter[i]));
        }
        
        barChart.getData().add(series);
    }
}

Bagaimana Pengendali Bekerja

Pengendali akan memerlukan akses ke 2 elemn dari berkas FXML :
- barChar: ini memiliki tipe String dan Integer. String digunakan untuk bulan pada x-axis dan Integer digunakan pada jumlah orang pada bulan tertentu.
- xAxis: Kita akan menggunakan ini untuk menambah String bulan.
Metode initialize() mengisi x-axis dengan daftar semua bulan.
Metode setPersonData(...) akan di akses oleh kelas MainApp untuk mengatur data person. Ini akan mengulang melewati semua orang dan menghitung tanggal kelahiran perbulan, kemudian ni menambah XYChart.Data .Data untuk tiap bulan ke seri data. Tiap XYChart.Data Objek akan mewakilkan satu palang didalam bagan.

Menghubungkan Tampilan dan Pengendali.

Buka BirthdayStatistics.fxml di Scene Builder.
Pada kelompok Controller atur BirthdayStatisticsController sebagai pengendali.
Pilih BarChart kemudian pilih barChart sebagai properti fx:id (didalam kelommpok Code).
Pilih CategoryAxis dan pilih xAxis sebagai prperti fx:id.
Kamu mungkin menambah judul ke BarChart (di kelompok Properties) untuk membuat gaya lebih lanjut.

Menghubungkan Tampilan/Pengendali dengan MainApp

Kita akan menggunakan mekanisme yang sama untuk statistika tanggal lahir yang kita gunakan untuk memperbaharui memperbaharui dialog person, dengan sebuah dialog munculan.

Tambahkan metode berikut ke kelas MainApp:

/**
 * Opens a dialog to show birthday statistics.
 */
public void showBirthdayStatistics() {
    try {
        // Load the fxml file and create a new stage for the popup.
        FXMLLoader loader = new FXMLLoader();
        loader.setLocation(MainApp.class.getResource("view/BirthdayStatistics.fxml"));
        AnchorPane page = (AnchorPane) loader.load();
        Stage dialogStage = new Stage();
        dialogStage.setTitle("Birthday Statistics");
        dialogStage.initModality(Modality.WINDOW_MODAL);
        dialogStage.initOwner(primaryStage);
        Scene scene = new Scene(page);
        dialogStage.setScene(scene);

        // Set the persons into the controller.
        BirthdayStatisticsController controller = loader.getController();
        controller.setPersonData(personData);

        dialogStage.show();

    } catch (IOException e) {
        e.printStackTrace();
    }
}

Semuanya telah di atur, tetapi kita tidak meiliki apapun yang sebenarnya memanggil metode showBirthdayStatistics(). Untungnya kita telah memiliki menu di RootLayout.fxml yang bisa digunakan.

Di RootLayoutController tambah metode berikut yang akan menangani klik pengguna untuk menampilkan bulir menu statistika tanggal lahir:

/**
 * Opens the birthday statistics.
 */
@FXML
private void handleShowBirthdayStatistics() {
  mainApp.showBirthdayStatistics();
}

Sekarang buka berkas RootLayout.fxml dengan Scene Builder. Buat Statistics Menu dengan Show Statistics MenuItem:

Pilih Show Statistics MenuItem dan pilih handleShowBirthdayStatistics untuk On Action (didalam kelompok Code)

Tampilkan statistika On Action

Pada Eclipse, segarkan (F5) dan cobalah.

Informasi lebih lanjut pada bagan JavaFX

Sebuah tempat bagus untuk informasi adalah tutorial dari oracle Working with JavaFX Charts.

Berikutnya

Di tutorial terakhir Bagian 7 kita akan menyebarkan aplikasi kita (yaitu paket dan memberikan aplikasi kepada pengguna kita)

code.makery