Java Swing 之 WindowBuilder 插件的使用(带实现登录和跳转)

eclipse 同时被 3 个专栏收录
6 篇文章 0 订阅
8 篇文章 0 订阅
1 篇文章 0 订阅

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

一、安装

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

在这里插入图片描述

2.在搜索栏输入插件名WindowBuilder,点击install下载安装(我肯定选下载最多的…)
在这里插入图片描述

3.一路默认,完成后会跳到后台安装,在进度中可以看到进度。大概需要十分钟装好,询问是否重启。
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

4.重启后顺便见到了久违的欢迎。
在这里插入图片描述 5.然后可以找到装好的WindowBuilder,依次选择文件-新建-其他。
在这里插入图片描述
6.可以看到新添加了一个WindowBuilder选项。
在这里插入图片描述

二、使用

1.创建过程

  1. 依次创建一个Java项目 WindowBuilderUse,包 view
    在这里插入图片描述
  2. 选中 view 包,右键依次选择 新建 > 其他 > WindowBuilder > Swing Designer > JFrame,在弹出的框里填写类型名称 LoginView 。
    在这里插入图片描述在这里插入图片描述在这里插入图片描述
  3. 创建成功后会自动生成一段代码,在左下角可以看到两个模式 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.图标1

图标是我觉得必不可少的部分,因为好看…特别是至少可以替代咖啡在这里插入图片描述
图标的存放位置最好是塞到项目里作为相对路径,我理解的是使用绝对路径的话当你换了地方就没办法调用了,比如没办法在另一台电脑上调用你这台电脑的图片,相对路径就可以一直跟着你。
我们可以在这个项目下新建一个文件夹,命名为images,把我们用到的图标放进去。
在这里插入图片描述在这里插入图片描述
可以自行在网上下载需要的图标,直接复制粘贴到上文中新建的文件夹里即可。
在这里插入图片描述
添加也很简单,先选中一个需要的
比如说窗体,我们选中属性 iconImage ,勾选第一个 Classpath resource ,依次选择你需要的图标然后选择确定。同样的可以给所有可以添加图标的组件添加图标(其他就可能是 icon 属性)。
在这里插入图片描述在这里插入图片描述


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

三、登陆及跳转

1.数据库

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

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

在这里插入图片描述

在这里插入图片描述

2.eclipse

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

/**
	 * 数据库连接类
	 * @author zhangsan
	 *
	 */
	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;
		}
		/**
		 * 关闭数据库连接
		 * @throws SQLException 
		 *
		 */
		public void closeCon(Connection con) throws SQLException{
			if(con!= null) {
				con.close();
			}	
		}
		
		/**
		 * 管理员登录
		 * 
		 * @param username
		 * @param password
		 * @return
		 */
		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);
		}
	}

事件处理机制摘要:
监听器对象是一个实现了特定监听器接口(listener interface)的类的实例。
事件源是一个能够注册监听器对象并发送事件对象的对象。
当事件发生时,事件源将事件对象传递给所有注册的监听器。
监听器对象将利用事件对象中的信息决定如何对事件做出回应。

现在,只要按钮产生了一个“动作事件”,listener 对象就会得到通告。对于按钮来说,这个“动作事件”就是我们点击按钮。
为了实现 ActionListener 接口,监听器类必须有一个被称为 actionPerformed 的方法,该方法接受一个 ActionEvent 对象参数。
只要用户点击按钮,JButton 对象就会创建一个ActionEvent 对象,然后调用listener.action Performed(event) 传递事件对象。可以将多个监听器对象添加到一个像按钮这样的事件源中。这样一来,只要用户点击按钮,按钮就会调用所有监听器的 actionPerformed 方法。


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

在这里插入图片描述

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

四、源代码

/**
 * 登陆界面
 * @author zhangsan
 *
 */
public class LoginView extends JFrame {

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

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

	/**
	 * Create the frame.
	 */
	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);
		}
	}
}
/**
 * 主界面
 * @author zhangsan
 *
 */
public class MainMenu extends JFrame {

	private JPanel contentPane;

	/**
	 * Launch the application.
	 */
	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();
				}
			}
		});
	}

	/**
	 * Create the frame.
	 */
	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);
	}
}
/**
	 * 数据库连接类
	 * @author zhangsan
	 *
	 */
	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;
		}
		
		/**
		 * 关闭数据库连接
		 * @throws SQLException 
		 *
		 */
		public void closeCon(Connection con) throws SQLException{
			if(con!= null) {
				con.close();
			}	
		}
		
		/**
		 * @param username
		 * @param password
		 * @return
		 */
		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);

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


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

©️2021 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值