Java設計登錄界面

使用Java設計客戶端登錄界面


        我學習Java的第一個任務是使用Java設計客戶端登錄界面中,希望我的學習方法與總結能幫助到需要的朋友。以下是個人見解與總結,有理解錯誤或說得不到位的地方,還希望多多指出更正。

一、開發環境

  • Java開發工具包:JDK
  • 推薦一個免費開源的Java IDE:Eclipse

二、開發中使用到的Java Swing

Java Swing庫圖形化用戶界面(graphical user interface, GUI)庫,經過這幾天的使用與學習,發現Swing庫真的很強大!它幾乎能實現任何你想要的功能。若此時你已配置好一切開發環境,那麼就和我一起開始設計編寫客戶端界面吧。

  • Swing基礎(可跳過)
    大多數的Swing應用都被構建在基礎的JFrame的內部,JFrame在任何操作系統中都能夠創建視窗應用,例如用JFrame這樣構建一個視窗:

    
    import javax.swing.*;
    public class MyWindows{
        public static void main(String[] args){
            //實例化窗口
            JFrame frame = new JFrame("MyWindows");
            //設置窗口默認關閉方式
            frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
            //窗體大小
            frame.setSize(420, 320);
            //添加一個標籤到窗內
            JLabel label = new JLabel("My first window");
            frame.add(label);
            //設置窗口爲可見
            frame.setVisible(true);

    Frame窗口
    這裏只是演示了一個JFrame窗體,若要製作成自己以後可以使用的工具類,可以使用下面的框架

    import javax.swing.*;
    
    public class Mydemo{
        public static void run(final JFrame f, final int width, final int height){
            SwingUtilities.invokeLater(new Runnable(){
                public void run(){
                    //設置標題
                    f.setTitle(f.getClass().getSimpleName());
                    //設置圖標
                    f.setIconImage(new ImageIcon("圖片路徑").getImage());
                    //設置默認關閉方式
                    f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
                    //設置大小
                    f.setSize(width, height);
                    //設置窗口可見
                    f.setVisibel(true);
                }
            }
        }
    }

    將這個設計好的窗體類放置到自己的域名類庫中,就可以重複使用了。
    上述代碼解釋:調用SwingUtilities.invokeLater方法來請求事件分發線程以運行某段代碼,我們必須將這段代碼放到Runnable的run方法中,並且將該指定的Runnable對象作爲參數傳入invokerLater。(在此不做詳細說明)

  • JFrame框架面板(正式開發之前,先了解一下窗體的整體結構)
    這裏寫圖片描述
    簡單簡紹一下各面板:
    RootPane(根面板)根面板也叫根窗格,它是在JFrame窗體創建的時候就默認添加進來的,根面板是默認不可見的,它覆蓋在除標題欄和外邊框的JFrame窗體面板上,它的作用是管理其它面板。
    LayeredPane(層面板)層面板覆蓋在根面板之上,菜單欄內容面板則被添加到層面板上。當創建了一個菜單欄和一個內容面板菜單欄將被添加到層面板的頂部(如圖中所示),剩下的部分將被內容面板覆蓋。在層面板上,可以疊加多層,做出一些好看的效果。在此面板上也能添加組件(按鈕、標籤等等….)
    ContentPane(內容面板)內容面板則用於放置各種組件(按鈕、標籤、複選框……),默認是不透明的,可根據需要來設置是否透明。
    GlassPane(玻璃面板):玻璃面板是默認存在的,在所有面板的最頂層,而且不可見,玻璃面板用於接收鼠標事件,以及在其它組件上繪圖。
    這裏只爲下列開發做簡要介紹,若要做詳細瞭解,可以閱讀官方文檔或者自己用搜索引擎搜索“swing jframe框架面板”找相關資料進行深入學習。

  • 正式開發
    以我自己設計的一個例子來說(哈哈,不好看先將就一下)
    例子

    1. 設計中用到了層面板的兩層,最底層是背景,倒數第二層爲一張透明圖片(透明圖片需要自己去PS設計一張,不會的可以搜索“PS透明圖片製作和導出方法”)。
    2. 用到了2個JTextField組件、3個JButton組件,2個JCheckbox組件,2個JLabel組件。

實現代碼如下

  1. JFrame窗體配置

        /*
         * 我的窗體配置
         * com.jlong.myWindow.java
         */
        import javax.swing.JFrame;
        import javax.swing.SwingUtilities;
    
        public class myWindow {
            public static void 
            run(final JFrame f, final int width, final int height){
                SwingUtilities.invokeLater(new Runnable(){
    
                    public void run(){
    
    
                        //標題欄圖標
                        //f.setIconImage(new ImageIcon("e:/JavaWS/52b1443632f42/QQ.png").getImage());
                        //標題
                        //f.setTitle(f.getClass().getSimpleName());
                        f.setTitle("myDesign");
                        //窗口退出行爲
                        f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
                        //設置窗口大小不可變
                        f.setResizable(false);
                        //設置窗口打開居中
                        f.setLocationRelativeTo(null);
                        //窗口大小
                        f.setSize(width, height);
                        //展示窗口
                        f.setVisible(true);
                    }
                });
            }
    
        }
    
  2. 登錄界面

        /*
         *com.jlong.myDesign.java
         */
        package com.jlong;
    
        import javax.swing.*;
        import javax.swing.ImageIcon;
        import javax.swing.border.MatteBorder;
        import javax.swing.event.CaretEvent;
        import javax.swing.event.CaretListener;
    
        import java.awt.Color;
        import java.awt.Dimension;
        import java.awt.event.MouseAdapter;
        import java.awt.event.MouseEvent;
    
        import static com.jlong.myWindow.*;
    
        public class myDesign extends JFrame{
    
            /**
             * 
             */
            private static final long serialVersionUID = 1L;
    
            //設置一個Panel容器面板和Label標籤存放背景圖片
            private JPanel 
                contentPanel = new JPanel();
            private JLabel
                label,
                label2;
    
            //設置按鈕組件
            private JButton 
                login = new JButton("登錄"),
                registered = new JButton("註冊"),
                forgetPassword = new JButton("忘記密碼");
    
            //設置文本框組件
            private JTextField 
                admin = new JTextField(),
                password = new JTextField();
    
            //設置複選框組件
            private JCheckBox 
                rememberAdmin = new JCheckBox("記住賬號"),
                rememberPassword = new JCheckBox("記住密碼");
    
            /*
             * 我的設計
             */
            public myDesign(){
    
                //初始化各組件
                admin.setText("賬號/郵箱/手機號");
                password.setText("密碼");
                //實例化圖片
                ImageIcon image1 = new ImageIcon("e://JavaWS/3.jpg");
                ImageIcon image2 = new ImageIcon("e://JavaWS/touming.png");
    
                JLabel backLabel = new JLabel();
                JLabel backLabel2 = new JLabel();
                backLabel.setIcon(image1);
                backLabel2.setIcon(image2);
    
                label=new JLabel(image1);
                label2 = new JLabel(image2);
                //設置標籤大小與位置
                label.setBounds(0, 0,500,350);
                label2.setBounds(0, 0, 501, 350);
                //在LayeredPane最底層上添加兩個帶圖片的標籤,並且label2在label上方  
                this.getLayeredPane().add(label2,new Integer(Integer.MIN_VALUE));
                this.getLayeredPane().add(label,new Integer(Integer.MIN_VALUE));
                //將內容面板設置爲透明,就能夠看見添加在LayeredPane上的背景。
                ((JPanel)this.getContentPane()).setOpaque(false);
    
                /*
                 * 添加組件到contentPanel容器中
                 * 佈局方式爲自由佈局。
                 */
                contentPanel.setLayout(null);
                add(admin);
                add(password);
                add(login);
                add(rememberAdmin);
                add(rememberPassword);
                add(registered);
                add(forgetPassword);
    
                /*
                 * 組件絕對位置
                 */
                admin.setBounds(95, 130, 300, 25);
                password.setBounds(95, 154, 300, 25);
                rememberAdmin.setBounds(95, 180, 100, 14);
                rememberPassword.setBounds(195, 180, 100, 14);
                registered.setBounds(95, 225, 90, 20);
                forgetPassword.setBounds(205, 225, 90, 20);
                login.setBounds(315, 225, 90, 20);
    
    
    
                /*
                 * 組件透明化
                 */
                admin.setOpaque(false);
                password.setOpaque(false);
                contentPanel.setOpaque(false);
                rememberAdmin.setOpaque(false);
                rememberPassword.setOpaque(false);
                getContentPane().add(contentPanel);
    
                /*
                 * 組件邊框顏色
                 */
                textSet(admin);
                textSet(password);
                //rememberAdmin.setBorder(new LineBorder(null, Color.OPAQUE));
    
                /*
                 * 監聽事件
                 */
                admin.addMouseListener(new MouseAdapter(){
                    public void mouseClicked(MouseEvent e){
                        int c = e.getButton();
                        if(c == MouseEvent.BUTTON1 && admin.getText().equals("賬號/郵箱/手機號") &&e.getClickCount()==1) {
                            admin.setText(null);
                            password.setText("密碼");
                        }
                    }
                });
    
                admin.addCaretListener(new CaretListener(){
                    public void caretUpdate(CaretEvent e){
    
                    }
                });
    
                password.addMouseListener(new MouseAdapter(){
                    public void mouseClicked(MouseEvent e){
                        int c = e.getButton();
                        if(c == MouseEvent.BUTTON1 && password.getText().equals("密碼") &&e.getClickCount()==1) {
                            password.setText(null);
                            admin.setText("賬號/郵箱/手機號");
                        }
                    }
                });
    
            }
    
            /*
             * JTextField文本框設置方法.
             */
            public void textSet(JTextField field) {  
                field.setBackground(new Color(255, 255, 255));  
                field.setPreferredSize(new Dimension(150, 28));  
                MatteBorder border = new MatteBorder(0, 0, 2, 0, new Color(192, 192,  
                192));  
                field.setBorder(border);  
            }  
    
            public static void main(String[] args){
                run(new myDesign(),500,350);
            }
    
        }
    
    

    contentPane面板的佈局管理器默認爲BorderLayout,而我在本次設計中用的是自由佈局,也就是把組件放置在內容面板的絕對位置。

    contentPanel.setLayout(null);

總結:

通過此次學習,初步瞭解了Swing庫以及對JFrame框架的認識,在此次設計中有許多功能都沒用上,比如各種佈局方式,以及監聽事件等。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章