Bài báo cáo giới thiệu JavaFX

Học phần: Lập trình hướng đối tượng Bài báo cáo: Giới thiệu JavaFX Giảng viên hướng dẫn: Thầy Nguyễn Mạnh Sơn Hà Nội, năm 2020 Mục lục Chương 1. Tổng quan về JavaFX. JavaFX là gì? 3 1. Giới thiệu JavaFX 3 2. Những ưu điểm nổi bật của ngôn ngữ lập trình JavaFX 3 3. Các tính năng chính 3 4. Những gì có thể xây dựng với JavaFX 4 Chương 2. Cấu Trúc Ứng Dụng JavaFX 6 1. STAGE 6 2. SCENE 6 3. SCENE GRAPH 6 Chương 3. Các thành phần tương tác giao diện tích hợp 8 1. JavaFX Container Components 8 1.1. Tổng quan về Container: 8 1.2. Hbox và VBox: 9 1.3. FlowPane 10 1.4. GridPane: 11 1.5. AnchorPane 13 1.6. BorderPane 14 1.7. Dialog(hộp thoại) 16 1.8. ToolBar 16 1.9. ProgressBar 17 2. JavaFX Controller Components 18 1.1. Label 18 1.2. Button 19 1.3. CheckBox 21 1.4. ChoiceBox 23 1.5. TextField 24 1.6. TextArea 26 1.7. PasswordField 28 1.8. Slider 29 1.9. Table 30 3. Java Menu Components 33 1.1. MenuBar, Menu, MenuItem 33 1.2. CheckMenuItem, RadioMenuItem và SeparatorMenuItem 35 1.3. JavaFX ContextMenu 37 4. EventHandling 39 1.1. Foreground Events 39 1.2. Background Events 39 5. CSS 42 Chương 1. Tổng quan về JavaFX. JavaFX là gì? 1. Giới thiệu JavaFX • JavaFX là một bộ đồ họa và các gói media cho phép các nhà phát triển thiết kế, tạo ra, kiểm tra, gỡ lỗi và triển khai các ứng dụng khách giàu có hoạt động liên tục trên nhiều nền tảng khác nhau. • JavaFX là nền tảng để tạo và phân phối các ứng dụng dành cho máy tính để bàn cũng như các ứng dụng RIAs (Rich Internet Applications) có thể chạy trên nhiều thiết bị khác nhau. • JavaFX được phát triển bởi kỹ sư Chris Oliver, ban đầu dự án được đặt tên là F3 (Form Follows Functions). Sau đó vào năm 2005 thì Sun MicroSystems đã mua lại dự án F3 và đổi tên thành JavaFX. • JavaFX dự định thay thế hoàn toàn Swing làm thư viện GUI chuẩn cho Java SE. JavaFX hỗ trợ cho các máy tính để bàn và trình duyệt web trên nền tảng Windows, Linux và macOS. 2. Những ưu điểm nổi bật của ngôn ngữ lập trình JavaFX • JavaFX là một thư viện Java bao gồm các lớp và các giao diện được viết bằng mã Java nguyên gốc. • FXML là một ngôn ngữ khai báo dựa trên XML để xây dựng một giao diện người dùng trong ứng dụng JavaFX. Lập trình viên có thể sử dụng JavaFX Scene Builder để thiết kế giao diện đồ họa (GUI). • JavaFX có thể được tùy biến giao diện thêm sinh động bằng cách sử dụng CSS. • JavaFX hỗ trợ đồ họa 2D và 3D cũng như hỗ trợ âm thanh và video. • JavaFX còn có WebView dựa trên trình duyệt WebKit, vì vậy bạn có thể nhúng các trang web hoặc các ứng dụng web bên trong JavaFX. 3. Các tính năng chính • JAVA APIs: Các API được thiết kế để trở thành một thay thế thân thiện hơn cho các ngôn ngữ của máy ảo Java (Java VM) như là Jruby và Scala • FXML Và Scene Builder: FXML là một ngôn ngữ đánh dấu khai báo dựa trên XML nhằm cấu tạo nên giao diện ứng dụng JavaFX. Người dùng có thể code bằng FXML hoặc sử dụng JavaFX Scene Builder để tương tác và thiết kế giao diện đồ họa người dùng. Scene Builder tạo ra các đánh dấu (markup), các đánh dấu này sau đó có thể chuyển vào IDE các business logic • Webview: Một thành tố của web sử dụng công nghệ WebKitHTML giúp nhúng 1 trang web trong 1 ứng dụng JavaFX. JavaScript chạy trong WebView có thể gọi đến các JaVA API và ngược lại. • Tương tác với Swing: Các ứng dụng được tạo bằng Swing có thể được cập nhật thêm các tính năng của JavaFX • Builtin UI controls (Các thành phần tương tác giao diện tích hợp ) và CSS: JavaFX cung cấp tất cả các UI controls thông dụng nhất giúp người dùng tạo nên một ứng dụng hoàn chỉnh. Các thành phần có thể thay đổi hình thức hiển thị thông qua CSS. • Canvas API • Hỗ trợ cảm ứng đa điểm ( Multitouch): • Hỗ trợ HiDPI: JavaFX hỗ trợ hiển thị với độ phần giải cao • Các phần mềm truyền thông hiệu xuất cao: Hỗ trợ xem các nội dung đã phương tiện trên web. Nó cung cấp 1 framework truyền thông ổn định, độ trễ thấp dựa trên GStreamer Multimedia Framework. • Mô hình triển khai ứng dụng độc lập: Các gói ứng dụng độc lập chứa tất cả các tài nguyên của ứng dụng và bản sao runtimes riêng của Java và JavaFX 4. Những gì có thể xây dựng với JavaFX Với JavaFX, ta có thể xây dựng nhiều loại ứng dụng. Thông thương, chúng là các ứng dụng nhận biết mạng được triển khai trên nhiều nền tảng và hiển thị thông tin trong một giao diện người dùng hiện đại hiệu năng cao có tính năng âm thanh, video, đồ họa và hình ảnh động.  Các ứng dụng JavaFX Ứng dụng mẫu Miêu tả JavaFX Ensemble8 là một thư viện các ứng dụng mẫu minh họa rất nhiều các tính năng của JavaFX, bao gồm animation, biểu đồ và điều khiển. Bạn có thể xem và tương tác với mỗi ứng dụng mẫu đang chạy trên tất cả các nền tảng và đọc miêu tả của nó. Trên nền tảng máy tính, bạn có thể sao chép mã nguồn của từng mẫu, điều chỉnh các thuộc tính của các thành phần mẫu được sử dụng trong một vài mẫu và theo các liên kết tới tài liệu API có liên quan khi bạn kết nối với Internet. Modena là một ứng dụng mẫu thể hiện giao diện của các thành phần UI sử dụng Modena theme. Nó cho phép bạn lựa chọn đói chiếu các chủ đề của Modena và Caspian, và khám phá các khía cạnh khác nhau của các chủ đề này. 3DViewer là một ứng dụng mẫu cho phép bạn điều hướng và kiểm tra một 3D scene bằng cách di chuột. 3DViewer có bộ nhập các tập hợp con các tính năng trong OBJ và Maya files. Khả năng nhập animation cũng được cung cấp cho các tệp Maya. 3DViewer cũng hỗ trọ việc xuất nội dung của scene như là 1 file Java hoặc file FXML. Chương 2. Cấu Trúc Ứng Dụng JavaFX Chương trình JavaFX được phân bậc thành 3 thành tố chính: Stage, Scene và Node. Để tạo một chương trình JavaFX ta cần import class javafx.application.Application. Việc này cung cấp ta những phương thức trong ứng dụng JavaFX. o public void init(); o public abstract void start(Stage primaryStage); o public void stop(); Để tạo ra một chương trình JavaFX cơ bản ta cần: 1. Import javafx.application.Application vào code. 2. Kế thứa Application vào class của chương trình. 3. Override phương thức start() trong class Application . 1. STAGE Tương tự như Frame trong Swing, nó tạo ra một phần chứa tất cả các object trong JavaFX. Stage chính ban đầu được tạo bởi nền tảng. Các stage phát sinh sau có thể được tạo bằng ứng dụng. Các object trong Stage chính được chuyển tới phương thức start(). Ta cần gọi phương thức show() trong object của Stage chính để hiện stage chính lên màn hình. Stage chính có giao diện như sau: 2. SCENE Scene chứa các node trong chương trình JavaFX. Javafx.scene.Scene chưa tất cả các phương thức để sử dụng cho đối tượng trong scene. Scene được tạo ra nhằm hình tượng hóa nội dung trong stage. 3. SCENE GRAPH Tồn tại ở hình thức đơn giản nhất. là tập hợp của các node. Các node là nhưng thành phần trong stage. Nó có thể là nút, khung chữ, bố cục, hình ảnh, nút chỉnh âm thanh, check bov, vv... Các node được mô tả bởi một cấu trúc hình cây. Nó bao gồm một node mẹ có vai trò là node gốc cho các node còn lại trong scene graph.

Học Viện Cơng Nghệ Bưu Chính Viễn Thơng Khoa: Cơng Nghệ Thơng Tin Học phần: Lập trình hướng đối tượng Bài báo cáo: Giới thiệu JavaFX Giảng viên hướng dẫn: Thầy Nguyễn Mạnh Sơn Hà Nội, năm 2020 1|Page Mục lục Chương Tổng quan JavaFX JavaFX gì? Giới thiệu JavaFX Những ưu điểm bật ngôn ngữ lập trình JavaFX .3 Các tính Những xây dựng với JavaFX Chương Cấu Trúc Ứng Dụng JavaFX .6 STAGE .6 SCENE .6 SCENE GRAPH Chương 3 Các thành phần tương tác giao diện tích hợp JavaFX Container Components 1.1 Tổng quan Container: 1.2 Hbox VBox: 1.3 FlowPane 10 1.4 GridPane: 11 1.5 AnchorPane .13 1.6 BorderPane .14 1.7 Dialog(hộp thoại) 16 1.8 ToolBar 16 1.9 ProgressBar .17 JavaFX Controller Components .18 1.1 Label .18 1.2 Button .19 1.3 CheckBox 21 1.4 ChoiceBox .23 1.5 TextField 24 1.6 TextArea 26 1.7 PasswordField 28 1.8 Slider .29 1.9 Table .30 Java Menu Components 33 1.1 MenuBar, Menu, MenuItem 33 1.2 CheckMenuItem, RadioMenuItem SeparatorMenuItem .35 1.3 JavaFX ContextMenu .37 EventHandling 39 1.1 Foreground Events 39 1.2 Background Events 39 2|Page CSS 42 Chương Tổng quan JavaFX JavaFX gì? Giới thiệu JavaFX  JavaFX đồ họa gói media cho phép nhà phát triển thiết kế, tạo ra, kiểm tra, gỡ lỗi triển khai ứng dụng khách giàu có hoạt động liên tục nhiều tảng khác  JavaFX tảng để tạo phân phối ứng dụng dành cho máy tính để bàn ứng dụng RIAs (Rich Internet Applications) chạy nhiều thiết bị khác  JavaFX phát triển kỹ sư Chris Oliver, ban đầu dự án đặt tên F3 (Form Follows Functions) Sau vào năm 2005 Sun Micro-Systems mua lại dự án F3 đổi tên thành JavaFX  JavaFX dự định thay hoàn toàn Swing làm thư viện GUI chuẩn cho Java SE JavaFX hỗ trợ cho máy tính để bàn trình duyệt web tảng Windows, Linux macOS Những ưu điểm bật ngơn ngữ lập trình JavaFX  JavaFX thư viện Java bao gồm lớp giao diện viết mã Java nguyên gốc  FXML ngôn ngữ khai báo dựa XML để xây dựng giao diện người dùng ứng dụng JavaFX Lập trình viên sử dụng JavaFX Scene Builder để thiết kế giao diện đồ họa (GUI)  JavaFX tùy biến giao diện thêm sinh động cách sử dụng CSS  JavaFX hỗ trợ đồ họa 2D 3D hỗ trợ âm video  JavaFX cịn có WebView dựa trình duyệt WebKit, bạn nhúng trang web ứng dụng web bên JavaFX Các tính  JAVA APIs: Các API thiết kế để trở thành thay thân thiện cho ngôn ngữ máy ảo Java (Java VM) Jruby Scala  FXML Và Scene Builder: FXML ngôn ngữ đánh dấu khai báo dựa XML nhằm cấu tạo nên giao diện ứng dụng JavaFX Người dùng code FXML sử dụng JavaFX Scene Builder để tương tác thiết kế giao diện đồ họa người dùng Scene Builder tạo đánh dấu (markup), đánh dấu sau chuyển vào IDE business logic  Webview: Một thành tố web sử dụng công nghệ WebKitHTML giúp nhúng trang web ứng dụng JavaFX JavaScript chạy WebView gọi đến JaVA API ngược lại  Tương tác với Swing: Các ứng dụng tạo Swing cập nhật thêm tính JavaFX 3|Page  Built-in UI controls (Các thành phần tương tác giao diện tích hợp ) CSS: JavaFX cung cấp tất UI controls thông dụng giúp người dùng tạo nên ứng dụng hoàn chỉnh Các thành phần thay đổi hình thức hiển thị thơng qua CSS  Canvas API  Hỗ trợ cảm ứng đa điểm ( Multitouch):  Hỗ trợ HiDPI: JavaFX hỗ trợ hiển thị với độ phần giải cao  Các phần mềm truyền thông hiệu xuất cao: Hỗ trợ xem nội dung phương tiện web Nó cung cấp framework truyền thông ổn định, độ trễ thấp dựa GStreamer Multimedia Framework  Mơ hình triển khai ứng dụng độc lập: Các gói ứng dụng độc lập chứa tất tài nguyên ứng dụng runtimes riêng Java JavaFX Những xây dựng với JavaFX Với JavaFX, ta xây dựng nhiều loại ứng dụng Thơng thương, chúng ứng dụng nhận biết mạng triển khai nhiều tảng hiển thị thông tin giao diện người dùng đại hiệu cao có tính âm thanh, video, đồ họa hình ảnh động  Các ứng dụng JavaFX Ứng dụng mẫu Miêu tả JavaFX Ensemble8 thư viện ứng dụng mẫu minh họa nhiều tính JavaFX, bao gồm animation, biểu đồ điều khiển Bạn xem tương tác với ứng dụng mẫu chạy tất tảng đọc miêu tả Trên tảng máy tính, bạn chép mã nguồn mẫu, điều chỉnh thuộc tính thành phần mẫu sử dụng vài mẫu theo liên kết tới tài liệu API có liên quan bạn kết nối với Internet Modena ứng dụng mẫu thể giao diện thành phần UI sử dụng Modena theme Nó cho phép bạn lựa chọn đói chiếu chủ đề Modena Caspian, khám phá khía cạnh khác chủ đề 4|Page 3DViewer ứng dụng mẫu cho phép bạn điều hướng kiểm tra 3D scene cách di chuột 3DViewer có nhập tập hợp tính OBJ Maya files Khả nhập animation cung cấp cho tệp Maya 3DViewer hỗ trọ việc xuất nội dung scene file Java file FXML 5|Page Chương Cấu Trúc Ứng Dụng JavaFX Chương trình JavaFX phân bậc thành thành tố chính: Stage, Scene Node Để tạo chương trình JavaFX ta cần import class javafx.application.Application Việc cung cấp ta phương thức ứng dụng JavaFX o public void init(); o public abstract void start(Stage primaryStage); o public void stop(); Để tạo chương trình JavaFX ta cần: Import javafx.application.Application vào code Kế thứa Application vào class chương trình Override phương thức start() class Application STAGE Tương tự Frame Swing, tạo phần chứa tất object JavaFX Stage ban đầu tạo tảng Các stage phát sinh sau tạo ứng dụng Các object Stage chuyển tới phương thức start() Ta cần gọi phương thức show() object Stage để stage lên hình Stage có giao diện sau: SCENE Scene chứa node chương trình JavaFX Javafx.scene.Scene chưa tất phương thức để sử dụng cho đối tượng scene Scene tạo nhằm hình tượng hóa nội dung stage SCENE GRAPH Tồn hình thức đơn giản tập hợp node Các node thành phần stage Nó nút, khung chữ, bố cục, hình ảnh, nút chỉnh âm thanh, check bov, vv Các node mô tả cấu trúc hình Nó bao gồm node mẹ có vai trị node gốc cho node cịn lại scene graph Các node tồn mức thấp cấu trúc Mỗi node đại diện cho class gói javafx.scene ta cần import gói vào chương trình để tạo nên ứng dụng javafx hoàn chỉnh Chương Các thành phần tương tác giao diện tích hợp JavaFX cung cấp nhiều điều khiển giao diện người dùng để phát triển giao diện người dùng toàn diện Giao diện người dùng đồ họa (GUI) làm cho chương trình thân thiện dễ sử dụng Tạo GUI yêu cầu sáng tạo kiến thức cách hoạt động điều khiển giao diện người dùng Vì giao diện người dùng kiểm soát JavaFX linh hoạt đa năng, bạn tạo nhiều loại giao diện người dùng hữu ích cho ứng dụng GUI phong phú Oracle cung cấp công cụ để thiết kế phát triển GUI cách trực quan Điều cho phép lập trình viên nhanh chóng lắp ráp phần tử GUI với mã hóa tối thiểu Các công cụ, nhiên, làm thứ Bạn phải sửa đổi chương trình mà họ sản xuất Do đó, trước bạn bắt đầu để sử dụng công cụ trực quan, bạn phải hiểu khái niệm lập trình JavaFX GUI JavaFX Container Components 1.1 Tổng quan Container: Sau xây dựng tất nút cần thiết cảnh, thường xếp chúng theo thứ tự Sự xếp thành phần container gọi Layout container Chúng ta nói theo bố cục bao gồm việc đặt tất thành phần vị trí cụ thể container JavaFX cung cấp số bố cục xác định trước HBox, VBox, Border Pane, Stack Pane, Text Flow, Anchor Pane, Title Pane, Grid Pane, Flow Panel,v.v Mỗi bố cục đề cập đại diện lớp tất lớp thuộc gói javafx.layout Lớp có tên Pane lớp sở tất bố cục JavaFX Để tạo bố trí, ta cần: - Tạo nút - Khởi tạo tương ứng bố cục yêu cầu - Đặt thuộc tính bố trí - Thêm tất nút vào bố cục Chúng ta đề cập đến bố cục dùng phổ biến JavaFX 1.2 Hbox VBox: Lớp Hbox giúp xếp nút thêm vào theo hàng dọc Tương tự Hbox, Vbox xếp nút thành hàng dọc Hbox Vbox dùng chung nhiều phương thức: - setPadding(top, right, bottom, left); Căn lề setSpacing(distance); Tạo khoảng cách nút Chương trình sau minh họa cách tạo Hbox Vbox đơn giản: import import import import import import import import import javafx.application.Application; javafx.geometry.Insets; javafx.scene.Scene; javafx.scene.control.Button; javafx.scene.control.CheckBox; javafx.scene.control.RadioButton; javafx.scene.control.TextField; javafx.scene.layout.HBox; javafx.stage.Stage; public class HBoxDemo extends Application { @Override public void start(Stage primaryStage) throws Exception { HBox root = new HBox(); root.setSpacing(10); root.setPadding(new Insets(15,20, 10,10)); // Button Button button1= new Button("Button1"); root.getChildren().add(button1); // Button Button button2 = new Button("Button2"); button2.setPrefSize(100, 100); root.getChildren().add(button2); // TextField TextField textField = new TextField("Text Field"); textField.setPrefWidth(110); root.getChildren().add(textField); // CheckBox CheckBox checkBox = new CheckBox("Check Box"); root.getChildren().add(checkBox); // RadioButton RadioButton radioButton = new RadioButton("Radio Button"); root.getChildren().add(radioButton); Scene scene = new Scene(root, 550, 250); primaryStage.setTitle("HBox Layout Demo"); primaryStage.setScene(scene); primaryStage.show(); } public static void main(String[] args) { launch(args); } } 1.3 FlowPane Lớp FlowPane xếp nút thêm vào dòng theo thứ tự từ trái qua phải Trong trường hợp dòng đầy, nút đẩy xuống dòng // Tạo cột cho cột FullName TableColumn firstNameCol// = new TableColumn("First Name"); TableColumn lastNameCol // = new TableColumn("Last Name"); // Thêm cột vào cột FullName fullNameCol.getColumns().addAll(firstNameCol, lastNameCol); // Active Column TableColumn activeCol// = new TableColumn("Active"); // Định nghĩa cách để lấy liệu cho ô // Lấy giá trị từ thuộc tính UserAccount userNameCol.setCellValueFactory(new PropertyValueFactory("userName")); emailCol.setCellValueFactory(new PropertyValueFactory("email")); firstNameCol.setCellValueFactory(new PropertyValueFactory("firstName")); lastNameCol.setCellValueFactory(new PropertyValueFactory("lastName")); activeCol.setCellValueFactory(new PropertyValueFactory("active")); // Sét xắp xếp theo userName userNameCol.setSortType(TableColumn.SortType.DESCENDING); lastNameCol.setSortable(false); // Hiển thị dòng liệu ObservableList list = getUserList(); table.setItems(list); table.getColumns().addAll(userNameCol, emailCol, fullNameCol, activeCol); StackPane root = new StackPane(); root.setPadding(new Insets(5)); root.getChildren().add(table); stage.setTitle("TableView (o7planning.org)"); Scene scene = new Scene(root, 450, 300); stage.setScene(scene); stage.show(); } private ObservableList getUserList() { UserAccount user1 = new UserAccount(1L, "smith", "smith@gmail.com", // "Susan", "Smith", true); UserAccount user2 = new UserAccount(2L, "mcneil", "mcneil@gmail.com", // "Anne", "McNeil", true); UserAccount user3 = new UserAccount(3L, "white", "white@gmail.com", // "Kenvin", "White", false); ObservableList list = FXCollections.observableArrayList(user1, user2, user3); return list; } public static void main(String[] args) { launch(args); } } Java Menu Components Menu thành phần chương trình ứng dụng Menu khác biệt với thành phần “tạo lựa chọn cho người dùng” khác tiết kiệm khơng gian giao diện người dùng (UI), không đặt thành phần khác UI, thay vào thường xuất menu (menu bar) dạng pop-up menu Trong JavaFX, lớp javafx.scene.control cung cấp tất lớp phương thức giúp ta tạo nên menu tùy chỉnh cách dễ dàng: 1.1 MenuBar, Menu, MenuItem 1.1.1 Menu Bar Một MenuBar thường có nhiều MenuItem thường có vị trí top window app  Hàm khởi tạo (constructors): o MenuBar(); o MenuBar(Menu menus);  Các hàm quan trọng: o add(Menu e); o addAll(Menu elements); o addListener(ListChangeListener