程序界面架構設計原理

『壹』 程序設計中的架構到底是指什麼

程序設計中的架構是指是一系列相關的抽象模式，用於指導大型軟體系統各個方面的設計。

軟體架構所指的就是說相應的系列性的抽象模式，可以為設計大型軟體系統的各個方面提供相應的指導。從本質上來看，軟體架構是屬於一種系統草圖。

在軟體架構所描述的對象就是直接的進行系統抽象組件構成。連接系統的各個組件之間就是做到把組件之間所存在的通訊比較明確與相對細致的實施描述。

處於相應的系統實現環節，那麼就會使得細化這些抽象組件成為現實的組件，比如可以是具體的某個類或者是對象。從面向對象領域進行分析，那麼各個組件之前實施的連接實現往往是介面。

(1)程序界面架構設計原理擴展閱讀：

程序設計中架構的三種分類：

1、邏輯架構：

軟體系統系統當中的各個元件之間所存在的關系，比如外部系統介面、用戶界面、商業邏輯元件、資料庫等。

2、物理架構：

究竟是怎樣做到在硬體當中放置軟體元件。例如處於上海與北京進行分布的分布式系統的物理架構，這也就是說全部的元件都是屬於物理設備，主要的有主機、整合伺服器、應用伺服器、代理伺服器、存儲伺服器、報表伺服器、Web伺服器、網路分流器等。

3、系統架構：

相應的系統存在著性能、強壯性、可擴展性、靈活性、可靠性等這些非功能性特徵。設計系統的架構比要讓系統架構設計人員存在著過硬的軟體與硬體的性能與功能，往往從事這樣的工作這是屬於設計系統架構環節最為困難的工作。

參考資料來源：網路-軟體架構

『貳』 簡述java程序設計中界面設計中的三種布局方式

1 邊框布局

JPanel panel1=(JPanel)getContentPane();
panel1.setLayout(new FlowLayout());
憑著我們現在所積累的閱讀程序的功夫，應該能夠很快地知道我們通過第一條語句創建了一個容器JPanel類的panel1。
而接下來，我們則調用了panel1.setLayout(new FlowLayout())，在上一章中，我們一直沒有對它進行相應的分析。現在該是揭開它的面紗的時候了。
單詞layout的中文意思是「布局」、「布置」，setLayout就是設置布局格式。也就是說，容器panel1的方法setLayout是用來設置布局格式的。那麼，我們一直用的是什麼模式呢？對，就是後面括弧里的FlowLayout（）。顧名思義，也就是流布局方式。這是一種順其自然的方式：從左到右，一個個對象地擺放，擺不下，就擺到下一行。所以，我們就無法去控制它。
從本章開始，我們就要學習一種控制布局的方法。在Java語言中，提供了各種布局管理器，以便大家能夠達到這一目的。
通常我們最常使用的布局管理器是：Border Layout（邊框布局管理器），如下圖所示，邊框布局管理器將一個屏幕分成了五個部分：東、南、西、北、中。

如果要使用這種邊框布局管理進行布局控制，我們必須先將「容器」設置為「邊框布局控制模式」，具體來說，就是當調用setLayout方法為容器設置布局控制模式時，參數設置為BorderLayout。例如：
JPanel panel1=(JPanel)getContentPane();
panel1.setLayout(new BorderLayout());
然後，我們就可以在使用容器的add方法添加部件時，附加上位置參數，使得該部件顯示在指定的位置上。位置參數分別是：
BorderLayout.NORTH 位置為北
BorderLayout.SOUTH 位置為南
BorderLayout.EAST 位置為東
BorderLayout.WEST 位置為西
BorderLayout.NORTH 位置為中心

實例說明

下面，我們就來試一試，使用按鈕排出五個方向！請創建一個testBorder.java，輸入以下源程序：
源程序：useTextArea.java
import java.awt.*;
import javax.swing.*;
import java.applet.Applet;

public class testBorder extends JApplet
{
public void init()
{
JPanel panel1=(JPanel)getContentPane();
panel1.setLayout(new BorderLayout());

JButton north=new JButton("North");
JButton south=new JButton("South");
JButton east=new JButton("East");
JButton west=new JButton("West");
JButton center=new JButton("Center");

panel1.add(north,BorderLayout.NORTH);
panel1.add(south,BorderLayout.SOUTH);
panel1.add(east,BorderLayout.EAST);
panel1.add(west,BorderLayout.WEST);
panel1.add(center,BorderLayout.CENTER);
}
}

然後，我們使用javac編譯這個程序，然後編輯一個顯示這個Java Applet的HTML頁面。最後調用appletviewer來觀察這個頁面

為了試一下，如果並沒有在每個位置都安排一個部件，那麼會怎麼樣呢？我們修改一下程序，將panel1.add(west,BorderLayout.WEST);這一行注釋掉（就是在前面加上「//」號），也就是不顯示西邊的按鈕，看一下結果如何。正如上圖（圖10-3）所示，西邊由於沒有部件，因此「中」就朝西靠，「佔領」了它的位置。

而如果我們修改一下程序，讓中間的按鈕不顯示的話，就會出現如圖10-5的樣子，中間的區域並未並佔領，而是空在那裡了！這是與其它位置不同的地方，大家一定要記住。

一些提示：
其實這很好理解，如果中間的那一塊的位置被其它位置上的部件佔領的話，就會使得分不清「東」、「南」、「西」、「北」了。倒成了「左上角」、「左下角」、「右上角」、「右下角」了。

2 網格布局
實例說明

下面，我們來看一個新的程序！首先創建一個testGrid.java文件，並輸入以下源程序：
源程序：testGrid.java

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

public class testGrid extends JApplet
{
String buttonLabels[]={"No.1","No.2","No.3","No.4","No.5",
"No.6","No.7","No.8","No.9"};

public void init()
{
JPanel panel1=(JPanel)getContentPane();
panel1.setLayout(new GridLayout(3,3));

for (int x=0; xpanel1.add(new JButton(buttonLabels[x]));
}
}

然後，我們使用javac編譯這個程序，然後編輯一個顯示這個Java Applet的HTML頁面。最後調用appletviewer來觀察這個頁面

我們主要是關心如何擺放各個部件，而不是如何構建一個程序。所以，正如本例中的按鈕一下，這一章中的所有部件都是一個樣子，沒有任何作用。這樣也使得程序盡可能地變短了，更易於大家閱讀和理解程序。
下面，我們就一起來看一下上面的這個程序。
1） String buttonLabels[]={"No.1","No.2","No.3","No.4","No.5",
"No.6","No.7","No.8","No.9"}
我想大家都能很輕松地讀懂這條語句，我們在此定義了一個字元串數組buttonLabels，它有9個字元串成員，也就是我們後面定義的9個按鈕的標簽文本。
值得注意的是，大家一定要知道，buttonLabels[1]表示哪個字元串！如果您的答案是「No.1」的話，就錯了！正確的答案是「No.2」，這是因為在數組中索引值是從0開始的，也就是說如果要使用「No.1」的話，應該使用buttonLabels[0]。這對更好地理解後面的程序十分重要，也是基本功之一。
2） JPanel panel1=(JPanel)getContentPane();
panel1.setLayout(new GridLayout(3,3));
在這兩行程序中，我們首先定義了一個容器部件panel1。然後調用setLayout方法設置布局管理器。這里我們使用了一個新的布局管理器：GridLayout，網格布局管理器。
我們注意到GridLayout的後面帶了兩個參數：3，3。這有什麼用呢？我們一起來看一下GridLayout方法的定義：
public GridLayout (int rows,int cols)
我們看一下這兩個參數，首先它們都是int型—整型的。那麼它們分別起到什麼作用呢？我們還是採用顧名思義法吧！row的中文意思是行，col的中文意思是列，後面加上一個s，是這兩個單詞的復數形式。
好，我們現在串起來想一下，我們定義了一個網格布局，然後定了它的行、列數！這不就畫出了這個網格了嗎？如果我們在語句是使用GridLayout(5,5)的話，就會把整個容器分成25個單元
而我們在程序中使用的是GridLayout(3,3)，所以它就將整個容器分成了

注意：
這種劃分是一種邏輯上的，暗藏式的劃分，而不會把格子給劃出來。另外，我們這里舉的兩個例子行、列都相等，其實完全可以不等。

3） for (int x=0; xpanel1.add(new JButton(buttonLabels[x]));
這是一個循環結構的程序。我們先看循環語句，循環的初值是「x=0」，繼續執行循環的條件語句是「xbuttonLabels.length就是用來請得字元串數組buttonLabels的長度！也就是這個字元串數組中有多少個字元串？我們知道，我們在該數組中定義了9個。
從程序中，我們可以獲知，當x=buttonLabels.length時，循環就將結束，應為它不滿足條件x別忘了，我們使用buttonLabels[0]表示第一個字元串，buttonLabels[1]表示第二個字元串……，那麼最後一個字元串就應該是buttonLabels[buttonLabels.length-1]嘛。
在循環中，我們使用容器提供的add方法，將新定義的按鈕部件添加進去。
有時，我們可能想獲得象下圖所示的布局效果！讓各個部件之間存在一些間隙。使用Java的網格布局可以實現嗎？

我很高興地回答你：「可以！」，我們可以使用GridLayout的另一種構造器方法（簽名不同）來實現：
public GridLayout (int rows,int cols,int hgap,int vgap)
在這個方法中，可以帶上四個整型參數，前兩個我們已經很熟悉了，行數與列數。後面則是兩個新的參數。
第一個是hgap，其中gap的意思是間隙、空隙的意思，而h則是horizontal（水平）的第一個字母。也就是說，我們可以通過hgap參數設置橫向的間隙。
第二個是vgap，v則是vertical（垂直）的第一個字母。也就是說，我們可以通過vgap參數設置縱向的間隙。

自測練習

1）_________________是網格布局管理器。
a.BorderLayout b.GridLayout c.ReseauLayout
d.FlowLayout
利用以下代碼回答問題2、3、4、5：
2）這個布局中有__________行？
a.7行 b.5行 c.6行 d.8行
3）這個布局中有__________列？
a.7行 b.5行 c.6行 d.8行
4）這個布局將容器分為_________個部分？
a.48個 b.35個 c.30個 d.40個
5）第5個部件位於__________位置。
a.左上角 b.左下角 c.右上角 d.右下角 e.中間
6）根據以下界面，編寫一個程序

圖10-12 練習題圖
____________________________________________________________________
____________________________________________________________________
____________________________________________________________________
____________________________________________________________________
____________________________________________________________________
7） 如果我們構建一個5＊5的網格布局，但只在該容器中加入17個按鈕，將會出現什麼情況？請編寫一個程序，來試一試效果。
____________________________________________________________________
____________________________________________________________________
____________________________________________________________________
____________________________________________________________________

練習答案

1）b 沒什麼好解釋的，請大家記住！
2）a 第一個參數是行數，因此是7行。
3）b 第二個參數是列數，因此為5列。
4）b 7行5列，其7*5，35個部分嘛。
5）c 第5個部件是第一行的最後一個，當然在右上角嘛。
6）下面是一個實現的程序實例：
源程序：lianxi10_2.java
import java.awt.*;
import javax.swing.*;
import java.applet.Applet;

public class lianxi10_2 extends JApplet
{
String buttonLabels[]={"1","2","3","4","5","6","7",
"8","9","*","0","#"};

public void init()
{
JPanel panel1=(JPanel)getContentPane();
panel1.setLayout(new GridLayout(4,3,10,10));

for (int x=0; xpanel1.add(new JButton(buttonLabels[x]));
}
}

7）下面是一個實現的程序實例：
源程序：lianxi10_3.java
import java.awt.*;
import javax.swing.*;
import java.applet.Applet;

public class lianxi10_3 extends JApplet
{

String buttonLabels[]={"No.1","No.2","No.3","No.4","No.5",
"No.6","No.7","No.8","No.9","No.10","No.11","No.12",
"No.13","No.14","No.15","No.16","No.17"};

public void init()
{
JPanel panel1=(JPanel)getContentPane();
panel1.setLayout(new GridLayout(5,5));

for (int x=0; xpanel1.add(new JButton(buttonLabels[x]));
}
}
這個程序使用javac編譯完後，編寫一個包含這個類的HTML頁面，再用appletviewer來觀察發現運行結果如下圖所示：

圖10-13 練習答案圖

這個輸出是不是令你感到十分意外，整個程序根本不按要求分成5列，所以我們從這里得到一個使用網格布局中要十二分注意的一點：「請別忘了將網格填滿」。否則程序的輸出將不可預料。

一些提示：
如果你真的沒有那麼多東西來「佔領」網格的話，我建議你使用一個空標簽來填補這個空白的網格，使得程序的輸出如你所願。使用空標簽的方法很容易：
panel1.add(new Label(「」));
從這里，我們也看出了，我們學習過的流布局管理器、邊框布局管理器，以及我們剛學習過的網格布局管理器都比較死板，不夠高級。

10.3 組合布局
傳授新知

正如我們在上一小節結束的時候說的一樣，各種布局管理器都有自己的缺點，沒有一種能夠真正地完全滿足我們編寫GUI程序時的要求。
而在Java語言中，允許在容器中加入其他容器，這樣每個容器可以根據自己的需要採用不同的布局管理器，組合成為一個我們所需要的GUI程序界面。這種方法，我們就稱之為組合布局。

注意：
與流布局、邊框布局、網格布局不同，組合布局並不是一個新的布局管理器，它是通過結合各種布局管理器的優點，將它們組合地應用在GUI程序界面的開發中。這是一種布局管理的方法。也可以說是一種GUI程序界面的開發技巧。
當我們設計GUI程序界面時，最好先在紙上把它畫出來，然後「分塊解決」。也就是將能夠組合在一起的部件找出來，將它們放在一個容器里，並為它們選擇合適的布局管理器。然後把這些容器擺放在一起，就解決了。
設計時還要考慮到窗體大小發生改變的時候，引起的部件形體變化。這方面，請你熟記幾個設計技巧：
1） 對於那些要求扁平狀的部件，我們應該將它放置在邊框布局中的南面或北面；
2） 對於那些要求細高狀的部件，我們應該將它放置在邊框布局中的東面或西面；
3） 對於那些可以隨著窗體改變大小部分，我們可以將它放置在邊框布局的中間；
4） 如果我們要求部件保持大小相同，那麼，我們就應該採用網格布局。
下面，我們就通過幾個實際的例子，來讓大家領會和掌握這種設計的思路與方法。

實例說明
我們首先創建一個testCombination.java文件，然後輸入以下源程序：
源程序：testCombination.java
import java.awt.*;
import javax.swing.*;
import java.applet.Applet;

public class testCombination1 extends JApplet
{

public void init()
{
Frame frame1=new Frame("testCombination1");
frame1.setLayout(new BorderLayout());
TextArea text1=new TextArea();
frame1.add(text1,BorderLayout.CENTER);

JPanel panel1=(JPanel)getContentPane();
panel1.setLayout(new GridLayout(1,3,10,5));
panel1.add(new JButton("A"));
panel1.add(new JButton("B"));
panel1.add(new JButton("C"));
frame1.add(panel1,BorderLayout.SOUTH);

frame1.pack();
frame1.show();
}
}

然後，我們使用javac編譯這個程序，然後編輯一個顯示這個Java Applet的HTML頁面。最後調用appletviewer來觀察這個頁面，如下圖所示：

圖10-14 程序testCombination.java的輸出

正如上圖所示，程序的輸出與以前不同，各個部件不是顯示在Appletviewer程序框中，而是顯示在另一個窗口中。
這是怎麼回事呢？下面我們就一起來看一下這個程序！

傳授新知

在以前的程序中，我們一直都是使用容器JPanel，面板。而我們在這個程序中引進了一個新的容器Frame。使用了這個容器後，就會新創建一個窗口。這也就是為什麼程序的輸出有這么大的變化的原因。
1）Frame frame1=new Frame("testCombination");
這條語句，定義了一個Frame容器frame1，然後使用new操作符調用構造器方法，後面帶的參數「testCombination」則是這個Frame的標題。

一些提示：
其實大家能Frame所體現出來的效果是很熟悉的，它等價於Windows中的窗體。而Frame的標題就是窗體的標題。

2） frame1.setLayout(new BorderLayout());
與JPanel容器一樣，我們可以調用setLayout方法來設置Frame的布局管理器。在這里，我們將Frame容器frame1的布局管理器設置成為邊框布局管理器（也就是我們在10.1小節中學習過的布局管理器）。
3） frame1.add(text1,BorderLayout.CENTER);
緊接著，我們調用frame1的add方法，將文本區部件text1添加到frame1容器中來。注意我們設置了它的位置：BorderLayout.CENTER。
這是因為，我們希望這個文本區能夠隨著窗體的大小變化而變化。所以適合將其放在在中間位置。
4） panel1.setLayout(new GridLayout(1,3,10,5));
我們又定義了一個JPanel容器panel1，並將其的布局管理器設置為網格布局管理器。並通過指定參數，使得整個panel1被分成1行3列，水平空隙為10的網格。
5） frame1.add(panel1,BorderLayout.SOUTH);
這是組合布局方法最重要的一步，我們將panel1這個容器，加入到了frame1這個容器中去了。並且指定了panel1這個容器在整個frame1中所佔的位置：BorderLayout.SOUTH，也就是下邊。這樣，panel1中包含的三個按鈕就會永遠（不管窗體大小如何改變）呆在文本區的下邊，而且三個按鈕的大小會根據窗體大小的改變而改變。

一些提示：
這是因為，panel1中的按鈕是用網格布局的。
6） frame1.pack();
frame1.show();
與JPanel不一樣，使用Frame容器，不能夠直接顯示了出來。我們必須調用Frame容器的show方法才能使得Frame顯示出來。
而在使用show方法之前，我們還需要使用pack方法將Frame中的內容做一個整合。請記住這里的使用方法。
4 GridBag布局
實例說明

到現在為止，我們已經學習了邊框布局、網格布局以及組合布局，現在大家試一試編寫一個程序，
怎麼樣，挺有難度的吧！完成這個GUI得花很多心思去設計組合，十分討厭，下面我們就使用一個新的布局管理器GridBagLayout來解決這種難題。
首先，輸入以下源程序：
源程序：testGridBag.java
import java.awt.*;
import javax.swing.*;
import java.applet.Applet;

public class testGridBag extends JApplet
{

public void init()
{
JPanel panel1=(JPanel)getContentPane();
panel1.setLayout(new GridBagLayout());
GridBagConstraints gbdc=new GridBagConstraints();
gbdc.fill=GridBagConstraints.BOTH;

gbdc.weightx=1;
gbdc.weighty=1;
panel1.add(new JButton("No.1"),gbdc);
panel1.add(new JButton("No.2"),gbdc);
panel1.add(new JButton("No.3"),gbdc);
gbdc.gridwidth=2;
gbdc.gridx=0;
panel1.add(new JButton("No.4"),gbdc);
gbdc.gridx=2;
gbdc.gridwidth=1;
gbdc.gridheight=2;
panel1.add(new JButton("No.5"),gbdc);

gbdc.gridx=0;
gbdc.gridheight=1;
panel1.add(new JButton("No.6"),gbdc);
gbdc.gridx=1;
panel1.add(new JButton("No.7"),gbdc);

gbdc.gridx=0;
gbdc.gridwidth=2;
panel1.add(new JButton("No.8"),gbdc);
gbdc.gridx=2;
gbdc.gridwidth=1;
panel1.add(new JButton("No.9"),gbdc);
}
}

在這個程序中，我們使用了GridBagLayout輕松地完成了這個界面的設計，允分凸現出它的強大。可以這么說，GridBagLayout是Java語言中最強大的布局管理器。
GridBagLayout，從名字上看，就知道它與GridLayout有一定的淵源，是的，GridBagLayout的確與其十分類似，也是使用網格來進行布局管理的。但與GridLayout（網格布局）不同的是，GridBagLayout不像網格布局一相，需要所有的部件的大小、形狀相同。而且還可以將某一個部件放在一個固定的位置上。
下面，我們一起來分析一下testGridBag.java程序。
1） panel1.setLayout(new GridBagLayout());
在調用setLayout方法時，指定為GridBagLaoyout，使panel1使用GridBag布局管理。
2） GridBagConstraints gbdc=new GridBagConstraints();
GridBagLayout布局管理器是通過一個GridBagConstraints類來實現神奇的效果的。所以，我們要在使用時先定義一個GridBagConstraints類的對象。在這個程序中，我們定義了一個GridBagConstraints類的對象gbdc。
3） gbdc.fill=GridBagConstraints.BOTH;
由於網格單元可能比該單元中的部件大，如果是這樣，部件放置在單元格內會有一些多餘空間。在默認情況下，部件不會擴張，也就是不會填充這個多餘空間。
GridBagConstraints提供了一個fill屬性，我們可以通過設置它的值來起到不同的效果。
¨ GridBagConstraints.NONE：不擴張，是默認值；
¨ GridBagConstraints.HORIZONTAL：部件水平擴張，將水平方向的多餘空間填滿；
¨ GridBagConstraints.VERTICAL：部件垂直擴張，將垂直方向的多餘空間填滿；
¨ GridBagConstraints.BOTH：部件同時向兩個方向擴張，將單元格填滿。
4） gbdc.weightx=1;
gbdc.weighty=1;
weightx和weighty是GridBagConstraints提供的另一對屬性。它的取值是整型數，默認值為0。用來設置行（weightx）、列（weighty）的「重量」，如果值為0的話，所有的部件都會緊收在一起，聚集在中央，如圖10-17所示。
而如果取值為其它數字，則會根據值來分配空間。
5） panel1.add(new JButton("No.1"),gbdc);
panel1.add(new JButton("No.2"),gbdc);
panel1.add(new JButton("No.3"),gbdc);
在沒有任何約束的時候，向gbdc中添加按鈕，這時效果與採用網格布局的效果完全一樣。一個接著一個地「佔領」單元格。

6） gbdc.gridwidth=2;
gbdc.gridx=0;
panel1.add(new JButton("No.4"),gbdc);

由於第四個按鈕（No.4）是寬度是2，在GridBagLayout中，是由gridwidth屬性來控制添加進入的部件的寬度的。
我們通過gbdc.gridwidth=2將其設置為2，這樣，再添加進入的部件就會變成為2個單元格的寬度。
另外，我們再使用gbdc.gridx=0讓其另起一行，從最左邊的單元格開始填充。
因此，我們發現第四個按鈕被加在了第二行，寬度為2個單元格。

7） gbdc.gridx=2;
gbdc.gridwidth=1;
gbdc.gridheight=2;
panel1.add(new JButton("No.5"),gbdc);
接下來，我們要擺放第五個按鈕，這個按鈕將從第3個單元開始填充，其寬度為一個單元格，而高度則為兩個單元格。
因此，我們首先使用用gbdc.gridx=2，使得下一個添加的部件（第五個按鈕）放入第3個單元格（0代表第1個單元格，因此第3個單元格應該是2）。
由於，前面我們已經將gridwidth設置為2了，因此，我們需要使用gbdc.gridwidth=1，將其值設置回1。
最後使用gdbc.gridheight=2，使得添入的部件的單元格縱向跨越兩個單元格。

8） gbdc.gridx=0;
gbdc.gridheight=1;
panel1.add(new JButton("No.6"),gbdc);
我想這一段程序，大家應該都不會再有什麼理解上的問題了吧！主要提醒大家注意的是，我們使用gbdc.gridheight=1將單元格縱向跨度改成了默認值1。這是因為我們在前面需要時將其改成了2，所以在此需要將其改回來。

實例說明
為了更好地理解這個強大的GridBagLayout布局管理器，我們再來做一個有趣的實驗。首先，我們創建一個testGridBag2.java
源程序：testGridBag2.java
import java.awt.*;
import javax.swing.*;
import java.applet.Applet;

public class testGridBag2 extends JApplet
{

public void init()
{
JPanel panel1=(JPanel)getContentPane();
panel1.setLayout(new GridBagLayout());
GridBagConstraints gbdc=new GridBagConstraints();

panel1.add(new JButton("No.1"),gbdc);
panel1.add(new JButton("No.2"),gbdc);
setSize(300,200);
}
}

然後我們使用滑鼠改變一下窗口的大小，看一下，這兩個按鈕有什麼變化？你會驚奇地發現，窗口改變了大小，兩個按鈕的大小卻沒有變，而且一直呆在正中央的位置。

一些說明：
在這個程序中，我們使用了一個以前沒有用過的語句：setsize(300.200)，它的功能是在程序中設置窗口的大小。

現在我們對這個程序做一些修改！將添加兩個按鈕的兩條語句：
panel1.add(new JButton("No.1"),gbdc);
panel1.add(new JButton("No.2"),gbdc);
將它們擴展為：
gbdc.weightx=1;
panel1.add(new JButton("No.1"),gbdc);
gbdc.weightx=3;
panel1.add(new JButton("No.2"),gbdc);

為什麼會得到這個效果呢？我們在程序中添加按鈕的程序段前加入一句：
gbdc.fill=GridBagConstraints.HORIZONTAL;
再重新編譯一下程序，再看看程序的輸出有什麼變化！
在得到結果之前，自己可以想像一下結果，然後看一下程序的實際輸出與你的想法是否相吻合。
我們驚奇地發現，第二個按鈕，突然變得十分寬起來（如圖10-20所示）。這是因為放置第二個按鈕的單元格的寬度是3，而第一個按鈕的寬度是1。而且，我們又讓第二個按鈕橫向擴展，因此得到了這樣的輸出結果。

相信實驗做到這里，不須我說，大家也會有一些心得體會了。但是GridBagLayout遠不止這一點，大家應該多做試驗，才能夠在真實的使用環境中有效地掌握GridBagLayout。

『叄』 界面設計的簡介

UI即 User Interface(用戶界面)的簡稱。UI設計則是指對軟體的人機交互、操作邏輯、界面美觀的整體設計。好的UI設計不僅是讓軟體變得有個性有品味，還要讓軟體的操作變得舒適、簡單、自由,充分體現軟體的定位和特點。
通過對界面設計不同需求進行的分類以及界面設計元素對用戶行為的影響，來研究用戶在界面設計中所體現的重要性。交互性已經成為網路界面設計中設計追求的目標。為了使設計滿足可用性要求，全面的了解用戶特徵及多元化要求是十分必要的。這就需要找到正確的方法來記錄和實現多元化的用戶要求。
界面是人與物體互動的媒介，換句話說，界面就是設計師賦予物體的新面孔。 1.簡易性 界面的簡潔是要讓用戶便於使用、便於了解、並能減少用戶發生錯誤選擇的可能性。 2.用戶語言 界面中要使用能反應用戶本身的語言，而不是游戲設計者的語言。 3.記憶負擔最小化 人腦不是電腦，在設計界面時必須要考慮人類大腦處理信息的限度。人類的短期記憶極不穩定、有限，24小時內存在25%的遺忘率。所以對用戶來說，瀏覽信息要比記憶更容易。 4.一致性 是每一個優秀界面都具備的特點。界面的結構必須清晰且一致，風格必須與游戲內容相一致。 5.清楚 在視覺效果上便於理解和使用。 6.用戶的熟悉程度 用戶可通過已掌握的知識來使用界面，但不應超出一般常識。 7.從用戶的觀點考慮 想用戶所想，做用戶所做。用戶總是按照他們自己的方法理解和使用。
通過比較兩個不同世界(真實與虛擬)的事物，完成更好的設計。如：書籍對比竹簡。 8.排列 一個有序的界面能讓用戶輕松的使用。 9.安全性 用戶能自由的作出選擇，且所有選擇都是可逆的。在用戶作出危險的選擇時有信息介入系統的提示。 10.靈活性 簡單來說就是要讓用戶方便的使用，但不同於上述。即互動多重性，不局限於單一的工具(包括滑鼠、鍵盤或手柄)。 11.人性化 高效率和用戶滿意度是人性化的體現。應具備專家級和初級玩家系統，即用戶可依據自己的習慣定製界面，並
能保存設置。
設計軟體：
軟體用戶界面（Software User Interface）是指軟體用於和用戶交流的外觀、部件和程序等等。如果你經常上網的話，會看到很多軟體設計很樸素，看起來給人一種很舒服的感覺；有點軟體很有創意，能給人帶來意外的驚喜和視覺的沖擊；而相當多的軟體頁面上充斥著怪異的字體，花哨的色彩和圖片，給人網頁製作粗劣的感覺。軟體界面的設計，既要從外觀上進行創意以到達吸引眼球的目的，還要結合圖形和版面設計的相關原理，從而使得軟體設計變成了一門獨特的藝術。通常的講，企業軟體用戶界面的設計應遵循以下幾個基本原則：
1．用戶導向原則
設計網頁首先要明確到底誰是使用者，要站在用戶的觀點和立場上來考慮設計軟體。要作到這一點，必須要和用戶來溝通，了解他們的需求、目標、期望和偏好等。網頁的設計者要清楚，用戶之間差別很大，他們的能力各有不同。比如有的用戶可能會在視覺方面有欠缺（如色盲），對很多的顏色分辨不清；有的用戶的聽覺也會有障礙，對於軟體的語音提示反映遲鈍；而且相當一部分用戶的計算機使用經驗很初級，對於復雜一點的操作會感覺到很費力。另外，用戶使用的計算機機器配置也是千差萬別，包括顯卡、音效卡、內存、網速、操作系統以及瀏覽器等都會有不同。設計者如果忽視了這些差別，設計出的網頁在不同的機器上顯示就會造成混亂。
2．KISS原則
KISS原則就是Keep It Simple And Stupid的縮寫，簡潔和易於操作是網頁設計的最重要的原則。畢竟，軟體建設出來是用於普通網民來查閱信息和使用網路服務。沒有必要在網頁上設置過多的操作，堆集上很多復雜和花哨的圖片。該原則一般的要求，網頁的下載不要超過10秒鍾（普通的撥號用戶56 Kbps網速）；盡量使用文本鏈接，而減少大幅圖片和動畫的使用；操作設計盡量簡單，並且有明確的操作提示；軟體所有的內容和服務都在顯眼處向用戶予以說明等。
3．布局控制
關於網頁排版布局方面，很多網頁設計者重視不夠，網頁排版設計的過於死板，甚至照抄他人。如果網頁的布局凌亂，僅僅把大量的信息堆集在頁面上，會干擾瀏覽者的閱讀。一般在網頁設計上所要遵循的原理有：
（1）Miller公式。根據心理學家George A.Miller的研究表明，人一次性接受的信息量在7個比特左右為宜。總結一個公式為：一個人一次所接受的信息量為 7±2 比特。這一原理被廣泛應用於軟體建設中，一般網頁上面的欄目選擇最佳在5～9個之間，如果軟體所提供給瀏覽者選擇的內容鏈接超過這個區間，人在心理上就會煩躁，壓抑，會讓人感覺到信息太密集，看不過來，很累。例如Aol點com的欄目設置：Main、MyAol、Mail、People、Search、Shop、Channels和Devices共八個分類。Msn點com的欄目設置：MSN Home、My MSN、Hotmail、Search、Shopping、Money和People & Chat共七項。然而很多國內的軟體在欄目的設置遠遠超出這個區間。
（2）分組處理。上面提到，對於信息的分類，不能超過9個欄目。但如果你的內容實在是多，超出了9個，需要進行分組處理。如果，你的網頁上提供幾十篇文章的鏈接，需要每隔7篇加一個空行或平行線做以分組。如果你的軟體內容欄目超出9個，如微軟公司的軟體，共有11個欄目，超過了9個。
4．視覺平衡
網頁設計時，也要各種元素（如圖形、文字、空白）都會有視覺作用。根據視覺原理，圖形與一塊文字相比較，圖形的視覺作用要大一些。所以，為了達到視覺平衡，在設計網頁時需要以更多的文字來平衡一幅圖片。另外，按照中國人的閱讀習慣是從左到右，從上到下，因此視覺平衡也要遵循這個這個道理。例如，你的很多的文字是採用左對齊〈Align=left〉，需要在網頁的右面加一些圖片或一些較明亮、較醒目的顏色。一般情況下，每張網頁都會設置一個頁眉部分和一個頁腳部分，頁眉部分常放置一些Banner廣告或導航條，而頁腳部分通常放置聯系方式和版權信息等，頁眉和頁腳在設計上也要注重視覺平衡。同時，也決不能低估空白的價值。如果你的網頁上所顯示的信息非常密集，這樣不但不利於讀者閱讀，甚至會引起讀者反感，破壞該軟體的形象。在網頁設計上，適當增加一些空白，精煉你的網頁，使得頁面變的簡潔。
5．色彩搭配顏
色是影響網頁的重要因素，不同的顏色對人的感覺有不同的影響，例如：紅色和橙色使人興奮並使得心跳加速；黃色使人聯想到陽光，是一種快活的顏色；黑顏色顯得比較莊重，考慮到你希望對瀏覽者產生什麼影響，為網頁設計選擇合適的顏色（包括背景色、元素顏色、文字顏色、鏈節顏色等）。
為方便閱讀軟體上的信息，可以參考報紙的編排方式將網頁的內容分欄設計，甚至兩欄也要比一滿頁的視覺效果要好。另一種能夠提高文字可讀性的因素是所選擇的字體，通用的字體（Arial，Courier New，Garamond，Times New Roman，中文宋體）最易閱讀，特殊字體用於標題效果較好，但是不適合正文。如果在整個頁面使用一些特殊字體（如Cloister，Gothic，Script，Westminster，華文彩雲，華文行楷），這樣讀者閱讀起來感覺一定很糟糕。該類特殊字體如果在頁面上大量使用，會使得閱讀頗為費力，瀏覽者的眼睛很快就會疲勞，不得不轉移到其他頁面。
6．和諧性
通過對軟體的各種元素（顏色、字體、圖形、空白等）使用一定的規格，使得設計良好的網頁看起來應該是和諧的。或者說，軟體的眾多單獨網頁應該看起來像一個整體。軟體設計上要保持一致性，這又是很重要的一點。一致的結構設計，可以讓瀏覽者對軟體的形象有深刻的記憶；一致的導航設計，可以讓瀏覽者迅速而又有效的進入在軟體中自己所需要的部分；一致的操作設計，可以讓瀏覽者快速學會在整個軟體的各種功能操作。破壞這一原則，會誤導瀏覽者，並且讓整個軟體顯的雜亂無章，給人留下不良的印象。當然，軟體設計的一致性並不意味著刻板和一成不變，有的軟體在不同欄目使用不同的風格，或者隨著時間的推移不斷的改版軟體，會給瀏覽者帶來新鮮的感覺。
7．個性化
（1）符合網路文化
企業軟體不同於傳統的企業商務活動，要符合Internet網路文化的要求。首先，網路最早是非正式性、非商業化的，只是科研人員用來交流信息。其次，網路信息是只在計算機屏幕上顯示而沒有列印出來閱讀，網路上的交流具有隱蔽性，誰也不知道對方的真實身份。另外，許多人在上網的時候是在家中或網吧等一些比較休閑，比較隨意的環境下。此時網路用戶的使用環境所蘊涵的思維模式與坐在辦公室里西裝革履的時候大相徑庭。因此，整個互聯網的文化是一種休閑的、非正式性的、輕松活潑的文化。在軟體上使用幽默的網路語言，創造一種休閑的、輕松愉快、非正式的氛圍會使軟體的訪問量大增。
（2）塑造軟體個性
另外，軟體的整體風格和整體氣氛表達要同企業形象相符合並應該很好的體現企業CI。在這方面比較經典的案例有：可口可樂個性鮮明的前衛軟體Life Tastes Good；工整、全面、細致的通用電氣公司軟體We bring good things to life（GE帶來美好的生活）；崇尚科技創新文化的3M公司軟體Creating solutions for business、instry and home；刻意扮演一個數字電子娛樂之集大成者的角色，要成為新時代夢想實現者的索尼軟體；平易近人、親情濃郁的通用汽車公司軟體體現了以人為本的企業定位和營銷策略；服務全面、細致、方便，處處體現賓至如歸服務理念的希爾頓大酒店軟體。
網頁界面設計不同於一般的平面設計,擁有自身的設計特徵。網頁界面設計應時刻圍繞「信息傳達」這一主題來進行。目前網頁界面傳達的信息主要是視覺信息。因此從設計類型上來看,網頁界面設計屬於視覺傳達的領域,故而網頁界面設計的主要視覺元素和設計指導原則都要遵循視覺傳達的一般規律。網頁界面設計師在視覺傳達的工作,就是通過有效吸引視線的藝術形式使信息得以清晰、准確、有力地傳達。
任何一個成功的產品都是建立在對需求的准確把握之上的。需求分析對於新產品的開發或者已有產品的改進升級是不可缺少的早期環節之一。許多設計項目在還沒有很好地理解用戶需求甚至幾乎對用戶需求完全不清。 體現以用戶為中心的設計。首先從對用戶的調研開始、然後對用戶建模、信息概念設計、網站原型設計到用戶測試及方案實現，整個設計過程都始終圍繞著用戶進行，真正做到以用戶為中心。保證用戶界面運作的一致性是網頁界面設計的重點之一。在主頁列表框的設計中，如果雙擊其中的一項，使得某些任務完成。由此雙擊列表框中的其中的任何一個項，都應該有同樣的任務完成。也就是所有窗口按鈕的位置設計要達到一致性，提供的標簽設計和信息要一致，顏色要一致。用戶界面設計的一致性會使得用戶對網路界面運作建立起精確的心理模型，以此降低用戶培訓和支持成本。在頁面視覺傳達上，從網站的主題內容和定位來決定需要與之前運用的元素保持一致。 減少用戶思考的設計。一般的短時記憶只能保持二十秒左右，最長不超過一分鍾。在如此短的時間內我們能儲存多少信息呢？答案是7士2即5～9個項目，平均為7個項目。可見，人在短時間內注意力是集中和少量的，基於識別的用戶界面在很大程度依賴於用戶所關心對象的可見性，顯示太多的對象和屬性會讓用戶很難找到感興趣的對象。同時，用戶不棄歡經常重復性輸入一些信息，如個人賬號，安全信息，操作習慣，下次操作行為等，這些佔用了用戶完成其他重要任務的時間。 明確體現網站的特色服務。用戶界面要非常明確地體現網站的特色服務，安排最大的空間並且在最顯眼的位置來擺放網站的最大賣點和用戶最關心最常用培訓系統，而其他用戶也會感興趣的渠道信息、最新共享信息版塊和論壇板塊等放在界面較顯眼的位置。這些都是基本滿足用戶需求，以用戶為中心的界面計。 迎合用戶的習慣。迎合用戶的習慣，主要為了讓用戶在操作中簡單到極致。作為1個Ul設計人員，我們應當多的去了解用戶習慣在什麼地方尋找導航欄、習慣把哪部分作為網站的重點，習慣在什麼地方點擊注冊、習慣在什麼地方找搜素框、習慣點擊什麼樣的按鈕[8]、什麼顏色會加速用戶的心跳、增強消費的沖動。由此，根據用戶的行為習慣，對網站的整體布局進行重新策劃，使得簡單、簡單、再簡單、簡單到極致，通過清晰的流程和界面，讓用戶減少對網站的思考以及尋找的時間；讓准確的色彩和表述減少用戶心理斗爭的時間。通過不斷地調研，用各種可用性實驗來計算用戶在每一個界面下所需思考的時間，然後，最好的頁面設計的評判標准就是用戶耗費時間最少的那個頁面 常見問題：
1、字間距太擠或太寬
2、行距太小或太大
3、段距太少或太多
4、每行字數太多或太少