银行账户GUI

Question

我决定最好把这个项目分成几个部分。请考虑本部分(GUI设计)。

我在寻求帮助，做两个主要的改进：

1. 每当我做一个图形用户界面，它总是非常重复地添加JLabels，面板，按钮，增加面板到卡片，等等。有什么方法可以简化这一点吗？
2. 如何改善GUI外观？例:第4页(欢迎信息)，欢迎键和按钮彼此非常接近，但是当更改gridBagLayout时，这个距离会自动最小化，我如何才能将标签和按钮分开呢？

我对代码中的任何其他建议都开放。

OnlineBankingApp类(Main)

package com.app.bank;

import javax.swing.*;
import javax.swing.plaf.nimbus.NimbusLookAndFeel;
import java.awt.*;

public class OnlineBankingApp {
    public static void main(String args[]) {
        try{
            UIManager.setLookAndFeel(new NimbusLookAndFeel());
        }catch(Exception e){
            e.printStackTrace();
        }
        EventQueue.invokeLater(() -> new BankFrame().setVisible(true));
    }
}

BankFrame类

package com.app.bank;

import javax.swing.*;
import java.awt.*;

public class BankFrame extends JFrame {
    BankFrame(){
        this.add(new BankPanel());
        ImageIcon logo = new ImageIcon("BankLogo.png");
        this.setTitle("G-Bank inc.");
        this.setResizable(true);
        this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        this.getContentPane().setBackground(new Color(0x123456));
        this.setLayout(new GridBagLayout());
        this.setIconImage(logo.getImage());
        this.setLocationRelativeTo(null);
        this.pack();

    }
}

BankPanel类

package com.app.bank;

import javax.swing.*;
import javax.swing.table.DefaultTableModel;
import java.awt.*;

public class BankPanel extends JPanel{
    //Primitive Type Initialized
    String name;
    int balance;

    //Initialize Buttons
    JButton loginButton;
    JButton signUpButton;
    JButton createAccount;
    JButton backButton1;
    JButton verifyLogin;
    JButton backButtonP2;
    JButton transactionHistoryButton;
    JButton depositButton;
    JButton withdrawButton;
    JButton checkBalanceButton;
    JButton backButtonP3;
    JButton finalDepositButton;
    JButton backButtonP4;
    JButton finalWithdrawButton;
    JButton backButtonP5;
    JButton backButtonP6;
    JButton logout;

    //Initialize JTables
    JTable transactionHistoryTable;

    //Initialize panels
    JPanel cards;
    JPanel panelOption;
    JPanel panelLogin;
    JPanel panelSignup;
    JPanel panelTable;
    JPanel panelUnlocked;
    JPanel subPanelTable;
    JPanel panelDeposit;
    JPanel panelWithdraw;
    JPanel panelBalance;

    //Initialize Labels
    JLabel usernameSignup;
    JLabel passwordSignup;
    JLabel usernameLogin;
    JLabel passwordLogin;
    JLabel welcomeMessage;
    JLabel depositAmount;
    JLabel withdrawAmount;
    JLabel balanceLabel;

    //Initialize GridBag
    GridBagLayout gridLayout;

    GridBagConstraints loginConstraints;
    GridBagConstraints signUpConstraints;
    GridBagConstraints loginTextConstraints;
    GridBagConstraints PasswordConstraints;
    GridBagConstraints createAccountConstraints;
    GridBagConstraints backButtonConstraints;

    GridBagConstraints usernameLoginConstraints;
    GridBagConstraints userTextLoginConstraints;
    GridBagConstraints passwordLoginConstraints;
    GridBagConstraints passTextLoginConstraints;
    GridBagConstraints checkLoginConstraints;

    GridBagConstraints welcomeMessageConstraints;
    GridBagConstraints transactionHistoryConstraints;
    GridBagConstraints depositConstraints;
    GridBagConstraints withdrawConstraints;
    GridBagConstraints checkBalanceConstraints;
    GridBagConstraints logoutConstraints;

    GridBagConstraints depositLabelConstraints;
    GridBagConstraints depositAmountConstraints;
    GridBagConstraints finalDepositButtonConstraints;
    GridBagConstraints back4Constraints;

    GridBagConstraints withdrawLabelConstraints;
    GridBagConstraints withdrawAmountConstraints;
    GridBagConstraints finalWithdrawButtonConstraints;
    GridBagConstraints back5Constraints;


    //Initialize User/Pass Fields
    JTextField createUserLogin;
    JPasswordField createUserPass;
    JTextField userTextLogin;
    JPasswordField passTextLogin;
    JTextField enterDepositAmount;
    JTextField enterWithdrawAmount;

    //Initialize CardLayout
    CardLayout cardLayout;

    //Page Text
    final static String OPTION_PANEL = "Card with Options";
    final static String LOGIN_PANEL = "Card with Login";
    final static String SIGN_UP_PANEL = "Card with Sign Up";
    final static String TABLE_PANEL = "Card with Table";
    final static String UNLOCKED_PANEL = "Card with Unlocked Options";
    final static String DEPOSIT_PANEL = "Card with Deposit";
    final static String WITHDRAW_PANEL = "Card with Withdraw";
    final static String BALANCE_PANEL = "Card with Balance";

    BankPanel() {
        new Functionality(name);
        Color blue = new Color(0x123456);
        this.setBackground(blue);
        //Initialize Cards
        cards = new JPanel();
        cards.setLayout(cardLayout = new CardLayout());
        gridLayout = new GridBagLayout();
        //Page 1
        panelOption = new JPanel(gridLayout);
        panelOption.setBackground(blue);
        //Page 2
        panelSignup = new JPanel(gridLayout);
        panelSignup.setBackground(blue);
        //Page 3
        panelLogin = new JPanel(gridLayout);
        panelLogin.setBackground(blue);
        //Page 4
        panelUnlocked = new JPanel(gridLayout);
        panelUnlocked.setBackground(blue);
        //Page 5
        subPanelTable = new JPanel();
        subPanelTable.setBackground(blue);
        panelTable = new JPanel();
        panelTable.setBackground(blue);
        panelTable.add(subPanelTable, BorderLayout.SOUTH);

        //Page 6
        panelDeposit = new JPanel(gridLayout);
        panelDeposit.setBackground(blue);
        //Page 7
        panelWithdraw = new JPanel(gridLayout);
        panelWithdraw.setBackground(blue);
        //Page 8
        panelBalance = new JPanel();
        panelBalance.setBackground(blue);

        constraints();
        addComponents();
        addActionListener();
    }
     void constraints() {
        //Initialize Constraints
        loginConstraints = new GridBagConstraints();
        loginConstraints.gridx = 0;
        loginConstraints.gridy = 0;

        signUpConstraints = new GridBagConstraints();
        signUpConstraints.gridx = 0;
        signUpConstraints.gridy = 1;

        loginTextConstraints = new GridBagConstraints();
        loginTextConstraints.gridx = 2;
        loginTextConstraints.gridy = 0;

        PasswordConstraints = new GridBagConstraints();
        PasswordConstraints.gridx = 2;
        PasswordConstraints.gridy = 1;

        createAccountConstraints = new GridBagConstraints();
        createAccountConstraints.gridx = 1;
        createAccountConstraints.gridy = 2;

        backButtonConstraints = new GridBagConstraints();
        backButtonConstraints.gridx = 0;
        backButtonConstraints.gridy = 2;

        usernameLoginConstraints = new GridBagConstraints();
        usernameLoginConstraints.gridx = 0;
        usernameLoginConstraints.gridy = 0;

        userTextLoginConstraints = new GridBagConstraints();
        userTextLoginConstraints.gridx = 2;
        userTextLoginConstraints.gridy = 0;

        passwordLoginConstraints = new GridBagConstraints();
        passwordLoginConstraints.gridx = 0;
        passwordLoginConstraints.gridy = 1;

        passTextLoginConstraints = new GridBagConstraints();
        passTextLoginConstraints.gridx = 2;
        passTextLoginConstraints.gridy = 1;

        checkLoginConstraints = new GridBagConstraints();
        checkLoginConstraints.gridx = 1;
        checkLoginConstraints.gridy = 2;

        welcomeMessageConstraints = new GridBagConstraints();
        welcomeMessageConstraints.gridx = 4;
        welcomeMessageConstraints.gridy = 0;

        transactionHistoryConstraints = new GridBagConstraints();
        transactionHistoryConstraints.gridx = 1;
        transactionHistoryConstraints.gridy = 8;

        depositConstraints = new GridBagConstraints();
        depositConstraints.gridx = 3;
        depositConstraints.gridy = 8;

        withdrawConstraints = new GridBagConstraints();
        withdrawConstraints.gridx = 5;
        withdrawConstraints.gridy = 8;

        checkBalanceConstraints = new GridBagConstraints();
        checkBalanceConstraints.gridx = 7;
        checkBalanceConstraints.gridy = 8;

        depositLabelConstraints = new GridBagConstraints();
        depositLabelConstraints.gridx = 0;
        depositLabelConstraints.gridy = 0;

        depositAmountConstraints = new GridBagConstraints();
        depositAmountConstraints.gridx = 0;
        depositAmountConstraints.gridy = 1;

        finalDepositButtonConstraints = new GridBagConstraints();
        finalDepositButtonConstraints.gridx = 1;
        finalDepositButtonConstraints.gridy = 1;

        back4Constraints = new GridBagConstraints();
        back4Constraints.gridx = 0;
        back4Constraints.gridy = 2;

        withdrawLabelConstraints  = new GridBagConstraints();
        withdrawLabelConstraints.gridx = 0;
        withdrawLabelConstraints.gridy = 0;

        withdrawAmountConstraints = new GridBagConstraints();
        withdrawAmountConstraints.gridx = 0;
        withdrawAmountConstraints.gridy = 1;

        finalWithdrawButtonConstraints = new GridBagConstraints();
        finalWithdrawButtonConstraints.gridx = 1;
        finalWithdrawButtonConstraints.gridy = 1;

        back5Constraints = new GridBagConstraints();
        back5Constraints.gridx = 0;
        back5Constraints.gridy = 2;

        logoutConstraints = new GridBagConstraints();
        logoutConstraints.gridx = 7;
        logoutConstraints.gridy = 9;

    }

    void addComponents(){
        //Add Page1 Components
        loginButton = new JButton("Login");
        panelOption.add(loginButton);

        signUpButton = new JButton("Sign Up");
        panelOption.add(signUpButton);

        //Add page 2 components
        usernameSignup = new JLabel("Enter Your Full Name:");
        panelSignup.add(usernameSignup, loginConstraints);
        createUserLogin = new JTextField(15);
        panelSignup.add(createUserLogin, loginTextConstraints);

        passwordSignup = new JLabel("Enter New Password:");
        panelSignup.add(passwordSignup, signUpConstraints);
        createUserPass = new JPasswordField(15);
        panelSignup.add(createUserPass, PasswordConstraints);

        createAccount = new JButton("Create Account");
        panelSignup.add(createAccount, createAccountConstraints);

        backButton1 = new JButton("Back");
        panelSignup.add(backButton1, backButtonConstraints);

        //Add page 3 components
        usernameLogin = new JLabel("Username:");
        panelLogin.add(usernameLogin, usernameLoginConstraints);
        userTextLogin = new JTextField(15);
        panelLogin.add(userTextLogin, userTextLoginConstraints);

        passwordLogin = new JLabel("Password:");
        panelLogin.add(passwordLogin, passwordLoginConstraints);
        passTextLogin = new JPasswordField(15);
        panelLogin.add(passTextLogin, passTextLoginConstraints);

        verifyLogin = new JButton("Login");
        panelLogin.add(verifyLogin, checkLoginConstraints);

        backButtonP2 = new JButton("Back");
        panelLogin.add(backButtonP2, backButtonConstraints);

        //Page 4 components
        welcomeMessage = new JLabel("Welcome!");
        welcomeMessage.setFont(new Font("SansSerif Bold", Font.PLAIN, 18));
        panelUnlocked.add(welcomeMessage, welcomeMessageConstraints);

        transactionHistoryButton = new JButton("Transaction History");
        panelUnlocked.add(transactionHistoryButton, transactionHistoryConstraints);
        depositButton = new JButton("Deposit");
        panelUnlocked.add(depositButton, depositConstraints);
        withdrawButton = new JButton("Withdraw");
        panelUnlocked.add(withdrawButton, withdrawConstraints);
        checkBalanceButton = new JButton("Check Balance");
        panelUnlocked.add(checkBalanceButton, checkBalanceConstraints);
        logout = new JButton("Logout");
        panelUnlocked.add(logout, logoutConstraints);


        //Page 5 components
        String [] tableColumns = {"Name", "Location", "Amount", "Date-Time"};
        String[][] tableData = new String[4][];
        transactionHistoryTable = new JTable(new DefaultTableModel(tableData, tableColumns));

        transactionHistoryTable.setBackground(Color.WHITE);
        transactionHistoryTable.setForeground(Color.BLACK);
        transactionHistoryTable.setSelectionBackground(Color.red);
        transactionHistoryTable.setGridColor(Color.red);
        transactionHistoryTable.setSelectionForeground(Color.white);
        transactionHistoryTable.setFont(new Font("Tahoma", Font.PLAIN, 17));
        transactionHistoryTable.setRowHeight(30);
        transactionHistoryTable.setAutoCreateRowSorter(true);

        JScrollPane scrollPane = new JScrollPane(transactionHistoryTable);
        transactionHistoryTable.setFillsViewportHeight(true);
        scrollPane.setBackground(Color.white);
        scrollPane.setForeground(Color.red);

        backButtonP3 = new JButton("Back");
        subPanelTable.add(backButtonP3, BorderLayout.LINE_START);

        panelTable.add(scrollPane);

        //Page 6
        depositAmount = new JLabel("How Much Would You Like To Deposit Today?: ");
        depositAmount.setFont(new Font("Tahoma", Font.PLAIN, 17));
        enterDepositAmount = new JTextField(15);
        panelDeposit.add(depositAmount, depositLabelConstraints);
        panelDeposit.add(enterDepositAmount, depositAmountConstraints);
        finalDepositButton = new JButton("Deposit Money");
        panelDeposit.add(finalDepositButton, finalDepositButtonConstraints);
        backButtonP4 = new JButton("Back");
        panelDeposit.add(backButtonP4, back4Constraints);

        //Page 7
        withdrawAmount = new JLabel("How Much Would You Like To Withdraw Today?: ");
        withdrawAmount.setFont(new Font("Tahoma", Font.PLAIN, 17));
        enterWithdrawAmount = new JTextField(15);
        panelWithdraw.add(withdrawAmount, withdrawLabelConstraints);
        panelWithdraw.add(enterWithdrawAmount, withdrawAmountConstraints);
        finalWithdrawButton = new JButton("Withdraw Money");
        panelWithdraw.add(finalWithdrawButton, finalWithdrawButtonConstraints);
        backButtonP5 = new JButton("Back");
        panelWithdraw.add(backButtonP5, back5Constraints);

        //Page 8
        balanceLabel = new JLabel("Your Current Balance Is: " + balance);
        panelBalance.add(balanceLabel);
        backButtonP6 = new JButton("Back");
        panelBalance.add(backButtonP6);

        //add pages to cards
        cards.add(panelOption, OPTION_PANEL);
        cards.add(panelLogin, LOGIN_PANEL);
        cards.add(panelSignup,SIGN_UP_PANEL);
        cards.add(panelTable, TABLE_PANEL);
        cards.add(panelUnlocked, UNLOCKED_PANEL);
        cards.add(panelDeposit, DEPOSIT_PANEL);
        cards.add(panelWithdraw, WITHDRAW_PANEL);
        cards.add(panelBalance, BALANCE_PANEL);
        cardLayout.show(cards, OPTION_PANEL);
        this.add(cards);

    }
    void addActionListener(){
        //Switch to page 2
        signUpButton.addActionListener(e -> cardLayout.show(cards, SIGN_UP_PANEL));

        //Switch to Page 3
        loginButton.addActionListener(e -> cardLayout.show(cards, LOGIN_PANEL));

        //Return to Option Screen
        backButton1.addActionListener(e -> cardLayout.show(cards, OPTION_PANEL));
        backButtonP2.addActionListener(e -> cardLayout.show(cards, OPTION_PANEL));
        logout.addActionListener(e -> cardLayout.show(cards, OPTION_PANEL));

        //Open Bank Screen Page 4
        verifyLogin.addActionListener(e -> cardLayout.show(cards, UNLOCKED_PANEL));
        createAccount.addActionListener(e -> cardLayout.show(cards, UNLOCKED_PANEL));
        backButtonP3.addActionListener(e -> cardLayout.show(cards, UNLOCKED_PANEL));
        backButtonP4.addActionListener(e -> cardLayout.show(cards, UNLOCKED_PANEL));
        backButtonP5.addActionListener(e -> cardLayout.show(cards, UNLOCKED_PANEL));
        backButtonP6.addActionListener(e -> cardLayout.show(cards, UNLOCKED_PANEL));

        //Open Transaction History Page 5
        transactionHistoryButton.addActionListener(e -> cardLayout.show(cards,TABLE_PANEL));

        //Open Deposit Page
        depositButton.addActionListener(e -> cardLayout.show(cards, DEPOSIT_PANEL));
        //Open Withdraw Page
        withdrawButton.addActionListener(e -> cardLayout.show(cards, WITHDRAW_PANEL));
        //Open Check Balance Page
        checkBalanceButton.addActionListener(e -> cardLayout.show(cards,BALANCE_PANEL));
    }
}

Answer 1

我没有启动你的应用程序，所以我不能(我不想)告诉任何有关UI/UX。

但是，关于代码和您的两个问题：

1. 每当我做一个图形用户界面，它总是非常重复地添加JLabels，面板，按钮，增加面板到卡片，等等。有什么方法可以简化这一点吗？

您可以始终使用一种更具有描述性的语言，稍后将对其进行解析，以构建视图。或者使用GUI设计器。但是，在最后，当它是由你自己或通过另一个库/框架/工具/生成器/。必须实例化和配置组件。

但是，当您看到正在出现的模式时，您可以创建其他组件。您还可以创建一个“魔术”组件，它将通过一个较短的描述模型来构建自己。您还可以创建工厂或构建器，以减少创建视图所需的代码量。

ToolBarBuilder
  .action("Save", ()->onSave())
  .separator()
  .action("Delete", ()->onDelete())
  .build(); // Icons added based on action name

new EditDialog(new MyEditForm(..), (form)->onSaveChange(form)); // Set the size, position, headers and default "Save" and "Cancel" buttons. 

关于您的代码，我认为您应该已经提取了许多组件，这将帮助您理解和维护代码。至少，每页有一个组件。您还可以尝试将约束移到更接近组件的位置，当您想要构建GUI外观的心理映像时，这会更容易。当我使用GridBagLayout对几乎所有面板进行密集的Swing开发时，我创建了一个GridBagConstraintBuilder，它的名称接近于HTML表(当时我与HTML一起使用)和正常的缺省值(对于我们的应用程序)。为了便于阅读和理解一个组件的添加和定位：

add(new JLabel(".."), at(1, 2) // set gridx and gridy
  .colspan(3) // set gridwidth
  .build()    // always fill horizontal with 1.0 weightx

1. 如何改善GUI外观？例:第4页(欢迎信息)，欢迎键和按钮彼此非常接近，但是当更改gridBagLayout时，这个距离会自动最小化，我如何才能将标签和按钮分开呢？

如果要在组件之间添加空间，有两种解决方案：

• 在它们周围添加一个空边框。优点是它可以应用到添加此组件的任何地方。
• 在网格包约束中添加一个Inset。这是特定于布局和IMHO更好的情况下，因为这是一个布局问题。
• 在另外两个之间添加en空组件。在Box类中有那些"struts“工厂方法。https://docs.oracle.com/javase/7/docs/api/javax/swing/Box.html#createHorizontalStrut(int)

Answer 2

方法

您有很多冗余代码--您可以使用方法来减少代码并提高可读性。为此目的，使用来自实用程序类的静态方法不会有什么害处。

示例1(两行->一行)

//Page 1
panelOption = new JPanel(gridLayout);
panelOption.setBackground(blue);

将会是

panelOption = BankPanelUtility.newJPanel(gridLayout, blue); 

示例2(三行->一行)

loginConstraints = new GridBagConstraints();
loginConstraints.gridx = 0;
loginConstraints.gridy = 0;

将会是

loginConstraints = BankPanelUtility.newGridBagConstraints(0, 0);

示例3(四行->一行)

//Add page 2 components
usernameSignup = new JLabel("Enter Your Full Name:");
panelSignup.add(usernameSignup, loginConstraints);
createUserLogin = new JTextField(15);
panelSignup.add(createUserLogin, loginTextConstraints);

将会是

usernameSignup = BankPanelUtility.newLogin(panelSignup, "Enter Your Full Name:", 15 loginConstraints, loginTextConstraints);

注意:考虑建议直接在BankPanelUtility.newLogin()中创建约束，而不是在前面的constraints()方法中这样做。如果要在BankPanelUtility中执行此操作，则该方法将只有两个参数：usernameSignup = BankPanelUtility.newLogin(panelSignup, "Enter Your Full Name:");

使用局部变量的

创建您的许多组件只是为了显示某物(JLabel)或安排某物(GridBagConstraints)。这些对象不需要存储在类变量中。他们可以临时创建！

示例1

signUpButton = new JButton("Sign Up");
panelOption.add(signUpButton);

将会是

panelOption.add(new JButton("Sign Up"));

您可以删除所有仅显示的字段，所有对其没有操作的字段(我看到一些JButton和一些有操作的JTtextField，这些应该作为类变量保存)。

预定义值

您有一些幻数(new JTextField(15))和一些重新出现的定义(new Font("Tahoma", Font.PLAIN, 17))。将这些值指定为最终类变量：

class BankPanel{

    private final Font panelFont = new Font("Tahoma", Font.PLAIN, 17);
    private final int textFieldSize = 15;

    ...

    void addComponents(){

        ...

        enterDepositAmount = new JTextField(textFieldSize);

        ...

        transactionHistoryTable.setFont(panelFont);       
}

Answer 3

不知道从哪里开始：

1. 您正在使用Java
2. UX是坏的
3. 看上去很难看
4. 代码没有格式化
5. 只是你知道这很糟糕