CÔNG NGHỆ JAVA: TẠO MỘT NGÔN NGỮ MÔ TẢ UI XML

 Tạo ngôn ngữ mô tả UI XML Tạo ngôn ngữ mô tả UI XML Xây dựng UI (giao diện người dùng) khung làm việc kèm ngôn ngữ Java Arron Ferguson, Giảng viên, British Columbia Institute of Technology Tóm tắt: Việc viết GUI (giao diện người dùng đồ hoạ) mã chương trình thường dẫn đến lựa chọn thiết kế lộn xộn, đến lượt lại trở nên mờ nhạt logic nghiệp vụ (business logic) mã UI Hãy khám phá cách tạo thẻ UI XML khai báo với khung làm việc Java™ kèm mà phân tích cú pháp, xác thực, xây dựng, cuối liên kết thành phần GUI mô tả đến quy tắc nghiệp vụ vào lúc chạy Giới thiệu Sự phát triển GUI công việc mệt mỏi Các khung làm việc GUI khơng phải lúc giải thích rõ văn bản, khối lượng mã yêu cầu phát triển nhanh chóng, làm giảm tốc độ luồng phát triển Trên tất cả, công cụ kéo thả IDE hỗ trợ khung làm việc GUI thường hướng nhà phát triển phần mềm GUI tạo mã quản lý khơng thể đọc Việc làm mờ nhạt thêm đường phân cách quy tắc nghiệp vụ mã mơ tả GUI mà làm cho việc bảo trì phần mềm thêm khó khăn Các từ chữ viết tắt (acronyms) thường sử dụng  API: Application programming interface - Giao diện Lập trình Ứng dụng  DOM: Document Object Model - Mơ hình Đối tượng Tài liệu  GUI: Graphical user interface - Giao diện Người dùng Đồ họa  HTML: Hypertext Markup Language - Ngôn ngữ Đánh dấu Siêu văn  IDE: Integrated Development Environment - Môi trường Phát triển Tích hợp  JAR: Java Archive - Định dạng tệp nén Java  UI: User interface - Giao diện Người dùng  URI: Uniform Resource Identifier - Bộ định danh Tài nguyên Thống  XML: Extensible Markup Language - Ngôn ngữ Đánh dấu Mở rộng  XSD: XML Schema Infoset Model - Mơ hình Infoset lược đồ XML  W3C: World Wide Web Consortium - Tổ hợp World Wide Web, Đây nơi ngôn ngữ UI mô tả trở nên tiện lợi Một UI ngôn ngữ mô tả “cái gì,” khơng phải “ra sao” Thí dụ, HTML mô tả nội dung hiển thị, không trả chức dùng để trả nội dung Bằng cách không quy định “ra sao” ngôn ngữ mô tả, luồng điều khiển loại Mặc dù mát nghe hạn chế, trở thành sức mạnh, tác dụng phụ — chẳng hạn sửa đổi tồn trạng thái (thí dụ biến) gọi hàm phương thức khác — loại bỏ Việc chọn ngôn ngữ mô tả đưa lợi ích việc tách riêng mã UI khỏi mã ứng dụng Việc tách riêng đem lại lợi ích tương lai chẳng hạn phân biệt rõ ràng vai trò dự án vai trị tổ nhóm mà chí giảm bớt chi phí tích hợp quy tắc nghiệp vụ với nhiều khung nhìn cơng nghệ khung nhìn Ngày nay, có nhiều mẫu UI XML mơ tả sử dụng Các hệ điều hành Linux® UNIX® sử dụng mơi trường máy tính bàn GNOME có Glade Những người dùng Microsoft® Windows® có Ngơn ngữ Đánh dấu Ứng dụng Mở rộng (XAML), hỗ trợ tập hợp nhiều đặc tính, gồm việc lồng vào mã XML Định dạng MXML Adobe® Flex® Framework mơ tả GUI cho trình chơi nhạc Adobe Shockwave (SWF) việc lồng vào mã Xem mục Tài nguyên để có liên kết đến nhiều thông tin Một tập hợp yêu cầu cho khung làm việc UI mô tả sở cơng nghệ Java là:  Xác thực (Validation): Sử dụng lược đồ XML  A DOM: Một DOM thông lệ để xử lý đặc điểm riêng chẳng hạn trì đồng trạng thái thành phần GUI trạng thái nút XML  Persistence: Sắp xếp theo thứ tự (Marshalling) xếp không theo thứ tự (unmarshalling) GUI  Image data: Lưu lại liệu Base64  Swing components: Việc trình bày thành phần Swing thường sử dụng nhiều để phát triển GUI Với yêu cầu đầu, lúc tạo XML mô tả XML mô tả Một cố gắng định dạng XML, Liệt kê 1, trình bày cửa sổ đơn giản, bảng panel, nút Các thuộc tính thấy Liệt kê đại diện cho đặc tính địi hỏi, chẳng hạn hệ tọa độ, kích thước, định danh nhất, tham chiếu đến thành phần trong-bộ-nhớ riêng lẻ Liệt kê Khái niệm XML mô tả Lược đồ XML UI XML mô tả ánh xạ phần tử XML sang khung làm việc Swing Java, đưa lớn tính khả chuyển, Swing đảm bảo sẵn có tất mơi trường thời gian chạy Java thời Nhiều thành phần Swing có phần tử XML đại diện định dạng XML Khung làm việc sử dụng lược đồ XML Lược đồ XML cho phép áp đặt xếp thứ tự xác định, thứ bậc, kiểu liệu cá thể lược đồ Đây điều quan trọng; khung làm việc chờ đợi tập hợp phần tử XML kiểu quy định theo thứ tự riêng Liệt kê trình bày phần tử thuộc tính ban đầu hệ thống phân cấp cá thể lược đồ XML Liệt kê Lược đồ UI XML mô tả: Các phần tử ban đầu Hãy quan sát chi tiết lược đồ Đầu tiên, mô tả XML phải đến trước thứ — chí trước khoảng trống bình luận, theo XML Recommendation (tiến cử XML) Tiếp theo, phần tử schema chứa phần tử khác:  elementFormDefault="qualified" trình bày tất phần tử phải có vùng tên — tiền tố vùng tên mặc định  targetNamespace="http://xml.bcit.ca/PurnamaProject/2003/xui" quy định URI vùng tên đích  Cá thể lược đồ sử dụng XML W3C Schema Recommendation tất phần tử (xmlns:xs="http://www.w3.org/2001/XMLSchema")  xmlns:xui="http://xml.bcit.ca/PurnamaProject/2003/xui" xác định không gian tên tiền tố kèm Việc sử dụng khơng gian tên XSD quan trọng: Nó loại bỏ xung đột không gian tên Một xung đột khơng gian tên xảy có từ hai phần tử trở lên từ hai hay nhiều định dạng XML có tên Xung đột gây nhầm lẫn cho ứng dụng quan tâm đến thẻ tương ứng Bằng cách sử dụng không gian tên tiền tố khơng gian tên kèm, bạn tránh hồn tồn vấn đề Tiếp theo, phần tử kiểu liệu mức gốc XUI nói rõ rằng:  Cho phép chuỗi từ đến 128 phần tử Window cuối phần tử Resource Cả hai phần tử phần tử quy chiếu tìm thấy sau cá thể lược đồ  Có thuộc tính id đòi hỏi phải thuộc kiểu anyURI Phần tử XUI (có thể) chứa nhiều phần tử Window khơng có phần tử Window dựa giá trị thuộc tính minOccurs Đối với phần tử Resource:  Nó có mơ hình nội dung rỗng phần tử rỗng xs:sequence xs:sequence  Nó có ba thuộc tính, tất yêu cầu  Thuộc tính cuối cùng, thuộc tính type, tạo kiểu đơn giản dẫn xuất từ kiểu định nghĩa XSD (token), nơi mà mặt hạn chế enumeration, có tính đến giá trị chữ liệt kê java groovy Mục đích phần tử Resource cung cấp khung làm việc Java mà URI tài nguyên (một JAR, trường hợp này) chứa lớp Java biên dịch mà nạp vào thời gian chạy liên kết đến Tài nguyên dựa vào lớp riêng (giá trị thuộc tính class mà gọi ra, chất đưa lớp biểu mà trả lời tất kiện tạo từ GUI Phần tử Window:  Chứa chuỗi GridLayout, lựa chọn không hạn chế số phần tử BasicDialog, OpenFileDialog, SaveFileDialog, CustomDialog, Panel, SplitPane, TabbedPane, cuối số MenuBar  Có bảy thuộc tính — tất yêu cầu — sử dụng kiểu liệu định nghĩa khác (chú ý tiền tố xs) ML Schema Recommendation Window chứa nhiều vùng chứa khác mức cao mức trung bình Phần tử Window tham chiếu đến phần tử GridLayout Phần tử GridLayout quy định kích thước lưới mà thành phần chiếm giữ GridLayout đưa đặc tính bố trí tương tự java.awt.GridBagLayout môi trường Java loại trừ mà không gặp phức tạp Cho đến lúc này, rõ ràng Lược đồ XML có ý nghĩa đáng kể Liệt kê trình bày vài phần tử Liệt kê Lược đồ UI XML mô tả: nhiều phần tử Hãy lưu ý thông tin trạng thái ổn định lưu trữ — thơng tin trạng thái trợ giúp việc tái cấu trúc thành phần GUI Một thí dụ thơng tin trạng thái phần tử CustomDialogt:  Số lượng phần tử Panel cho phép hội thoại  Hội thoại theo kiểu mô thái không (Một hội thoại mô thái bẫy trọng tâm đến người dùng đóng hội thoại lại.)  Hệ tọa độ (x y tính theo pixel) máy tính để bàn  Kích thước (chiều rộng chiều cao tính theo pixel)  Tầm nhìn cửa sổ Một bảng Panel vùng chứa trung bình cho phép số lượng lớn thành phần nguyên tử chứa Xem lại Liệt kê 3, Panel có xác GridLayout chọn lựa khơng có thành phần ngun tử đặt bên Panel nhiều cần thiết Panel tự có hệ toạ độ x y Tuy nhiên, khác với việc tham chiếu đến pixel máy tính bàn (như CustomDialog tiến hành), Panel sử dụng hệ toạ độ x y để tham chiếu đến việc định vị GridLayout vùng chứa cha Như búp bê Nga, kết cấu lồng bắt chước giống với nguyên tắc bố trí Swing Với toàn chỗ, lúc để nhằm đến việc cài đặt phần mềm Hỗ trợ khung làm việc Java Chúng ta bắt đầu tổng quan khung làm việc Java dự kiến Bộ mã Liệt kê trình bày bước mà lập trình viên ứng dụng phải thực theo để tạo ứng dụng Liệt kê Khái niệm gọi API Java try { // Gain access to a XUI builder through factory // In this framework the term XUI is going to represent the custom DOM XUIBuilder builder = XUIBuilderFactory.getInstance().getXUIBuilder(); // (1) // Validate and parse (unmarshal) the XML document builder.parse("browser.xml"); // (2) // Build a custom DOM XUI xui = builder.getXUIDocument(); // (3) // Create 1:1 GUI component mapping to custom DOM xui.visualize(); // (4) (5) // Create bindings to data model (i.e JAR file from Resource element) xui.bind(); // (6) // Get root node from the XUI document XUINode root = xui.getRoot(); // Save a copy of the DOM to file (marshal) xui.marshalXUI("browser-marshalled.xml"); } catch (XUIParseException xpe) { xpe.printStackTrace(); } catch (XUIBindingException xbe) { xbe.printStackTrace();