用户界面分析与设计（SSD4）实验三

╰半夏微凉° 2021-11-10 23:32 274阅读 0赞

#### Take Assessment: Exercise 3 ####

##### 1．需求分析 #####

此任务是使用按钮和标签创建一个小型接口。此接口将允许使用按钮递增和递减三个整数值，如下所示。  
  ![在这里插入图片描述][2019080320321621.png]  
  首先应在每个整数显示旁边放置按钮，一个用于增加值，另一个用于减少值。第一个整数值应保持在0到23之间。剩下的整数应保持在0到59的范围内。  
  还应提供“OK”、“Cancel”和“Apply”按钮。按下“OK”或“Cancel”按钮，只需关闭界面即可。

##### 2．概要设计 #####

(1)本实验第一步先进行UI设计，利用NetBeans的Frame框架以及jSpinner、jButton进行组合设计；

(2)然后进入jSpinner的模型中设置其中数据显示要求，即第一个时钟显示在0-23，第二个分钟和第三个的秒钟则是在0-59之间；

(3)再利用stateChanged事件处理三个数据之间的关系，即比如秒钟为59时，接下来秒钟应当为0，而分钟如果也是59则应当也变为0，不是则分钟自加1，还有考虑此时时钟是否为23，若是，时钟应该也变为0，不是则加一；

(4)接下来利用Timer定时器，设置秒自动累加，使程序能够自动展示；

(5)最后一步是设置数据的默认值，程序展示窗口细节处理（标题、显示位置等），同时为按钮“OK”、“Cancel”添加点击事件，即当用户点击时关闭窗口，而“Apply”按钮则不做处理。

##### 3．详细设计 #####

(1)点击添加三个jSpinner、三个jButton，并设置好变量名字；

(2)进入jSpinner的Model中，设置相关数据，首先选择模型类型，本程序选择数值，数据类型则是选择整型，接下来设置初始值并设置最大值、最小值，因为要监听到数据到60之类的变化，所以此处设计是分别与现实中的数据相差一点，界面操作如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NTY0NTU1_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NTY0NTU1_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NTY0NTU1_size_16_color_FFFFFF_t_70 2]

(3)接下来设置jSpinner的stateChanged事件，主要是考虑用户自定义增加与减少到极限数据时程序该如何反应，当秒钟减少到0，再减少时应该变为59，同时分钟减少1，当秒钟增加到59时，继续增加秒钟应该变为0，而分钟应当加1，分钟与时钟的操作同理。

int hour = Integer.parseInt(jSpinner1.getValue().toString());
            int minute = Integer.parseInt(jSpinner2.getValue().toString());
            int second = Integer.parseInt(jSpinner3.getValue().toString());
            //秒钟变化
            if(second == 60){ 
                //分钟变化
                if(minute == 59){ 
                    //时钟变化
                    if(hour == 23){ 
                        jSpinner1.setValue(0);
                    }
                    else{ 
                        jSpinner1.setValue(hour+1);
                    }
                    jSpinner2.setValue(0);
                }
                else{ 
                    jSpinner2.setValue(minute+1);
                }
                jSpinner3.setValue(0);
            }
            //秒钟变化
            if(second == -1){ 
                //分钟变化
                if(minute == 0){ 
                    //时钟变化
                    if(hour == 0){ 
                        jSpinner1.setValue(23);
                    }
                    else{ 
                        jSpinner1.setValue(hour-1);
                    }
                    jSpinner2.setValue(59);
                }
                else{ 
                    jSpinner2.setValue(minute-1);
                }
                jSpinner3.setValue(59);
            }

(4)利用Timer定时器设置定时的重复操作，对于时钟程序而言，只需要秒钟能够自动增加就可以了，所以只需要对秒钟进行Timer定时设计，每一次间隔1秒，重复的操作为获取当前秒钟，自增1，再重新赋值给秒钟。

Timer timer = new Timer();
            //定时器执行任务
            timer.schedule(new TimerTask() { 
    		@Override
    	   	public void run() { 
                   int second = Integer.parseInt(jSpinner3.getValue().toString());
                   second++;
                   jSpinner3.setValue(second);
                   repaint();
    		}
            }, 0, 1000);

(5)设置好时钟分钟秒钟的默认数据，程序窗口固定大小、标题、居中展示，还有“OK”、“Cancel”按钮点击的退出界面，直接添加jButton1MouseClicked（）函数，利用语句System.exit(WIDTH);即可做到。

##### 4．调试分析 #####

程序的设计流程并不复杂，但是由于NetBeans这个软件本身的固有原因，在协调各个部件位置时花了很多时间，设计效果与运行结果总是有差距；  
  其次是对于Timer定时器的使用，这个函数最开始我是不会用的，然后就一直查百度，边查边试就做到了，一开始它显示提示信息说只能设置数据最终状态，然后就一直程序没运行起来，偶然之下，我把秒钟数据设置为了60，此时分钟就能自动运行起来了，那么也就意味着这个Timer实际上也就是一直重复设置秒钟为60，因为只有这样分钟才会不断的累加，所以后来就想到了先获取秒钟数据，然后自加1再重新赋值给秒钟数据即可。

##### 5．用户使用说明 #####

![在这里插入图片描述][20190803203428722.png]  
![在这里插入图片描述][20190803203434611.png]  
  本程序一方面用户可以不用自己操作，程序将自动运行，秒钟会不断自己运行，另一方面用户也可以通过点击各个时钟旁边的上下三角形进行数值的加减或者直接在数据区输入数据即可达到自定义时间的目标。  
  点击“OK”、“Cancel”按钮程序将自动退出，点击“Apply”按钮程序将无明显动作显示。

##### 6．测试结果 #####

程序运行一切正常，能够按照理想运行。  
![在这里插入图片描述][20190803203502468.png]  
![在这里插入图片描述][20190803203506252.png]  
![在这里插入图片描述][20190803203510353.png]

##### 7．附录 #####

注：更加详细清晰的代码可参考文件[实验三源码][Link 1]

/* * To change this license header, choose License Headers in Project Properties. * To change this template file, choose Tools | Templates * and open the template in the editor. */
    package ssd4_program3;
    
    import java.util.Timer;
    import java.util.TimerTask;
    
    /** * * @author Summer */
    public class Exercise3_GUI extends javax.swing.JFrame { 
    
        /** * Creates new form Exercise3_GUI */
        public Exercise3_GUI() { 
            initComponents();
            this.setTitle("Exercise3");
            this.setLocationRelativeTo(null);
            this.setResizable(false);
            //设置数据初始值
            jSpinner1.setValue(8);
            jSpinner2.setValue(57);
            jSpinner3.setValue(55);
            jSpinner3.requestFocus();
    
            Timer timer = new Timer();
            //定时器执行任务
            timer.schedule(new TimerTask() { 
    		@Override
    		public void run() { 
                        int second = Integer.parseInt(jSpinner3.getValue().toString());
                        second++;
                        jSpinner3.setValue(second);
                        repaint();
    		}
            }, 0, 1000);
    
            /* //设置“时”只能输入数字 JSpinner.NumberEditor editor = new JSpinner.NumberEditor(jSpinner1, "0"); jSpinner1.setEditor(editor); JFormattedTextField textField = ((JSpinner.NumberEditor) jSpinner1.getEditor()).getTextField(); textField.setEditable(true); DefaultFormatterFactory factory = (DefaultFormatterFactory) textField .getFormatterFactory(); NumberFormatter formatter = (NumberFormatter) factory.getDefaultFormatter(); formatter.setAllowsInvalid(false); add(jSpinner1); */
    
        }
    
        /** * This method is called from within the constructor to initialize the form. * WARNING: Do NOT modify this code. The content of this method is always * regenerated by the Form Editor. */
        @SuppressWarnings("unchecked")
        // <editor-fold defaultstate="collapsed" desc="Generated Code"> 
        private void initComponents() { 
    
            jSpinner1 = new javax.swing.JSpinner();
            jSpinner2 = new javax.swing.JSpinner();
            jSpinner3 = new javax.swing.JSpinner();
            jButton1 = new javax.swing.JButton();
            jButton3 = new javax.swing.JButton();
            jButton2 = new javax.swing.JButton();
    
            setDefaultCloseOperation(javax.swing.WindowConstants.EXIT_ON_CLOSE);
            setMaximumSize(new java.awt.Dimension(298, 140));
            setMinimumSize(new java.awt.Dimension(298, 140));
    
            jSpinner1.setFont(new java.awt.Font("宋体", 0, 18)); // NOI18N
            jSpinner1.setModel(new javax.swing.SpinnerNumberModel(0, -1, 24, 1));
            jSpinner1.addChangeListener(new javax.swing.event.ChangeListener() { 
                public void stateChanged(javax.swing.event.ChangeEvent evt) { 
                    jSpinner1StateChanged(evt);
                }
            });
    
            jSpinner2.setFont(new java.awt.Font("宋体", 0, 18)); // NOI18N
            jSpinner2.setModel(new javax.swing.SpinnerNumberModel(0, -1, 60, 1));
            jSpinner2.addChangeListener(new javax.swing.event.ChangeListener() { 
                public void stateChanged(javax.swing.event.ChangeEvent evt) { 
                    jSpinner2StateChanged(evt);
                }
            });
    
            jSpinner3.setFont(new java.awt.Font("宋体", 0, 18)); // NOI18N
            jSpinner3.setModel(new javax.swing.SpinnerNumberModel(0, -1, 60, 1));
            jSpinner3.addChangeListener(new javax.swing.event.ChangeListener() { 
                public void stateChanged(javax.swing.event.ChangeEvent evt) { 
                    jSpinner3StateChanged(evt);
                }
            });
            jSpinner3.addInputMethodListener(new java.awt.event.InputMethodListener() { 
         public void inputMethodTextChanged(java.awt.event.InputMethodEvent evt) { 
                    jSpinner3InputMethodTextChanged(evt);
                }
         public void caretPositionChanged(java.awt.event.InputMethodEvent evt) { 
                }
            });
    
            jButton1.setFont(new java.awt.Font("宋体", 0, 14)); // NOI18N
            jButton1.setText("OK");
            jButton1.addMouseListener(new java.awt.event.MouseAdapter() { 
                public void mouseClicked(java.awt.event.MouseEvent evt) { 
                    jButton1MouseClicked(evt);
                }
            });
            jButton1.addActionListener(new java.awt.event.ActionListener() { 
                public void actionPerformed(java.awt.event.ActionEvent evt) { 
                    jButton1ActionPerformed(evt);
                }
            });
    
            jButton3.setFont(new java.awt.Font("宋体", 0, 14)); // NOI18N
            jButton3.setText("Apply");
    
            jButton2.setFont(new java.awt.Font("宋体", 0, 14)); // NOI18N
            jButton2.setText("Cancel");
            jButton2.addMouseListener(new java.awt.event.MouseAdapter() { 
                public void mouseClicked(java.awt.event.MouseEvent evt) { 
                    jButton2MouseClicked(evt);
                }
            });
    
     javax.swing.GroupLayout layout = new javax.swing.GroupLayout(getContentPane());
            getContentPane().setLayout(layout);
            layout.setHorizontalGroup(
                layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
                .addGroup(layout.createSequentialGroup()
                    .addGap(53, 53, 53)
                    .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
                        .addComponent(jButton1, javax.swing.GroupLayout.Alignment.TRAILING, javax.swing.GroupLayout.PREFERRED_SIZE, 50, javax.swing.GroupLayout.PREFERRED_SIZE)
                        .addComponent(jSpinner1, javax.swing.GroupLayout.Alignment.TRAILING, javax.swing.GroupLayout.PREFERRED_SIZE, 50, javax.swing.GroupLayout.PREFERRED_SIZE))
                    .addGap(31, 31, 31)
                    .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
                        .addGroup(layout.createSequentialGroup()
                            .addComponent(jSpinner2, javax.swing.GroupLayout.PREFERRED_SIZE, 50, javax.swing.GroupLayout.PREFERRED_SIZE)
                            .addGap(45, 45, 45)
                            .addComponent(jSpinner3, javax.swing.GroupLayout.PREFERRED_SIZE, 50, javax.swing.GroupLayout.PREFERRED_SIZE))
                        .addGroup(layout.createSequentialGroup()
                            .addComponent(jButton2)
                            .addGap(18, 18, 18)
                            .addComponent(jButton3)))
                    .addContainerGap(55, Short.MAX_VALUE))
            );
            layout.setVerticalGroup(
                layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
                .addGroup(layout.createSequentialGroup()
                    .addGap(30, 30, 30)
                    .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.BASELINE)
                        .addComponent(jSpinner1, javax.swing.GroupLayout.PREFERRED_SIZE, 40, javax.swing.GroupLayout.PREFERRED_SIZE)
                        .addComponent(jSpinner2, javax.swing.GroupLayout.PREFERRED_SIZE, 40, javax.swing.GroupLayout.PREFERRED_SIZE)
                        .addComponent(jSpinner3, javax.swing.GroupLayout.PREFERRED_SIZE, 40, javax.swing.GroupLayout.PREFERRED_SIZE))
                    .addGap(18, 18, 18)
                    .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.BASELINE)
                        .addComponent(jButton2)
                        .addComponent(jButton1)
                        .addComponent(jButton3))
                    .addContainerGap(44, Short.MAX_VALUE))
            );
    
            pack();
        }// </editor-fold> 
    
        private void jSpinner3InputMethodTextChanged(java.awt.event.InputMethodEvent evt) {                                                  
            // TODO add your handling code here:
        }                                                
    
        private void jButton2MouseClicked(java.awt.event.MouseEvent evt) {                                       
            // TODO add your handling code here:
            System.exit(WIDTH);
        }                                     
    
        private void jButton1ActionPerformed(java.awt.event.ActionEvent evt) {                                          
            // TODO add your handling code here:
        }                                        
    
        private void jButton1MouseClicked(java.awt.event.MouseEvent evt) {                                       
            // TODO add your handling code here:
            System.exit(WIDTH);
        }                                     
    
        private void jSpinner3StateChanged(javax.swing.event.ChangeEvent evt) {                                        
            // TODO add your handling code here:
            int hour = Integer.parseInt(jSpinner1.getValue().toString());
            int minute = Integer.parseInt(jSpinner2.getValue().toString());
            int second = Integer.parseInt(jSpinner3.getValue().toString());
            //秒钟变化
            if(second == 60){ 
                //分钟变化
                if(minute == 59){ 
                    //时钟变化
                    if(hour == 23){ 
                        jSpinner1.setValue(0);
                    }
                    else{ 
                        jSpinner1.setValue(hour+1);
                    }
                    jSpinner2.setValue(0);
                }
                else{ 
                    jSpinner2.setValue(minute+1);
                }
                jSpinner3.setValue(0);
            }
            //秒钟变化
            if(second == -1){ 
                //分钟变化
                if(minute == 0){ 
                    //时钟变化
                    if(hour == 0){ 
                        jSpinner1.setValue(23);
                    }
                    else{ 
                        jSpinner1.setValue(hour-1);
                    }
                    jSpinner2.setValue(59);
                }
                else{ 
                    jSpinner2.setValue(minute-1);
                }
                jSpinner3.setValue(59);
            } 
        }                                      
    
        private void jSpinner2StateChanged(javax.swing.event.ChangeEvent evt) {                                        
            // TODO add your handling code here:
            int hour = Integer.parseInt(jSpinner1.getValue().toString());
            int minute = Integer.parseInt(jSpinner2.getValue().toString());
            //分钟变化
            if(minute == 60){ 
                //时钟变化
                if(hour == 24){ 
                    jSpinner1.setValue(0);
                }
                else{ 
                    jSpinner1.setValue(hour+1);
                }
                jSpinner2.setValue(0);
            }
            //分钟变化
            if(minute == -1){ 
                //时钟变化
                if(hour == 0){ 
                    jSpinner1.setValue(23);
                }
                else{ 
                    jSpinner1.setValue(hour-1);
                }
                jSpinner2.setValue(59);
            }
        }                                      
    
        private void jSpinner1StateChanged(javax.swing.event.ChangeEvent evt) {                                        
            // TODO add your handling code here:
            int hour = Integer.parseInt(jSpinner1.getValue().toString());
            //时钟变化
            if(hour == 24){ 
                jSpinner1.setValue(0);
            }
            //时钟变化
            if(hour == -1){ 
                jSpinner1.setValue(23);
            }
        }                                      
    
        /** * @param args the command line arguments */
        public static void main(String args[]) { 
            /* Set the Nimbus look and feel */
            //<editor-fold defaultstate="collapsed" desc=" Look and feel setting code (optional) ">
            /* If Nimbus (introduced in Java SE 6) is not available, stay with the default look and feel. * For details see http://download.oracle.com/javase/tutorial/uiswing/lookandfeel/plaf.html */
            try { 
                for (javax.swing.UIManager.LookAndFeelInfo info : javax.swing.UIManager.getInstalledLookAndFeels()) { 
                    if ("Nimbus".equals(info.getName())) { 
                        javax.swing.UIManager.setLookAndFeel(info.getClassName());
                        break;
                    }
                }
            } catch (ClassNotFoundException ex) { 
                java.util.logging.Logger.getLogger(Exercise3_GUI.class.getName()).log(java.util.logging.Level.SEVERE, null, ex);
            } catch (InstantiationException ex) { 
                java.util.logging.Logger.getLogger(Exercise3_GUI.class.getName()).log(java.util.logging.Level.SEVERE, null, ex);
            } catch (IllegalAccessException ex) { 
                java.util.logging.Logger.getLogger(Exercise3_GUI.class.getName()).log(java.util.logging.Level.SEVERE, null, ex);
            } catch (javax.swing.UnsupportedLookAndFeelException ex) { 
                java.util.logging.Logger.getLogger(Exercise3_GUI.class.getName()).log(java.util.logging.Level.SEVERE, null, ex);
            }
            //</editor-fold>
    
            /* Create and display the form */
            java.awt.EventQueue.invokeLater(new Runnable() { 
                public void run() { 
                    new Exercise3_GUI().setVisible(true);
                }
            });
        }
    
        // Variables declaration - do not modify 
        private javax.swing.JButton jButton1;
        private javax.swing.JButton jButton2;
        private javax.swing.JButton jButton3;
        private javax.swing.JSpinner jSpinner1;
        private javax.swing.JSpinner jSpinner2;
        private javax.swing.JSpinner jSpinner3;
        // End of variables declaration 
    }

[2019080320321621.png]: /images/20211109/a0119181233f434889bda8b37c82aba2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NTY0NTU1_size_16_color_FFFFFF_t_70]: /images/20211109/e81cd514a0f4421c8d2581bd64c8f83a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NTY0NTU1_size_16_color_FFFFFF_t_70 1]: /images/20211109/763c79b4ee1a415baff9a5737979f3af.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NTY0NTU1_size_16_color_FFFFFF_t_70 2]: /images/20211109/8d6b0840c10a4db7b9db9c6a006011f4.png
[20190803203428722.png]: /images/20211109/75509e0aa3204590982a2871b5dd51bb.png
[20190803203434611.png]: /images/20211109/93e374740fe84723bb89edca5e181113.png
[20190803203502468.png]: /images/20211109/0337d23e83f8433e86d27ba299ea025a.png
[20190803203506252.png]: /images/20211109/a26691495936402191b1e06e139cb41d.png
[20190803203510353.png]: /images/20211109/5084869f8ff34ef0b347d8126f762b49.png
[Link 1]: https://github.com/zz2summer/User-interface-analysis-and-design-SSD4/tree/master/SSD4%E5%AE%9E%E9%AA%8C