Bài giảng Lập trình hướng đối tượng: Bài 11 - Lập trình giao diện với JavaFX

Bài giảng Lập trình hướng đối tượng: Bài 11 - Lập trình giao diện với JavaFX được biên soạn bao gồm các nội dung chính sau: Giới thiệu giao diện với JavaFX; 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ý sự kiện; Kéo thả giao diện với SceneBuilder. Mời các bạn cùng tham khảo bài giảng.

Bài 11: Lập trình giao diện với JavaFX Bài giảng Elearning ❖ JavaFx Tutorial For Beginners https://www.youtube.com/watch?v=9YrmON6nlEw& list=PLS1QulWo1RIaUGP446_pWLgTZPiFizEMq ❖ Khóa học lập trình JavaFX https://www.youtube.com/watch?v=zAq7Lmv46PE&l ist=PL33lvabfss1yRgFCgFXjtYaGAuDJjjH-j Nội dung 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 Nội dung 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 Giới thiệu ❖ Giao diện đồ họa người dùng: Graphical user interface - GUI (pronounced "GOO-ee"): ▪ 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 ❖ Tại sử dụng thuật ngữ GUI? ▪ Giao diện tương tác người dùng giao diện dòng lệnh Giới thiệu Menus Title bar Menu bar Combo box Button Scroll bar Java APIs cho lập trình đồ họa ❖ AWT (Abstract Windowing Toolkit) ▪ Được giới thiệu JDK 1.0 ▪ Không nên dùng, dùng Swing thay ❖ Swing: ▪ Mở rộng AWT ▪ Tích hợp vào Java từ JDK 1.2 ❖ JavaFX: ▪ Thư viện Java, phát triển ứng dụng đa tảng (Desktop, mobile, TV, tablet) ❖ Các thư viện khác: ▪ Eclipse's Standard Widget Toolkit (SWT) ▪ Google Web Toolkit (GWT) ▪ 3D Graphics API: Java OpenGL (JOGL), Java3D JavaFX – Tính (Features) ❖ Viết Java, dùng ngôn ngữ thực thi máy ảo Java (Java, Groovy JRuby) ❖ Hỗ trợ FXML (tương tự HTML), giúp dễ dàng định nghĩa giao diện người dùng ❖ 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 ❖ Tương thích với Swing: ứng dụng JavaFX nhúng thành phần Swing ❖ Built-in UI controls: JavaFX cung cấp control đa dạng để phát triển ứng dụng ❖ CSS like Styling: thiết kế giao diện với tính giống CSS ❖… Lịch sử JavaFX ❖ JavaFX phát triển Chris Oliver ông làm tập đoàn See Beyond Technology Corporation (Được Sun Microsystems mua lại vào 2005) ❖ 2007: Được giới thiệu thức hội nghị Java One ❖ 2008: Được tích hợp vào NetBean JavaFX 1.0 ban hành ❖ 2014: JavaFX tích hợp vào Java SDK ❖ 2018: JavaFX tách khỏi Java SDK 11 Nội dung 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 10 Ví dụ ❖ Khi nhấn chuột vào circle Lưu ý thứ tự thực Filter thực trước, Handler thực sau Filter flow pane thực trước Filter circle Handler circle thực trước Handler flow pane 85 Ví dụ ❖ Khi nhấn chuột vào button Lưu ý: Hanlder flow pane không thực click vào circle Nguyên nhân handler button mặc định consume event 86 Ví dụ ❖ Sửa đổi lại filter flow pane sau fp.addEventFilter(MouseEvent.MOUSE_CLICKED, new EventHandler() { @Override public void handle(MouseEvent arg0) { text.appendText("Filter in flow pane\n"); arg0.consume(); } }); 87 Ví dụ ❖ Khi nhấp chuột vào circle (hoặc button), event consume, nên kết sau: 88 Nội dung 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 89 Kéo thả giao diện với SceneBuilder ❖ Ý tưởng: tách biệt giao diện với logic xử lý nghiệp vụ ▪ Giao diện ứng dụng: thiết kế file fxml ▪ Logic xử lý (controller): tách biệt riêng file mã nguồn Java ❖ Các bước thực hiện: ▪ Cài đặt SceneBuilder ▪ Tạo giao diện (file fxml), định nghĩa thuộc tính cho component (tên component, phương thức xử lý kiện) ▪ Tạo JavaFX project ▪ Copy file giao diện fxml vào JavaFX project ▪ Cài đặt controller ▪ Kết nối file giao diện fxml với controller ▪ Tạo ứng dụng JavaFX, load file fxml 90 Ví dụ ❖ Viết ứng dụng: Khi nhấn button “Say Hello”, in dòng chữ Hello World textbox 91 Tạo file SayHello.fxml với SceneBuilder Kéo thả container VBox Tương tự, kéo thả Button Textarea mục “Controls” 92 Chỉnh sửa thuộc tính button Chọn Button, vào tab Properties bên phải, sửa thuộc tính Text “Say Hello” 93 Chỉnh sửa thuộc tính button Vẫn chọn Button, vào tab Code bên phải, sửa thuộc tính id sayHelloButton, sửa thuộc tính onAction sayHello Tương tự, sửa id TextArea textHello 94 Tạo project JavaFX ❖ Tạo project JavaFX bình thường, copy file SayHello.fxml vào project 95 Cài đặt Controller: tạo lớp MyController import java.net.URL; import java.util.ResourceBundle; import javafx.event.ActionEvent; import javafx.fxml.FXML; import javafx.fxml.Initializable; import javafx.scene.control.Button; import javafx.scene.control.TextArea; Lưu ý: tên Button tên TextArea phải khớp với id tạo SceneBuilder public class MyController implements Initializable { @FXML private Button sayHelloButton; @FXML private TextArea textHello; @Override public void initialize(URL location, ResourceBundle resources) { } public void sayHello(ActionEvent event) { textHello.setText("Hello World"); } } 96 Kết nối file giao diện fxml với controller ❖ Sửa lại file SayHello.fxml: thêm thuộc tính fx:controller cho thẻ Vbox, trỏ tới lớp MyController vừa tạo (dùng full name) 97 Tạo ứng dụng JavaFX, load file fxml import javafx.application.Application; import javafx.fxml.FXMLLoader; import javafx.scene.Parent; import javafx.scene.Scene; import javafx.stage.Stage; public class MyApplication extends Application { @Override public void start(Stage primaryStage) { try { // Đọc file fxml vẽ giao diện Parent root = FXMLLoader.load(getClass() getResource("/oop/hust/SayHello.fxml")); primaryStage.setTitle("My Application"); primaryStage.setScene(new Scene(root)); primaryStage.show(); } catch(Exception e) { e.printStackTrace(); } } public static void main(String[] args) { launch(args); } } 98 Tài liệu tham khảo ❖ http://tutorials.jenkov.com/javafx/overview.html 99 ... 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 Java FX - UI Controls Một giao diện ngườ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 Giới thiệu ❖ Giao diện đồ họa người dùng:... NetBean JavaFX 1.0 ban hành ❖ 2014: JavaFX tích hợp vào Java SDK ❖ 2018: JavaFX tách khỏi Java SDK 11 Nội dung Giới thiệu Cài đặt JavaFX Các thành phần giao diện JavaFX JavaFX - UI controls JavaFX -