Rất nhiều giao diện người dùng và các c ô n g cụ hồ trợ giao diện đồ họa sử dụng kiến trúc M V C làm mẫu thiết kế chinh để trình diễn, lưu trừ và duy trì cá c dừ liệu người dùng. Java Sw in g không phải là m ột ngoại lệ. Java Sw in g là m ột bộ c ô n g cụ hỗ trợ thiết kế giao diện người dùng đồ họa (G U I) m ở rộng cho Javạ S w in g là một thành phần quan trọng trong Java Foundation C lass (JFC). S w in g bao gồm các thành phần điều khiển giao diện người dùng trực quan như các nút bấm, các ô nhập liệu, bảng cuộn, cây và bảng. S w in g cho phép v iệ c thay đổi trình diễn các thành phần trong ứng dụng mà không cần phải thay đổi m ã nguồn của ứng dụng (P lugable L ook-an d-F eel). Bên cạnh đ ó, S w in g cho phép giới hạn truy cập như tầm nhìn hay các tác động chuột, bàn p h ím ... lên các thành phần trong giao diện đồ họa (A ccessib ility ). K hông giốn g với A W T (Abstract W ind ow ing T oolkit - m ột thư viện hỗ trợ đồ họa của Java trước S w in g), các thành phần S w in g kh ông thi hành bằng các mã đặc tả nền mà chún g được viết hoàn toàn bằng Java, vì thế nó độc lập với hệ thống (L eigh tW eight). [14]
Hình IỊ3.1. Kiến trúc Java Foundation C la sses
chúng ta có thể tạo lớp con của D efaultT ableM odel và ch ồng các phương thức liên quan đến thông tin mà chúng ta cần viết lạị Chúng ta cũng có thể m ở rộng giao diện trừu tượng A bstractT ableM odel và tự thực thi tất cả các phương thức cùa nó. M ồi một M odel lưu trữ cá c dữ liệu của nó trong m ột sưu tập chung và được truy xuất thông qua các phương thức get/set hay thông qua các chỉ mục (in d ex) cùa chúng.
Đ ể áp dụng thiết kế M V C , Java S w in g là sử dụng ba tính chất c ơ bản của ngôn ngừ lập trình Java: kế thừa, truyền tham chiếu và cơ chế even t/listener (sự kiện/đăng ký theo dõi). C ác M od el không lưu trừ các thông tin về cá c V ie w , khi c ó bất kỳ m ột sự thay đồi nào trên M od el thì các V ie w đó sẽ được tự đ ộn g cập nhật theo cơ chế event/listion er. Vì Java truyền cá c đối tượng bằng tham ch iếu nên cỏ thể có một chuồii các M odel tham chiếu đến một M odel chính với các dữ liệu cũng như các chỉ số của dừ liệu cùa nó. C ác M odel tự viết nên kế thừa tất cả các phương thức và viết lại các phương thức chi mực. Khi người dùng yêu cầu các thay đổi trình diễn trên giao diện (sắp xếp hay lọ c thông tin) thì các chì mục sẽ được tính toán lại và m ột hành đ ộn g sẽ được truyền đến cá c M odel. Đ iều này chỉ dẫn đến sự thay đổi trên V ie w trong khi dữ liệu thực trong M odel thì không thay đổi (Chỉ thay đổi chỉ m ục).
11.3.3.2. Thành phần giao diên
Đ ể quản lý giao diện người dùng, S w in g định nghĩa lớp U IM anager nắm giữ các thuộc tính cùa giao diện người dùng hiện tạị Đ iều khiển khả năng tùy biến giao diện của các thành phần khi liên kết với các thành phần khác.
Trong S w in g , tất cả các đối tượng trình diễn giao diện đều đư ợ c kế thừa từ lớp C om ponen tU Ị Lớp này chứa hầu hết các phương thức để làm v iệ c với cơ ch ế tùy biến giao diện. N ó bao gồm các phương thức như cài đặt, tháo
bó, xem xét các khía cạnh đồ họa và v ẽ giao diện.
Tùy biến giao diện người dùng (PL& F) là v iệc các thành phần ùy thác công v iệ c trình diễn (lo o k ) và điều khiển sự kiện (fee l) cho một “đối tượng giao diện người dùng” tách biệt mà đối tượng này có thể được thay đổi trong quá trình chạy chư ơng trình.
Tùy biến giao diện người dùng là tương đối phức tạp và nó được thiết kế riêng cho một nhóm nhỏ các nhà phát triển y ê u cầu xây dựng các giao diện người dùng mớị Đại đa số các nhà phát triển cò n lại chỉ cần hiểu cách thức áp dụng c ơ chế PL&F v à o các ứng dụng của mình và sử dụng lớp Ư IM anager để có thề thực hiện các tùy biến giao diện hỗ trợ sẵn của S w in g theo các thiết kế riêng.
S w in g định nghĩa m ột lớp trừu tượng là L ookA n d F eel. Lớp này bao gồm đầy đủ các tính chất để một thành phần c ó thể tùy biến giao diện. N ó m ô tả đầy đủ các thông tin cần thiết cho việc tạo và thực hiện tùy biến giao diện như tên, m ô tà, thông tin v ề hệ thống và bàng cá c thuộc tính m ặc định như màu sắc và phông chữ.
M ồi m ột thực thi tùy biến giao diện là m ột m ở rộng của lớp L ookA ndFeel chứa cá c thông tin cần thiết để ứng dụng có thể quản lý đ ư ợ c các PL&F. Ví dụ, lớ p sw ing.plaf.m otifM otifI,ookA ndF eel là lớp con của L ookA nd Feel được sử dụng đề quản lý g ia o diện người dùng M o tif trên
Solaris.
B ằng v iệ c sử dụng U IM anager, các thành phần và các chương trình có thề truy cập gián tiếp vào đối tượng L ook A n d F eel. C ác ứng dụng không nên truy cập trực tiếp đến đối lượng L ook A n d F eel mà sử dựng đối tư ợng U lM anager để nấm giữ cá c lớp L ookA ndF eel được hồ trợ cũng như lớp L ookA ndFeel hiện tạị Ư IM anager cũng quản lý v iệ c truy cập đến các bảng
giá trị các thuộc tính m ặc định của giao diện người dùng hiện tạị
Khi chạy m ộ t chương trình sử dụng cá c thành phần Sw ing, chương trình sẽ khởi tạo thành phần giao diện mặc định của Sw in g. Tuy nhiên, các chương trình có thể gọi phương thức setL o o k A n d F eel() của U IM anager để thiết lập các giao diện riêng cho chương trình. V í dụ sau sẽ thiết lập giao diện M o tif C D E làm giao diện mặc định:
UIManager.setLookAndFeei(
"com. sun. java, swing, piaf, motif. MotifLookAndFeel");
U IM anager cò n cung cấp phương thức getL ook A n d F eel() lấy thông tin v ề giao diện hiện tại và các phương thức khác đề lấy các thông tin về giao diện của hệ thống và cá c loại thao tác quản lý giao diện khác nhaụ
11.3.4. Một ví dụ về Swing
Đ ề có một hình dung tốt hơn về các ứng dụng Java Sw ing, cách tốt nhất là xem xét m ột v í dụ cụ thể. Giả sử chúng ta cần xây dựng một ứng dụng cửa sổ gồm cá c nút bấm như “Cut”, “C o p y ” , “P aste”, “M eltal”, “M o t if ’, “ W in d o w s” . Khi chúng ta kích chuột vào các nút “ Cut”, “C o p y ”, “ P aste” , các đoạn văn bàn tương ứng là Cut, C opy, Paste s ẽ xuất hiện trên màn hình. Khi chúng ta kích chuột v à o nút “ M étal”, “M o t if ’ v à “ W in d o w s”, các thành phần giao diện người dùng sẽ chuyển sang định dạng kiểu M etal, M o tif và W in d ow s tư ơng ứng. N ếu hệ thống không hỗ trợ các định dạng này, một thông báo lỗi sẽ xuất hiện.
C hương trình gồm 2 lớp chính: T oolbarFram el là lớp thực thi chương trình, bao gồm v iệ c tạo lập cửa sổ, bố trí các nút bấm, đăng ký đối tượng theo dõi các sự kiện và m ột phương thức xử lý các sự kiện kích chuột vào cá c nút “Cut”, “ C o p y ” , “P a ste ” . M ã nguồn của lớp này như sau:
import javạawt.*; import javạawt.event.*;
import javax.swing.*;
public class ToolbarFramel extends Frame implements Action Listener { // Khai báo các nút bấm JButtons
JButton cutButton, copyButton, pasteButton; JButton winButton, javaButton, motifButton; public ToolbarFramelO {
superfToolbar Example (Swing)"); //Khai báo tiêu đề của cửa sổ setSize(450, 250); //Kích thước cửa số
ađWìndowLístener(new BasicWindowMonitorO); //Đăng ký đối tượng theo dõi JPanel toolbar = new JPanel(); //Khởi tạo đối tượng thanh công cụ
toolbar.setLayout(new FlowLayout(FlowLayout.LEFT)); //Thiết lập bố cục cửa số cutButton = new JButton("Cut"); //Khời tạo nút bấm "Cut"
cutButton.ađActionListener(this); //Đăng ký đối tượng theo dõi là cửa số này toolbar.ađ(cutButton); //Thêm nút này vào thanh công cụ
copyButton = new JButtonfCopy”); //Khởi tạo nút bấm "Copy" copyButton.ađActionListener(this); //Đăng ký đối tượng theo dõi toolbar.ađ(copyButton); //Thêm nút này vào thanh công cụ pasteButtôn = new JButtonfPaste"); //Khởi tạo nút bấm "Paste" pasteButton.ađActionListener(this); //Đăng ký đối tượng theo dõi toolbar.ađ(pasteButton); //Thêm nút này vào thanh công cụ
ađ(toolbar, BorderLayout.NORTH); //Thêm thanh công cụ vào cửa số / / Thêm các điều khiến giao diện sử dụng các nút bấm
JPanel InfPanel = new JPanelO; //Khởi tạo InfPanel
LnFListener Inflistener = new LnFListener(this); //Khởi tạo đối tượng theo dõi javaButton = new JButton(”Metal"); //Khởi tạo nút bấm Metal
javaButton.ađActionListener(lnfListener); //Đăng ký đối tượng theo dõi lnfPanel.ađ(javaButton); //Thêm nút này vào InfPane!
motifButton = new JButton("Motif'); //Khởi tạo nút bấm "Motif"
motifButton.ađActionListener(lnfUstener); //Đăng ký đối tượng theo dõi InfPanel.ađ(motifButton); //Thêm nút này vào InfPanel
winButton = new JButtonC'Windows"); //Khởi tạo nút bấm Windows winButton.ađActionListener(lnfListener); //Đăng ký đối tượng theo dõi
InfPanel.ađ(winButton); //Thêm nút này vào InfPanel
ađ(lnfPanel, BorđerLayout.SOUTH); //Thêm InfPanel vào cửa sổ >
//Hàm xử lý các sự kiện
public void actionPerformed(ActionEvent ae) { System.out.println(aẹgetActionCommandO); }
//Chương trình chính
public static void main(String args[]> { ToolbarFramel tf2 = new ToolbarFramelO; tf2.setVisible(true);
> >
Lớp thứ hai là LnFListener. Lớp này thự c hiện v iệ c tùy biến g ia o diện người dùng th ông qua các sự kiện lựa chọn cá c nút bấm “M eta l” , “ M o t i f ’, "‘W ind ow s” trong cử a sổ chư ơng trình. M ã ngu ồn cùa lớp này như sau:
import javạawt.*; import javạawt.event.*; import javax.swing.*;
public class LnFListener implements ActionListener { Frame frame;
public LnFListener(Frame 0 { frame = f;
>
public void actionPerformed(ActionEvent e) { String InfName = null;
if (ẹgetActionCommand().equals("Metal")) { InfName =" javax.swing.plaf.metal.MetalLookAndFeel"; > else if (ẹgetActionCommand().equals("Motif)) { InfName =" com.sun.javạswing.plaf.motif.MotifLookAndFeel"; > else { InfName =" com.sun.javạswing.plaf.windows.WindowsLookAndFeel"; > try { UIManager.setLookAndFeel(lnfName); SwingUtilities.updateComponentTreeUI(frame);
Sw in g là m ờ rộng của A W T - nhưng không thay thế. Sw in g là phần phía trên của các API thuộc JFC - bao gồm thêm cả Java 2 D và API của D rag and Drop (vi m ột số m ột số tác vụ của chúng phụ thuộc nền nên không được đưa hẳn vào trong S w in g)
Trong kiến trúc M V C truyền thống, M od el lưu giữ các dữ liệu, các chức năng của ứng dụng, Controller nhận yêu cầu người dùng và truyền yêu cầu đó cho M odel xừ lý , sau đó nhận về kết quà truyền cho V iew hiển thị kết quả ch o người dùng. K iến trúc M V C truyền thống là đơn giản và rõ ràng, tuy nhiên những nhà phát triển Sw in g nhanh chóng nhận thấy chúng không thực sự phù hợp với cá c ứng dụng thực tế của Sw ing. Hai thành phần C ontroller có mối quan hệ trực tiếp với nhau và không tách rời, trong khi đó, M odel lại có mối quan hệ gián tiếp với V iew và Controller. D o vậy, hai thành phần V iew và C ontroller đư ợ c nhóm lại tạo nên một thành phần tổng hợp gọi là UI D elegatẹ Khi đ ó, kiến trúc M V C truyền thống trở thành kiến trúc M odel -
D elegate hay cò n đư ợ c gọi là “kiến trúc tách M o d e l” (separable m odel
architecture)
Hình IỊ3 .2 . K iến trúc tách M odel trong Java S w in g
M ỗi thành phần trong Java Sw ing đư ợ c tách thành hai phần: M odel (các dữ liệu và các ch ứ c năng của chương trình), U I-D eleg a te (giao diện người dùng - U I). D o đó, nó phân tách giữa v iệ c trình diễn với các dữ liệu và các chứ c năng của chư ơ ng trình.
11.3.3. Java Swing và thiết ké MVC
Hầu hết các ứng dụng thương mại có y êu cầu hiền thị dữ liệu người dùng trên các định dạng bảng hay danh sách thông tin. V iệc trình diễn dừ liệu này có thê đòi hỏi cá c ứng dụng phải truy cập trực tiếp vào C SD L hay các nguồn dừ liệu khác. Trên các bàng này thường có thêm một số chức năng như lọ c hay sắp xếp lại dữ liệu theo một tiêu chí cụ thể nào đó. Khi số lượng người dùng tăng lên, v iệ c truy xuất sẽ trở thành gánh nặng cho ứng dụng về khả năng đáp ứng của chương trình, c ỏ một giải pháp thường được khuyên dùng trong trường hợp này đó là các kỳ thuật Caching. Tuy nhiên, có một cách thức đơn giản hơn là lấy dữ liệu của bảng trong m ột lần và sau đó các thao tác chỉ thực hiện trên phần trình diễn m à không thực hiện các truy vấn trực tiếp đến C SD L . K ỳ thuật này có thề áp dụng được ch o các bàng, các danh sách bô xuống và câ y cũng như các thành phần giao diện đồ họa không có nhiều dừ liệu như c á c nút bấm. K iến trúc M V C là một thiết kế phù hợp để có thể thực hiện đư ợ c điều nàỵ
Trong Java S w in g, tất cả các thành phần giao diện đồ họa đều áp dụng kiến trúc M V C . c ấ u trúc m ồi thành phần của nó bao gồm m ột lớp V iew , một lớp M od el và m ột giao diện công khaị Trong đó, M odel được chia thành hai lớp khác nhau đó là: các M odel lưu trữ thông tin trạng thái của các thành phần và các M od el lưu trữ thông tin của chương trình. C ác M odel lưu trừ trạng thái của các thành phần chỉ lưu trữ các thông tin liên quan đến trạng thái điều khiển của m ột thành phần như thanh trượt hay nút bấm. C ác M od el lưu trữ thông tin của ch ư ơ ng trình có thêm các dừ liệu thực tế được sử dụng trong chương trình như cá c thành phần bảng hay các vùng văn bàn (Textarea).
N ếu sử dụng S w in g để tạo các thành phần giao diện đồ hoạ Java đơn giản hoặc sừ dụng cá c cô n g cụ hỗ trợ thiết kế IDE (Integrated D evelop m ent
Environment) để làm điều đó, bạn có thể sẽ không để ý là có hay không sự phân tách giữa phần trình diễn và Model của nó vì Java Swing đã cung cấp sẵn một M odel mặc định cho mồi thành phần (bao gồm cả các thành phức tạp hơn như bàng hay danh sách). Tuy nhiên, trong nhiều trường hợp, sự phân tách giữa M odel và trình diễn cho phép các nhà phát triển thu được nhiều lợi ích trong việc xây dvmg các thành phần giao diện đồ hoạ bằng việc bổ sung thêm các xử lý vào trong thiết kế ban đầu cùa Swing.
Trong Java Swing, thành phần Controller không xuất hiện một cách rõ ràng nhưng nó vẫn tồn tạị Thành phần View là một đối tượng có chức năng hiển thị các thành phần của giao diện trên màn hình. Thành phần M odel có thể được để m ặc định hoặc được tạo mớị Nhiều View có thể sử dụng cùng một M odel để lưu trừ dữ liệu mà chúng trình diễn. Thậm chí các View đó không cần plìài có cùng kiểụ Ví dụ dưới đây tạo một đối tượng M odel và hai đối tượng View cho đối tượng Model đó. Bất cứ một thay đồi nào trên Model (tác động vào M odel thông qua một trong hai View) đều sẽ dẫn đến việc thay đổi trình diễn trên cả hai đối tượng View. Cơ chế tự cập nhật lại các View khi có sự thay đối trong M odel được thực hiện một cách tự động.
Document doc = new DefaultStyledDocumentO; // Đối tượng MODEL
JTextArea tal = new JTextAreădoc); // Đối tượng VIEW 1
JTextArea ta2 = new JTextAreădoc); // Đối tượng VIEW 2
Ví dụ sau đây sẽ trình diễn dừ liệu bằng nhiều kiểu View khác nhau cho cùng một M odel.
Document doc = new DefaultStyledDocumentO; // Đối tượng MODEL
JTextArea ta = new JTextAreădoc); / / Đối tượng VIEW 1
JTextField tf = new JTextField(doc, "Name", 1); // Đối tượng VIEW 2 khác kiểu View 1
11.3.3.1. Thành phần Model
Khả năng tách trình diễn ra khỏi dữ liệu dừ liệu giúp các nhà phát triển có thể chỉnh sửa hay thay đổi các trình diễn của một M odel một cách dễ
dàng mà không yêu cầu phải truy vấn trực tiếp đến CSDL của chương trình. Mồi thành phần giao diện có một đối tượng M odel trừu tượng và một đối tượng M odel chuẩn cụ thể thực thi giao diện đó:
T h à n h p h ầ n G ia o d iệ n M o d e l L oại M ode l
J B u t t o n B u t t o n M o d e l Ị G U I J t o g g l e B u t t o n B u t t o n M o d e l | G U I / d a t a J c h e c k B o x B u t t o n M o d e l i G U I / d a t a J r a d i o B u t t o n B u t t o n M o d e l i G U I / d a t a J m e n u B u t t o n M o d e l Ị G U I I J m e n u I t e r a B u t t o n M o d e l ỊG U I U c h e c k B o x M e n u I t e m B u t t o n M o d e l j G U I / d a t a