MINGGU 10 Java Programming (MKB614C) Pokok Bahasan: Dasar JavaFX Tujuan Instruksional Khusus: Siswa memahami pemrograman GUI dengan Java Java Programming (MKB614C) Minggu 10 Page 1

Java Programming (MKB614C) Agenda Pengantar JavaFX Java FX vs Swing & AWT Struktur dasar program JavaFX Pane, UI Control & Shape Binding Properti Properti & method untuk nodes Color & Font Image & ImageView Layout Pane Shape Java Programming (MKB614C) Minggu 10 Page 2

Java Programming (MKB614C) Pengantar JavaFX JavaFX merupakan frame work Java untuk membangun program GUI. JavaFX API merupakan contoh bagaimana prinsip-prinsip pemrograman Object Oriented diterapkan. JavaFX is a set of graphics and media packages that enables developers to design, create, test, debug, and deploy rich client applications that operate consistently across diverse platforms. (http://docs.oracle.com/javase/8/javafx/get-started-tutorial/jfx-overview.htm) Versi JDK 7u79 & lebih baru telah menyertakan JavaFX sehingga tidak diperlukan installasi terpisah. Java Programming (MKB614C) Minggu 10 Page 3

Java FX vs Swing & AWT Abstract Windows Toolkit (AWT) merupakan library GUI pada versi-versi awal Java. AWT didesain untuk memenuhi kebutuhan user interface berbasis grafis, namun tidak untuk pengembangan GUI yang comprehensive. Kemudian komponen user interface AWT diganti dengan komponen Swing. Swing didesain untuk membangun aplikasi GUI desktop. Swing diganti dengan JavaFX, JavaFX didesain untuk pengembangan aplikasi internet yang ‘kaya’ (Rich Internet Application/RIA). Aplikasi JavaFX didesktop dan internet akan sama, dan mendukung teknologi multi-touch, 2D, 3D, animation, multimedia, dan teknologi terbaru.

Struktur dasar program JavaFX Framework JavaFX merupakan extend dari abstract class javafx.application.Application Program JavaFX dimulai dengan mengextend class javafx.application.Application

Source code struktur program JavaFX import javafx.application.Application; import javafx.stage.Stage; public class W10 extends Application { public static void main(String[] args) { // TODO Auto-generated method stub } @Override public void start(Stage arg0) throws Exception {

Kelas Scene & Stage JavaFX Scane (javafx.scene.Scene) adalah kelas container untuk semua konten (object) grafis. JavaFX Stage (javafx.stage.Stage) adalah kelas level tertinggi dari JavaFX Container. Objek primary Stage dibentuk oleh platform, object tambahan Stage dapat dibentuk oleh aplikasi. Defaultnya Stage dapat diresize, untuk mencegah Stage diresize, gunakan method setResizable(false).

Contoh MultiStage @Override // Override the start method in the Application class public void start(Stage primaryStage) { // Create a scene and place a button in the scene Scene scene = new Scene(new Button("OK"), 200, 250); primaryStage.setTitle("MyJavaFX"); // Set the stage title primaryStage.setScene(scene); // Place the scene in the stage primaryStage.show(); // Display the stage Stage stage = new Stage(); // Create a new stage stage.setTitle("Second Stage"); // Set the stage title // Set a scene with a button in the stage stage.setScene(new Scene(new Button("New Stage"), 100, 100)); stage.show(); // Display the stage }

Scene & Stage dalam grafis Scene: container konten (object) grafis Stage: level tertinggi dari JavaFX Container

Pane, UI Control & Shape Pane, UI Control & Shape adalah subtypes dari Node (javafx.scene.Node) Pane digunakan sebagai container Node. Scane -> Pane -> Nodes Nodes adalah visual componen seperti Shape: text, line circle, cllipse, rectangle, arc, polygon, polyline, dll. Image view UI Control: label, button, checkbox, radio botton, text field, text area, dll. Pane

Ilustrasi Pane, UI Control & Shape Panes are used to hold nodes. Nodes can be shapes, image views, UI controls, and panes.

Contoh Button didalam Pane public void start(Stage primaryStage) throws Exception { // Create a scene and place a button in the scene StackPane pane = new StackPane(); pane.getChildren().add(new Button("OK")); Scene scene = new Scene(pane, 200, 50); primaryStage.setTitle("Button in a pane"); // Set the stage title primaryStage.setScene(scene); // Place the scene in the stage primaryStage.show(); // Display the stage }

Sistim kordinat Java (0, 0) upper-left corner Kerjakan latihan LISTING 14.4 ShowCircle.java halaman 541.

Binding Property JavaFX memperkenalkan binding property dimana memungkinkan target object di bound ke source object. Target object disebut binding object / biding property. Source object disebut bindable object / observable object. Default binding adalah unidrectional binding, hanya 1 property yang dapat dirubah. Syntax: target.bind(source); Bidrectional binding target maupun property source dapat dirubah. Syntax: target.bindBidrectional(source);

Binding Bidirectional DoubleProperty d1 = new SimpleDoubleProperty(1); DoubleProperty d2 = new SimpleDoubleProperty(2); d1.bindBidirectional(d2); //d1.bind(d2); System.out.println("d1 is " + d1.getValue() + " and d2 is " + d2.getValue()); d2.setValue(70.2); d1.setValue(10.2); d1 is 2.0 and d2 is 2.0 d1 is 70.2 and d2 is 70.2 d1 is 10.2 and d2 is 10.2

ShowCircleCentered.java target.bind(source); // Create a pane to hold the circle Pane pane = new Pane(); // Create a circle and set its properties Circle circle = new Circle(); circle.centerXProperty().bind(pane.widthProperty().divide(2)); circle.centerYProperty().bind(pane.heightProperty().divide(2)); circle.setRadius(50); circle.setStroke(Color.BLACK); circle.setFill(Color.WHITE); pane.getChildren().add(circle); // Add circle to the pane // Create a scene and place it in the stage Scene scene = new Scene(pane, 200, 200); primaryStage.setTitle("ShowCircleCentered"); // Set the stage title primaryStage.setScene(scene); // Place the scene in the stage primaryStage.show(); // Display the stage target.bind(source);

Properti & method untuk nodes Nodes dapat menshare banyak property, seperti style & rotate. Property pada JavaFX mirip dengan Cascading style Sheets (CSS), maka property di JavaFX disebut juga JavaFX CSS. Contoh circle.setStroke(Color.BLACK); circle.setFill(Color.RED); Dapat ditulis circle.setStyle("-fx-stroke: black; -fx-fill: red;"); Bila terdapat kesalahan penulisan pada JavaFX CSS, maka program tetap berjalan dengan mengabaikan style. Kerjakan LISTING 14.7 NodeStyleRotateDemo.java dihalaman 546

Kelas Color javafx.scene.paint.Color dmerupakan subclass concrete dari kelas abstract Paint, digunakan untuk mengencapsulate warna. Syntax: public Color(double r, double g, double b, double opacity); Contoh: Color color = new Color(0.25, 0.14, 0.333, 0.51); circle.setStroke(Color.BLACK); circle.setFill(color);

Kelas Font javafx.scene.text.Font digunakan untuk membuat object font. Object Font dapat dibuat melalui constructor atau menggunakan method static Contoh: Font font1 = new Font("SansSerif", 16); Font font2 = Font.font("Times New Roman", FontWeight.BOLD, FontPosture.ITALIC, 12); Kerjakan LISTING 14.8 FontDemo.java dihalaman 548

Image & ImageView Kelas Image (javafx.scene.image.Image) adalah kelas yang merepresentasi gambar/grafis Kelas ImageView (javafx.scene.image.ImageView) adalah kelas yang digunakan untuk menampilkan image. Contoh: Image image = new Image(“file:image/us.gif"); ImageView imageView = new ImageView(image); Format yang didukung: BMP Gif Jpeg PNG

Layout Panes JavaFX menyediakan sejumlah layout untuk meletakan nodes dilokasi dan ukuran diinginkan

FlowPane LISTING 14.10 ShowFlowPane.java 13 FlowPane pane = new FlowPane(); 14 pane.setPadding(new Insets(11, 12, 13, 14)); 15 pane.setHgap(5); 16 pane.setVgap(5);

GridPane LISTING 14.11 ShowGridPane.java 17 pane.setAlignment(Pos.CENTER); 31 GridPane.setHalignment(btAdd, HPos.RIGHT); (0,0) (1,0) (0,1) (1,1) (0,2) (1,2) (1,3)

BorderPane LISTING 14.12 ShowBorderPane.java 16 pane.setTop(new CustomPane("Top")); 17 pane.setRight(new CustomPane("Right")); 18 pane.setBottom(new CustomPane("Bottom")); 19 pane.setLeft(new CustomPane("Left")); 20 pane.setCenter(new CustomPane("Center"));

BorderPane, Hbox & Vbox LISTING 14.13 ShowHBoxVBox.java 17 BorderPane pane = new BorderPane(); 19 // Place nodes in the pane 20 pane.setTop(getHBox()); 21 pane.setLeft(getVBox());

Shapes JavaFX menyediakan banyak class shape seperti text, lines, circles, rectangles, ellipses, arcs, polygons & polylines.

Text LISTING 14.14 ShowText.java 16 Pane pane = new Pane(); 17 pane.setPadding(new Insets(5, 5, 5, 5)); // (x, y, text) 18 Text text1 = new Text(20, 20, "Programming is fun"); 19 text1.setFont(Font.font("Courier", FontWeight.BOLD, 20 FontPosture.ITALIC, 15)); 21 pane.getChildren().add(text1);

Line LISTING 14.15 ShowLine.java 21 Line line1 = new Line(10, 10, 10, 10); // (startx, starty, endx, endy) 22 line1.endXProperty().bind(widthProperty().subtract(10)); 23 line1.endYProperty().bind(heightProperty().subtract(10)); 24 line1.setStrokeWidth(5); 25 line1.setStroke(Color.GREEN); 26 getChildren().add(line1);

Rectangle LISTING 14.16 ShowRectangle.java 26 Rectangle r3 = new Rectangle(25, 90, 60, 30); // (x, y, width, height) 27 r3.setArcWidth(15); 28 r3.setArcHeight(25); 29 pane.getChildren().add(new Text(10, 107, "r3")); 30 pane.getChildren().add(r3);

Circle & Ellipse LISTING 14.17 ShowEllipse.java 16 Ellipse e1 = new Ellipse(150, 100, 100, 50); // (x, y, radius_x, radius_y)

Arc LISTING 14.18 ShowArc.java // (x, y, radx, rady, start_angle, length) 16 Arc arc1 = new Arc(150, 100, 80, 80, 30, 35); // Create an arc 18 arc1.setType(ArcType.ROUND); // Set arc type 24 arc2.setType(ArcType.OPEN); 31 arc3.setType(ArcType.CHORD);

Polygon & Polyline Polygon polygon = new Polygon(); polygon.setFill(Color.WHITE); polygon.setStroke(Color.BLACK); // Polyline polygon = new Polyline(); ObservableList<Double> list = polygon.getPoints(); // add (20, 60) list.add(20.0); list.add(60.0); // add (45, 45) list.add(45.0); list.add(45.0);

Events & Event Source Event Object dibuat dari sebuan event source. Memicu event adalah membuat event dan mendelegasi event kesebuah handler. Kelas event javafx.event.Event.

User Acation, Source Object, Event Type & cara meregistration Event

Event pada source Button

Registering Event Button 16 Button btOK = new Button("OK"); 17 Button btCancel = new Button("Cancel"); 18 OKHandlerClass handler1 = new OKHandlerClass(); 19 btOK.setOnAction(handler1); 20 CancelHandlerClass handler2 = new CancelHandlerClass(); 21 btCancel.setOnAction(handler2); 22 pane.getChildren().addAll(btOK, btCancel);

Inner Class Inner class / nested class adalah kelas yang didefinisikan didalam skop kelas lain. Inner class biasanya digunakan untuk mendefinisikan kelas handler. Syntax inner class public class Test { ... // Inner class public class A { }

Anonymous Inner class handlers Anonymous Inner class adalah class inner tanpa nama. Pendefinisian kelas dan pembuatan instance inner class dilakukan dalam 1 langkah / step. Syntax anonymous inner class btShrink.setOnAction(new EventHandler<ActionEvent>() { @Override public void handle(ActionEvent arg0) { circlePane.shrink(); } });

Lamda Expression untuk menangani Event Lamda expression adalah expresi yang mempermudah coding untuk menangani event. Lemda expression diperkenalkann di Java 8. Syntax: (type1 param1, type2 param2, ...) -> expression Atau (type1 param1, type2 param2, ...) -> { statements; } Project property -> Java Compiler -> use Complience from execution environment ‘JavaSE-1.8’ on the ‘Java Build Path’

Contoh Lamda expression // lamda expression Java 8 btShrink.setOnAction((e) -> { circlePane.shrink(); });

Mouse Events MouseEvent adalah object yang dihasilkan dari event mouse saat pressed, released, clicked, moved atau drag pada sebuah node/scene. Contoh: Text text = new Text(20, 20, "Programming is fun"); pane.getChildren().addAll(text); text.setOnMouseDragged(e -> { text.setX(e.getX()); text.setY(e.getY()); });

Key Event KeyEvent adalah object yang dihasilkan dari event key saat pressed, released, atay type pada sebuah node/scene. Contoh: Text text = new Text(20, 20, "A"); pane.getChildren().add(text); text.setOnKeyPressed(e -> { switch (e.getCode()) { case DOWN: text.setY(text.getY() + 10); break; case UP: text.setY(text.getY() - 10); break; case LEFT: text.setX(text.getX() - 10); break; case RIGHT: text.setX(text.getX() + 10); break; default: if (Character.isLetterOrDigit(e.getText().charAt(0))) text.setText(e.getText()); } });

Label & TextField Label adalah area untuk menampilkan text pendek. TextField adalah subclass TextInputControl digunakan untuk menginput text Untuk mendapatkan input user digunakan method public final String getText() Contoh: LISTING 14.11 ShowGridPane.java yang telah dimodifikasi berikut.

Contoh Label & TextField // Place nodes in the pane pane.add(new Label("First Name:"), 0, 0); TextField fName = new TextField(); pane.add(fName, 1, 0); pane.add(new Label("MI:"), 0, 1); TextField mName = new TextField(); pane.add(mName, 1, 1); pane.add(new Label("Last Name:"), 0, 2); TextField lName = new TextField(); pane.add(lName, 1, 2); Button btAdd = new Button("Add Name"); pane.add(btAdd, 1, 3); btAdd.setOnAction((e)-> { System.out.println(fName.getText() + " " + mName.getText() + " " + lName.getText()); }); GridPane.setHalignment(btAdd, HPos.RIGHT);

Review & Latihan W10 Email ke: agung.made@kwikkiangie Subject: W10 no_mahasiswa Contoh: W10 12345678 Dwiyanti Nilai: Pengumpulan sebelum minggu depan 100 Pengumpulan setelah minggu depan 60 Tidak mengumpulkan atau melewati UTS/UAS 0.

Latihan & Review Kerjalan source code LISTING 16.13 TicTacToe.java Kerjalan source code LISTING 16.14 MediaDemo.java File http://cs.armstrong.edu/liang/common/sample.mp4 dapat diganti file lain baik dari internet maupun lokal.