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);

  
  这里只是演示了一个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框架的认识，在此次设计中有许多功能都没用上，比如各种布局方式，以及监听事件等。