最近接触到GUI图形界面设计，需要自学，无意间发现了eclipse中的一个插件WindowBuilder，使用起来方便而且效率很高，果断抛弃了自己敲代码的念头。下面简单记一下我在eclipse商店中的安装，然后是我目前学到的一些使用方法，很多都是按着我自己的想法说的，说的可能不专业有错误还请指正。

WindowBuilder插件

一、安装
二、使用
- 1.创建过程
- 2.常规选项认识
- 3.规范
- 4.图标[^1]
三、登陆及跳转
- 1.数据库
- 2.eclipse
四、源代码

一、安装

打开eclipse，在工具栏的帮助(help)选项中选择Eclipse MarketPlace，进入商店。

2.在搜索栏输入插件名WindowBuilder，点击install下载安装(我肯定选下载最多的…)

3.一路默认，完成后会跳到后台安装，在进度中可以看到进度。大概需要十分钟装好，询问是否重启。

4.重启后顺便见到了久违的欢迎。
5.然后可以找到装好的WindowBuilder，依次选择文件-新建-其他。

6.可以看到新添加了一个WindowBuilder选项。

二、使用

1.创建过程

依次创建一个Java项目 WindowBuilderUse，包 view
选中 view 包，右键依次选择新建 > 其他 > WindowBuilder > Swing Designer > JFrame,在弹出的框里填写类型名称 LoginView 。
创建成功后会自动生成一段代码，在左下角可以看到两个模式 Source 和 Design。Sourse为源代码，Design为界面设计。

有时候可能会遇到下面这种情况

我是遇到过这种情况，解决方法是在自动生成的 module-info.java 类中添加一行代码。

module WindowBuilderUse { 
	requires java.desktop;
}

2.常规选项认识

我是把它分了五个部分，具体的菜单栏我就暂时只写一些我目前用过的，后续会再添加或改正。

Part 1 (构造) 对应着你设计的结构，当你点击的时候会互相响应。比如你在部分1点击（java.swing.JFrame）, 部分5的窗体就会凸显，反之亦然.

Part2 (属性) 对应着你选中的某一结构的具体细节
比如当我们选中窗体

最常用到的是
background 设置窗体的背景颜色
defaultCloseOperaion 设置用户在此窗体上发起 “close” 时默认执行的操作
iconImage 设置窗体的图标
resizable 设置大小可调
title 设置窗体的标题

当我们选中内容面板

Layout 设置布局，默认是 BorderLayout 布局，但是在这里我用的最多的是 GroupLayout 布局。

Part3
我就用到了下面带三角的这一个，点击后可以快速测试，看看做的怎么样不需要你运行代码。

Part4(组件)里面都是可以根据你的需要塞进去的组件。我用的最多的是Components和Menu
JLabel 标签
JTextField 文本框
JComboBox 下拉列表
JButton 按钮
JRadioButton 单选按钮
JTextArea 文本区域
JPasswordField 密码框
JList 列表
JTable 表格
JMenu 菜单
JMenuBar 菜单条
JMenuItem 菜单项

Part5 就是你手动设计的图形界面

你可以直接点中你要添加的组件，再换到界面上直接塞进去（在此之前先选择好你希望的面板的布局），下面就紧接着写几个组件的属性，基本上大同小异，捡几个常用的。

这是标签LTabel的属性
font可以设置文字字体，字形，字号
icon同样也是图标
text是显示在外面的文本，类似于窗体的标题

这是下拉列表的属性，主要是 model 属性，点击后弹出来一个框，如下图输入，可以添加多个选项，用回车隔开就可以，点击确认后关闭，可以点击上面讲的快速测试按钮看看效果如何。

关于菜单栏的设置
（1）首先是选中窗体，在窗体上添加菜单条 JMenuBar，当你的鼠标移动到窗体里面，就会自动提示你应该放在绿色区域的位置。

放好后显示下图

（2）然后添加菜单JMenu，同样的当你鼠标移动到窗体内会有一条红线自动提示你放在哪里，如下图：

放好后如下图所示：

你可以继续横向或竖向添加菜单JMenu,你也可以选择菜单项JMenuItem，两者区别在于JMenu可再分，而JMenuItem不可再分。观察下图可以很明显的看出来 “文件” “新建”“保存”都是可再分的JMenu，“word文档”“excel表格”则是不可再分的最后一级JMenuItem。

3.规范

每个组件都有一个名字，要习惯规范的命名，最起码自己看的懂，一看名字知道是哪个组件，特别是塞了很多个同样的组件，比如添加了很多个标签，你可以在右边的图形上直接选中后右键（或者在Part1构造部分选中后再右键），选择Rename重命名，最简单的你可以把账号标签由默认的 lblNewabel 重命名为 zhanghaolblNewLabel ，密码标签由默认的 lblNewabel_1 重命名为 mimalblNewLabel_1。

可以看到结果如下图：

4.图标¹

图标是我觉得必不可少的部分，因为好看…特别是至少可以替代咖啡
图标的存放位置最好是塞到项目里作为相对路径，我理解的是使用绝对路径的话当你换了地方就没办法调用了，比如没办法在另一台电脑上调用你这台电脑的图片，相对路径就可以一直跟着你。
我们可以在这个项目下新建一个文件夹，命名为images,把我们用到的图标放进去。

可以自行在网上下载需要的图标，直接复制粘贴到上文中新建的文件夹里即可。

添加也很简单，先选中一个需要的
比如说窗体，我们选中属性 iconImage ,勾选第一个 Classpath resource ,依次选择你需要的图标然后选择确定。同样的可以给所有可以添加图标的组件添加图标（其他就可能是 icon 属性）。

可能会遇到大小不合适的情况，我开始的时候总是很大，后来调整了大小都是 16 x 16，我在下面推荐了一个图标库很好用，可以直接下载需要的大小。

三、登陆及跳转

1.数据库

我目前用的都是SQL Server ，建个表存点数据都大差不差。
关于 eclipse和SQL Server 的连接请戳这里

1.创建一个数据库，然后新建一张用户表，存入你的账号密码，简单就好。记住你的数据库名和用户表名，我这里分别是 TEXT 和 hl_admin 。

2.eclipse

1.新建一个 dao 包，再建一个 Database 类，专门来装数据库方面的操作。


	public class Database { 
		String driverName="com.microsoft.sqlserver.jdbc.SQLServerDriver";
		//首先要在数据库中新建一个叫 TEXT 的数据库
		String conStr = "jdbc:sqlserver://127.0.0.1:1433;DatabaseName=TEXT";
		// 数据库连接用户名
		String dbUserName = "sa"; 
		// 数据库连接密码
		String dbPassword = "991230"; 
		private static Connection con = null;
		public Database() { 
			try { 
				Class.forName(driverName);
				System.out.println("[加载驱动成功]");
			}  
			catch (Exception sqlEx) { 
				sqlEx.printStackTrace();
				System.out.println("[加载驱动失败]");
			}
			try{ 
				con=DriverManager.getConnection(conStr,dbUserName,dbPassword);
				System.out.println("SQL Server连接成功！");
			}
			catch(Exception ex){ 
				ex.printStackTrace();
				System.out.print("SQL Server连接失败！"); 
			}
			
		}

		public static Connection getCon() { 
			return con;
		}
		
		public void closeCon(Connection con) throws SQLException{ 
			if(con!= null) { 
				con.close();
			}	
		}
		
		
		public static boolean adminLogin(String username, String password) { 
			String sql = "select Username from hl_admin where Username=? and Password=?";
			boolean flag = false;
			try { 
				PreparedStatement ps = con.prepareStatement(sql);
				ps.setString(1, username);
				ps.setString(2, password);
				ResultSet rs = ps.executeQuery();
				if (rs.next()) { 
					flag = true;
				}
				rs.close();
				ps.close();
			} catch (SQLException e) { 
				e.printStackTrace();
			}
			return flag;
		}

}

2.在LoginView类添加一个登录按钮

右键选择 Add event handler > action > actionPerformed 会自动跳到代码区

创建一个方法 LoginAvt ，实现登录功能

btnNewButton.addActionListener(new ActionListener() { 
			public void actionPerformed(ActionEvent ae) { 
				LoginAvt(ae);
			}
		});

直接在提示里选择 在类型LoginView中创建方法...

在下面找到生成的代码，敲进去

		protected void LoginAvt(ActionEvent ae) { 
		// TODO 自动生成的方法存根
		String username = zhanghaotextField.getText().toString();
		String password = mimapasswordField.getText().toString();
		//判断字符串是否为空，这里是如果不为空，继续。
		if(!zhanghaotextField.getText().isEmpty() && !mimapasswordField.getText().isEmpty())
		{  
			//当点击登录按钮时，首先与数据库建立连接
			Database.getCon();							
			boolean result = Database.adminLogin(zhanghaotextField.getText().trim(), mimapasswordField.getText().trim());
			if(result){ 
				//登录成功 
				new MainMenu().setVisible(true); //打开新界面MainMenu
				this.setVisible(false);//关闭本界面
			}else{ 
				//登录失败
				JOptionPane.showMessageDialog(null, "登录名或密码错误，请重新登录!", "提示", JOptionPane.ERROR_MESSAGE); 
				
			}
		
		}else if(zhanghaotextField.getText().isEmpty())
		{ 
			JOptionPane.showMessageDialog(null,"请输入用户名","提示消息",JOptionPane.WARNING_MESSAGE);
		}else if(mimapasswordField.getText().isEmpty())	
		{ 
			JOptionPane.showMessageDialog(null,"请输入密码","提示消息",JOptionPane.WARNING_MESSAGE);
		}
	}

3.在 view 包里再以同样的方法做一个主界面 MainMenu类作为登陆后的跳转界面

4.运行代码，弹出登陆界面，正确输入账号密码，弹出主界面。

四、源代码


public class LoginView extends JFrame { 

	private JPanel contentPane;
	private JTextField zhanghaotextField;
	private JPasswordField mimapasswordField;

	
	public static void main(String[] args) { 
		EventQueue.invokeLater(new Runnable() { 
			public void run() { 
				try { 
					 new LoginView().setVisible(true);
				} catch (Exception e) { 
					e.printStackTrace();
				}
			}
		});
	}

	
	public LoginView() { 
		setIconImage(Toolkit.getDefaultToolkit().getImage(LoginView.class.getResource("/images/\u7BA1\u7406.png")));
		setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		setBounds(100, 100, 292, 241);
		//居中显示
        this.setLocationRelativeTo(null);
        init();
        //初始化数据库
        new Database();
        //判断数据库是否连接成功
        if(Database.getCon() == null){ 
            JOptionPane.showMessageDialog(null, "数据库连接失败!", "提示", JOptionPane.ERROR_MESSAGE); 
            System.exit(0);
        }
	}
	private void init() {   
		
		JMenuBar menuBar = new JMenuBar();
		setJMenuBar(menuBar);
		
		JMenu mnNewMenu = new JMenu("\u6587\u4EF6");
		menuBar.add(mnNewMenu);
		
		JMenu mnNewMenu_2 = new JMenu("\u65B0\u5EFA");
		mnNewMenu.add(mnNewMenu_2);
		
		JMenuItem mntmNewMenuItem_1 = new JMenuItem("word\u6587\u6863");
		mnNewMenu_2.add(mntmNewMenuItem_1);
		
		JMenuItem mntmNewMenuItem_2 = new JMenuItem("excel\u8868\u683C");
		mnNewMenu_2.add(mntmNewMenuItem_2);
		
		JMenu mnNewMenu_3 = new JMenu("\u4FDD\u5B58");
		mnNewMenu.add(mnNewMenu_3);
		
		JMenuItem mntmNewMenuItem = new JMenuItem("\u4FDD\u5B58\u540E\u9000\u51FA");
		mnNewMenu_3.add(mntmNewMenuItem);
		
		JMenu mnNewMenu_1 = new JMenu("\u7F16\u8F91");
		menuBar.add(mnNewMenu_1);
		
		JMenuItem mntmNewMenuItem_3 = new JMenuItem("\u7C98\u8D34");
		mnNewMenu_1.add(mntmNewMenuItem_3);
		contentPane = new JPanel();
		contentPane.setBorder(new EmptyBorder(5, 5, 5, 5));
		setContentPane(contentPane);
		
		zhanghaotextField = new JTextField();
		zhanghaotextField.setColumns(10);
		
		JLabel zhanghaolblNewLabel = new JLabel("\u8D26\u53F7:");
		zhanghaolblNewLabel.setIcon(new ImageIcon(LoginView.class.getResource("/images/\u8D26\u53F7.png")));
		zhanghaolblNewLabel.setFont(new Font("宋体", Font.BOLD, 14));
		
		JLabel mimalblNewLabel_1 = new JLabel("\u5BC6\u7801:");
		mimalblNewLabel_1.setIcon(new ImageIcon(LoginView.class.getResource("/images/\u5BC6\u7801.png")));
		mimalblNewLabel_1.setFont(new Font("宋体", Font.BOLD, 14));
		
		JButton btnNewButton = new JButton("\u767B\u5F55");
		btnNewButton.addActionListener(new ActionListener() { 
			public void actionPerformed(ActionEvent ae) { 
				LoginAvt(ae);
			}
		});
		btnNewButton.setIcon(new ImageIcon(LoginView.class.getResource("/images/\u767B\u5F55.png")));
		
		mimapasswordField = new JPasswordField();
		GroupLayout gl_contentPane = new GroupLayout(contentPane);
		gl_contentPane.setHorizontalGroup(
			gl_contentPane.createParallelGroup(Alignment.LEADING)
				.addGroup(gl_contentPane.createSequentialGroup()
					.addGroup(gl_contentPane.createParallelGroup(Alignment.LEADING)
						.addGroup(gl_contentPane.createSequentialGroup()
							.addGap(28)
							.addGroup(gl_contentPane.createParallelGroup(Alignment.LEADING)
								.addComponent(zhanghaolblNewLabel, GroupLayout.PREFERRED_SIZE, 58, GroupLayout.PREFERRED_SIZE)
								.addComponent(mimalblNewLabel_1, GroupLayout.PREFERRED_SIZE, 58, GroupLayout.PREFERRED_SIZE))
							.addPreferredGap(ComponentPlacement.UNRELATED)
							.addGroup(gl_contentPane.createParallelGroup(Alignment.LEADING, false)
								.addComponent(zhanghaotextField)
								.addComponent(mimapasswordField, GroupLayout.DEFAULT_SIZE, 103, Short.MAX_VALUE)))
						.addGroup(gl_contentPane.createSequentialGroup()
							.addGap(64)
							.addComponent(btnNewButton, GroupLayout.PREFERRED_SIZE, 97, GroupLayout.PREFERRED_SIZE)))
					.addContainerGap(69, Short.MAX_VALUE))
		);
		gl_contentPane.setVerticalGroup(
			gl_contentPane.createParallelGroup(Alignment.LEADING)
				.addGroup(gl_contentPane.createSequentialGroup()
					.addGap(28)
					.addGroup(gl_contentPane.createParallelGroup(Alignment.TRAILING)
						.addComponent(zhanghaolblNewLabel)
						.addComponent(zhanghaotextField, GroupLayout.PREFERRED_SIZE, GroupLayout.DEFAULT_SIZE, GroupLayout.PREFERRED_SIZE))
					.addGap(18)
					.addGroup(gl_contentPane.createParallelGroup(Alignment.BASELINE)
						.addComponent(mimalblNewLabel_1)
						.addComponent(mimapasswordField, GroupLayout.PREFERRED_SIZE, 20, GroupLayout.PREFERRED_SIZE))
					.addGap(28)
					.addComponent(btnNewButton)
					.addContainerGap(31, Short.MAX_VALUE))
		);
		contentPane.setLayout(gl_contentPane);
	}

		protected void LoginAvt(ActionEvent ae) { 
		// TODO 自动生成的方法存根
		String username = zhanghaotextField.getText().toString();
		String password = mimapasswordField.getText().toString();
		//判断字符串是否为空，这里是如果不为空，继续。
		if(!zhanghaotextField.getText().isEmpty() && !mimapasswordField.getText().isEmpty())
		{  
			//当点击登录按钮时，首先与数据库建立连接
			Database.getCon();							
			boolean result = Database.adminLogin(zhanghaotextField.getText().trim(), mimapasswordField.getText().trim());
			if(result){ 
				//登录成功 
				new MainMenu().setVisible(true); //打开新界面MainMenu
				this.setVisible(false);//关闭本界面
			}else{ 
				//登录失败
				JOptionPane.showMessageDialog(null, "登录名或密码错误，请重新登录!", "提示", JOptionPane.ERROR_MESSAGE); 
				
			}
		
		}else if(zhanghaotextField.getText().isEmpty())
		{ 
			JOptionPane.showMessageDialog(null,"请输入用户名","提示消息",JOptionPane.WARNING_MESSAGE);
		}else if(mimapasswordField.getText().isEmpty())	
		{ 
			JOptionPane.showMessageDialog(null,"请输入密码","提示消息",JOptionPane.WARNING_MESSAGE);
		}
	}
}

public class MainMenu extends JFrame { 

	private JPanel contentPane;

	
	public static void main(String[] args) { 
		EventQueue.invokeLater(new Runnable() { 
			public void run() { 
				try { 
					MainMenu frame = new MainMenu();
					frame.setVisible(true);
				} catch (Exception e) { 
					e.printStackTrace();
				}
			}
		});
	}

	
	public MainMenu() { 
		setIconImage(Toolkit.getDefaultToolkit().getImage(MainMenu.class.getResource("/images/\u4FE1\u7528\u4FE1\u606F\u7BA1\u7406\u3001\u4FE1\u606F\u7BA1\u7406\u7C7B.png")));
		setTitle("\u4E3B\u754C\u9762");
		setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		setBounds(100, 100, 300, 246);
		this.setLocationRelativeTo(null);
		contentPane = new JPanel();
		contentPane.setBorder(new EmptyBorder(5, 5, 5, 5));
		setContentPane(contentPane);
		
		JLabel lblNewLabel = new JLabel("\u4F60\u597D\u5440\uFF01");
		lblNewLabel.setFont(new Font("宋体", Font.BOLD, 26));
		lblNewLabel.setIcon(new ImageIcon(MainMenu.class.getResource("/images/\u5F00\u5FC3.png")));
		GroupLayout gl_contentPane = new GroupLayout(contentPane);
		gl_contentPane.setHorizontalGroup(
			gl_contentPane.createParallelGroup(Alignment.LEADING)
				.addGroup(gl_contentPane.createSequentialGroup()
					.addGap(76)
					.addComponent(lblNewLabel, GroupLayout.PREFERRED_SIZE, 140, GroupLayout.PREFERRED_SIZE)
					.addContainerGap(210, Short.MAX_VALUE))
		);
		gl_contentPane.setVerticalGroup(
			gl_contentPane.createParallelGroup(Alignment.LEADING)
				.addGroup(gl_contentPane.createSequentialGroup()
					.addGap(57)
					.addComponent(lblNewLabel, GroupLayout.PREFERRED_SIZE, 40, GroupLayout.PREFERRED_SIZE)
					.addContainerGap(156, Short.MAX_VALUE))
		);
		contentPane.setLayout(gl_contentPane);
	}
}

	public class Database { 
		String driverName="com.microsoft.sqlserver.jdbc.SQLServerDriver";
		//首先要在数据库中新建一个叫 TEXT 的数据库
		String conStr = "jdbc:sqlserver://127.0.0.1:1433;DatabaseName=TEXT";
		// 数据库连接用户名
		String dbUserName = "sa"; 
		// 数据库连接密码
		String dbPassword = "991230"; 
		private static Connection con = null;
		public Database() { 
			try { 
				Class.forName(driverName);
				System.out.println("[加载驱动成功]");
			}  
			catch (Exception sqlEx) { 
				sqlEx.printStackTrace();
				System.out.println("[加载驱动失败]");
			}
			try{ 
				con=DriverManager.getConnection(conStr,dbUserName,dbPassword);
				System.out.println("SQL Server连接成功！");
			}
			catch(Exception ex){ 
				ex.printStackTrace();
				System.out.print("SQL Server连接失败！"); 
			}
			
		}

		public static Connection getCon() { 
			return con;
		}
		
		
		public void closeCon(Connection con) throws SQLException{ 
			if(con!= null) { 
				con.close();
			}	
		}
		
		
		public static boolean adminLogin(String username, String password) { 
			String sql = "select Username from hl_admin where Username=? and Password=?";
			boolean flag = false;
			try { 
				PreparedStatement ps = con.prepareStatement(sql);
				ps.setString(1, username);
				ps.setString(2, password);
				ResultSet rs = ps.executeQuery();
				if (rs.next()) { 
					flag = true;
				}
				rs.close();
				ps.close();
			} catch (SQLException e) { 
				e.printStackTrace();
			}
			return flag;
		}

}

以上就是我目前的一些收获，文字看起来可能难理解，最好是去搜一些网课，看一些动态的视频会更容易上手。代码可能和按照步骤得来的有点出入，是有改动，已经给出了注释，比如让界面居中显示，手动在代码区加了一句 this.setLocationRelativeTo(null);

新手上路，很期待各路大佬对我的指正。

安利一个图标的素材库 ↩︎

• 树莓派Raspberry Pi Pico快速上手教程之MicroPy	• stm32单片机按键消抖、长按、松开终极解决方案
• P1553 数字反转（升级版）	• STM32CubeMX学习笔记（12）——WWDG窗口看门狗
• 蓝桥杯单片机led流水灯学习	• Qt专栏之Qt初识（五）

• Esp8266天猫精灵_RGB灯_非点灯平台	• STM32F103 串口1和串口3对发数据配合蓝牙模块
• TMS570学习【1】了解什么是TMS570	• 新闻稿 \| Qt公司收购froglogic公司以巩固市场领
• [Java]SpringBoot2整合mqtt服务器EMQ实现消息订	• 苹果群控投屏同步操作原理及运用的平台APP分享

• Esp8266天猫精灵_RGB灯_非点灯平台	• STM32F103 串口1和串口3对发数据配合蓝牙模块
• TMS570学习【1】了解什么是TMS570	• 新闻稿 \| Qt公司收购froglogic公司以巩固市场领
• [Java]SpringBoot2整合mqtt服务器EMQ实现消息订	• 苹果群控投屏同步操作原理及运用的平台APP分享
• STM32查询式按键输入[直接用寄存器]	• Ubuntu系统 USB设备端口绑定
• 2021-04-14 第四次按键输入实验	• Flutter扫码功能完美实现

Java GUI 之 WindowBuilder 插件的使用（带实现登录和跳转）