Bai 11 kĩ năng mềm JavaFX

Bai 11 kĩ năng mềm JavaFX 1 Bài 11 Lập trình giao diện với JavaFX 1 1 Bài giảng Elearning v JavaFx Tutorial For Beginners h4ps www youtube comwatch?v=9YrmON6nlEw list=PLS1QulWo1RIaUGP446 pWLgTZPiFizEMq v Khóa.

Bài giảng Elearning v JavaFx Tutorial For Beginners h4ps://www.youtube.com/watch?v=9YrmON6nlEw& list=PLS1QulWo1RIaUGP446_pWLgTZPiFizEMq v Khóa học lập trình JavaFX h4ps://www.youtube.com/watch?v=zAq7Lmv46PE&l ist=PL33lvabfss1yRgFCgFXjtYaGAuDJjjH-j Bài 11: Lập trình giao diện với JavaFX 1 2 Nội dung Nội dung 7 Giới thiệu Cài đặt JavaFX Các thành phần giao diện JavaFX JavaFX - UI controls JavaFX - Layout Panes Mơ hình xử lý kiện Kéo thả giao diện với SceneBuilder 3 Giới thiệu Cài đặt JavaFX Các thành phần giao diện JavaFX JavaFX - UI controls JavaFX - Layout Panes Mơ hình xử lý kiện Kéo thả giao diện với SceneBuilder 4 1 Giới thiệu Giới thiệu v Giao diện đồ họa người dùng: Graphical user interface - GUI (pronounced "GOO-ee"): Menus Title bar Combo box § Là loại giao diện người dùng § Cho phép người dùng tương tác với thiết bị điện tử, sử dụng hình ảnh thay nhập vào lệnh v Tại sử dụng thuật ngữ GUI? Menu bar Button § Giao diện tương tác người dùng đầu Kên giao diện dòng lệnh Scroll bar 5 6 Java APIs cho lập trình đồ họa JavaFX – Tính (Features) v AWT (Abstract Windowing Toolkit) v Viết Java, dùng ngôn ngữ thực thi máy ảo Java (Java, Groovy JRuby) v Hỗ trợ FXML (tương tự HTML), giúp dễ dàng định nghĩa giao diện người dùng v Scene Builder: JavaFX cung cấp ứng dụng Scene Builder tảng khác nhau, cho phép LTV kéo thả thiết kế giao diện v Tương thích với Swing: ứng dụng JavaFX nhúng thành phần Swing v Built-in UI controls: JavaFX cung cấp control đa dạng để phát triển ứng dụng v CSS like Styling: thiết kế giao diện với knh giống CSS v… § Được giới thiệu JDK 1.0 § Không nên dùng, dùng Swing thay v Swing: § Mở rộng AWT § Tích hợp vào Java từ JDK 1.2 v JavaFX: § Thư viện Java, phát triển ứng dụng đa tảng (Desktop, mobile, TV, tablet) v Các thư viện khác: § Eclipse's Standard Widget Toolkit (SWT) § Google Web Toolkit (GWT) § 3D Graphics API: Java OpenGL (JOGL), Java3D 7 8 Lịch sử JavaFX Nội dung v JavaFX phát triển Chris Oliver ông làm tập đoàn See Beyond Technology Corpora„on (Được Sun Microsystems mua lại vào 2005) v 2007: Được giới thiệu thức hội nghị Java One v 2008: Được Œch hợp vào NetBean JavaFX 1.0 ban hành v 2014: JavaFX Œch hợp vào Java SDK v 2018: JavaFX tách khỏi Java SDK 11 Giới thiệu Cài đặt JavaFX Các thành phần giao diện JavaFX JavaFX - UI controls JavaFX - Layout Panes Mơ hình xử lý kiện Kéo thả giao diện với SceneBuilder 9 10 10 JavaFX Hello World Cài đặt JavaFX import javafx.application.Application; import javafx.event.ActionEvent; import javafx.event.EventHandler; import javafx.scene.Scene; import javafx.scene.control.Button; import javafx.scene.layout.StackPane; import javafx.stage.Stage; v Trang chủ JavaFX: h4ps://openjfx.io/ v Trang download thư viện JavaFX: h4ps://gluonhq.com/products/javafx/ v Download, giải nén, copy file thư mục lib, add vào build path project v Lưu ý chạy chương trình IDE Eclipse public class HelloWorld extends Application { @Override public void start(Stage primaryStage) { Button btn = new Button(); btn.setText("Say 'Hello World'"); btn.setOnAction(new EventHandler() { @Override public void handle(ActionEvent event) { System.out.println("Hello World!"); } }); § Vào run'me configura'on, cấu hình VM arguments: • module-path ${project_classpath:REPLACE_ME_WITH_YOUR_PROJECT_NAME} addmodules javafx.controls,javafx.fxml StackPane root = new StackPane(); root.getChildren().add(btn); § Bỏ chọn: “Use the -XstartOnFirstThread argument when launching with SWT” Scene scene = new Scene(root, 300, 250); } 11 11 } primaryStage.setTitle("Hello World!"); primaryStage.setScene(scene); primaryStage.show(); public static void main(String[] args) { launch(args); } 12 12 Tiện ích JavaFX Eclipse Cài đặt e(fx)clipse v e(fx)clipse § hzps://www.eclipse.org/efxclipse/releases.html § Là Eclipse plugin § Cơng cụ hỗ trợ lập trình JavaFX Eclipse v JavaFX Scene Builder § hzps://www.oracle.com/java/technologies/javafxscenebuilder-1xarchive-downloads.html § Cơng cụ độc lập, đa tảng, thiết kế trực quan giao diện cho ứng dụng JavaFX § Cho phép kéo thả thành phần giao diện người dùng, thay đổi thuộc tính, áp dụng style § Đầu ra: file FXML dùng ứng dụng JavaFX 13 13 14 14 Cài đặt e(fx)clipse Cài đặt e(fx)clipse Nhập vào: http://download.eclipse.org/efxclipse/updatesreleased/3.0.0/site Xem Phiên tại: https://www.eclipse.org/efxclipse/releases.html 15 15 16 16 Cài đặt e(fx)clipse Cài đặt e(fx)clipse 17 17 18 18 Cài đặt e(fx)clipse Tích hợp JavaFX Scene Builder vào Eclipse v Sau cài đặt khởi động lại Eclipse, vào menu File/New/Others thấy Wizard cho phép lập trình JavaFX v Download, cài đặt JavaFX Scene Builder v Trên eclipse, vào Window/Preferences 19 19 20 20 Tích hợp JavaFX Scene Builder vào Eclipse Tích hợp JavaFX Scene Builder vào Eclipse 21 22 Nội dung Tích hợp JavaFX Scene Builder vào Eclipse Giới thiệu Cài đặt JavaFX Các thành phần giao diện JavaFX JavaFX - UI controls JavaFX - Layout Panes Mô hình xử lý kiện Kéo thả giao diện với SceneBuilder 24 23 24 Các thành phần giao diện JavaFX Stage v Cấu trúc ứng dụng JavaFX gồm thành phần chính: Stage, Scene Nodes v Đối tượng Stage (Window) chứa tất đối tượng khác ứng dụng JavaFX v Là đối tượng lớp javafx.stage.Stage v Đối tượng Stage truyền làm tham số cho phương thức start() lớp Applica\on (Xem lại ví dụ HelloWorld JavaFX) v Có tham số width height v Được chia làm phần: Content Area Decora\ons (Title bar Borders) v Để hiển thị Stage, gọi phương thức show() v Có style cho Stage: Decorated, Undecorated, Transparent, Unified, U\lity 25 25 26 26 JavaFX Hello World Stage – thiết lập style stage.initStyle(StageStyle.DECORATED); //stage.initStyle(StageStyle.UNDECORATED); //stage.initStyle(StageStyle.TRANSPARENT); //stage.initStyle(StageStyle.UNIFIED); //stage.initStyle(StageStyle.UTILITY); import javafx.application.Application; import javafx.event.ActionEvent; import javafx.event.EventHandler; import javafx.scene.Scene; import javafx.scene.control.Button; import javafx.scene.layout.StackPane; import javafx.stage.Stage; public class HelloWorld extends Application { @Override public void start(Stage primaryStage) { Button btn = new Button(); btn.setText("Say 'Hello World'"); btn.setOnAction(new EventHandler() { @Override public void handle(ActionEvent event) { System.out.println("Hello World!"); } }); StackPane root = new StackPane(); root.getChildren().add(btn); Scene scene = new Scene(root, 300, 250); } 27 27 } primaryStage.setTitle("Hello World!"); primaryStage.setScene(scene); primaryStage.show(); public static void main(String[] args) { launch(args); } 28 28 Scene Scene Graph Nodes v Scene chứa tất nội dung trình bày scene graph v Là đối tượng lớp javafx.scene.Scene v Một Scene thêm vào Stage v Một số phương thức khởi dựng: v Scene graph: cấu trúc liệu phân cấp dạng tree biểu diễn nội dung Scene, bao gồm tất controls, layout v Node: đối tượng đồ họa Scene graph, bao gồm § Đối tượng hình học (2D 3D) như: Circle, Rectangle, Polygon, … § Đối tượng điều khiển UI như: Button, Checkbox, TextArea, … § Phần tử đa phương tiện Media như: Audio, Video, Image § Scene(Parent root) § Scene(Parent root, double width, double height) § … v Lớp sở cho tất loại Node: javafx.scene.Node 29 29 30 30 Scene Graph Nodes Cây phân cấp kế thừa Node v Có loại Node: javafx.scene.Node § Branch Node/Parent Node: node có node con, lớp sở lớp javafx.scene.Parent (lớp trừu tượng) Có loại: • Group: node tổng hợp, chứa list node Khi render node Group, tất node render Các chuyển đổi hiệu ứng áp dụng cho Group áp dụng cho tất node • Region: lớp sở cho UI Controls, bao gồm Chart (AreaChart, BarChart, BubbleChart, …), Pane (AnchorPane, BorderPane, DialogPane, FlowPane, HBox, VBox …), Control (Accordion, Bu_onBar, ChoiceBox, ComboBoxBase, HTMLEditor, ) ã WebView: tng t nh Browser javafx.scene.Parent Đ Leaf Node: node khơng có node Ví dụ: Rectangle, Ellipse, Box, ImageView, MediaView javafx.scene.Group javafx.scene.layout.Region v Lưu ý: Root node branch/parent node, root node khơng có node cha javafx.scene.chart.Chart 31 31 javafx.scene.layout.Pane javafx.scene.control.Control 32 32 Cách tạo ứng dụng JavaFX Vòng đời ứng dụng JavaFX v Viết lớp kế thừa lớp javafx.applica\on.Applica\on, thực thi phương thức trừu tượng start v Có phương thức vòng đời ứng dụng JavaFX: start(), stop(), init() v Trong phương thức main, gọi phương thức sta\c launch() Phương thức launch tự động gọi phương thức start() v Cài đặt mặc định phương thức rỗng, override muốn làm v Thứ tự hành động public class JavafxSample extends Application { @Override public void start(Stage primaryStage) throws Exception { /* Code for JavaFX application (Stage, scene, scene graph) */ } public static void main(String args[]){ launch(args); } } § Tạo thể lớp applicaKon § Gọi phương thức init (không tạo stage scene phương thức này) § Gọi phương thức start § Khi ứng dụng kết thúc, gọi phương thức stop v Khi cửa sổ (window) cuối ứng dụng JavaFX đóng, ứng dụng tự động kết thúc Có thể gọi tường minh với phương thức Pla†orm.exit() System.exit(int) 33 33 34 34 Cài đặt phương thức start Tạo scene graph v bước: v Cần tạo node gốc, Group, Region WebView § Tạo Scene graph với Node § Tạo Scene với kích thước mong muốn thêm vào root node scene graph § Tạo Stage, thêm Scene vào Stage, hiển thị nội dung Stage § VD: Group root = new Group(); v Thêm node vào root node theo cách § Cách 1: //Retrieving the observable list object ObservableList list = root.getChildren(); //Setting a node object as a node list.add(NodeObject); § Cách 2: Group root = new Group(NodeObject); 35 35 36 36 Tạo Scene Tạo Stage v Khởi tạo đối tượng Scene, bắt buộc phải truyền tham số root object v Đối tượng Stage truyền làm tham số cho phương thức start() lớp Applica„on không cần khởi tạo v Thao tác Scene scene = new Scene(root); v Có thể vừa khởi tạo vừa thiết lập kích thước Scene //Setting the title to Stage primaryStage.setTitle("Sample application"); //Setting the scene to Stage primaryStage.setScene(scene); Scene scene = new Scene(root, 600, 300); //Displaying the stage primaryStage.show(); 37 37 38 38 Ví dụ: tạo ứng dụng với cửa sổ JavaFX rỗng Ví dụ: tạo ứng dụng với cửa sổ JavaFX rỗng public class JavafxSample extends Application { @Override public void start(Stage primaryStage) throws Exception { //creating a Group object Group group = new Group(); //Creating a Scene Scene scene = new Scene(group ,600, 300); //setting color to the scene scene.setFill(Color.BROWN); //Setting the title to Stage primaryStage.setTitle("Sample Application"); //Adding the scene to Stage primaryStage.setScene(scene); } 39 //Displaying the contents of the stage primaryStage.show(); } public static void main(String args[]){ launch(args); } 39 40 40 10 VD: vẽ đường thẳng VD: vẽ đường thẳng public class DrawingLine extends Application{ @Override public void start(Stage stage) { //Creating a line object Line line = new Line(); //Setting the properties to a line line.setStartX(100.0); line.setStartY(150.0); line.setEndX(500.0); line.setEndY(150.0); //Creating a Group Group root = new Group(line); //Creating a Scene Scene scene = new Scene(root, 600, 300); //Setting title to the scene stage.setTitle("Sample application"); //Adding the scene to the stage stage.setScene(scene); } //Displaying the contents of a scene stage.show(); } public static void main(String args[]){ launch(args); } 41 41 42 42 VD: hiển thị dòng chữ public class DisplayingText extends Application { @Override public void start(Stage stage) { //Creating a Text object Text text = new Text(); //Setting font to the text text.setFont(new Font(45)); VD: hiển thị dòng chữ //setting the position of the text text.setX(50); text.setY(150); //Setting the text to be added text.setText("Welcome to Tutorialspoint"); //Creating a Group object Group root = new Group(); //Retrieving the observable list object ObservableList list = root.getChildren(); //Setting the text object as a node to the group object list.add(text); //Creating a scene object Scene scene = new Scene(root, 600, 300); //Setting title to the Stage stage.setTitle("Sample Application"); //Adding scene to the stage stage.setScene(scene); } 43 //Displaying the contents of the stage stage.show(); } public static void main(String args[]){ launch(args); } 43 44 44 11 Ví dụ: hiển thị dịng text Ví dụ: hiển thị dòng text //setting the position of the text text2.setX(50); text2.setY(150); public class DecorationsExample extends Application { @Override public void start(Stage stage) { //Creating a Text_Example object Text text1 = new Text("Hi how are you"); //underlining the text text2.setUnderline(true); //Setting font to the text text1.setFont( Font.font("verdana", FontWeight.BOLD, FontPosture.REGULAR, 20) ); //Creating a Group object Group root = new Group(text1, text2); //setting the position of the text text1.setX(50); text1.setY(75); //Creating a scene object Scene scene = new Scene(root, 600, 300); //Striking through the text text1.setStrikethrough(true); //Setting title to the Stage stage.setTitle("Decorations Example"); //Creating a Text_Example object Text text2 = new Text("Welcome to Tutorialspoint"); //Adding scene to the stage stage.setScene(scene); //Setting font to the text text2.setFont( Font.font("verdana", FontWeight.BOLD, FontPosture.REGULAR, 20) ); } //Displaying the contents of the stage stage.show(); } public static void main(String args[]){ launch(args); } 45 45 46 46 Nội dung Ví dụ: hiển thị dịng text 47 47 Giới thiệu Cài đặt JavaFX Các thành phần giao diện JavaFX JavaFX - UI controls JavaFX - Layout Panes Mơ hình xử lý kiện Kéo thả giao diện với SceneBuilder 48 48 12 Java FX - UI Controls Java FX - UI Controls Một giao diện người dùng gồm thành phần v UI elements − Là phần tử người dùng thấy sau trực tiếp tương tác với (Button, Label, Checkbox, …) v Layouts − Định nghĩa cách thức xếp UI elements hình v Behavior − Các kiện xảy người dùng tương tác với UI elements (Event Handling) 49 49 50 50 Java FX - UI Controls Ví dụ (1/5) v Viết ứng dụng với giao diện sau 51 51 52 52 13 Ví dụ (2/5) import import import import javafx.application.Application; static javafx.application.Application.launch; javafx.geometry.Insets; javafx.geometry.Pos; import import import import import import import javafx.scene.Scene; javafx.scene.control.Button; javafx.scene.control.PasswordField; javafx.scene.layout.GridPane; javafx.scene.text.Text; javafx.scene.control.TextField; javafx.stage.Stage; Ví dụ (3/5) public class LoginPage extends Application { @Override public void start(Stage stage) { //creating label email Text text1 = new Text("Email"); //creating label password Text text2 = new Text("Password"); //Creating Text Filed for email TextField textField1 = new TextField(); //Creating Text Filed for password PasswordField textField2 = new PasswordField(); //Creating Buttons Button button1 = new Button("Submit"); Button button2 = new Button("Clear"); 53 53 54 54 Ví dụ (4/5) Ví dụ (5/5) //Creating a Grid Pane GridPane gridPane = new GridPane(); //Styling nodes button1.setStyle("-fx-background-color: darkslateblue; -fx-text-fill: white;"); button2.setStyle("-fx-background-color: darkslateblue; -fx-text-fill: white;"); //Setting size for the pane gridPane.setMinSize(400, 200); text1.setStyle("-fx-font: normal bold 20px 'serif' "); text2.setStyle("-fx-font: normal bold 20px 'serif' "); gridPane.setStyle("-fx-background-color: BEIGE;"); //Setting the padding gridPane.setPadding(new Insets(10, 10, 10, 10)); //Creating a scene object Scene scene = new Scene(gridPane); //Setting the vertical and horizontal gaps between the columns gridPane.setVgap(5); gridPane.setHgap(5); //Setting title to the Stage stage.setTitle("CSS Example"); //Setting the Grid alignment gridPane.setAlignment(Pos.CENTER); //Adding scene to the stage stage.setScene(scene); //Displaying the contents of the stage stage.show(); } public static void main(String args[]){ launch(args); } //Arranging all the nodes in the grid gridPane.add(text1, 0, 0); gridPane.add(textField1, 1, 0); gridPane.add(text2, 0, 1); gridPane.add(textField2, 1, 1); gridPane.add(button1, 0, 2); gridPane.add(button2, 1, 2); } 55 55 56 56 14 Nội dung JavaFX - Layout Panes (Container) v Sau tạo node scene, cần xếp trình bày node v Layout container: cách xếp node nằm container v Các loại layout JavaFX: HBox, VBox, Border Pane, Stack Pane, Text Flow, Anchor Pane, Title Pane, Grid Pane, Flow Panel, … v Mỗi loại layout ứng với class, tất class nằm gói javafx.layout, lớp Pane lớp sở tất lớp layout Giới thiệu Cài đặt JavaFX Các thành phần giao diện JavaFX JavaFX - UI controls JavaFX - Layout Panes Mơ hình xử lý kiện Kéo thả giao diện với SceneBuilder 58 57 57 58 Các bước tạo Layout Ví dụ với layout HBox v Tạo nodes v Khởi tạo đối tượng lớp layout mong muốn v Thiết lập thuộc tính cho layout v Thêm tất nodes tạo vào layout v Đặc điểm: node xếp theo hàng ngang v Một số thuộc Œnh quan trọng: § alignment: gióng hàng node § spacing: khoảng cách node v Khởi tạo HBox // Khởi tạo rỗng HBox hbox = new HBox(); // Khởi tạo với node Button button1 = new Button("Button Number 1"); Button button2 = new Button("Button Number 2"); HBox hbox = new HBox(button1, button2); 59 59 60 60 15 Ví dụ với layout HBox Ví dụ với layout HBox import javafx.application.Application; import javafx.geometry.Pos; import javafx.scene.Scene; import javafx.scene.control.Button; import javafx.scene.layout.HBox; import javafx.stage.Stage; public class HBoxExperiments extends Application { @Override public void start(Stage primaryStage) throws Exception { primaryStage.setTitle("HBox Experiment 1"); import javafx.application.Application; import javafx.geometry.Pos; import javafx.scene.Scene; import javafx.scene.control.Button; import javafx.scene.layout.HBox; import javafx.stage.Stage; public class HBoxExperiments extends Application { @Override public void start(Stage primaryStage) throws Exception { primaryStage.setTitle("HBox Experiment 1"); Button button1 = new Button("Button Number 1"); Button button2 = new Button("Button Number 2"); Button button3 = new Button("Button Number 3"); Button button1 = new Button("Button Number 1"); Button button2 = new Button("Button Number 2"); Button button3 = new Button("Button Number 3"); HBox hbox = new HBox(button1, button2); hbox.setSpacing(10); hbox.setAlignment(Pos.BOTTOM_CENTER); hbox.getChildren().add(button3); HBox hbox = new HBox(button1, button2); hbox.setSpacing(10); hbox.setAlignment(Pos.BOTTOM_CENTER); hbox.getChildren().add(button3); Scene scene = new Scene(hbox, 400, 100); primaryStage.setScene(scene); primaryStage.show(); Scene scene = new Scene(hbox, 400, 100); primaryStage.setScene(scene); primaryStage.show(); } } } } 61 61 62 62 Ví dụ với layout Group Ví dụ với layout HBox v Group: khơng xếp component nó, tất tọa độ (0, 0) import javafx.application.Application; import javafx.scene.Group; import javafx.scene.Scene; import javafx.scene.control.Button; import javafx.stage.Stage; public class GroupExperiments extends Application { @Override public void start(Stage primaryStage) throws Exception { primaryStage.setTitle("HBox Experiment 1"); BOTTOM_CENTER Button button1 = new Button("Button Number 1"); Button button2 = new Button("Button 2"); BASELINE_RIGHT Group group = new Group(); group.getChildren().add(button1); group.getChildren().add(button2); TOP_LEFT } 63 63 } Scene scene = new Scene(group, 200, 100); primaryStage.setScene(scene); primaryStage.show(); bu_on tọa độ (0, 0), đè lên 64 64 16 Một số layout khác Một số layout khác v FlowPane: xếp thành phần liên tiếp dòng, tự động đẩy phần tử xuống dòng dòng khơng cịn chỗ trống v GridPane: chia thành lưới gồm hàng cột Một thành phần nằm lưới nằm ô hợp từ ô gần 65 66 65 66 Một số layout khác Một số layout khác v BorderPane: chia thành vùng riêng biệt, vùng chứa thành phần v BorderPane: Nếu vùng khơng chứa thành phần con, vùng khác chiếm lấy không gian v Ví dụ: Vùng TOP khơng có thành phần con, khơng gian bị thành phần khác chiếm chỗ: 67 67 68 68 17 Nội dung Mơ hình xử lý kiện v Các kiện chia làm hai loại: Giới thiệu Cài đặt JavaFX Các thành phần giao diện JavaFX JavaFX - UI controls JavaFX - Layout Panes Mơ hình xử lý kiện Kéo thả giao diện với SceneBuilder § Foreground Events − Là kiện cần người dùng tương tác trực tiếp VD: nhấn chuột vào button, di chuyển chuột, gõ ký tự, chọn item list, cuộn trang, … § Background Events − VD: can thiệp hệ điều hành, lỗi phần mềm/phần cứng, hết giờ, hoàn thiện thao tác đó, … 70 69 69 70 Mơ hình xử lý kiện Mơ hình xử lý kiện v Lớp sở cho loại kiện: javafx.event.Event v Xử lý kiện (Event Handling): cài đặt code - thực thi kiện xác định xảy v JavaFX hỗ trợ xử lý nhiều loại kiện v JavaFX cung cấp handlers filters để xử lý kiện Mỗi kiện có thuộc tính: § Mouse Event − Sự kiện xảy nhấn chuột (mouse clicked, mouse pressed, mouse released, mouse moved, mouse entered target, mouse exited target) Lớp tương ứng MouseEvent § Key Event − Sự kiện xảy nhấn phím (key pressed, key released and key typed) Lớp tương ứng KeyEvent § Drag Event − Sự kiện xảy rê chuột (drag entered, drag dropped, drag entered target, drag exited target, drag over) Lớp tương ứng DragEvent § Window Event − Sự kiện xảy hiện/ẩn cửa sổ (window hiding, window shown, window hidden, window showing) Lớp tương ứng WindowEvent § Event Target − Node xảy kiện Target stage, scene, node § Event Source − Là đối tượng có trạng thái thay đổi, sinh kiện Ví dụ: chuột, bàn phím, § Event Type − Kiểu kiện Ví dụ, với nguồn kiện chuột, kiểu kiện mouse pressed, mouse released v Khi kiện xảy ra, event source tạo đối tượng event chuyển đối tượng đến xử lý kiện 71 71 72 72 18 Ví dụ Các bước xử lý kiện JavaFX v Với ứng dụng JavaFX hình, nhấp chuột vào nút play, source chuột, target nút play, kiểu kiện sinh mouse click v bước: § § § § Target selecKon Route construcKon Event capturing Event bubbling h_ps://docs.oracle.com/javafx/2/events/processing.htm 73 73 74 74 Các bước xử lý kiện JavaFX Các bước xử lý kiện JavaFX v Bước 1: Target selec„on (xác định target node) Khi hành động xảy ra, hệ thống xác định target node theo luật sau: v Bước 2: Route Construc„on – Tạo chuỗi kiện phát sinh (Event Dispatch chain): đường từ stage tới target node § Với kiện nhấn phím, target node node focus § Với kiện nhấn chuột, target node node ứng với vị trí chuột § … (một số kiện khác thiết bị cảm ứng) 75 75 76 76 19 Các bước xử lý kiện JavaFX Các bước xử lý kiện JavaFX v Bước 3: Event Capturing (bắt kiện) v Bước 4: Nổi bọt kiện (Event Bubbling) § Sau tạo chuỗi kiện, root node ứng dụng gửi kiện (dispatch event) § Sự kiện dọc theo node từ xuống (top to bottom) Nếu node đăng ký filter cho kiện sinh ra, filter thực thi § Nếu filter consume event cách gọi phương thức consume() từ đối tượng event tạo ra, trình xử lý kiện kết thúc § Nếu event chưa consume, cuối kiện chuyển tới cho target node § Sự kiện ngược lên trên, từ target node ti root node (boãom to top) Đ Nu bt kỳ node event dispatch chain đăng ký handler cho kiện sinh ra, handler thực thi § Nếu khơng handler consume event, kiện chuyển tới root node, hoàn thành việc xử lý 77 77 78 78 Các bước xử lý kiện JavaFX Thêm/bỏ filter v Event Handlers Event Filters: chứa logic ứng dụng để xử lý kiện v Một node đăng ký nhiều handler/filter v filter/handler cho parent node cài đặt xử lý mặc định cho tất node v Tất handlers filters thực thi giao diện javafx.event.EventHandler v Thêm filter //Creating the mouse event handler EventHandler eventHandler = new EventHandler() { @Override public void handle(MouseEvent e) { System.out.println("Hello World"); circle.setFill(Color.DARKSLATEBLUE); } }; //Adding event Filter Circle.addEventFilter(MouseEvent.MOUSE_CLICKED, eventHandler); v Bỏ filter circle.removeEventFilter(MouseEvent.MOUSE_CLICKED, eventHandler); 79 79 80 80 20 ... vào NetBean JavaFX 1.0 ban hành v 2014: JavaFX Œch hợp vào Java SDK v 2018: JavaFX tách khỏi Java SDK 11 Giới thiệu Cài đặt JavaFX Các thành phần giao diện JavaFX JavaFX - UI controls JavaFX - Layout... 9 10 10 JavaFX Hello World Cài đặt JavaFX import javafx. application.Application; import javafx. event.ActionEvent; import javafx. event.EventHandler; import javafx. scene.Scene; import javafx. scene.control.Button;... JavaFX Scene Builder vào Eclipse Tích hợp JavaFX Scene Builder vào Eclipse 21 22 Nội dung Tích hợp JavaFX Scene Builder vào Eclipse Giới thiệu Cài đặt JavaFX Các thành phần giao diện JavaFX JavaFX