Công cụ phát triển

JavaFX SDK bao gồm các công cụ cho phép dịch và tạo ra các ứng dụng JavaFX:  Trình biên dịch command-line (javafxc) dựa trên Java compiler với cùng

tham số nhƣ javac. Ngoài ra có các thùy chọn cho phép dịch với profile cho desktop, mobile hoặc TV

 Ant task cho phép dịch file mã nguồn JavaFX thông qua Ant build file.  Application launcher cho phép chạy ứng dụng JavaFX (lệnh javafx).  Một tiện ích command-line gọi là javafxpackager cho phép build một ứng

dụng hoàn chỉnh và đóng gói cho cả môi trƣờng desktop, mobile, hoặc TV.  Một tiện ích command-line gọi là javafxdoc tƣơng tự nhƣ javadoc.

74

JavaFX Platform Tools bao gồm một tập các công cụ lập trình, thiết kế đồ họa, media converter và môi trƣờng chạy. Sun cung cấp bộ công cụ JavaFX dƣới dạng các gói (bundle) khác nhau tùy thuộc vào yêu cầu của nhà phát triển:

Hình 4.3-Một số gói công cụ phát triển JavaFx

Developer Bundle:

 NetBeans IDE for JavaFX

 JavaFX hoàn toàn đƣợc tích hợp với NetBeans IDE, một môi trƣờng phát triển mạnh mẽ và trực quan giúp dễ dàng để xây dựng, chạy thử và debug.

 NetBeans editor cung cấp một giao diện kéo thả và hỗ trợ auto complete giúp nhanh chóng tạo ra các câu lệnh, các đối tƣợng đồ họa, hiệu ứng và hoạt cảnh (animation).

 JavaFX Plug‐in for NetBeans

 JavaFX plug‐in sẽ cài đặt các tính năng hỗ trợ JavaFX vào NetBeans, trong trƣờng hợp gói cài đặt NetBeans không bao gồm tính năng này.

Designer bundle: bao gồm JavaFX Production Suite, một bộ công cụ cho phép designer tạo ra các thành phần đồ họa có định dạng JavaFX để cung cấp cho developer.

 JavaFX Plug‐in for Adobe Photoshop và JavaFX Plug‐in for Adobe Illustrator Plugging cho Adobe Photoshop và Adobe Illustrator cho phép tạo các thành phần đồ họa có định dạng JavaFX bằng những công cụ chuyên nghiệp và phổ

75

biến. Designer có thể xem trƣớc và chỉnh sửa các thành phần đồ họa để tối ƣu trên màn hình của t ng loại thiết bị riêng biệt (nhƣ điện thoại di động, TV ...)  JavaFX Media Factory

 SVG Converter.

 JavaFX Graphics Viewer.

Stand-alone SDK:

 JavaFX SDK

 JavaFX Desktop Runtime

 JavaFX Mobile Emulator (for Windows)  JavaFX APIs

 JavaFX Compiler

 JavaFX API documentation  Samples

Additional tools:

 JavaFX 1.2 Plug‐in for Eclipse: cho phép lập trình trên Eclipse IDE 3.4 trở lên (yêu cầu JavaFX SDK 1.2 trở lên).

 On2 Flix Encoder.

4.7 Cách triển khai một dự án java x

Một ứng dụng JavaFX có thể đƣợc đóng gói và triển khai theo bốn cách:  ng dụng desktop, phân phối và cài đặt thông qua Java Web Start.  Applet: phân phối qua trình duyệt và chạy trên nền Java plug-in.  ng dụng chạy trên TV cho các thiết bị hỗ trợ JavaFX TV profile.  ng dụng mobile phân phối cho các thiết bị di động.

Mỗi phiên bản JavaFX phụ thuộc vào phiên bản JRE mà nó đƣợc thiết kế để chạy. Đối với JavaFX Desktop, yêu cầu tối thiểu là phải có Java SE 5 (mặc dù còn thiếu một vài tính năng, Java 6 update 7 hỗ trợ đầy đủ). Với JavaFX Mobile, tối thiểu thiết bị phải hỗ trợ Connected Limited Device Configuration (CLDC) 1.1,Mobile Information Device Profile (MIDP) 2.0, và Mobile Services Architecture (MSA)

76

specification, cùng với một JavaFX runtime thích hợp. Trong quá trình triển khai cần chú ý một số đặt điểm về bản quyền nhƣ sau:

 JavaFX runtime là phần mềm độc quyền, miễn phí, là tài sản riêng của Sun.  JavaFX compiler và phiên bản cũ của 2D Scene graph đƣợc phân phối bằng giấy

phép mã nguồn mở GPL (GNU General Public License) v2 thông qua sự tài trợ của Sun với dự án OpenJFX.

 Sun công bố sự hợp tác lâu dài với On2 Technologies theo đó JavaFX đi kèm một phiên bản có bản quyền TrueMotion VP6 video codec của hãng này (cũng là codec có trong Adobe Flash).

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

4.9 Synchronize Data Models-Binding và Trigger

Một trong những ƣu điểm của Javafx chính là khả năng hỗ trợ cao trong việc ràng buộc dữ liệu(binding). Trong phần này, chúng tôi sẽ giới thiệu về nguồn gốc của binding trong JavaFX đồng thời sẽ đề cập đến Triggers và chúng làm việc nhƣ thế nào trong JavaFX.

Binding

Khái niệm binding không còn xa lạ trong các ngôn ngữ lập trình, nó là một yêu cầu về mặt kỹ năng của ngƣời lập trình. Kỹ thuật binding sẽ giúp các nhà phát triển tiết

82

kiệm về mặt chi phí xử lý cho chƣơng trình của mình. Sự phát triển mạnh của công nghệ RIA (Rich Internet Aplycation) đã khiến khái niệm binding ra đời, đó là sự kết hợp giữa hai lĩnh vực kỹ năng về lập trình và kỹ năng về đồ họa, Javafx hỗ trợ một phần công việc trong quá trình này.

Ví dụ bạn muốn giao diện của mình thay đổi theo một số sự kiện nào đó trong quá trình hoạt động của chƣơng trình thì chúng ta cần phải thiết kế các xử lý bên dƣới. Trong JavaFX, t khóa binding đƣợc sử dụng để đơn giản hóa khả năng này. Việc binding một tham số này với một tham số khác sẽ làm trị của tham số này thay đổi thì giá trị của tham số kia sẽ tự động thay đổi theo.Chính khả năng hỗ trợ mạnh mẽ và đơn giản này sẽ giúp ta kết nối các mô hình lại với nhau một cách dễ dàng.

Để thân thiện hơn, t khóa bind kết hợp giá trị của biến với giá trị của một biến khác, Binding trong JavaFX có cú pháp nhƣ sau:

1 var v = bind expression;

Trong ví dụ trên khi biến v thay đổi thì biến expression sẽ thay đổi theo. Expression có thể là các biến bình thƣờng nhƣ các biến khác hoặc có thể bao gồm một dãy các biến hợp lệ.

Trigger

JavaFX có một cơ chế đơn giản để nhận thấy và giữ lại các sự kiện làm thay đổi dữ liệu bằng cách thêm các trigger vào các biến, bạn sẽ kết hợp các dòng code với biến, các dòng code này sẽ thực thi mỗi khi giá trị của biến thay đổi. Một trigger đƣợc thêm vào biến trong lúc khai báo bằng cách thêm vào t khóa on replace, ví dụ:

1 2 3 4

var x: String on replace { y=x

}

var y:String

Mỗi khi x thay đổi, trình biên dịch sẽ thực thi đoạn code đƣợc chỉ định bởi t khóa on replace.

83

Binding và trigger là một trong nhiều kỹ thuật nổi bật mà JavaFx hỗ trợ ngƣời dùng trong việc xây dựng các ứng dụng của mình. Với sự hỗ trợ mạnh mẽ về các kỹ thuật đồ họa cùng với khả năng thực thi trên nhiều môi trƣởng khác nhau khiến JavaFx có khả năng canh tranh mạnh mẽ với nhiều ngôn ngữ khác trong công nghệ RIA. Để tìm hiểu thêm về công nghệ JavaFx mời các bạn xem ở phụ lục đính kèm.

4.10 Kết luận

Phát triển một ứng dụng với giao điện đồ họa bắt mắt là một công việc đòi hỏi rất nhiều kỹ năng. Trong đó thiết kế đồ họa và lập trình là hai kỹ năng có khoảng cách khá xa. Designer thƣờng tập trung vào sự tƣơng tác của ngƣời dùng với ứng dụng. Còn program developer lại quan tâm đến triển khai các logic nghiệp vụ và tƣơng tác của ứng dụng với back-end server. Hiếm khi mà một chuyên gia lại có cả hai kỹ năng đó. Mục tiêu của JavaFX là làm cầu nối giữa hai công việc này: giúp designer dễ dàng hiểu đƣợc ngôn ngữ lập trình, và giúp developer có thể triển khai một cách