Cấp bậc tác giả:

TRAINING

JAVA - Lập trình giao diện form bằng SWING

Được viết bởi webmaster ngày 15/07/2018 lúc 03:25 PM
Bài trước chúng ta đã Sử dụng JTDS để kết nối CSDL SQL SERVER và cách lập trình kết nối ODBC. Bài hôm nay sẽ Hướng dẫn cách Lập trình giao diện form bằng SWING
  • 0
  • 14321

JAVA - Lập trình giao diện form bằng SWING

Bài trước chúng ta đã Sử dụng JTDS để kết nối CSDL SQL SERVER và cách lập trình kết nối ODBC. Bài hôm nay sẽ Hướng dẫn cách Lập trình giao diện form bằng SWING
lap-trinh-gui-swing.png
Bài tập 1: Tạo một giao diện với dòng chữ “Xin chào”
Mã nguồn tham khảo
public class HelloFrame extends JFrame {
    public HelloFrame() {
        JLabel jlbHello = new JLabel("Xin chào");
        add(jlbHello);
        this.setSize(100, 100);
        pack();//Dong goi
        setVisible(true);//True: Cho phep cua so hien ra
    }
    
    public static void main(String args[]) {
        new HelloFrame();
    }
}
Sinh viên thực hiện các yêu cầu sau: 
- Thay đổi chữ “Xin chào” bằng dòng chữ tùy ý
- Dùng và không dùng hàm pack()
- Thiết lập kích thước ở hàm setSize(100, 100) con số khác  
- Thiết lập hàm setVisible(flase)
Bài tập 2:  Làm quen với Jlabel
Mã nguồn tham khảo
public class JlabelDemo extends JPanel {
    JLabel jlbLabel1, jlbLabel2, jlbLabel3;
    public JlabelDemo() {
        //Tao icon voi hinh anh tuy thich
        ImageIcon icon = new ImageIcon(getClass().getResource("avatar-mini.jpg"), "Java 2");
        //Grid Layout chia thanh 3 cot va 1 hang
        setLayout(new GridLayout(3, 2));
        // Dat vi tri cua Text o giua (CENTER), trai (LEFT), phai (RIGHT), 
        // tren cung (TOP) hoac duoi cung (BOTTOM)
        jlbLabel1 = new JLabel("Label1 chua Image va Text", icon, JLabel.RIGHT);
        jlbLabel1.setVerticalTextPosition(JLabel.BOTTOM);
        jlbLabel1.setHorizontalTextPosition(JLabel.RIGHT);
        jlbLabel2 = new JLabel("Label 2 chi chua Text");
        //Label 3 chi chua icon
        jlbLabel3 = new JLabel(icon);
        // Them labels vao Panel
        add(jlbLabel1);
        add(jlbLabel2);
        add(jlbLabel3);
    }
    public static void main(String[] args) {
        JFrame frame = new JFrame("JLabel Demo");
        frame.setContentPane(new JlabelDemo());
        frame.pack();
        frame.setVisible(true);
    }
}
Kểt  quả chạy demo:

lap-trinh-gui-swing-2.png

Sinh viên thực hiện các yêu cầu sau: 
- Có thể chọn hình ảnh tùy thích cho ví dụ này
- Thay đổi vị trí các jLabel1, 2, 3 LEFT, RIGHT, BOTTOM, TOP, CENTER (chú ý jLalel1 được thiết lập vị trí tại 2 dòng tô đậm giá trị vị trí giống nhau)
- Thiết lập GridLayout các giá trị cột, hàng khác nhau
Xây dựng ứng dụng như hình bên dưới:

lap-trinh-gui-swing-3.png

Bài tập 3: Làm quen với Button

lap-trinh-gui-swing-4.png

Bài tập 4:  Làm quen với JMenu, JMenuItem, JMenuBar
Mã nguồn tham khảo
class MenuDemo extends JFrame 
{
    private JMenuBar menuBar;
    private JMenu mainMenu, helpMenu;
    private JMenuItem login,logout,exit, edit, view, about;    
    private JPanel mainPanel;
    private JMenuItem createMenuItem(String name){
        JMenuItem menuItem=new JMenuItem(name);
        return menuItem;
    }
    
    private void createMenu(){
        login=createMenuItem("Login"); 
        logout=createMenuItem("Logout");
        exit=createMenuItem("Exit");
        edit=createMenuItem("Edit");
        view=createMenuItem("View");
        about=createMenuItem("About");
        menuBar = new JMenuBar();
        mainMenu = new JMenu("File");
        helpMenu = new JMenu("Help");
        menuBar.add(mainMenu);
        menuBar.add(helpMenu);        
        mainMenu.add(login); 
        mainMenu.add(logout); 
        mainMenu.add(edit); 
        mainMenu.add(view); 
        mainMenu.add(exit); 
        helpMenu.add(about); 
        setJMenuBar(menuBar);
    }

    public MenuDemo()
    {
        mainPanel =new JPanel(new GridLayout(5,1,2,2));
        createMenu();
        setContentPane(mainPanel);
        setDefaultCloseOperation(EXIT_ON_CLOSE);
        setTitle("EditPlus");
        pack();
    }
    
    public static void main(String[] args) 
    {
        MenuDemo s=new MenuDemo(); s.pack();
        s.show();
    }
}
Kết quả chạy demo:

lap-trinh-gui-swing-5.png

Từ class mẫu trên, viết chức năng cho từng JMenuItem. Ví dụ: chọn Login sẽ xuất hiện dòng chữ “Hello”
Mã nguồn tham khảo
class MenuDemo extends JFrame implements ActionListener
{
    private JMenuBar menuBar;
    private JMenu mainMenu, helpMenu;
    private JMenuItem login,logout,exit, edit, view, about;
    private AppMenuListener appMenuLis=new AppMenuListener();
    private JPanel mainPanel;
    private JMenuItem createMenuItem(String name){
        JMenuItem menuItem=new JMenuItem(name);
        menuItem.addActionListener(appMenuLis);
        return menuItem;
    }
    
    private void createMenu(){
        login=createMenuItem("Login"); 
        logout=createMenuItem("Logout");
        exit=createMenuItem("Exit");
        edit=createMenuItem("Edit");
        view=createMenuItem("View");
        about=createMenuItem("About");
        menuBar = new JMenuBar();
        mainMenu = new JMenu("File");
        helpMenu = new JMenu("Help");
        menuBar.add(mainMenu);
        menuBar.add(helpMenu);        
        mainMenu.add(login); 
        mainMenu.add(logout); 
        mainMenu.add(edit); 
        mainMenu.add(view); 
        mainMenu.add(exit); 
        helpMenu.add(about); 
        setJMenuBar(menuBar);
    }
//------------------------------------------------------------------------------------------------------------------
//inner class
//------------------------------------------------------------------------------------------------------------------    class AppMenuListener implements ActionListener {
        public void actionPerformed(ActionEvent e){
            Object itemClicked=e.getSource();
            if(itemClicked==login)    {
                mainPanel.add(new JLabel("Hello"));
                pack();
            }
            else if(itemClicked==exit)    {
                System.exit(1);
            }    
            
        }
    }
//----------------------------------------------------------------------------------------------------------    
    public void actionPerformed(ActionEvent e){
        
    }
//------------------------------------------------------------------------------------------------------------------

    public MenuDemo()
    {
        mainPanel =new JPanel(new GridLayout(0,3,5,5));
        createMenu();
        setContentPane(mainPanel);
        setDefaultCloseOperation(EXIT_ON_CLOSE);
        setTitle("EditPlus");
        pack();
    }
    public static void main(String[] args) 
    {
        MenuDemo s=new MenuDemo(); s.pack();
        s.show();
    }
}
Kết quả chạy demo:

lap-trinh-gui-swing-6.png

Sinh viên thực hiện các yêu cầu sau:
- Thêm nội dung cho JMenuBar và các JMenuItem mới
- Thay đổi nội dung “Hello” bằng các nội dung và hình ảnh mới
 
Bài tập 5:  Làm quen với JSplitPane
Mã nguồn tham khảo
public class JSplitPaneDemo extends JFrame{
     
        private JPanel logoPane,loginPane;
        private JTextField tfs;
        private JSplitPane mainPane;

        private void createLogoPane(){
            logoPane=new JPanel(new GridLayout(1,1));
            logoPane.setBackground(Color.white);
            logoPane.add(new JLabel(new ImageIcon("bieutuong_java.jpeg")));
        }
        
        private void createLoginPane(){
            loginPane=new JPanel();
            loginPane.setLayout(new BorderLayout());
            loginPane.setBackground(Color.white);
            JPanel headPane=new JPanel();
            JLabel tt=new JLabel("Login",JLabel.CENTER);
            tt.setFont(new javax.swing.plaf.FontUIResource("Arial",Font.BOLD,18));
            headPane.add(tt);        ;
                        
            JPanel bPane=new JPanel(new GridLayout(0,2,5,5));
            bPane.setBorder(BorderFactory.createEmptyBorder(20,15,20,15)); 
            bPane.add(new JLabel("Username"+":",JLabel.RIGHT));
            tfs =new JTextField(12);
            bPane.add(tfs);
            bPane.add(new JLabel("Password"+":",JLabel.RIGHT));
            tfs =new JPasswordField(12);
            bPane.add(tfs);

            JPanel footPane=new JPanel();
            JButton button=new JButton("Login");
            footPane.add(button);
            footPane.setBackground(Color.white);
            bPane.add(footPane,BorderLayout.SOUTH);
            loginPane.add(headPane,BorderLayout.NORTH);
            loginPane.add(bPane,BorderLayout.CENTER);    
        }

        public JSplitPaneDemo(){
            createLogoPane();
            createLoginPane();
            mainPane=new JSplitPane(JSplitPane.VERTICAL_SPLIT,logoPane,loginPane);
            setContentPane(mainPane);
            setDefaultCloseOperation(EXIT_ON_CLOSE);
            setTitle("Online Shopping");
            pack();
       }
        public static void main(String[] args) {
             JSplitPaneDemo s=new  JSplitPaneDemo(); 
             s.pack();
            s.show();
        }
    }
Kết quả chạy demo:

lap-trinh-gui-swing-7.png

Sinh viên thực hiện các yêu cầu sau:
- Thêm thanh menu vào ví dụ trên
- Thêm JButton “Cancel” bên cạnh JButton “Login”
- Thay đổi nội dung “Hello” bằng các nội dung và hình ảnh mới
- Viết code cho menuitem sao cho khi click menuitem sẽ xuất hiện dòng chữ “Hello”
- Thiết kế ví dụ mới có cấu trúc giao diện như sau:

lap-trinh-gui-swing-8.jpg

Nguồn bài viết: DOTNET.VN

BÌNH LUẬN BÀI VIẾT

Bài viết mới nhất

LIKE BOX

Bài viết được xem nhiều nhất

HỌC HTML