JavaFX tập trung vào việc cung cấp một nền tảng để việc tạo ra giao diện một cách dể dàng và nhanh chóng. T đó tạo cảm giác ấn tƣợng cho ngƣời dùng khi tƣơng tác với nó. Chúng ta sẽ tập trung vào lớp tƣơng tác ngƣời dùng của JavaFX.Trong phần này, chúng ta sẽ điểm qua các t khóa đƣợc dùng để xây dựng giao diện ngƣời dùng trong JavaFX. Chƣơng này sẽ bao gồm các thành phần cơ bản của giao diện ngƣời dùng. Trong các chƣơng sau, chúng ta sẽ thảo luận về animations ( sự di chuyển hình ảnh), các hiệu ứng và các đặc điểm đa phƣơng tiện. Để bắt đầu, bạn phải định nghĩa t khóa “stage”.
Stage
Lớp javafx.stage.Stage là lớp lớn nhất đối với phần giao diện của JavaFX. Nó tách biệt phần thực thi của ngƣời lập trình, vì vậy nó có thể tái sử dụng trên nhiều nền tảng khác nhau nhƣ desktop, mobile hoặc tivi. Trong môi trƣờng desktop, “Stage” tƣơng đƣơng với 1 cửa sổ trong hệ điều hành window.
Một “stage” có một tiêu đề và mộ không gian để trình bày giao diện, nó tƣơng tự nhƣ cửa sổ trong hệ điều hành window và có thể thay đổi kích thƣớc đƣợc.
77 Ví dụ: 1 2 3 4 5 6 import javafx.stage.Stage; Stage {
title: "An empty stage" width: 250
height: 80 }
Bảng 4.3-Ví dụ về Stage
Một ứng dụng có thể có nhiều “stage”. Lúc này, một “stage” đƣợc kích hoạt. Các sự kiện ở đây có thể là con trỏ nhấn, có thể làm cho “stage” đƣợc kích hoạt hoặc ng ng lại. Nếu nó đƣợc hỗ trợ, “stage” có thể thể hiện tính ẩn hiện bằng cách thay đổi thuộc tính. Phần nội dung của “stage” có thể thay đổi trong suốt chu trình sống của ứng dụng.
Scene
Giao diện, javafx.scene.Scene là node ở mức cao nhất với giao diện đồ họa. Một giao diện đồ họa bao gồm các node theo một thứ tự nhất định. Giao diện sẽ có hình khối xác định, có màu nền, con trỏ và các tùy chọn dạng CSS ( nhƣ bên web) có thể sử dụng bởi các thành phần của giao diện. Hình khối của giao diện sẽ là phạm vi của “stage” hiện thị, trên đó, ta có thể hiện thị các thành phần của giao diện. nếu “stage” thay đổi kích thức, giao diện cũng sẽ thay đổi, bằng cách này, bạn có thể đặt các thành phần bên trong giao diện và đảm bảo là chúng hiển thị đầy đủ, ví dụ sau sẽ trình bày “stage” và dạng hình khối:
1 2 3 4 5 6 7 8 9 10 11 import javafx.stage.Stage; import javafx.scene.Scene; import javafx.scene.text.Text; import javafx.scene.text.TextOrigin; import javafx.scene.text.Font; import javafx.scene.paint.Color; var scene: Scene;
var text: Text;
var stage: Stage = Stage {
title: "Stage and Scene Geometry" x: 250
78 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 y: 150 width: 800 height: 100
scene: scene = Scene {
fill: Color.NAVY
content: text = Text {
translateX: bind (scene.width - text.layoutBounds.width) / 2 - text.layoutBounds.minX
translateY: 24 fill: Color.YELLOW
textOrigin: TextOrigin.TOP font: Font { size: 24 } content: bind "Stage:
[{stage.x},{stage.y}] , ""[{stage.width}, {stage.height}]""Scene: [{scene.x},{scene.y}] , ""[{scene.width}, {scene.height}]"
} }
}
Bảng 4.4-Ví dụ về Scene
Trƣớc tiên chúng ta sẽ khởi tạo giao diện thông qua biến “scene”. Tiếp theo, chúng ta sẽ sử dụng biến khởi tạo, “scene”, “width” để cập nhật vị trí cho biến “Text”. Lƣu ý là vị trí của “stage” [250,150] đó là tọa độ của màn hình desktop, ngƣợc lại vị trí của “scene” [5,23] đó là vị trí so với tọa độ của “stage”. Tƣơng tự, chiều rộng (790) và chiều cao (72) là chiều rộng và chiều cao tối thiểu của “stage”.Chúng ta phải sử dụng bind, bởi vì kích thức giao diện sẽ thay đổi. Kết quả sau khi thực thi nhƣ sau:
Hình 4.4-Ví dụ về Stage
Ngoài việc trang trí giao diện bằng màu sắc, bạn cũng có thể sử dụng các kiểu con trỏ cho toàn bộ màn hình. Mặc định thì giá trị null là con trỏ mặc định sẽ đƣợc sử dụng. Bạn có thể lựa chọn kiểu con trỏ t Class javafx.scene.Cursor, gồm các kiểu default, wait, crosshair, hand, move và text. Bạn cũng có thể thay đổi kích thƣớc
79
con trỏ theo các hƣớng east, north, northeast, northwest, west, southwest, south, southeast, vertical và horizontal. Tất nhiên là cũng có tùy chọn không sử dụng con trỏ. (adsbygoogle = window.adsbygoogle || []).push({});
Style sheet
Cascading style sheets (CSS) thƣờng đƣợc sử dụng trong kỹ thuật Web để phân chia nội dung trình bày. Điều này giúp chúng ta dể dàng thay đổi phần trình bày mà không cần phải sửa đổi code. Một “stylesheet” là một bộ các qui luật để điều khiển việc hiện thị các thành phần. Mỗi qui luật ở đây sẽ phù hợp với thuộc tính của thành phần nào đó. JavaFX cũng hỗ trợ style sheets, nhƣng nó hơi khác so với HTML. Sự khác biệt đó là thay vì sử dụng các thẻ HTML hoặc XML, JavaFX sử dụng các tên lớp của nó. Tên Lớp sẽ đƣợc đặt trong dấu ngoặc kép, hoặc theo chuẩn các Lớp giao diện ngƣời dùng của JavaFX. Bạn có thể sử dụng tên Lớp. Ví dụ :javafx.scene.shape.Rectangle hoặc Rectange là nhƣ nhau. Đối với phần ID của CSS, thay vì sử dụng thuộc tính id của XML, JavaFX sử dụng biến “id” của “node”. Các lựa chọn trong Lớp CSS cũng tƣơng tự nhƣ bên HTML. Các lớp CSS đƣợc định nghĩa bằng các biến kiểu Boolean bên trong các điều khiển JavaFX và các Lớp “skin”. Để sử dụng “stylesheet” ta sẽ gắn URL của nó vào biến stylesheet của “scene”. Có thể không có hoặc có nhiều URL style sheet, ví dụ sau trình bày về cách tạo ra 1 mẫu CSS ID cho Lớp JavaFX Text, có tên là MainText với các thuộc tính fill đƣợc gán là màu navy blue và font là bold italic sans serif[ 33 ]:
1 2 3 4 5 "javafx.scene.text.Text"#MainText { fill : navy;
font: bold italic 35pt "sans-serif"; }
Bảng 4.5-Ví dụ về Style sheet
Để sử dụng mẫu này trong JavaFX, gắn đƣờng dẫn URL của stylesheet vào đối tƣợng “scene” và thêm vào 1 ID cho node Text trùng với ID đã khai báo.
80 Ví dụ: 1 2 3 4 5 6 7 8 9 10 11 12 13 Stage {
title: "Style Sheet Demo" width: 500 height: 80 scene: Scene { stylesheets: ["{__DIR__}MyStyle.css"] content: Text { id: "MainText" x: 10, y: 30
content: "This shows my style" }
} }
Bảng 4.6-Ví dụ về Scene Nodes
Nhƣ chúng ta đã biết, một giao diện đồ họa là sử hiện thị giao diện, nó đƣợc hiện thị giống nhƣ một cây dữ liệu có cấu trúc với các nodes liên kết với nhau. Các node có thể bao gồm node bên trong nó, đôi khi ta gọi là các node nhánh hoặc các node là mà không có node con. Lớp javafx.scene.Node là lớp cơ sở cho tất cả các node của giao diện đồ họa.Trong javaFX, “scene” là node gốc và bao gồm các node con gắn trực tiếp vào nó; bên trong các node là javafx.scene.Group hoặc javafx.scene. CustomNode các node lá là các node giống nhƣ shapes, controls, text, và các nodes Swing Extension. Mỗi node có thể đƣợc gắn một ID với kiểu chuỗi, một phƣơng thức tìm kiếm đƣợc hỗ trợ để tìm các node dựa vào ID. Cũng tƣơng tự nhƣ phần trƣớc, khi chúng ta sử dụng ID cho style sheets, các ID này đƣợc gán một giá trị duy nhất[ 33 ].
Các node sẽ có một tập các biến và kiểu phƣơng thức, mà ta có thể gán giá trị và gọi chúng khi sự kiện đƣợc gọi. Chúng bao gồm các biến onKeyXXXX và onMouseXXXX, đó là các phƣơng thức gắn liền với các sự kiện bàn phím hoặc con trỏ. XXXX trình bày kiểu sự kiện. biến blocksMouse cho biết các sự kiện con trỏ có đƣợc áp dụng hay không.
81
Các Node cũng có thể có một tập transforms. Bao gồm : translate, scale, rotate, shear. Các Transforms có thể đƣợc cung cấp giống nhƣ một mảng các stransforms. Chúng sẽ đƣợc sắp xếp theo thứ tự. Bên cạnh đó, các biên nhƣ : translate, translate, scaleX, scaleY và rotate có thể đƣợc sử dụng.
Giao diện các node đƣợc mô tả qua bốn biến : boundsInLocal, boundsInParent, boundsInScene và layoutBounds. BoundsInLocal là một không gian hình chữ nhật đƣợc định nghĩa cho node mà không quan tậm đến bất kỳ sự thay đổi nào. BoundsInparent là một không gian hình chữ nhật đƣợc định nghĩa cho các node sau khi tất cả các thay đổi đã đƣợc áp dụng và nằm bên trong không gian tọa độ của node cha. BoundsInScene là một không gian hình chữ nhật đƣợc định nghĩa cho các node mà sau khi các sự thay đổi diễn ra và nằm trong không gian tọa độ của màn hình hoặc có thể nói là node gốc nếu node không đƣợc gắn vào scene. LayoutBounds là một không gian hình học mà nên đƣơc sử dụng trong việc bố trí các node bà bao gồm tất các các sự thay đổi bên trong transforms sequence
Customnode
Custom node là một phần của cấu trúc hiển thị javaFx. Custom nodes cho phép ngƣời dùng tạo ra các control tùy biến với các node bên trong.
Để tạo ra một custom node, chúng ta sẽ kế th a lớp javafx.scene.CustomNode và thực thi phƣơng thức tr u tƣợng create(), đây là phƣơng thức mà sẽ trả về một node, với lớp Title và một CustomNode. Để làm việc này, Title trƣớc tiên kế th a CustomNode, sau đó thực thi phƣơng thức create()[ 33 ].