Java第05次实验提纲（Java图形界面编程）

Java Swing编程与NetBeans

本次实验主要练习使用Java Swing编写简单界面。

实验资料：GUI实验参考文件中的0.第06次实验(图形程序设计、事件处理与Swing).doc

题目1: Swing用户界面组件与事件处理

只使用Eclipse，手写界面布局与事件监听器代码。

需完成如上界面。请在以下代码的基础上进行修改

import javax.swing.JFrame;        

public class FirstSwing {

    private static void createAndShowGUI() {
        //Create and set up the window.
        JFrame frame = new JFrame("HelloWorldSwing");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        //your code       
        //Display the window.
        frame.pack();
        frame.setVisible(true);
    }

    public static void main(String[] args) {
        javax.swing.SwingUtilities.invokeLater(new Runnable() {
            public void run() {
                createAndShowGUI();
            }
        });
    }
}

1. 布局伪代码

整个窗体界面分成两部分：分别对应BorderLayout的centre与south。新建布局layout。
在layout的center放入一个JPanel，将其布局管理器设置成GridLayout(2行2列)，分别放入两个JLable与JTextField
在layout的south放入一个JPanel，然后在该面板上放置两个按钮btn1 ,btn2。注：JPanel默认布局为FlowLayout，无需更改。
在btn1上注册事件监听器，功能：点击登录按钮后，如用户名、密码相同则提示“欢迎用户XXX进入系统！”，否则提示“用户名密码错误！”。
- 说明：提示信息可使用信息对话框实现。

2.参考代码
BorderLayout参考代码

JFrame f = new JFrame("BorderLayoutTest");
f.setLayout(new BorderLayout());
f.add(new JButton("North"), BorderLayout.NORTH);
f.add(new JButton("South"), BorderLayout.SOUTH);
f.add(new JButton("East"), BorderLayout.EAST);
f.add(new JButton("West"), BorderLayout.WEST);
f.add(new JButton("Center"), BorderLayout.CENTER);
f.setSize(600, 600);
f.setVisible(true);

GirdLayout参考代码

JFrame frame = new JFrame("GridLayout Test");
JPanel panel = new JPanel(new GridLayout(2,2));
panel.add(new JButton("btn1"));
panel.add(new JButton("btn2"));
panel.add(new JButton("btn3"));
panel.add(new JButton("btn4"));
frame.add(panel);

各种对话框参考代码：

//消息对话框：用来显示消息。
JOptionPane.showMessageDialog(null, "消息对话框");

//输入对话框：用来从对话框获取值。
String x = JOptionPane.showInputDialog("请输入变量x的值:");
System.out.println("x="+x);

//确认对话框：根据不同的选择会有不同的返回值。
int choice = JOptionPane.showConfirmDialog(null, "请选择");  

/*
choice可能等于如下预先定义好的常量。
JOptionPane.YES_OPTION
JOptionPane.NO_OPTION
JOptionPane.CANCEL_OPTION
实际上JOptionPane.YES_OPTION等于0。使用常量使代码可读性更好
*/

对话框的使用详见：Java中对话框的弹出。

3.改进(可选)

将输入密码的JTextField换成JPasswordField。
使用BorderFactory为放在中间的面板添加边框。
设置JLabel的对齐方式(new JLabel("密码", SwingConstants.RIGHT))。
设置GirdLayout的vGap与hGap，观察效果。
进阶：如何让登录界面更美观一点，比如插入背景图。

题目2: NetBeans基本使用

建议使用NetBeans 12.5及以上的版本。
编写用户信息更改模块。当点击修改，将界面上方两个JTextField的值读取，并在下方的"信息展示"框显示。

主要讲解：

NetBeans基本概念、图形界面设计器、简单布局、组件布置（如，辅助线、组件对齐、组件尺寸批量修改等）、组件变量名等
NetBeans常用快捷键：ctrl+\(代码提示)，Tab(自动完成，比如sout,然后按tab)，Alt+Insert(自动生成代码，类似Eclipse中的Alt+Shift+S)、Alt+Enter (quick fix).
使用JPanel布置组件，设置带标题的边框。
预览不同风格的外观：右键点击JFrame，选择Preview Design.
添加事件处理代码
按钮监听器代码中包含三部分代码：
1. 获取文本框数据并进行简单判断。如，name、age文本框不能为空。如果为空则弹出对话框提示“name不能为空”，并重设焦点（文本框的requestFocus方法）到相应的文本框。
2. 业务逻辑代码：对数据按照业务要求进行判断(如，必须是整数、年龄不能小于0）与处理（如对年龄+1）。
3. 将处理后的数据更新到下方标签。
进阶：使用MVC模式解释并改造上述代码。

常见问题：

组件与其变量名的对应关系。组件变量名最好要有意义，能体现出其类型，比如nameTextField就是一个显示姓名的JTextField。
未将主窗体设置为主类无法启动。右键点击项目-属性(Properties)-运行(Run)，设置正确的主类(Main Class)。
文本类型转化为数值类型时可能出错。常见错误：当字符串前后带空格时，当文本框输入的字符串为非数字的时候。
GUI程序的发布：
- 方法1:生成可执行jar文件。参见参考资料5.NetBeans生成可执行GUI jar程序.doc
- 方法2:创建批处理脚本Run.bat执行jar程序。
```
    @echo off
    start javaw -jar GUI1.jar
```

4.进阶：
0. 年龄文本框使用JFormattedTextField对输入文本进行格式限制。

尝试在NetBeans上操作布局管理器、添加事件处理代码，实现题目1的界面与功能。
对比NetBeans自动生成的代码与自己手写的代码有何不同？(从布局管理器与事件处理代码这两个方面来分析)

题目3: 代码阅读DataExchangeTest.java（自主完成）

该程序点击File菜单的Connect菜单项，将弹出一个对话框。在对话框中输入信息后，可将该信息以User对象的形式返回，然后更新到主窗体的JTextArea。

主要关注

这里设计了一个JPanel(PasswordChooser)。为了显示PasswordChooser这个JPanel，我们必须先新建一个对话框对象，并将该JPanel放在对话框上。代码中，调用showDialog方法后，将新建一个对话框对象并将该对象赋值给PasswordChooser的dialog属性，然后显示该对话框。这里显示对话框的方式比较特别，稍微了解一下即可。可参照题目4来实现同样界面。
如何从弹出的对话框获取数据？如何将数据以对象的形式返回调用的地方。查看ConnectAction类。

演示：DataExchangeTest.java。该文件见参考资料GUI实验参考文件。
讲解：结合课件中的数据交换例子进行代码讲解。

题目4: 使用NetBeans设计复杂用户界面

注意：题目4、5中对NetBeans的具体使用，详见在线课程 "9.1.4 NetBeans下使用布局管理器、9.1.5 NetBeans下使用常用组件、9.1.6 NetBeans下编写菜单程序"章节。

任务
使用NetBeans采用MVC编程模式编写带菜单的GUI程序
掌握在NetBeans中使用布局管理器。
实现：用户登录、窗体切换、数据传递、信息查看等。

项目初始化与界面编写

新建项目包结构：ui包、model包、dao包、util包。
model包:User类(int id, String name)
ui包:
- LoginFrame类(JFrame): 主类，登录界面。界面见题目1中的布局伪代码。可在NetBeans中使用布局管理器来实现。
- MainFrame类(JFrame): 主界面，包含菜单条(JMenuBar)、开始菜单(JMenu)、帮助菜单。（设置其为模式对话框，即设置其modal属性）
  - 开始菜单：读取文件到文本框菜单项(JMenuItem)、读取文件到表格菜单项(JMenuItem)、写入文件菜单项、分割线、注销菜单项。
  - 帮助菜单：About菜单项。点击后弹出AboutDialog。
  - 属性：User user（用来存放登录的用户信息）, JDialog aboutDialog。
  - 构造方法：MainFrame(), MainFrame(User user)。
  - 在MainFrame放入JPanel(如，jPanelMain)，并设置其Layout为CardLayout。在该Panel放入一个JTextArea(实际上NetBeans会自动将其放在一个JScrollPane上，然后将该组件放到Panel上)，用来显示从文件读取的内容。注意：JFileChooser控件为文件选择框。
  - 在jPanelMain上放入一个JTabel(同JTextArea)，用来以表格的形式显示数据。设置这两个Pane的"Card Name"属性分别为"card1"与"card2"，方便切换。
- AboutDialog类(JDialog)：自定义的About对话框。显示欢迎“登录用户id、用户名”、程序版本、程序作者、当前时间。
实现登录功能
在LoginFrame的登录按钮中编写登录逻辑（比如用户名与密码相同就算通过）。验证成功则显示MainFrame。使用setVisible(false)隐藏窗体。
编写自定义的AboutDialog
- 设置其为模式对话框，即设置其modal属性。

如何在JFrame上设置CardLayout

以在一个JFrame上放置两个面板，希望在这两个面板之间切换为例。

步骤：

在JFrame放置一个JPanel，如jPanel1
在jPanel1上设置布局管理器(Set Layout)为"Card Layout"
往jPanel1拖入两个JPanel。注意：如果是直接拖入JTextArea或JTabel，会自动生成JScrollPane并将组件放入其中。无需单独添加JPanel。
为每个JPanel设置"Card Name"。对于两个面板，那就设置为"card1"与"card2"。
在切换的按钮(比如菜单的某个菜单项)中输入如下代码进行切换：

CardLayout cl = (CardLayout)jPanel1.getLayout();
cl.show(jPanel1, "card1");

NetBeans中一些对组件的操作

在某个JPanel上添加一个组件(Add From Palette)
除了可以直接拖动放入，还可右键点击JPanel，选择Add From Palette。
使用布局管理器布置LoginFrame
LoginFrame需设置为BoderLayout。方法：右键点击LoginFrame，选择Set Layout进行选择。
在LoginFrame的center上添加CenterJPanel(包含输入用户名、密码的标签与文本域、密码文本域)。方法：右键点击LoginFrame，选择Add From Palette，添加JPanel。然后右键点击该JPanel-Properties-在Layout栏下选择Direction，设置其在BoderLayout的方位。往CenterJPanel添加JLabel与JTextFiel。
在LoginFrame的south上添加SouthJPanel。设置其Layout为GridLayout(右键点击Propertie，设置Columns、Rows属性)，往其中添加"登录"、"退出"按钮。注意：可使用GridLayout的"Vertical gap, Horizontal gap"来调整组件的大小
将弹出的JFrame居中显示。在要弹出的JFrame上右键点击-Properties-Code-Generate Center。

使用接口改造

dao包中
- 编写UserLogin接口，包含方法：User login(String name, String pwd)。功能为验证成功返回User对象，失败返回null。
- 编写UserLoginSimpleImpl实现UserLogin，写入一个简单的密码验证代码。
- 编写UserLoginFileImpl实现 UserLogin，写一个从文件中读取用户名、密码进行验证的代码。

题目5: 在NetBeans中使用JTable

点击"题目4"的读取文件到表格菜单项(JMenuItem)，将文件中的数据读取到JTable中。

演示

在Netbeans中设置JTable控件的属性。右键点击JTable，点击Table Contents。
进阶：通过点击按钮，动态将文件数据读取到JTable中。

注意：如果要在MainFrame既要放JTextArea，又要放JTable，并且可以切换显示。那么需要设置MainFrame的Layout为CardLayout。

进阶
为JTable编写自己的TableModel。可参考DefaultTableModel的实现。
重要参考资料：JTable案例中如何使用JTable。详见其中的jTableDemo，使用代码控制JTable。

参考资料

Java GUI 中的JTable-Netbeans设置
 Create and use Java Table in NetBeans
JTable常见用法细则-主要讲DefaultTableModel的使用

题目6: 其他可选题目

6.1 查看以下参考资料，并思考Student、StudentController、StudentView分别有什么用？他们之间是什么关系？在GUI程序设计中，怎么使用这种模式编写代码。
6.2 模仿Windows记事本，编写一个简易记事本。
6.3 尝试使用MVC模式编写购物车、学生管理系统、计算器等程序。

参考资料:

MVC模式简介-主要看StudentController是怎样协调Model与View

其他问题

1.系统安装JDK 9以上，在Eclipse编写Swing程序，提示`javax.swing cannot be resolved to a type`

原因：JDK 9及以上引入模块系统，java swing相关包默认没有被导入。
解决:需要在Eclipse项目中的module-info.java加入requires java.desktop;。注意：请安装较高版本的Eclipse。

2.无法安装NetBeans，提示找不到JRE。或者安装成功，打开后，就是无法新建项目。

原因：NetBeans 8.2还不支持JDK 9及以上。
解决：安装JDK 8或者安装Netbeans 9.0。有可能还需要修改netbeans安装目录\etc下的netbeans.conf文件，修改里面的netbeans_jdkhome的值为jdk8的安装目录。注意：NetBeans 9.0安装后无法运行，也可考虑通过修改netbeans_jdkhome来解决，将其设置为jdk9及以上的安装目录。
参考资料：Can\'t create project on Netbeans 8.2

本次实验参考资料

1.重要：GUI实验参考文件
2.视频:使用Netbeans编写GUI
3.Java中对话框的弹出
4.JTable常见用法细则-主要讲DefaultTableModel的使用
5.JTable用法-进阶
 Swing组件使用系列文章
 官方文档-在 NetBeans IDE 中设计 Swing GUI
官方文档-在 Java GUI 应用程序中处理图像(如，设置背景图片)
官网-使用Netbeans开发企业应用的一些案例
 官方文档-Java Tutorial-Swing

GUI实验参考文件说明：
0.第06次实验(图形程序设计、事件处理与Swing).doc
1.使用NetBeans设计GUI(by zhrb).doc-NetBeans教程。
2.NetBeans使用脚本.txt
3.一个简单的包括菜单的GUI小程序(SwingTest).zip-手写GUI示例代码(包含CardLayout、窗体间传递数据、MVC模式、外观观感、窗口放在屏幕中央等演示)。
4.DataExchangeTest.java-数据在GUI中如何传递。

其他参考资料

Java Swing Tutorial
各种计算机技术的Tutorial
第一篇开始学习JavaFX
Open JavaFX
MVC模式简介-主要看StudentController是怎样协调Model与View

Java游戏参考资料

虽然使用Java开发的游戏（如MineCraft）较少，但初学Java 2D，可尝试使用Java编写一些简单的小游戏。主要学习Java游戏入门1-Java 2D games tutorial中的图形界面游戏基本原理：Basics、Animation、Moving sprites、Collision detection。知其然、知其所以然。怎么学？先把程序跑起来，然后尝试看懂程序并进行改造。