JAVA Thiết kế giao diện động với Swing

Tóm tắt: Bộ công cụ Giao diện người dùng (UI) của Swing làm cho nó có thể,mặc dù không luôn dễ dàng, cập nhật động các giao diện người dùng để đáp lạicác sự kiện hoặc hành động của người dùng. Bài viết này xem xét một số cách phổbiến mà bạn có thể xây dựng các UI được cập nhật động, xem xét vài cạm bẫy cóthể gặp trên đường đi và một số nguyên tắc để giúp bạn quyết định khi nào đây làcách tiếp cận thích hợp cho công việc.Bộ công cụ Swing cung cấp nhiều công cụ để tạo các giao diện người dùng và mộtmảng kì lạ về các tùy chọn để thay đổi các giao diện này trong vòng đời củachương trình. Sử dụng cẩn thận các tính năng này có thể dẫn đến giao diện thíchứng động theo nhu cầu của người dùng và đơn giản hóa tương tác. Sử dụng khôngcẩn thận các tính năng tương tự có thể dẫn đến các chương trình rất khó hiểu hoặcthậm chí các chương trình hoàn toàn không sử dụng được. Bài viết này giới thiệucông nghệ và triết lý về các UI động và giúp bạn vượt qua lúc khó khăn khi xâydựng các UI hiệu quả. Bạn sẽ thay đổi mã nguồn dựa trên ứng dụng chương trìnhgiới thiệu (demo) của SwingSet2 được đảm bảo với JDK của Sun (xemResources); UI của ứng dụng này sử dụng một số đặc tính động và dùng như mộtđiểm khởi đầu tuyệt vời để hiểu chúng

Trang 1

Thiết kế giao diện động với Swing

Chuyến đi đến các vùng ngoài của Swing API

Peter Seebach, Tác giả, 自由职业者

Tóm tắt: Bộ công cụ Giao diện người dùng (UI) của Swing làm cho nó có thể,

mặc dù không luôn dễ dàng, cập nhật động các giao diện người dùng để đáp lại các sự kiện hoặc hành động của người dùng Bài viết này xem xét một số cách phổ biến mà bạn có thể xây dựng các UI được cập nhật động, xem xét vài cạm bẫy có thể gặp trên đường đi và một số nguyên tắc để giúp bạn quyết định khi nào đây là cách tiếp cận thích hợp cho công việc

Bộ công cụ Swing cung cấp nhiều công cụ để tạo các giao diện người dùng và một mảng kì lạ về các tùy chọn để thay đổi các giao diện này trong vòng đời của

chương trình Sử dụng cẩn thận các tính năng này có thể dẫn đến giao diện thích ứng động theo nhu cầu của người dùng và đơn giản hóa tương tác Sử dụng không cẩn thận các tính năng tương tự có thể dẫn đến các chương trình rất khó hiểu hoặc thậm chí các chương trình hoàn toàn không sử dụng được Bài viết này giới thiệu công nghệ và triết lý về các UI động và giúp bạn vượt qua lúc khó khăn khi xây dựng các UI hiệu quả Bạn sẽ thay đổi mã nguồn dựa trên ứng dụng chương trình giới thiệu (demo) của SwingSet2 được đảm bảo với JDK của Sun (xem

Resources); UI của ứng dụng này sử dụng một số đặc tính động và dùng như một điểm khởi đầu tuyệt vời để hiểu chúng

Đình chỉ một tiện ích (widget)

Hình thức đơn giản nhất của UI động là làm xám màu của các mục hay nút ấn của trình đơn chưa sẵn sàng Việc đình chỉ các widget UI thực hiện theo cùng cách với

Trang 2

tất cả các widget; hàm setEnabled() là một tính năng của lớp Component (Thành phần) Liệt kê 1 cho thấy mã để đình chỉ một nút:

Liệt kê 1 Đình chỉ một nút

button.setEnabled(false);

Ngay cả hành động đơn giản chuyển sang màu xám một tùy chọn trình đơn không

sử dụng hoặc nút hộp thoại liên quan đến sự thỏa hiệp với người sử dụng Mặc dù một nút ấn đã chuyển sang màu xám ngay lập tức thông báo cho người dùng rằng

một hành động cụ thể không thể thực hiện được, những nó không cho họ biết tại

sao Điều này có thể là một vấn đề với người dùng, người có thể không hiểu lý do

(xem Các nguyên tắc chung)

Thật dễ dàng, khi bạn có thể nhìn thấy Câu hỏi là khi nào bạn nên kích hoạt hay

đình chỉ một nút Một quyết định thiết kế chung là đình chỉ một nút khi nó không

thích hợp Ví dụ, nhiều chương trình đình chỉ nút Save (và mục trình đơn tương

ứng bất kỳ) khi một tệp đã không được thay đổi kể từ lần lưu nó cuối cùng

Lời cảnh báo chủ yếu cho việc đình chỉ các nút là nhớ kích hoạt lại chúng ở thời điểm thích hợp Ví dụ, nếu có một bước xác nhận giữa việc nhấn vào một nút và hoàn thành hành động của nó, nút đó phải được kích hoạt ngay cả khi việc xác nhận không thành công

Trang 3

Điều chỉnh các phạm vi

Đôi khi một ứng dụng cần điều chỉnh phạm vi của một số widget, như là một Spinner (quay tròn) hoặc Slider (thanh trượt ), một cách động Điều này có thể phức tạp hơn nó mong đợi Các Slider, nói cụ thể, có các tính năng thứ cấp các dấu thời gian, khoảng cách dấu thời gian và các nhãn mà chúng có thể cần phải được điều chỉnh cùng với phạm vi đó để tránh bị lỗi nặng

Chương trình giới thiệu (demo) SwingSet2 không trực tiếp làm bất kỳ cái gì về điều này, do đó bạn sẽ thay đổi nó bằng cách gắn một ChangeListener cho một thanh trượt để có thể thay đổi thanh trượt khác Nhập lớp SliderChangeListener mới, chỉ ra trong Liệt kê 2:

Liệt kê 2 Thay đổi một phạm vi của thanh trượt

class SliderChangeListener implements ChangeListener {

JSlider h;

SliderChangeListener(JSlider h) {

this.h = h;

}

Trang 4

public void stateChanged(ChangeEvent e) {

JSlider js = (JSlider) e.getSource();

int i = js.getValue();

h.setMaximum(i);

h.repaint();

}

Khi thanh trượt ngang thứ ba được tạo ra (một thanh trượt trong bản demo ban đầu

có dấu đánh dấu tất cả các đơn vị và ghi nhãn tại 5, 10 và 11), một

SliderChangeListener mới cũng được tạo ra, chuyển qua thanh trượt đó như là đối

số hàm tạo (constructor) Khi thanh trượt dọc thứ ba (có phạm vi 0 đến100) được tạo ra, SliderChangeListener mới được thêm vào nó như là một người nghe

(listener) thay đổi Điều này làm việc gần như mong đợi: Điều chỉnh thanh trượt dọc thay đổi phạm vi của thanh trượt ngang

Thật không may, các dấu và các nhãn cũng chẳng làm việc tốt Các nhãn có tối đa năm dấu làm việc tốt miễn là phạm vi này không quá lớn, nhưng nhãn phụ tại 11 nhanh chóng là vấn đề về tính sử dụng, như trong Hình 1:

Trang 5

Hình 1 Các nhãn chạy cùng nhau

Cập nhật các dấu và các nhãn

Giải pháp rõ ràng sẽ đơn giản là đặt khoảng cách đánh dấu trên thanh trượt ngang, bất cứ khi nào giá trị tối đa của nó được cập nhật, như thể hiện trong Liệt kê 3:

Liệt kê 3 Thiết lập khoảng cách đánh dấu

Trang 6

// DOES NOT WORK

int tickMajor, tickMinor;

tickMajor = (i > 5) ? (i / 5) : 1;

tickMinor = (tickMajor > 2) ? (tickMajor / 2) : tickMajor;

h.setMajorTickSpacing(tickMajor);

h.setMinorTickSpacing(tickMinor);

h.repaint();

Liệt kê 3 đúng theo như nó thực hiện, nhưng nó không dẫn đến sự thay đổi nào cho các nhãn được vẽ trên màn hình Bạn phải thiết lập các nhãn một cách riêng biệt, sử dụng setLabelTable() Thêm một dòng nữa để sửa chữa nó:

h.setLabelTable(h.createStandardLabels(tickMajor));

Điều này vẫn còn để mặc cho bạn với các nhãn lẻ tại 11 đã được thiết lập ban đầu Tất nhiên, mục đích này là phải có một nhãn luôn ở đầu mút phải của thanh trượt Bạn có thể làm việc này bằng cách loại bỏ nhãn cũ (trước khi thiết lập giá trị tối đa mới) và sau đó thêm một nhãn mới Mã này hầu như làm việc:

Trang 7

Liệt kê 4 Thay thế các nhãn