王之泰201771010131《面向對象程序設計（java）》第十二週學習總結

第一部分：理論知識學習部分

第10章 圖形程序設計

10.1 AWT與Swing簡介

1.用戶界面(User Interface) 的概念：用戶與計算機系統(各類程序)交互的接口
2.圖形用戶界面(Graphical User Interface)的概念： 以圖形方式呈現的用戶界面

3.AWT：

a. Java的抽象窗口工具箱（AbstractWindow Toolkit,AWT)包含在java.awt包中，它提供了許 多用來設計GUI的組件類和容器類。

b. AWT庫處理用戶界面元素的方法：把圖形元素的創 建和行爲委託給本地GUI工具箱進行處理。

c. 應用AWT編寫依賴於本地用戶界面元素GUI會暴露 出一些缺陷。例如，菜單、滾動條和文本域這些 用戶界面元素，在不一樣的平臺上，操做行爲上存 在一些微妙的差別。

4. Swing 

a. Swing用戶界面庫是非基於對等體的GUI工具箱。

b.Swing具備更豐富而且更方便的用戶界面元素集合。
c.Swing對底層平臺的依賴不多，所以與平臺相關的bug不多。
d.Swing會帶來交叉平臺上的統一視覺體驗。
e.Swing類庫被放在javax.swing包裏。

f. AWT與Swing的關係

  (1) 大部分AWT組件都有其Swing的等價組件。
  (2) Swing組件的名字通常是在AWT組件名前面添加一個字母「J」，如：JButton,JFrame,JPanel等。

10.2 框架的建立

10.2.1 組件

　　構成圖形用戶界面的元素，拿來即用 .

　　用圖形表示(能在屏幕上顯示，能和用戶進行交互) –Button、Checkbox、Scrollbar、Choice、Frame

10.2.2 容器

　　容器是Java中能容納和排列組件的組件。

　　經常使用的容器是框架（Frame,JFrame) 例： Frame fra= new Frame(「這是一個窗口」)；

　　java.awt.Frame類的經常使用API（教材414頁） void setResizable(booleanb) 縮放框架 void setTitle(String s) 設置框架標題 void setIconImage(Image image) 將Image用 做框架圖標

10.2.3 添加組件

　　Container類提供了一個方法add(),用來在容器類 組件對象中添加其餘組件。 

　　容器自己也是一個組件，能夠把一個容器添加到 另外一個容器裏，實現容器嵌套。

10.2.4 框架（Frame）的建立

（1）建立空框架 :在Java中，常採用框架（Frame）建立初始界面， 即GUI的頂層窗口

　　AWT庫中有一個基於對等體的Frame類。 該類的Swing版本爲JFrame,JFrame是Frame子類。 

（2）框架定位與框架屬性
　　定位： 經常使用Component類的setLocation和setBounds方法 經常使用屬性

　　　　Title：框架標題

　　　　IconImage：框架圖標

（3）肯定框架大小 : 經過調用Toolkit類的方法來獲得屏幕尺寸信息。
　　　　　　Toolkit kit = Toolkit.getDefaultToolkit(); 　　//生成 Toolkit對象
　　　　　　Dimension screenSize= kit.getScreenSize();　　//返回 Dimension對象的屏幕大小
　　　　　　intscreenWidth= screenSize.width;　　//得到Dimension對 象屏幕的寬度
　　　　　　intscreenHeight=screenSize.height; 　　//得到Dimension 對象屏幕的高度

10.3 圖形程序設計

圖形編程這部份內容會在實驗中有所體現。

包含如下特色：
1 處理2D圖形
2 顏色的使用
2 字體的使用

10.4顯示圖像

（1）在Java應用程序中，一旦圖像保存在本地或因 特網的某個位置上，就能夠將它們直接讀入到java 應用程序中。

　　String filename = 「…」; Image image= ImageIcon(filename).getImage();

（2）完成將一個圖像文件加載到程序中，再調用 Graphics類提供的DrawImage()顯示它。
　　public void paintComponent(Graphics g)

　　{　　 … g.drawImage(image, x, y, null); }

 

 

第二部分：實驗部分—— 圖形程序設計

實驗時間 2018-11-14

1、實驗目的與要求

(1) 掌握Java GUI中框架建立及屬性設置中經常使用類的API；

(2) 掌握Java GUI中2D圖形繪製經常使用類的API；

(3) 瞭解Java GUI中2D圖形中字體與顏色的設置方法；

(4) 瞭解Java GUI中2D圖像的載入方法。

2、實驗內容和步驟

實驗1： 導入第10章示例程序，測試程序並進行代碼註釋。

測試程序1：

1.運行下列程序，觀察程序運行結果。

 1 import javax.swing.*;
 2 public class SimpleFrameTest
 3 {
 4    public static void main(String[] args)
 5    {
 6      JFrame  frame = new JFrame(); 
 7      frame.setBounds(0, 0,300, 200);
 8      frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
 9      frame.setVisible(true);    
10    }
11 }

結果以下：

 

 

2.在elipse IDE中調試運行教材407頁程序10-1，結合程序運行結果理解程序；與上面程序對比，思考異同；

 1 package simpleFrame;
 2 
 3 import java.awt.*;
 4 import javax.swing.*;
 5 
 6 /**
 7  * @version 1.33 2015-05-12
 8  * @author Cay Horstmann
 9  */
10 public class SimpleFrameTest
11 {
12    public static void main(String[] args)
13    {
14       EventQueue.invokeLater(() ->
15          {
16             SimpleFrame frame = new SimpleFrame();
17             frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
18             frame.setVisible(true);
19          });
20    }
21 }
22 
23 class SimpleFrame extends JFrame
24 {
25    private static final int DEFAULT_WIDTH = 300;
26    private static final int DEFAULT_HEIGHT = 200;
27 
28    public SimpleFrame()
29    {
30       setSize(DEFAULT_WIDTH, DEFAULT_HEIGHT);
31    }
32 }

 結果以下：

 

3.掌握空框架建立方法；

4.瞭解主線程與事件分派線程概念；

5.掌握GUI頂層窗口建立技術。

測試程序2：

1.在elipse IDE中調試運行教材412頁程序10-2，結合程序運行結果理解程序；

2.掌握肯定框架經常使用屬性的設置方法。

 1 package sizedFrame;
 2 
 3 import java.awt.*;
 4 import javax.swing.*;
 5 
 6 /**
 7  * @version 1.34 2015-06-16
 8  * @author Cay Horstmann
 9  */
10 public class SizedFrameTest
11 {
12    public static void main(String[] args)
13    {
14       EventQueue.invokeLater(() ->
15          {
16             JFrame frame = new SizedFrame();
17             frame.setTitle("SizedFrame");
18             frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
19             frame.setVisible(true);
20          });
21    }
22 }
23 
24 class SizedFrame extends JFrame
25 {
26    public SizedFrame()
27    {
28       // 獲取屏幕尺寸
29 
30       Toolkit kit = Toolkit.getDefaultToolkit();
31       Dimension screenSize = kit.getScreenSize();
32       int screenHeight = screenSize.height;
33       int screenWidth = screenSize.width;
34 
35       // 設置框架寬度、高度並讓平臺選擇屏幕位置
36 
37       setSize(screenWidth / 2, screenHeight / 2);
38       setLocationByPlatform(true);
39 
40       // 設置幀圖標
41 
42       Image img = new ImageIcon("icon.gif").getImage();
43       setIconImage(img);      
44    }
45 }

結果以下：

 

測試程序3：

1.在elipse IDE中調試運行教材418頁程序10-3，結合運行結果理解程序；

2.掌握在框架中添加組件；

3.掌握自定義組件的用法。

 1 package notHelloWorld;
 2 
 3 import javax.swing.*;
 4 import java.awt.*;
 5 
 6 /**
 7  * @version 1.33 2015-05-12
 8  * @author Cay Horstmann
 9  */
10 public class NotHelloWorld
11 {
12    public static void main(String[] args)
13    {
14       EventQueue.invokeLater(() ->
15          {
16             JFrame frame = new NotHelloWorldFrame();
17             frame.setTitle("NotHelloWorld");
18             frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
19             frame.setVisible(true);
20          });
21    }
22 }
23 
24 /**
25  * A frame that contains a message panel
26  */
27 class NotHelloWorldFrame extends JFrame
28 {
29    public NotHelloWorldFrame()
30    {
31       add(new NotHelloWorldComponent());
32       pack();
33    }
34 }
35 
36 /**
37  * A component that displays a message.
38  */
39 class NotHelloWorldComponent extends JComponent
40 {
41    public static final int MESSAGE_X = 75;
42    public static final int MESSAGE_Y = 100;
43 
44    private static final int DEFAULT_WIDTH = 300;
45    private static final int DEFAULT_HEIGHT = 200;
46 
47    public void paintComponent(Graphics g)
48    {
49       g.drawString("Not a Hello, World program", MESSAGE_X, MESSAGE_Y);
50    }
51    
52    public Dimension getPreferredSize() { return new Dimension(DEFAULT_WIDTH, DEFAULT_HEIGHT); }
53 }

 結果以下：

 

測試程序4：

1.在elipse IDE中調試運行教材424 -425頁程序10-4，結合程序運行結果理解程序；

2.掌握2D圖形的繪製方法。

 1 package draw;
 2 
 3 import java.awt.*;
 4 import java.awt.geom.*;
 5 import javax.swing.*;
 6 
 7 /**
 8  * @version 1.33 2007-05-12
 9  * @author Cay Horstmann
10  */
11 public class DrawTest
12 {
13    public static void main(String[] args)
14    {
15       EventQueue.invokeLater(() ->
16          {
17             JFrame frame = new DrawFrame();
18             frame.setTitle("DrawTest");
19             frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
20             frame.setVisible(true);
21          });
22    }
23 }
24 
25 /**
26  * A frame that contains a panel with drawings
27  */
28 class DrawFrame extends JFrame
29 {
30    public DrawFrame()
31    {      
32       add(new DrawComponent());
33       pack();
34    }
35 }
36 
37 /**
38  * A component that displays rectangles and ellipses.
39  */
40 class DrawComponent extends JComponent
41 {
42    private static final int DEFAULT_WIDTH = 400;
43    private static final int DEFAULT_HEIGHT = 400;
44 
45    public void paintComponent(Graphics g)
46    {
47       Graphics2D g2 = (Graphics2D) g;
48 
49       // 繪製矩形
50 
51       double leftX = 100;
52       double topY = 100;
53       double width = 200;
54       double height = 150;
55 
56       Rectangle2D rect = new Rectangle2D.Double(leftX, topY, width, height);
57       g2.draw(rect);
58 
59       // 畫封閉橢圓
60 
61       Ellipse2D ellipse = new Ellipse2D.Double();
62       ellipse.setFrame(rect);
63       g2.draw(ellipse);
64 
65       // 畫一條對角線
66 
67       g2.draw(new Line2D.Double(leftX, topY, leftX + width, topY + height));
68 
69       // 用同一個中心畫一個圓
70 
71       double centerX = rect.getCenterX();
72       double centerY = rect.getCenterY();
73       double radius = 150;
74 
75       Ellipse2D circle = new Ellipse2D.Double();
76       circle.setFrameFromCenter(centerX, centerY, centerX + radius, centerY + radius);
77       g2.draw(circle);
78    }
79    
80    public Dimension getPreferredSize() { return new Dimension(DEFAULT_WIDTH, DEFAULT_HEIGHT); }
81 }

 結果以下：

 

測試程序5：

1.在elipse IDE中調試運行教材432頁-433程序10-5，結合程序運行結果理解程序；

2.瞭解2D圖形中字體的設置的方法；

 1 package font;
 2 
 3 import java.awt.*;
 4 import java.awt.font.*;
 5 import java.awt.geom.*;
 6 import javax.swing.*;
 7 
 8 /**
 9  * @version 1.34 2015-05-12
10  * @author Cay Horstmann
11  */
12 public class FontTest
13 {
14    public static void main(String[] args)
15    {
16       EventQueue.invokeLater(() ->
17          {
18             JFrame frame = new FontFrame();
19             frame.setTitle("FontTest");
20             frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
21             frame.setVisible(true);
22          });
23    }
24 }
25 
26 /**
27  * A frame with a text message component
28  */
29 class FontFrame extends JFrame
30 {
31    public FontFrame()
32    {      
33       add(new FontComponent());
34       pack();
35    }
36 }
37 
38 /**
39  * A component that shows a centered message in a box.
40  */
41 class FontComponent extends JComponent
42 {
43    private static final int DEFAULT_WIDTH = 300;
44    private static final int DEFAULT_HEIGHT = 200;
45 
46    public void paintComponent(Graphics g)
47    {
48       Graphics2D g2 = (Graphics2D) g;
49 
50       String message = "Hello, World!";
51 
52       Font f = new Font("Serif", Font.BOLD, 36);
53       g2.setFont(f);
54 
55       // 測量消息的大小
56 
57       FontRenderContext context = g2.getFontRenderContext();
58       Rectangle2D bounds = f.getStringBounds(message, context);
59 
60       // 設置（x，y）=文本左上角
61 
62       double x = (getWidth() - bounds.getWidth()) / 2;
63       double y = (getHeight() - bounds.getHeight()) / 2;
64 
65       // 增長到Y到達基線
66 
67       double ascent = -bounds.getY();
68       double baseY = y + ascent;
69 
70       // 汲取信息
71 
72       g2.drawString(message, (int) x, (int) baseY);
73 
74       g2.setPaint(Color.LIGHT_GRAY);
75 
76       // 繪製基線
77 
78       g2.draw(new Line2D.Double(x, baseY, x + bounds.getWidth(), baseY));
79 
80       // 繪製封閉矩形
81 
82       Rectangle2D rect = new Rectangle2D.Double(x, y, bounds.getWidth(), bounds.getHeight());
83       g2.draw(rect);
84    }
85    
86    public Dimension getPreferredSize() { return new Dimension(DEFAULT_WIDTH, DEFAULT_HEIGHT); }
87 }

 結果以下：

 

測試程序6：

1.在elipse IDE中調試運行教材436頁-437程序10-6，結合程序運行結果理解程序；

2.瞭解2D圖形圖像的顯示方法。

 1 package image;
 2 
 3 import java.awt.*;
 4 import javax.swing.*;
 5 
 6 /**
 7  * @version 1.34 2015-05-12
 8  * @author Cay Horstmann
 9  */
10 public class ImageTest
11 {
12    public static void main(String[] args)
13    {
14       EventQueue.invokeLater(() ->
15          {
16             JFrame frame = new ImageFrame();
17             frame.setTitle("ImageTest");
18             frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
19             frame.setVisible(true);
20          });
21    }
22 }
23 
24 /**
25  * A frame with an image component
26  */
27 class ImageFrame extends JFrame
28 {
29    public ImageFrame()
30    {
31       add(new ImageComponent());
32       pack();
33    }
34 }
35 
36 /**
37  * A component that displays a tiled image
38  */
39 class ImageComponent extends JComponent
40 {
41    private static final int DEFAULT_WIDTH = 300;
42    private static final int DEFAULT_HEIGHT = 200;
43 
44    private Image image;
45 
46    public ImageComponent()
47    {
48       image = new ImageIcon("blue-ball.gif").getImage();
49    }
50 
51    public void paintComponent(Graphics g)
52    {
53       if (image == null) return;
54 
55       int imageWidth = image.getWidth(null);
56       int imageHeight = image.getHeight(null);
57 
58       // 在左上角繪製圖像
59 
60       g.drawImage(image, 0, 0, null);
61       // 在組件上平鋪圖像
62 
63       for (int i = 0; i * imageWidth <= getWidth(); i++)
64          for (int j = 0; j * imageHeight <= getHeight(); j++)
65             if (i + j > 0) 
66                g.copyArea(0, 0, imageWidth, imageHeight, i * imageWidth, j * imageHeight);
67    }
68    
69    public Dimension getPreferredSize() { return new Dimension(DEFAULT_WIDTH, DEFAULT_HEIGHT); }
70 }

 結果以下：

 1 package image;
 2 
 3 import java.awt.*;
 4 import java.awt.event.WindowAdapter;
 5 import java.awt.event.WindowEvent;
 6 
 7 import javax.swing.*;
 8 
 9 /**
10  * @version 1.34 2015-05-12
11  * @author Cay Horstmann
12  */
13 public class ImageTest
14 {
15    @SuppressWarnings("null")
16 public static void main(String[] args)
17    {
18       EventQueue.invokeLater(() ->
19          {
20             JFrame frame = new ImageFrame();
21             frame.setTitle("ImageTest");
22             frame.setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE);
23             frame.setVisible(true);
24          });
25       
26    }
27    
28 }
29 
30 /**
31  * A frame with an image component
32  */
33 class ImageFrame extends JFrame
34 {
35    public ImageFrame()
36    {
37       add(new ImageComponent());
38       pack();
39    }
40 }
41 
42 /**
43  * A component that displays a tiled image
44  */
45 class ImageComponent extends JComponent
46 {
47    private static final int DEFAULT_WIDTH = 300;
48    private static final int DEFAULT_HEIGHT = 200;
49 
50    private Image image;
51 
52    public ImageComponent()
53    {
54       image = new ImageIcon("timg.jpg").getImage();
55    }
56 
57    public void paintComponent(Graphics g)
58    {
59       if (image == null) return;
60 
61       int imageWidth = image.getWidth(null);
62       int imageHeight = image.getHeight(null);
63 
64       // 在左上角繪製圖像
65 
66       g.drawImage(image, 0, 0, null);
67       // 在組件上平鋪圖像
68 
69       for (int i = 0; i * imageWidth <= getWidth(); i++)
70          for (int j = 0; j * imageHeight <= getHeight(); j++)
71             if (i + j > 0) 
72                g.copyArea(0, 0, imageWidth, imageHeight, i * imageWidth, j * imageHeight);
73    }
74    
75    public Dimension getPreferredSize() { 
76        return new Dimension(DEFAULT_WIDTH, DEFAULT_HEIGHT); 
77        }
78 }

結果以下：

 

 

實驗2：課後完成PTA平臺題目集：2018秋季西北師範大學面向對象程序設計（Java）練習題集（ch6-ch9)

第三部分：總結

經過本週的學習，我瞭解了Java GUI中框架建立及屬性設置中經常使用類的API； GUI中2D圖形繪製經常使用類的API；GUI中2D圖形中字體與顏色的設置方法；GUI中2D圖形中字體與顏色的設置方法；以及利用空閒時間複習了一千6-9章的實驗，我以爲可以很好的設計一個圖形用戶界面的話，對於之後軟件開發的用戶體驗有很大的幫助。畢竟開發的軟件使用者仍是廣大用戶。並且經過本週6-9章的習題練習，在回顧知識的同時，讓本身查漏補缺。將知識有效的結合運用。