Forms窗口是開展大部分設計的工作區域。首次啟動Delphi 2.0時顯示的是窗體Form1。可以把部件放在窗體中,通過移動位置、改變尺寸等操作隨心所欲地安排它們,以此來開發應用程序的用戶界面。您可以把窗體想象成一個可以放置其它部件的容器。窗體上有柵格(Grids),供放置部件時對齊位置用,在程序運行時Grids是不可見的。
一個真正的應用程序可能有不止一個窗口,您可以選用不同的窗體進行設計。其它窗體可以是對話框(Dialog Box)、數據錄入框等。
1.2.2.4 代碼窗口
代碼窗口一開始處於窗體窗口之下。因為在Delphi中,設計用戶界面直接在窗體中進行,運行結果和設計樣板完全一致。當部件被放到窗體上時,Delphi會自動生成大部分的用戶界面代碼。您所應做的只是在它為您生成的框架中加入完成所需功能的程序段而已。點動Form1的狀態行使代碼窗口可見。圖1.3顯示了空窗體Form1的代碼窗口。
圖1.3 Delphi開發環境的代碼編輯器
這個窗口中是代碼編輯器。可以在其中書寫Delphi應用程序的源代碼。當程序中含有不止一個窗口時,會有幾個庫單元的源程序出現在代碼編輯器中。代碼編輯器的標題條中顯示了當前正在編輯的庫單元文件名。要查看某一特定程序的源代碼,只需用鼠標點動寫有該庫單元文件名的頁標簽,就可以對該庫單元進行編輯了。
1.2.3 設計簡單的用戶界面
首先從空白窗體開始工作。我們將設計一個簡單的程序:在屏幕上開一個窗口,窗口中有一個圖框,用三個按鈕來改變圖框的形狀;再用一個圖標按鈕來進行圖框的顏色設置,通過顏色編輯對話框來選擇變成哪一種顏色。
在菜單上選用File|New Application菜單項來生成新的工程文件。這時,屏幕上出現圖1.2所示的窗體。
1.2.3.1 選取部件加入到窗體中
部件(Component)是建立Delphi應用程序的要素。Delphi為用戶提供了豐富的部件庫,既有可視的部件(如編輯框、按鈕)等,也有不可視的部件(如系統定時器、數據表等)。它們按照功能分別排列在Component Panel的各頁上。
移動鼠標到Component Panel上,在部件按鈕上“猶豫”一、兩秒鐘,一個黃色小提示框就會彈出,寫有該部件的名稱,我們稱之為提示(Hint)。在要選擇的部件上單擊左鍵,則該部件按鈕被按下,表示部件已被當前選擇。然後,將鼠標移動到窗體上,按下左鍵,該部件被放到窗體中。部件的輪廓線上會顯現八個被稱為尺寸調整器(Sizing Handles)的黑色小方塊。它除了供用戶調整尺寸使用之外,還可以表示該對象處於當前編輯狀態。此時,按“Delete”鍵可以將該部件刪除。
在Component Panel上,點動寫有“Additional”的頁標簽,切換到Additional頁,再移動鼠標,逐個用觀看Hint的辦法查看部件的名稱,找到“Shape”部件(其圖標為圓、方形、三角形三個幾何體),將其放到窗體的左方。
再按動“Standard”頁標簽,找到“Button”部件(圖標上畫有OK按鈕)。Delphi允許在添加多個同類型的部件時,不必每次到部件選項板上選取。按住“Shift”鍵,同時在“Button”部件上單擊鼠標左鍵,這時“Button”部件處於按下狀態,並有藍色邊框,表示已經被選擇固定。依次在窗體右方的三個位置單擊左鍵,則會放置三個相同的Button部件。把鼠標光標移到部件選項板左側的箭頭圖標處,這是“取消選擇”按鈕,它沒有提示。按動它,會發現“Button”部件按鈕恢復彈起狀態。否則,每次“Form1”上的鼠標單擊左鍵動作,都會導致增加一個按鈕部件。
再次進入“Additional”部件頁,選擇一個“BitBtn”按鈕(圖標是有綠色對號的OK按鈕),把它放到其它三個按鈕部件的下面。
點動“Dialog”頁標簽,選擇以16色網格做圖標的ColorDialog部件並把它放到窗體的任意位置。因為這一部件是不可視部件,所以它的位置並不影響大局。
1.2.3.2 部件的調整與對齊
一般來講,此時放置到窗體的部件是分散排列的,而且其大小不是真正需要的尺寸。除了不可視的ColorDialog部件外,其它的部件都需要進行位置、大小和顯示字樣的調整。Delphi提供的對齊工具和窗口柵格為這些調整提供了方便。
1、移動部件
只需把鼠標落到想移動的部件上,按住左鍵並移動光標,到合適的位置再釋放左鍵,整個部件即被移到新位置。
2、調整尺寸
先把鼠標光標移動到要改變尺寸的部件上,單擊左鍵,選中該部件,尺寸調整器會出現,把鼠標移動到其中的一個小黑色方塊上,當鼠標變成拖動方向指示時,按下並拖動鼠標左鍵,可以放大或縮小部件。上下左右的小方塊用來移動對應的各邊,四個角的方塊可以移動相連的兩條邊。如果要精確地表述部件的尺寸,可以在Object Inspector上,改變Left(表示部件左邊緣到窗體左邊框的象素點數)、Top(表示窗體上邊框到部件上邊緣的象素點數)、 Width(部件本身的寬度)、Height(部件本身的高度)等屬性。關於改變部件的屬性,下文還將仔細講解。
3、使得一組部件對齊
用調整位置的方法可以對齊部件,但操作步驟復雜。Delphi提供的對齊工具可以使多個部件的對齊極為迅速方便。下面我們來使四個按鈕對齊。先將四個按鈕選為一組:按住並向右下方拖動鼠標左鍵,在窗體上畫出圍繞四個按鈕的矩形,釋放左鍵後,被選中的按鈕周邊會出現暗灰色的邊框。選用Edit|Align命令,或使用彈出式菜單(在被固定的部件上單擊鼠標右鍵激活),可以顯示圖1.4所示的對話框。
要使按鈕沿左邊對齊並使它們在垂直方向上均勻分布,先在Alignment對話框的Horizontal欄內選擇“Left sides”,在“Vertical”欄內選擇“Space equally”,按動OK按鈕,Delphi就會自動將它們對齊。然後,您可以將它們四個作為一組來移動。在四個按鈕以外的窗體上按動鼠標左鍵,就釋放了組中的部件,使它們成為分立的部件。
利用對齊模板來對齊部件也是很方便的。首先要將要對齊的部件選成一組,選擇VIEw|Alignment Palette顯示對齊模板,如圖1.5所示。按照所示的方式選擇即可達到對齊的目的。
圖1.4 部件對齊對話框
圖1.5 Delphi的部件對齊模板
4、鎖定部件
如果部件已經對齊,為防止不小心移動部件,可以將部件位置鎖定。選擇主菜單上的Edit|Lock Controls選項,使得部件不能進行移動操作。解鎖只需再次選擇此項即可。
調整“Shape”部件的大小,使之與右邊的按鈕組相匹配。再改變窗體的大小,按住並拖動窗體右下方使之剛好包容窗體上的全部部件。這樣,您的用戶界面就會比較美觀。
1.2.3.3 保存所做的工作
及時地保存所做的工作至關重要。對設計者來講,有兩個文件需要保存:庫單元文件(以.PAS為後綴)和工程文件(以.DPR為後綴)。
從主菜單上選擇File|Save Project As...項,Delphi會顯示標題為“Save Unit1 As”的文件保存對話框,Delphi 2.0 允許用戶更改存儲路徑,您可以在下拉式列表框中選擇。最好將您的文件保存在自己的目錄中。在編輯框中鍵入demoform.pas以保存庫單元文件;然後顯示標題為“Save Project As”的另一個文件保存對話框,鍵入sample.dpr。Delphi保存這兩個文件並返回窗體窗口。不要把庫單元和工程存成一樣的文件名,Delphi要求兩者不同。
第一次保存後,以後可以隨時通過Speed Bar中的“Save All”和“Save file”來保存工程文件和庫單元文件。一般來講,當確認文件的改變後,要同時存儲這兩個文件。
1.2.3.4 運行工程
以上的操作使您有了一個自己的應用程序界面。在速度條中按動“Run”按鈕(繪有綠色三角圖標),您可以看到,所生成的界面與您設計的界面是完全一致的。
1.2.4 改變對象的屬性
上述的工程雖能夠運行,但它對您的按動按鈕操作是沒有什麼反應的,而且,所有部件上還寫著我們不需要的字樣。雙擊窗口的關閉按鈕結束運行,回到設計界面。下面,我們將仔細講述如何在Object Inspector中改變部件的各種屬性。
1.2.4.1 用PropertIEs頁改變部件的屬性值
首先要改變各種部件的標題。先給窗口命名為“Demo”。按動Object Inspector上端的Object Selector的題條或者其右端的下拉標志,找到Form1項,並點動左鍵,窗體被選中。在Object Inspector的PropertIEs頁中,找到Caption屬性並用左鍵選中,將其右端的Form1改為Demo,同時,您會發現窗體的標題已經相應地做了改變。
用鼠標點中窗體中的Shape部件,Object Inspector列出了它的屬性。選中Shape屬性,您會發現右端出現了下拉標志。點動這一標志,可以查看對象的Shape屬性可選值。它的形狀可以是矩形、圓形、圓角矩形、方形等幾種。這是我們設計後續功能的基礎。
選中Button1按鈕,此時Object Inspector已經顯示出此按鈕的一應屬性。將它的Caption屬性改為“&Rectangle”,“&”號使得Delphi特殊處理它後面的字符,在這裡,按鈕中的R字母被做了下劃線處理,運行時,可以用“Alt-R”熱鍵來按動這一按鈕。同樣,您可以將其它的兩個按鈕Button2和Button3的Caption屬性改成需要的形狀指示,譬如“&RoundRec”、“&Ellipse”。