Java網路編程——登入介面 好友介面

標籤：

引言

??

這部分是Java介面編程的部分，不屬於網路編程的重點，但是也稍微介紹一下這兩個介面吧

??

登入介面

??

最終想做成的登入介面

??

??

分析介面

??

這個介面可以分為三個大的部分，北部的一張圖片，qq2003全新體驗Q人類，中部的QQ號碼，手機號碼和Email登入部分，以及下面的三個按鈕，中間的QQ號碼Label，號碼輸入框，清除號碼按鈕，QQ密碼Label，密碼輸入框，忘記密碼Label，以及隱藏登入，記住密碼Checkbox，加上申請密碼保護按鈕，這九個可以用一個3×3的網路布局來做

??

而QQ號碼，手機號碼和Email登入這三個可以切換的Label可以用JTabbedPane

??

介面編程

??

首先北部組件的那張圖片可以是一個JLabel，然後把圖片作為參數傳入即可

??

jLabel = new JLabel(new ImageIcon("image/tou.gif"));

??

然後將其加入到JFrame的北部

??

this.add(jLabel, "North");

??

然後南部組件的三個按鈕可以是將三個JButton放在一個JPanel裡

??

jPanel = new JPanel();

jPanelButton1 = new JButton(new ImageIcon("image/denglu.gif"));

jPanelButton1.addActionListener(this);

jPanelButton2 = new JButton(new ImageIcon("image/quxiao.gif"));

jPanelButton3 = new JButton(new ImageIcon("image/xiangdao.gif"));

jPanel.add(jPanelButton1);

jPanel.add(jPanelButton2);

jPanel.add(jPanelButton3);

this.add(jPanel, "South");

??

中部的組件比較複雜，主要要實現可以切換標籤頁

??

首先我們把3×3網格裡的東西做出來

??

jPanel1 = new JPanel(new GridLayout(3, 3));

jPanel1_JLabel1 = new JLabel("QQ號碼", JLabel.CENTER);

jPanel1_JLabel2 = new JLabel("QQ密碼", JLabel.CENTER);

jPanel1_JLabel3 = new JLabel("忘記密碼");

jPanel1_JLabel4 = new JLabel("申請密碼保護");

jPanel1_JButton = new JButton(new ImageIcon("image/clear.gif"));

jPanel1_UserNameField = new JTextField();

jPanel1_PasswordField = new JPasswordField();

jPanel1_CheckBox1 = new JCheckBox("隱藏登入");

jPanel1_CheckBox2 = new JCheckBox("記住密碼");

jPanel1.add(jPanel1_JLabel1);

jPanel1.add(jPanel1_UserNameField);

jPanel1.add(jPanel1_JButton);

jPanel1.add(jPanel1_JLabel2);

jPanel1.add(jPanel1_PasswordField);

jPanel1.add(jPanel1_JLabel3);

jPanel1.add(jPanel1_CheckBox1);

jPanel1.add(jPanel1_CheckBox2);

jPanel1.add(jPanel1_JLabel4);

??

然後我們除了QQ號碼這個標籤頁已經做好了之外(jPanel1)，我們把後面兩個標籤頁(手機號碼和Email相應的標籤頁也做好)

??

jPanel2 = new JPanel();

jPanel3 = new JPanel();

??

最後我們建立一個JTabbedPane把這三個JPanel放進去即可

??

jTabbedPane = new JTabbedPane();

jTabbedPane.add("QQ號碼", jPanel1);

jTabbedPane.add("手機號碼", jPanel2);

jTabbedPane.add("Email", jPanel3);

this.add(jTabbedPane, "Center");

??

至此登入介面就做好了，接下來就是QQ好友介面

??

QQ好友介面

??

我們想把QQ好友介面做成以下形式

??

??

分析介面

??

這個介面大概可以分為三個部分，最上面的我的好友，可以是一個Button，連著中間的好友名單，好友名單要實現向下拉的功能，可以用一個JScrollPane實現，最下面是兩個Button，可以放在一個2×1的網格布局裡

??

//用於放我的好友這個介面的東西，布局為BorderLayout

friendPanel1=new JPanel(new BorderLayout());

//用於顯示好友名單

friendPanel2=new JPanel(new GridLayout(50, 1, 4, 4));

//用於放陌生人、黑名單按鈕

friendPanel3=new JPanel(new GridLayout(2,1));

??

//將我的好友按鈕放入friendPanel1

friendPanel_Button1=new JButton("我的好友");

friendPanel1.add(friendPanel_Button1,"North");

??

//將好友名單放入friendPanel1

//給好友名單初始化，用一個JLabel數組放好友名單，每一個好友是一個JLabel

JLabel[] friendsList;

friendsList=new JLabel[50];

for (int i = 0; i < friendsList.length; i++) {

friendsList[i]=new JLabel(i+1+"",new ImageIcon("image/mm.jpg"),JLabel.LEFT);

//將每個JLabel放入friendPanel2

friendPanel2.add(friendsList[i]);

}

//將friendPanel2放入JScrollPane

friendPanel_jScrollPane=new JScrollPane(friendPanel2);

//將好友名單也就是JScrollPane放入friendPanel1

friendPanel1.add(friendPanel_jScrollPane,"Center");

??

//將南部的兩個按鈕放入friendPanel1

friendPanel_Button2=new JButton("陌生人");

friendPanel_Button3=new JButton("黑名單");

friendPanel3.add(friendPanel_Button2);

friendPanel3.add(friendPanel_Button3);

friendPanel1.add(friendPanel3,"South");

??

陌生人介面

??

另外我們想實現的是當點擊陌生人按鈕時能切換到陌生人介面

??

??

如何才能實現呢，一個簡單的方式就是我們仿照好友介面也要定義這麼多的組件

??

//用於放陌生人這個介面的東西，布局為BorderLayout

??

msrPanel1=new JPanel(new BorderLayout());

??

??

首先北部現在變為了兩個按鈕的網格部分的Panel

??

msrPanel3=new JPanel(new GridLayout(2,1));

??

//將這個Panel放入msrPanel1

msrPanel_Button1=new JButton("我的好友");

msrPanel_Button2=new JButton("陌生人");

msrPanel3.add(msrPanel_Button1);

msrPanel3.add(msrPanel_Button2);

msrPanel1.add(msrPanel3,"North");

??

中部依舊是一個JScrollPane用於顯示陌生人列表

??

msrPanel2=new JPanel(new GridLayout(20, 1, 4, 4));

JLabel[] msrList=new JLabel[20];

for (int i = 0; i < msrList.length; i++) {

msrList[i]=new JLabel(i+1+"",new ImageIcon("image/mm.jpg"),JLabel.LEFT);

msrPanel2.add(msrList[i]);

}

msrPanel_jScrollPane=new JScrollPane(msrPanel2);

msrPanel1.add(msrPanel_jScrollPane,"Center");

??

最後是南部的一個黑名單按鈕

??

msrPanel_Button3=new JButton("黑名單");

msrPanel1.add(msrPanel_Button3,"South");

??

到這裡為止我們遇到了一個困難，就是如何在這兩個介面中來回切換呢

??

這裡我們要將JFrame本身的布局設定為CardLayout

??

cl=new CardLayout();

this.setLayout(cl);

??

然後將我的好友，陌生人加入到這個卡片布局中

??

this.add(friendPanel1,"1");

this.add(msrPanel1,"2");

??

然後我們要在我的好友介面監聽陌生人這個按鈕，當按下的時候我們切換到陌生人介面

也要在陌生人介面中監聽我的好友這個按鈕，當按下時我們切換到我的好友介面

??

if (e.getSource()==friendPanel_Button2) {

cl.show(this.getContentPane(), "2");

}

if (e.getSource()==msrPanel_Button1) {

cl.show(this.getContentPane(), "1");

}

??

實現滑鼠放在好友上面異色顯示

??

也是用到滑鼠的監聽事件，Entered事件Exited事件

??

public void mouseEntered(MouseEvent e) {

// TODO Auto-generated method stub

JLabel jLabel=(JLabel) e.getSource();

jLabel.setForeground(Color.red);

}

public void mouseExited(MouseEvent e) {

// TODO Auto-generated method stub

JLabel jLabel=(JLabel) e.getSource();

jLabel.setForeground(Color.black);

}

Java網路編程——登入介面 好友介面