Tổng quan về java ui

TỔNG QUAN VỀ JAVA UI UI(User Interface) là giới hạn rộng đề cập các loại giao tiếp giữa chương trình và người sử dụng. UI không chỉ là những thứ mà người dùng thấy, mà bao gồm cả những thứ người sử dụng nghe và cảm nhận. Ngay cả tốc độ la một phần quan trọng của UI trong một chương trình Giới thiệu GUI Đây là một UI được ưa chuộng hơn đối với hầu hết các chương trình JAVA Sử dụng âm thanh Ứng dụng sẽ chơi được âm thanh mà các ứng dụng khác không thể làm được Nhận thông tin về cấu hình Người sử dụng có thể chỉ định thông tin cấu hình tới ứng dụng bằng cách sử dụng command-line arguments và parameters Lưu trữ độ ưu tiên của người sử dụng bằng việc sử dụng các thuộc tính. Đối với những thông tin mà ứng dụng cần ngay cả khi ứng dụng không chạy, bạn có thể sử dụng các thuộc tính. Những ứng dụng̣̣ kí sinh(Applets) thường không thể viết các thuộc tính cho hệ thống các file cục bộ vì những hạn chế về bảo mật thông tin Nhận và hiển thị thông tin đầu vào, đầu ra và các dòng lỗi Các thông tin dầu vào, đầu ra và các lỗi chuẩn là một cách cũ vẫn còn hiện hữu đối với một giao diện người dùng. Nó vẫn còn hữu ích cho việc kiểm tra và gỡ lỗi các chương trình. CÁC THÀNH PHẦN CỦA AWT Các điều khiển cơ bản: Buttons, Checkboxes, Choices, Lists, Menus, and Text Fields Các lớp Button, Checkbox, Choice, List, MenuItem, and TextField cung cấp những công cụ điều khiển cơ bản. Đây là những các phổ biến nhất để người sử dụng xây dựng một chương trình JAVA. Khi người sử dụng kích hoạt một trong những điều khiển trên, ví dụ như khi nhắp chuột vào một nút hay khi nhấn phím trong một hộp Text thì nó sẽ thông báo một sự kiện (ACTION_EVENT). Một đối tượng chứa điều khiển đó có thể đáp trả sự kiện bằng việc sử dụng phương thức action() Các công cụ khác để lấy thông tin đầu vào của người sử dụng: Sliders, Scrollbars, and Text Areas Khi những điều khiển cơ bản không còn thích hợp nữa, bạn có thể sử dụng các lớp Scrollbar and TextArea để lấp dữ liều người sử dụng nhập vào. Lớp Scrollbar được sử dụng cho cả hai chức năng :thanh cuộn và con trược. Scrollbars không được tự động nằm trong Lists, Text Areas và trong những đối tượng ScrollPane. Lớp TextArea chỉ đơn giản cung cấp vùng để hiển thị hay cho phép sửa một vài dòng văn bản Tạo một thành phần theo ý muốn: Canvases Lớp Canvas cho phép bạn viết một thanh phần theo ý mình. Với các lớp con của Canvas, bạn có thể vẽ các hình ảnh như ý mình ra màn hình Thành phần Labels Label chỉ đơn giản để hiển thị một di₫òng văn bản không thể chọn lựa Các đối tượng chứa: Windows, Panels, and Scroll Panes AWT cung cấp 3 kiểu đối tượng chứa, tất cả được thực hiện như các lớp con của lớp Cotainer. Lớp con Window (Dialog, FileDialog, và Frame) cung cấp những cửa sổ dùng để chứa các thành phần. Panel d dùng để nhóm các thành phần trong một vùng của cửa sổ. ScrollPane cũng giống như Panel, nhưng nó đặc biệt hơn: nó hiển thị một thành phần lớn không có giới hạn về không gian, thông thường dùng thanh cuộn để điều khiển hiển thị một phần nào đó của thành phần Frames tạo một cửa sổ khá mạnh, khác với các cửa sổ do Dialogs tạo ra, các cửa sổ do Dialogs tạo ra sẽ phụ thuộc trên cửa sổ do Frames tạo ra Các lớp AWT khác AWT chứa nhiều thành phần khác. Nó chứa các lớp có liên quan đến việc vẽ và nắm bắt sự kiện. Phần này chúng ta thảo luận về các lớp của AWT có trong gói java.awt. AWT chứa hai gói khác là java.awt.image và java.awt.peer mà hầu hết các chương trình không sử dụng nó. Lớp và giao diện trong những gói này sẽ được đề cập đến khi cần thiết Gói java.awt một vài lớp layout manager. Gói java.awt cung cấp vài lớp về kích thước và hình dạng. Lớp Shape bao gồm Point, Rectangle, and Polygon. Lớp Color class rất thích hợp cho việc miêu tả và thao các màu sắc. Nó định nghĩa các hằng số cho các màu được dùng phổ biến như Color.black. Trong khi màu sử dụng phổ biến theo địng dạng RGB (red-green-blue), thì nó cũng có thể hiểu được màu đinh dang theo HSB (hue-saturation-brightness). Lớp Image cung cấp cách trình diễn dữ liệu ảnh. Một ứng dụng có thể lấy những đối tượng Image cho các ảnh GIF và JPEG bằng cách dùng phương thức getImage(). SỬ DỤNG CÁC THÀNH PHẦN, CÁC KHỐI XÂY DỰNG MỘT GUI Sử dụng các thành phần của AWT Hình vẽ sau cho thấy hệ thống phân cấp có tính thừa kế cho các lớp thành phần của AWT. Object | MenuComponent | +------------+ | | MenuItem MenuBar | +----+ | | Menu CheckboxMenuItem Các quy tắc chung khi sử dụng các thành phần Làm thế nào để thêm một thành phần vào một đối tượng chứa Khi bạn đọc bài này, nên chú ý. Bởi không có thành phần nào ngoại trừ cửa sổ tự hiển thị trên màn hình được. Trước hết bạn phải thêm nó vào một đối tượng chứa. Bản thân đối tượng chứa này là một thành phần, cũng có thể được thêm vào đối tượng chứa khác. Windows cũng như Frames and Dialogs nó là những đối tượng chứa mức cao nhất; đó là những thành phần không thêm vào được đối tượng chứa khác. Lớp Container địng nghĩa 3 phương thức cho việc thêm thành phần vào trong no: một phương thức add() một thông số và 2 phương thức add() có hai thông số. Nó phụ thuộc vào cách bố trí của một đối tượng chứa đang dùng. Phương thức add() một thông số thông thường chỉ yêu cầu chỉ định thành phần thêm vào. Phương thức add() 2 thông số. Phương thức 2 thông số đầu tiên cho phép bạn thêm một thông số chỉ định vị trí mà thành thành phần được thêm vào. Thông số thứ 2 của phương thức add() 2 thông số thứ 2 chỉ định thành phần được thêm vào Container. Thông số đầu là chuỗi phụ thuộc. Chú ý: Thêm một thành phần vào Container là chuyển thành phần đó từ Container đang chứa nó sang Container khác. Vì thế không thể có một thành phần trong 2 Container, ngay cả khi 2 Container đó không xuất hiện cùng một lúc trên màn hình. Các lớp thành phần cung cấp cái gì Tất cả các thành phần ngoại trừ Menus được thực thi như những lớp con của lớp Component. Nó thừa kế phần lớn các chức năng của lớp này Các hổ trợ cơ bản cho việc vẽ Lớp Component cung cấp các phương thức paint(), update(), và repaint()để hổ trợ cho việc vẽ Các sự kiện Lớp Component định nghĩa một phương thức handleEvent() cho mục đích chung và một nhóm các phương thức như action() nắm bắt các sự kiện xác định. Lớp Component cũng nhận sự điều khiển từ bàn phím. Điều khiển hình thức: font Lớp Component cung cấp các phương thức để lấy và xác lập font, và lấy thông tin về Font hiện tại Điều khiển hình thức: màu Lớp Component cung cấp các phương thức sau để lấy và xác lập màu nền và màu chữ: setForeground(Color), getForeground(), setBackground(Color), and getBackground(). Màu chữ là màu dùng cho tất cả văn bản có trong thành phần. màu nền là màu đằng sau văn bản hoặc ảnh Nắm bắt ảnh Lớp Component cung cấp nền tảng cho việc hiển thị ảnh. Lưu ý rằng phần lớn các thành phần không hiển thị được ảnh. Canvases và hầu hết các Container có thể hiển thị được ảnh. Điều khiển kích thước và vị trí trên màn hình Phương thức preferredSize() và minimumSize() cho phép một thành phần thiết kế các thành phần với kích thước thích hợp và nhỏ nhất. Làm thế nào để thay đổi hình thức và cách thức tác động của một thành phần Hình thức của hầu hết các thành phần đều phụ thuộc vào Platform. Buttons ở hệ thống Motif khác so với Buttons ở hệ thống Macintosh. Bạn không thể dễ dàng thay đổi hoàn toàn hình thức của các thành phần. bạn chỉ có thể thay đổi một phần nhỏ hình thức của các thành phần đó mà thôi như là thay đổi Font và màu nền. Mặc dù bạn không thể thay đổi hoàn toàn hình thức của các thành phần, nhưng bạn có thể thay đổi cách cư xử của nó. Ví dụ, nếu chỉ có giá trị số mới phù hợp với Textfied, thì bạn có thể thực thi lớp con TextField kiểm tra mọi giá trị nhập vào của bàn phím, không nhận những giá trị không phải là sô.́ Sử dụng Buttons Button là một công cụ điều khiển đơn giản để phát ra một sự kiện hành động khi người sử dụng nhấn vào đó. Hình thức của Buttons trên màn hình phụ thuộc vào nền mà nó đang chạy và nó có nhận được sự tác động hay không. Nếu bạn muốn các Button của chương trình giống nhau ở mọi nền hoặc cho thật đặc biệt, bạn nên tạo một lớp con Canvas để làm được ngoại hình của các nút theo ý muốn; bạn không thể dùng lớp con Button để thay đổi ngoại hình của các nút. những nét của hình thức của một Button có thể thay đổi được là Font và chuỗi hiển thị , màu nền và màu chữ của nó, và và nó có thể được tác động hay không. Sau đây là một Applet hiển thị 3 Button. Khi bạn kích chuột vào nút bên trái, nó sẽ làm cho nút giữa không nhận được sự tác động (và nó làm cho nó không thể nhận sự tác động) và làm cho nút phải nhận được sự tác động. Khi kích chuột vào nút bên phải, nó kích hoạt sự hoạt động của nút giữa và nút trái và làm cho nó sẽ không nhận được sự tác động. //In initialization code: b1 = new Button(); b1.setLabel("Disable middle button"); b2 = new Button("Middle button"); b3 = new Button("Enable middle button"); b3.disable(); . . . public boolean action(Event e, Object arg) { Object target = e.target; if (target == b1) { //They clicked "Disable middle button" b2.disable(); b1.disable(); b3.enable(); return true; } if (target == b3) { //They clicked "Enable middle button" b2.enable(); b1.enable(); b3.disable(); return true; } return false; } Sử dụng Canvases Lớp Canvas tòn tại như là một lớp con. Nó không làm gì cho bản thân nó; nó chỉ cung cấp cho bạn cách thực thi các thành phần tự tạo. Ví dụ, Canvases rất thuận lợi cho việc hiển thị các vùng của hình ảnh, trong bất cứ trường hợp nào bạn cùng có thể nắm bắt được các sự kiện xảy ra trong suốt thời gian hiển thị ảnh. Canvases cũng thuận tiên khi điều khiển -- Button, for example – nó không giống như sự thực thị mặc định của một điều khiển. Vì lẽ rằng bạn không thể thay đổi hình thức của các điều khiển chuẩn bằng các lớp con mà các thành phần tương ứng với no (ví dụ chư Button), do đó bạn phải thực thi lớp con Canvas để bạn có thể có hình thức như ý muốn và cách cư xử tương tự như sự thực thi mặc định của điều khiển. Khi thực thi một lớp con Canvas , cẩn thận khi thực thi những phương thức minimumSize() và preferredSize() để mang lại kích thước đúng đắn cho các Canva. Mặc khác, phù thuộc vào cách bố tri của các đối tượng chứa các Canva, các Canva có thể có kích thước quá nhỏ, có khi không thấy cùng nên. Sau đây là một Applet sử dụng 2 trường hợp của lớp con Canvas subclass: ImageCanvas. Sau đây là một đoạn mã lệnh của ImageCanvas. Bởi vì dữ liệi ảnh được tải về không đồng bộ nên ImageCanvas không cho biết đựơc độ lớn của nó cho đến vài giây sau khi nó tạo được. Vì lý do này, ImageCanvas dùng độ rộng và độ cao ban đầu để tạo ảnh cho đến khi kích thước của ảnh hoàn toàn xác định được thì nó mới thay đổi kích thước của nó. class ImageCanvas extends Canvas { Container pappy; Image image; boolean trueSizeKnown = false; Dimension minSize; int w, h; public ImageCanvas(Image image, Container parent, int initialWidth, int initialHeight) { if (image == null) { System.err.println("Canvas got invalid image object!"); return; } this.image = image; pappy = parent; w = initialWidth; h = initialHeight; minSize = new Dimension(w,h); } public Dimension preferredSize() { return minimumSize(); } public synchronized Dimension minimumSize() { return minSize; } public void paint (Graphics g) { if (image != null) { if (!trueSizeKnown) { int imageWidth = image.getWidth(this); int imageHeight = image.getHeight(this); if ((imageWidth > 0) && (imageHeight > 0)) { trueSizeKnown = true; //Ooh... component-initiated resizing. w = imageWidth; h = imageHeight; minSize = new Dimension(w,h); resize(w, h); pappy.layout(); pappy.repaint(); } } g.drawRect(0, 0, w - 1, h - 1); g.drawImage(image, 0, 0, this); } } } Sử dụng Checkboxes Lớp Checkbox cung cấp những checkbox – 2 trạng thái của Checkbox có thể là “on” hoặc “off”. Khi người sử dụng nhấn chuột vào Checkbox, trạng thái của Checkbox sẽ thay đổi và trả về một sự kiện. Mặc khác, nó cũng nhóm các thành phần để người dùng có thể chọn như là Choices, Lists, và Menus. Nếu bạn muốn tạo một nhóm Checkbox mà chỉ có một Checkbox trong một thời điểm ở trạng thái “on” thì bạn có thể thêm vào một đối tượng CheckboxGroup để giám sát các Checkbox đó. Ví dụ : Panel p1, p2; Checkbox cb1, cb2, cb3; //These are independent checkboxes. Checkbox cb4, cb5, cb6; //These checkboxes are part of a group. CheckboxGroup cbg; cb1 = new Checkbox(); //Default state is "off" (false). cb1.setLabel("Checkbox 1"); cb2 = new Checkbox("Checkbox 2"); cb3 = new Checkbox("Checkbox 3"); cb3.setState(true); //Set state to "on" (true). . . . cbg = new CheckboxGroup(); cb4 = new Checkbox("Checkbox 4", cbg, false); //initial state: off (false) cb5 = new Checkbox("Checkbox 5", cbg, false); //initial state: off cb6 = new Checkbox("Checkbox 6", cbg, false); //initial state: off Sử dụng Choices Lớp Choice cung cấp một thực đơn để lựa chọn, truy nhập bằng một nút đặc biệt. người sử dụng nhấn nút đó và nó sẽ liệt ra một menu và bạn có thể chọn một thứ trong menu đó. Khi người dùng chọn, nó sẽ phản hồi một sự kiện. Ví dụ : //...Where instance variables are defined: Choice choice; //pop-up list of choices //...Where initialization occurs: choice = new Choice(); choice.addItem("ichi"); choice.addItem("ni"); choice.addItem("san"); choice.addItem("yon"); label = new Label(); setLabelText(choice.getSelectedIndex(), choice.getSelectedItem()); . . . public boolean action(Event e, Object arg) { if (e.target instanceof Choice) { setLabelText(choice.getSelectedIndex(), (String)arg); return true; } return false; } } Sử dụng Dialogs AWT cung cấp những hổ trợ cho dialogs – là những cửa sổ phụ thuộc vào những cửa sổ khác—với lớp Dialog. Nó cung cấp những lớp con hữu ích như : FileDialog, cung cấp một cửa sổ mà bạn có thể mở hoặc lưu file. Một yếu tố để phân biệt Dialog và các cửa sổ thông thường khác là Dialog phụ thuộc vào các cửa sổ khác (Frame). Khi cửa sổ đóng thì các Dialog phụ thộc nó cũng biến mất. Khi những cửa sổ đó được thu nhỏ các Dialog phụ thuộc nó sẽ không xuất hiện trên màn hình. Khi cửa sổ được trở về kích thước thông thường thì các Dialog đó sẽ hiển thị ra màn hình. AWT tự động cung cấp các hình thức này cho bạn. Dialogs có thể là modal. Modal dialogs đòi hỏi sự chăm sóc kỹ lưỡng của người sử dụng, chống lại việc người sử dụng làm bất cứ cái gì khác trên ứng dụng cho đến khi Dialog đã được gạt bỏ Ví dụ : class SimpleDialog extends Dialog { TextField field; DialogWindow parent; Button setButton; SimpleDialog(Frame dw, String title) { super(dw, title, false); parent = (DialogWindow)dw; ...//Create and add components, such as the set button. //Initialize this dialog to its preferred size. pack(); } public boolean action(Event event, Object arg) { if ( (event.target == setButton) | (event.target instanceof TextField)) { parent.setText(field.getText()); } field.selectAll(); hide(); return true; } } Sử dụng Frames Lớp Frame cung cấp những cửa sổ cho applets và applications. Mỗi ứng dụng phải có ít nhất 1 Frame. Nếu một ứng dụng có 1 cửa sổ phụ thuộc vào cửa sổ khác thì bạn nên dùng Dialog thay vì dùng Frame cho cửa sổ phụ thuộc đó. Đáng tiếc là applets không thể dùng tốt dialogs, vì vậy người sử dụng thường dùng Frame. Ví dụ: public class MenuWindow extends Frame { boolean inAnApplet = true; TextArea output; public MenuWindow() { ...//This constructor implicitly calls the Frame no-argument //constructor and then adds components to the window. } public boolean handleEvent(Event event) { if (event.id == Event.WINDOW_DESTROY) { if (inAnApplet) { dispose(); } else { System.exit(0); } } return super.handleEvent(event); } . . . public static void main(String args[]) { MenuWindow window = new MenuWindow(); window.inAnApplet = false; window.setTitle("MenuWindow Application"); window.pack(); window.show(); } } Sử dụng Labels Là thành phần đơn giản nhất của UI Components, là một chuỗi kí tự có thể được dùng làm nhãn cho các UI Components khác. Labels không sửa được, nó chỉ làm nhãn cho các UI Components khác trên màn hình Lợi điểm của Lables so vớI các chuỗI kí tự thông thường khác là: Bạn không phảI tự vẽ lạI Labels. Labels là những thành phần của AWT và AWT theo dõi và làm việc đó Labels tuân theo sự sắp xếp của Panel chứa nó và có thể căn chỉnh với các UI Components khác Labels chứa chuỗi không thể sửa đổi được mà chỉ dùng để mô tả các thành phần khác của AWT Để tạo một Label, sử dụng một trong các cấu trúc sau: Label() tạo một nhãn rỗng, với chuỗi được canh chỉnh bên trái. Label(String) tạo một chuỗi có nội dung là String cũung được canh chỉnh bên trái. Label(String,int) tạo một nhãn có nội dung là String Tham số Int bao gồm: Label.RIGHT: chuỗi được canh chỉnh bên phải Label.LEFT : chuỗi được canh chỉnh bên trái Label.CENTER: chuỗi được canh chỉnh giữa Bạn có thể thay đổi font của Label bằng phương thức setFont() Sau đây là một ví dụ minh hoạ sử dụng Label import java.awt.*; public class LabelTest extends java.applet.Applet { public void init() { setFont(new Font ("Helvetica", Font.BOLD, 14)); setLayout(new GridLayout(3,1)); add(new Label("aligned left", Label.LEFT)); add(new Label("aligned center", Label.CENTER)); add(new Label("aligned right", Label.RIGHT)); } } Sử dụng Lists Lớp List cung cấp một vùng có thể cuộn được mà trong đó nó chứa các chuỗi văn bản có thể chọn được (một dòng một chuỗi). Người sử dụng có thể chọn bạn cách kích chuột. Lists có thể cho phép chọn nhiều hay chỉ có một sự lựa chộn trong một thời điểm. Ví dụ : ...//Where instance variables are declared: TextArea output; List spanish, italian; ...//Where initialization occurs: //Build first list, which allows multiple selection