Lập trình hướng đối tượng - Layout trong swing

*SWINGLayout trong SWING*Nội dungGiới thiệu về LayoutCác Layout của AWTCác Layout của SWING Bài tậpKết luậnGiới thiệu về LayoutLayout : 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.GUISlide */57Layouts 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) GUISlide */57FlowLayoutBố 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? FlowLayout...ConstructorsFlowLayout() 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 FlowLayoutLEFT CENTER RIGHTLEADING (phía đầu, tương tự LEFT)TRAILING (phía đuôi, tương tự RIGHT)GUISlide */57BorderLayoutBố 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”GridLayoutBố trí các component thành 1 lưới rows dòng, cols cột đều nhau.Lưới 4x4Lưới 3x2Lưới 1x4Lưới 1x4GridLayout...ConstructorGridLayout()   Tạo grid layout mặc định 1x1GridLayout(int rows, int cols)     Tạo grid layout rows x colsGridLayout(int rows, int cols, int hgap, int vgap)           GridBagLayoutLayout 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.CardLayoutBố 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.CardLayout...Cách tạo GUI với card layoutFrameCơ chế điều khiểnMain panel với CardLayoutpanel 1 với Layout1+ các componentspanel2 với Layout2+ cáccomponentsMột số Layout SWINGBoxLayoutSpring LayoutNull Layout**SWINGLập trình Giao Diện với JFC*Nội dungGiới thiệu về AWTGiới thiệu về SWINGCác SWING Component Các ứng dụng SWING – Bài tậpKết luậnGUIGUI là gì?...GUI= Container + ComponentsContainerComponentsGUISlide */57Gói AWT của JavaAWT : abstract windowing toolkit - bộ công cụ chứa các lớp để tạo cửa sổ.AWT là 1 phần của JFC- Java Foundation Classes.Sử dụng: import java.awt.*;Gồm nhiều phần tử (class) để tạo GUI.Có các lớp quản lý việc bố trí các phần tử.Có (event-oriented application) mô hình ứng dụng hướng sự kiện.Có các công cụ xử lý đồ họa và hình ảnh.Các lớp sử dụng các tác vụ với clipboard (vùng nhớ đệm) như cut, paste.Demo AWTimport java.awt.*;public class DemoAWT extends Frame{ public DemoAWT(String title) { super(title); this.setBounds(100,150,200,200); this.setVisible(true); } public static void main (String[] args) { new DemoAWT("First App"); }}**So sánh AWT và SWINGXây dựng bằng native codeKhó phát triển thêm các linh kiện(widget) mớiXây dựng bằng JAVA APIDễ phát triển các linh kiệnCó thể thay đổi diện mạo của linh kiện lúc runtimeMô hình MVC (Model – View – Controller)AWTSWING*Giới thiệu về JFC(Java Foundation Class)JFC bao gồm các bộ phận sau :Các thành phần SWINGLook & Feel ManagerJava 2D APIDrag and Drop support*Kiến trúc SWINGDemo JFrameimport javax.swing.*;public class DemoJFrame extends JFrame{ public DemoJFrame(String title) { super(title); this.setBounds(100,150,200,200); this.setVisible(true); } public static void main (String[] args) { new DemoJFrame("Demo Swing"); } }**SWING Component - JFramepublic class JButtonsDemo extends JFrame { Container cn ; JButton button1 = new JButton(“Java”); public JButtonsDemo(String title) { cn = this.getContentPane(); cn.setLayout(new FlowLayout()); cn.add(button1); //. }}GlassPaneContentPaneLayerPaneSourceCodeJFrame()JFrame(String title )*JPanelTương tự như Panel của AWT , ContentPane của JFrame thực chất là 1 JPanelConstructors: JPanel() JPanel( LayoutManager layout)Thêm component c vào panel p: p.add(c) ;*JButtonJButton là lớp kế thừa từ JAbstractButton, diện mạo của JButton bao gồm: 1 nhãn and/or 1 ảnh diễn tả mục đích của nút này. Chữ trên nút có thể gạch dưới để mô tả phím nóng của nút (shortcut key, mnemonic key).Constructors JButton () JButton (Icon icon) JButton(String text) JButton (String text, Icon icon) JButton (Action a)theButton.setMnemonic(‘J’); // Alt + J*JLabelJLabel cũng tương tự như Label của AWT nhưng có thêm tính chất cho phép nạp 1 ảnh vào nhãn này, xử lý HTMLConstructors:JLabel(Icon image) JLabel(Icon image, int horizontalAlignment)JLabel(String text) JLabel(String text, Icon icon, int horizontalAlignment) JLabel(String text, int horizontalAlignment) *JLabel (tt)String content = "Image";content = content + " JLabel demo"; JLabel lbl = new JLabel(content , Img , SwingConstants.LEFT);*JTextFieldConstructorsJTextField()JTextField(Document doc, String text, int columns) JTextField(int columns)JTextField(String text)JTextField(String text, int columns)*JTextAreaConstructors:JTextArea()          JTextArea(Document doc) JTextArea(Document doc, String txt,int rows,int cols) JTextArea(int rows,int cols) JTextArea(String text) JTextArea(String text, int rows, int cols) *Nhập bằng lựa chọn với JCheckBox, JRadioButton, JListJCheckbox : Cho phép chọn nhiều lựa chọn JRadioButton : Chọn 1 trong nhóm lựa chọn (lớp ButtonGroup) JList : Danh sách chuỗi lựa chọn JComboBoxcombobox =1 text field + 1 drop down list*Demo JRadioButton - JCheckBoxButtonGroup Grp = new ButtonGroup();JRadioButton rad1 = new JRadioButton("Male",true);JRadioButton rad2 = new JRadioButton("Female",false);Grp.add(rad1); Grp.add(rad2);Source Code*JListConstructor JList() JList(Object [] A) JList(ListModel A) JList(Vector A)Source Code*JComboBoxConstructorJComboBox();JComboBox(ComboBoxModel model);JComboBox(Object[] arr);JComboBox(Vector aVec);Source Code*JMenu*FileNewOpenJMenuBarJMenuJMenuItemJMenuItem()    JMenuItem(Action a)JMenuItem(Icon icon) JMenuItem(String text)JMenuItem(String text, Icon icon) JMenuItem(String text,int mnemonic)JMenuBar mBar = new JMenuBarJMenu mFile = new JMenu(“File”);mBar.add(mFile); this.setJMenuBar(mBar);*Demo MenuSource Codepublic void mousePressed(MouseEvent m){ if ( m.getModifiers() == InputEvent.BUTTON3_MASK ) app.demoPopup.show(app , m.getX() , m.getY());} *Menu DemoSource Demo Menu1.java*SWINGDialog *Nội dungGiới thiệu class JOptionPaneHiển thị hình ảnh trong SWINGBài tậpKết luậnJOptionPaneHiển thị một Message với chỉ một button “OK”Hiển thị Message với 2 hay 3 Button. 1.)    "Yes" and "No"2.)    "Yes", "No" and "Cancel"3.)    "Ok", and "Cancel" Hiển thị một hộp thoại nhập với 2 button “OK” và “Cancel”GUISlide */57Các phương thức của classshowMessageDialog(): hiển thị Message đơn giản với một nút “OK”. showInputDialog(): hiển thị một hộp thoại input. Method trả về một String ( vừa nhập ). showConfirmDialog(): And the last or third method is the showConfirmDialog() which asks the user for confirmation (Yes/No) by displaying message. This method return a numeric value either 0 or 1. If you click on the "Yes" button then the method returns 1 otherwise 0. import javax.swing.*;import java.awt.event.*;public class ShowDialogBox{  JFrame frame;  public static void main(String[] args){    ShowDialogBox db = new ShowDialogBox();  }  public ShowDialogBox(){    frame = new JFrame("Show Message Dialog");    JButton button = new JButton("Click Me");    button.addActionListener(new MyAction());    frame.add(button);    frame.setSize(400, 400);    frame.setVisible(true);    frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);  }  public class MyAction implements ActionListener{    public void actionPerformed(ActionEvent e){      JOptionPane.showMessageDialog(frame,"Roseindia.net");    }  }} DemoCác phương thức khác - DemoGUIKết quả ShowInputDialogCác Dialog chuẩn của WindowJFileChooserJColorChooser*JFileChooserCho phép chọn FileCho phép SaveCó thể hiển thị theo mode :fc.setFileSelectionMode(JFileChooser.DIRECTORIES_ONLY);fc.setFileSelectionMode(JFileChooser.FILES_AND_DIRECTORIES);*