Presentasi sedang didownload. Silahkan tunggu

Presentasi sedang didownload. Silahkan tunggu

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

Presentasi serupa


Presentasi berjudul: "Java Programming (MKB614C) MINGGU 10 Java Programming (MKB614C) Minggu 10 Page 1 Pokok Bahasan: Dasar JavaFX Tujuan Instruksional Khusus: Siswa memahami."— Transcript presentasi:

1

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

3 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 Minggu 10 Page 2 Java Programming (MKB614C)

4 Pengantar JavaFX Minggu 10 Page 3 Java Programming (MKB614C) 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.

5 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.

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

7 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 public void start(Stage arg0) throws Exception { // TODO Auto-generated method stub }

8 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).

9 Contoh // 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 }

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

11 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

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

13 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 }

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

15 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);

16 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); System.out.println("d1 is " + d1.getValue() + " and d2 is " + d2.getValue()); d1.setValue(10.2); System.out.println("d1 is " + d1.getValue() + " and d2 is " + d2.getValue()); 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

17 ShowCircleCentered.java // 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 );

18 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

19 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);

20 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

21 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

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

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

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

25 BorderPane LISTING 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"));

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

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

28 Text LISTING 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);

29 Line LISTING 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);

30 Rectangle LISTING 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);

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

32 Arc LISTING 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);

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

34 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.

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

36 Event pada source Button

37 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);

38 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 {... }

39 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 () public void handle(ActionEvent arg0) { circlePane.shrink(); } });

40 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’

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

42 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()); });

43 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()); } });

44 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() String Contoh: LISTING ShowGridPane.java yang telah dimodifikasi berikut.

45 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);

46 Review & Latihan W10 ke: Subject: W10 no_mahasiswa –Contoh: W Dwiyanti Nilai: –Pengumpulan sebelum minggu depan 100 –Pengumpulan setelah minggu depan 60 –Tidak mengumpulkan atau melewati UTS/UAS 0.

47 Latihan & Review 1.Kerjalan source code LISTING TicTacToe.java 2. Kerjalan source code LISTING MediaDemo.java File mple.mp4 dapat diganti file lain baik dari internet maupun lokal.


Download ppt "Java Programming (MKB614C) MINGGU 10 Java Programming (MKB614C) Minggu 10 Page 1 Pokok Bahasan: Dasar JavaFX Tujuan Instruksional Khusus: Siswa memahami."

Presentasi serupa


Iklan oleh Google