Bài giảng Graphic User Interface (GUI)

ckIncrement(int v) 	int getBlockIncrement() void setValue(int v)	 int getValue() void setVisibleAmount(int newAmount) int getVisibleAmount() GUI Slide */57 6- Bố trí các components lên GUI Layout : Cách bố trí các components lên container. Không dễ dàng gì để tự quản lý vị trí của các components trên GUI. LayoutManager là interface mô tả về các layout. Trong gói AWT có hiện thức sẵn một số layout, các lớp layout này đều implement LayoutManager interface. GUI Slide */57 6.1-Layouts có sẵn trong AWT java.awt.FlowLayout (bố trí dạng dòng chảy) java.awt.BorderLayout (bố trí về biên khung) java.awt.GridLayout (bố trí dạng lưới đều nhau) java.awt.GridBagLayout (bố trí dạng lưới không đều) java.awt.CardLayout (bố trí dạng lưng quân bài) Tham khảo docs\api\java\awt\package-tree.html vớo docs là thư mục Documantation của Java 2 GUI Slide */57 6.2- FlowLayout Bố trí các component theo dạng chảy xuôi theo thứ tự mà phần tử này được add vào container. Đây là layout mặc định của Panel. Nếu có nhiều component trên container  Các component có thể được đặt trên nhiều dòng  Vấn đề gióng hàng (Align) Giữa các component, chúng hở nhau theo chiều dọc (vgap) bao nhiêu, theo chiều ngang (hgap) bao nhiêu? GUI Slide */57 FlowLayout... Constructors FlowLayout() Tạo FlowLayout mặc định: align= center, vgap=hgap=5 unit. FlowLayout(int align) Tạo FlowLayout với align đã biết, vgap=hgap=5 unit (default). FlowLayout(int align, int hgap, int vgap) Tạo FlowLayout với 3 tham số Trị của align: các dữ liệu static của class FlowLayout LEFT CENTER RIGHT LEADING (phía đầu, tương tự LEFT) TRAILING (phía đuôi, tương tự RIGHT) GUI Slide */57 Click for Demo 6.3- BorderLayout Bố trí các component theo dạng ra biên của khung tạo ra 5 vị trí: EAST, WEST, SOUTH,NORTH, CENTER. Đây là layout MẶC ĐỊNH của Frame. Nếu container chỉ có 1 component và đặt nó ở vị trí CENTER thì component này phủ kín container. Cú pháp thêm 1 component vào container tại 1 vị trí: Container.add("East", componentName); // hoặc Container.add(BorderLayout.EAST, componentName); Tương tự cho “West”, “South”, “North”, “Center” GUI Slide */57 Click for Demo 6.4- GridLayout Bố trí các component thành 1 lưới rows dòng, cols cột đều nhau. GUI Slide */57 Lưới 4x4 Lưới 3x2 Lưới 1x4 Lưới 1x4 GridLayout... Constructor GridLayout()   	Tạo grid layout mặc định 1x1 GridLayout(int rows, int cols)     Tạo grid layout rows x cols .GridLayout(int rows, int cols, int hgap, int vgap)            GUI Slide */57 Click for Demo 6.5- GridBagLayout Layout dạng lưới cho phép 1 component chiếm 1 số ô kề nhau theo cả 2 chiều. Hình Empoyee Info sau là GridBagLayout 6x4, các label bên trái chiếm 1ô, các textbox chiếm 3 ô ngang. Dòng “Sex” chiếm 4 ô ngang, 2 checkbox chiếm 2 ô ngang. GUI Slide */57 Các Ví dụ khác Class java.awt.GridBagLayout Constructors: GridBagLayout() Áp đặt GridBagLayout cho 1 container: GridBagLayout gb= new GridBagLayout(); FrameName.setLayout(gb); PanelName.setLayout(gb); Viết ngắn gọn: FrameName.setLayout(new GridBagLayout()); PanelName.setLayout(new GridBagLayout()); GUI Slide */57 class GridBagConstraints Làm sao để có thể đưa 1 component vào 1 vị trí nhưng trải dài trên nhiều ô kề nhau? 1 component vào 1 vị trí nhưng trải dài trên nhiều ô kề nhau là 1 sự “ràng buộc” 1 component vào các ô này. Một đối tượng thuộc lớp GridBagConstraints sẽ đảm nhiệm việc này. GUI Slide */57 class GridBagConstraints... Properties – Đa số là static data int gridx, gridy : ô sẽ đặt component vào int gridwidth, gridheight : số ô sẽ phủ theo 2 chiều khi thêm 1 component vào ô double weightx, weighty : Khoảng hở của lưới, mặc định là 0. int anchor : Vị trí đặt component, mặc đi6nh là CENTER, các static int được khai báo sẵn: GridBagConstraints.NORTH, EAST,WEST, SOUTH, NORTHEAST, SOUTHEAST, NORTHWEST, SOUTHWEST. int fill: Xác định kiểu đặt khi component có kích thước lớn hơm ô sẽ được đặt vào. Các hằng được dùng: GridBagConstraints.NONE, HORIZONTAL, VERTICAL, BOTH. Insets insets : Đặc tả khoảng hở giữa các phần tử được đưa vào, mặc định là 0. int ipadx, ipady: Khoảng độn (số pixel trống) bên trong của phần tử theo 2 chiều. Mặc định là 0. Khi vẽ phần tử, sẽ thêm 2*ipadx và 2*ipady vào chiều rộng tối thiểu và chiều cao tối thiểu của phần tử. GUI Slide */57 class GridBagConstraints... Constructor: GridBagConstraint() // tạo object với các dữ liệu mặc định. GridBagConstraints(int gridx, int gridy, int gridwidth, int gridheight, double weightx, double weighty, int anchor, int fill, Insets insets, int ipadx, int ipady) Thao tác với GridBagConstraint object bằng static data Làm sao kết hợp GridBagConstraints với GridBagLayout? GridBagLayout gbLayout = new GridBagLayout(); GridBagConstraints gbc = new GridBagConstraints(); gbLayout.setConstraints(gbc); GUI Slide */57 class GridBagConstraints... Method sau đây sẽ thêm component c vào vị trí ô (row,col) kéo tràn dọc nrow ô và tràn ngang ncol ô. Trong đó gbc là GridBagConstraints và gbc là GridBagLayout void addComponent(Component c,int row, int col, int nrow, int ncol) { gbc.gridx= col; gbc.gridy=row; // định vị ô sẽ thao tác gbc.gridwidth=ncol; gbc.gridheight=nrow; // định vùng tràn // ràng buộc c vào lưới thông qua gbc gb.setConstraints(c,gbc); add(c); } GUI Slide */57 Click for Demo 6.6- CardLayout Bố trí các component thành từng lớp như lưng các quân bài (card). Thường dùng Panel để chứa các component. Tại 1 thời điểm chỉ có 1 panel hiện hành (quân bài trên cùng). Có thể chuyển qua lại giữa các Panel. GUI Slide */57 CardLayout... Cách tạo GUI với card layout GUI Slide */57 Frame Cơ chế điều khiển Main panel với CardLayout panel 1 với Layout1 + các components panel2 với Layout2 + các components CardLayout... CardLayout Constructors: CardLayout() CardLayout(int hgap, int vgap) Đưa 1 panel con vào panel cha FatherPanel.add (sonPanel); FatherPanel.add (“Alias”,sonPanel); Chọn 1 panel sẽ hiển thị Card.first(FatherPanel); Card.last(FatherPanel); Card.next(FatherPanel); Card.previous(FatherPanel); Card.show( FatherPanel, “Alias_of_sonPanel”); GUI Slide */57 Click for Demo 6.7- Layout phức tạp Có thể phải kết hợp nhiều Layout trên 1 GUI. Chia GUI thành nhiều Panel, mỗi panel 1 Layout riêng. GUI Slide */57 Panel p1, lưới 3x2 Panel p2, lưới 1x4 Panel p3, lưới 1x4 Panel p4 Click for Demo 7- Hướng dẫn tạo GUI cho ứng dụng GUI là khuynh hướng của các ứng dụng hiện nay. Nhờ GUI, giao diện với người sử dụng đẹp hơn và có được cơ hội kiểm tra dữ liệu nhập trước khi chuyển giao vào biến. Ta nói rằng “tách biệt cơ chế điều khiển của chương trình và dữ liệu). User  GUI  Biến GUI Slide */57 Hướng dẫn tạo GUI: Chọn components Bài toán 	 Dữ liệu nhập/xuất  Chọn component cho việc nhập/xuất 	 Các tác vụ  Mỗi tác vụ là 1 nút lệnh GUI Slide */57 Hướng dẫn tạo GUI: Chọn Layout Các cơ sở chọn Layout 	 Thân thiện :Ưu tiên tạo Layout giống mẫu hồ sơ mà user thường dùng. 	 Trật tự nhập liệu tự nhiên của bài toán. 	 Nếu GUI phức tạp thì phân bổ các component vào nhiều panel, mỗi panel có một layout khác nhau. Thói quen tốt khi đặt tên đối tượng 	 Dùng tiếp đầu ngữ 	txt cho TextField, 	lbl cho Label, 	chk cho Checkbox, 	btn cho Button, ... GUI Slide */57 Ví dụ: -Phân tích bài toán Bài toán: Xây dựng ứng dụng cho phép làm các phép tính +, -, *, / Dữ liệu nhập: 2 số  2 TextFiled, tên txt1, txt2. Dữ liệu xuất: Kết qủa của phép tính: Label, tên lblResult 4 tác vụ: Cộng, trừ, nhân, chia  4 Button, tên btnAdd, btnSub, btnMul, btnDiv 3 lời thuyết minh: Label, tên lbl1, lbl2, lbl3 GUI Slide */57 Ví dụ: THiết kế GUI Hình thức GUI GUI Slide */57 Kết qủa GUI Slide */57 8- Tóm tắt GUI- Graphic User Interface. GUI là khuynh hướng của các ứng dụng hiện nay. Nhờ GUI, người lập trình tách được điều khiển của chương trình và dữ liệu của chương trình. Gói AWT của Java bao gồm một tập các lớp cho phép người lập trình tạo ra GUI của ứng dụng. Một component đặt trên GUI có thể được user nhìn thấy (visible) hoâc không nhìn thấy (invisible) và có thể được thay đổi kích thước (resize) Frame và Panel là các container thường được dùng để tạo ra ứng dụng chạy độc lập (stand-alone application). Một panel thường được dùng để nhóm một số components lại với nhau. GUI Slide */57 Tóm tắt... Các lớp Layout manager giúp bố trí các component lên GUI. Trong gói awt, có 5 loại layout khác nhau: FlowLayout, BorderLayout, GridLayout, GridBagLayout,CardLayout. Thiết lập layout cho 1 container bằng hành vi setLayout(aLayout) của lớp container này. FlowLayout là bố cục mặc định của Panel, Applet. Các component được thêm vào tuần tự từ trên xuống dưới, từ trái sang phải. BorderLayout là bố cục mặc định của Frame. Cửa sổ sẽ được chia thành các phần: “East”, “West”, “South”, “North”, “Center”. GridLayout là cách bố trí các component vào container dạng 1 lưới rows hàng cols cột. Các component cũng được đưa vào các ô theo thứ tự: trên  dưới, trái  phải. Các component sẽ có cùng kích thước. GUI Slide */57 Tóm tắt... GridBagLayout là cách bố trí cho phép 1 component trải rộng trên nhiều ô kề nhau.Các component có thể có kích thước khác nhau. Để dùng GridBagLayout, cần có sự kết hợp của GridBagConstraint để “ràng buộc” 1 component vào lưới. CardLayout là cách bố trí các component trên 1 số Panel. Các panel hình thành 1 chồng (stack). Tại 1 thời điểm chỉ có 1 panel hiện hành. Một GUI có bố cục phức tạp có thể được phân tích thành nhiều thành phần, mỗi thành phần là 1 panel có layout riêng. BorderLayout là bố cục mặc định của Frame. Cửa sổ sẽ được chia thành các phần: “East”, “West”, “South”, “North”, “Center”. GridLayout là cách bố trí các component vào container dạng 1 lưới rows hàng cols cột. Các component cũng được đưa vào các ô theo thứ tự: trên  dưới, trái  phải. GUI Slide */57 Tóm tắt... Trình tự thiết kế GUI: (1) Đọc kỹ yêu cầu. (2) Xác định dữ liệu nhập/xuất, chọn đối tượng phù hợp. (3) Xác định các tác vụ, mỗi tác vụ là 1 nút lệnh. (4) Xác định các nội dung thuyết minh, mỗi lời thuyết minh là 1 label. (5) Vẽ các đối tượng lên giấy  Hình dáng GUI. (6) Phân tích hình dáng GUI để xác định số nhóm panel. GUI Slide */57