Pada artikel ini, kita akan membahas tentang cara membuat scene pada aplikasi JavaFX menggunakan layout container seperti VBox dan HBox. Contoh 6-2 menunjukkan bagaimana Anda dapat menggunakan VBox dan HBox untuk mengatur komponen dalam aplikasi scene.

Membuat Series Data dengan Add Button

Pada contoh 6-3, kita akan membuat setOnAction method untuk button "Add Series". Method ini akan membuat series data baru oleh populerating XYChart.Series objek dengan nilai-nilai acak. Setiap series baru diberikan ke chart menggunakan metode add(series).

Contoh 6-3: Menambahkan Series Data

add.setOnAction(new EventHandler<ActionEvent>() {
 @Override public void handle(ActionEvent e) {
 if (sc.getData() == null) 
 sc.setData(
 FXCollections.<XYChart.Series<Number,
 Number>>observableArrayList());
 ScatterChart.Series<Number, Number> series = 
 new ScatterChart.Series<Number, Number>();
 series.setName("Option "+(sc.getData().size()+1));
 for (int i=0; i<100; i++) series.getData().add(
 new ScatterChart.Data<Number, 
 Number>(Math.random()*100, Math.random()*500));
 sc.getData().add(series);
 }
});

Menghapus Series Data dengan Remove Button

Pada contoh 6-4, kita akan membuat setOnAction method untuk button "Remove Series". Method ini akan menghapus series data dari chart menggunakan metode remove(int) yang diakses melalui scatter chart. Index series yang akan dihapus adalah random.

Contoh 6-4: Menghapus Series Data

remove.setOnAction(new EventHandler<ActionEvent>() {
 @Override public void handle(ActionEvent e) {
 if (!sc.getData().isEmpty()) 
 sc.getData().remove((int)(Math.random()*(sc.getData().size()-1)));
 }
});

Mengubah Symbol Chart

Pada aplikasi JavaFX, simbol chart dapat diubah menggunakan style sheet. Contoh 6-5 menunjukkan cara mengubah default styles untuk salah satu symbol chart.

Contoh 6-5: Mengubah Default Styles untuk Symbol Chart

.default-color5.chart-symbol { /* hollow circle */
 -fx-background-color: #860061, white;
 -fx-background-insets: 0, 2;
 -fx-background-radius: 5px;
 -fx-padding: 5px;
}

Mengaplikasikan Efek Visual ke Chart

Semua class chart yang tersedia pada javafx.scene.chart adalah ekstensi dari class Node. Oleh karena itu, Anda dapat mengaplikasikan efek visual atau transformasi ke setiap tipe chart. Contoh 6-6 menunjukkan cara membuat dan mengaplikasikan efek drop shadow ke scatter chart.

Contoh 6-6: Membuat dan Mengaplikasikan Efek Drop Shadow

final DropShadow shadow = new DropShadow();
shadow.setOffsetX(2);
shadow.setColor(Color.GREY);
sc.setEffect(shadow);

Mengubah Symbol Chart

Setiap series data dalam chart scatter dapat diwakili dengan simbol yang telah ditentukan pada caspian.css, style sheet default untuk aplikasi JavaFX. Namun, Anda dapat mengubah symbol chart dengan membuat style sheet sendiri. Contoh 6-7 menunjukkan cara membuat style sheet baru dan menggunakan parameter -fx-shape untuk definisi bentuk simbol.

Contoh 6-7: Membuat Style Sheet Baru dengan CSS

.chart-symbol{ 
 -fx-stroke: #a9e200;
 -fx-shape: "M0,4 L2,4 L4,8 L7,0 L9,0 L4,11 Z";
}

Mengaplikasikan Style Sheet ke Aplikasi

Untuk mengaplikasikan style sheet ke aplikasi, Anda dapat menggunakan metode getStylesheets() dari class Scene dan menambahkan nama file style sheet ke parameter add(). Contoh 6-8 menunjukkan cara mengaplikasikan style sheet ke aplikasi.

Contoh 6-8: Mengaplikasikan Style Sheet ke Aplikasi

scene.getStylesheets().add("scaterchartsample/Chart.css");