Một số User Interface trong JavaFx

Chương 4 TÌM HIỂU VỀ CÔNG NGHỆ JAVAFX

4.8 Một số User Interface trong JavaFx

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

 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 ].