创建用户登录界面

1、新建超市管理系统
File-new-project-java-java project,创建项目名：SupermarketClient。
2、在Supermarket下面创建两个包

3、对第二个包新建一个类：

File-others-WindowBuilder-SwingDesigner-JFrame-下一步，在弹出的窗口中命名为LoginFrame。

4、新建一个包放置图标。

5、操作步骤

（1）初始面板

（2）点击此按钮显示隐藏部分内容

（3）设置窗体大小为525*400像素，rasizable设置成false（不调整大小）

（4）undecorated设置为true（去掉标题栏和系统按钮）

（5）创建内容

a.Layout 选择绝对布局

b.选择Components中的JLabel移动到容器中的合适位置。

• 更改text为用户名：，
• horizontalAlignment：TRAILING（水平方向改为尾部对齐）

c.选择Components中的JTextField移动到容器中JLabel的后边。

d.选择用户名和文本域，Ctrl+c复制，Ctrl+v粘贴。将用户名改为密码。删掉密码后边的文本域，选择Components中的JPasswordField，创建密码域。

e.添加一个显示信息的标签JLabel。提示信息：请输入用户名和密码！
f.选择Components中的JButton按钮移动到容器中的相应位置。选择icon中的登录图标。

• 登录按钮：Variable：btnlogin（将按钮组件命名为：btnlogin）
• 文本域：Variable：txtusername（将文本域命名为：btnlogin）
• 密码域：Variable：txtpassword（将密码域命名为：btnlogin）
• 提示信息：Variable：lbltip（将提示信息命名为：btnlogin）
  -用户名标签：Variable：lblusername（将用户名标签命名为：btnlogin）
• 密码标签：Variable：lblpassword（将密码标签命名为：btnlogin）

g.最小化和关闭按钮：

• 选择Components中的JButton按钮移动到容器的右上角，去掉text中的文字，选择icon中的最小化按钮，在bounds中，改变宽高为16px,x=415,y=0;Variable：btnmin（将最小化按钮命名为btnmin）
• 关闭按钮与最小化按钮过程类似：选择icon中的关闭按钮，在bounds中，改变宽高为16px,x=435,y=0;Variable：btnclose（将关闭按钮命名为btnclose）

h.给按钮添加事件：

• 双击按钮或者右键Add event handler-action-actionPerformed，进入最小化按钮代码部分，添加setExtendedState(ICONIFIED);语句

• 双击按钮或者右键Add event handler-action-actionPerformed，进入关闭按钮代码部分，添加setExtendedState(ICONIFIED);语句
  
  i.给窗体添加背景图片：
  点击内容面板ContentPane，切换到代码部分添加如下内容：

	public LoginFrame() {
		setUndecorated(true);
		setSize(new Dimension(535, 400));
		setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		setBounds(100, 100, 450, 300);
		Image img = Toolkit.getDefaultToolkit().createImage(getClass().getResource("/com/qsy/supermarket/imgs/bg.png"));
		contentPane = new JPanel() {
			public void paintComponent(Graphics g) {
				//绘制背景图片的操作
				if(img!=null) {
					this.setOpaque(false);
					g.drawImage(img,0,0,img.getWidth(this),img.getHeight(this),this);
				}
				super.paintComponent(g);
			}
		};
		contentPane.setBorder(new EmptyBorder(5, 5, 5, 5));
		setContentPane(contentPane);
		contentPane.setLayout(null);

运行后得到有背景图片的窗体：

因为setbounds的大小覆盖了原本设置的setSize的大小，所以注释掉这行代码：


因为一些图标错位了，所以再返回到图形界面进行调整：将关闭按钮的x坐标设置为519，最小化按钮的x坐标设置为498，调整标签和输入框的位置。

j.运行后窗体在桌面的左上角，把窗体移动到中央：

setLocationRelativeTo(null);//null指的是屏幕

k.登录界面的移动（按住鼠标左键不松开可以移动窗体）
点击鼠标

• 选中窗体，右键-Add event handler（事件）-mouse（鼠标）-mousePressed（按下鼠标）-进入代码部分
  
  添加两处的代码：

• 设置变量
  

• 添加代码
  

释放鼠标部分：

• 选中窗体，右键-Add event handler（事件）-mouse（鼠标）-mousePressed（按下鼠标）-进入代码部分
  
  改变窗体位置：
• 选中窗体，右键-Add event handler（事件）-mouseMotion（鼠标）-mouseDragged（按下鼠标）-进入代码部分
  
  

总体代码

private int x,y; //设置x,y坐标
private boolean isDrag; //是否拖拽

.......
.......

contentPane.addMouseMotionListener(new MouseMotionAdapter() {
			@Override
			public void mouseDragged(MouseEvent e) {
				setLocation(getX()+e.getX()-x,getY()+e.getY()-y);
			}
		});
		contentPane.addMouseListener(new MouseAdapter() {
			@Override
			public void mousePressed(MouseEvent e) {
				x=e.getX();
				y=e.getY();
				isDrag = true;
			}
			@Override
			public void mouseReleased(MouseEvent e) {
				isDrag = false;
			}
		});

l.登录按钮简单操作：
双击登录按钮进入代码部分，添加简单的登录代码：

JButton btnlogin = new JButton("New button");
		btnlogin.addActionListener(new ActionListener() {
			public void actionPerformed(ActionEvent e) {
	System.out.println("you username is:"+txtusername.getText());
	System.out.println("you password is:"+new String(txtpassword.getPassword()));
}
});