第五章 C++ Builder 顯示與輸入介面

Presentation on theme: "第五章 C++ Builder 顯示與輸入介面"— Presentation transcript:

1 第五章 C++ Builder 顯示與輸入介面
視窗程式中，佔最大部分的大概就是按鈕跟一些輸入框了。在這一章裡面，我們詳細的介紹各種標籤、按鈕以及輸入的VCL元件，進而介紹一些按鈕軸的使用方法，以及類似筆記本的多行輸入窗。

2 大綱 5-1. 標籤的使用（Label） 5-2. 使用編輯框（Edit） 5-3. 遮罩編輯框（MaskEdit）
5-4. 標籤編輯框（LabeledEdit） 5-5. StringGrid 5-6. ValueListEdit 5-7. RichEdit元件的使用 5-8. RichEdit元件的使用 本章習題

3 5-1. 標籤的使用（Label） 標籤，簡單來說就是視窗程式上的文字方塊。標籤的使用相當容易，也很直觀，在之前的程式我們也已經用過Label了！我們將利用範例5-1來說明Label的詳細用法。 Label這個VCL元件放在Standard Page上，選取後也是一樣將游標移到Form上，並且在要放上Label的地方按一下滑鼠左鍵就可以了，其實任何VCL元件都是這樣子使用。

4 5-2. 使用編輯框（Edit） Edit也是視窗程式中很重要的一個元件，最常見的是將Label和Edit一起使用，因為這樣可以讓使用者很清楚的知道，這個編輯框要輸入的東西是什麼。 Edit這個元件也被放在Standard這一個頁次中，我們將利用範例5-2和5-3把編輯框跟標籤緊緊的結合起來，再配合上按鈕，來完成我們的範例。

5 5-2. 使用編輯框（Edit） 利用編輯框實作密碼輸入
在很多場合我們需要輸入密碼之類的機密資料，我們通常不會直接讓輸入的資料出現在Edit上，這時候只要修改Edit一個屬性就夠了。 『PasswordChar』。原本這個屬性的設定值是『#0』，我們將之改成我們希望它出現的字元，例如『*』，這樣當我們再輸入字元的時候，一率都是使用『*』來顯示。我們將密碼輸入的實際範例放在範例5-3裡。

6 5-3. 遮罩編輯框（MaskEdit） 遮罩編輯框跟編輯框的功能很相近，只是遮罩編輯框可以先設定好輸入的格式，所以當使用者在使用的時候，就可以限制使用者輸入的文字。 例如我們希望使用者輸入身分證字號，格式就是一個英文字母加上九個數字，但是有些使用者就會故意亂輸入，這時後除非我們在程式中寫入檢查的程式碼，不然就只能任由使用者亂來了。 MaskEdit被放置在Additional這個頁次內，將MaskEdit放在Form上跟Edit的外觀幾乎沒有什麼不同，但是MaskEdit主要是擁有一個Edit沒有的屬性，就是EditMask這個屬性。

7 5-3. 遮罩編輯框（MaskEdit） Mask中可以使用的符號 Mask位元 代表意義 !
> 在這個符號後面的所有英文字母都會被強制轉換為大寫字母。直到“<”符號出現才恢復。 < 在這個符號之後的英文字母全部變成小寫，直到“>”符號出現才恢復。 <> 不檢查英文字母到底是大寫或是小寫 \ 顯示特別字元，只需在要顯示的字元前加上這個符號即可。 L 只可以輸入英文字母，而且一定被要求輸入，不分大小寫。 l 只可以輸入英文字母，但是不一定要輸入。不分大小寫。 A 可以輸入英文字母和數字，而且一定要輸入，英文字母不分大小寫。

8 5-3. 遮罩編輯框（MaskEdit） Mask中可以使用的符號 Mask位元 代表意義 a
可以輸入英文字母和數字，但是不一定要輸入，英文字母不分大小寫。 C 可以輸入任何字元，不過一定要輸入。 c 可以輸入任何字元，但是不一定要輸入。 只可以輸入數字，而且一定要輸入。 9 只可以輸入數字，但是不一定要輸入。 # 可以輸入數字或是正負符號。 : 用來分隔時間中的時、分、秒。 / 用來分隔時間中的年、月、日。 ; 用來分隔mask的欄位。 _ 空白字元，輸入時將會跳過這個字元。但是會在MaskEdit上出現這個位元需要輸入（有底線）。

9 5-3. 遮罩編輯框（MaskEdit） 範例5-4的執行結果

10 5-4. 標籤編輯框（LabeledEdit） 在前面我們介紹過Label跟Edit，也在範例中展現出Label跟Edit合作無間的功能。
在BCB 6裡面，多了一個相當好用的元件，他叫做『LabeledEdit』，他將Label跟Edit合起來，我們不需要再拉兩個VCL元件下來，只要拉一個LabeledEdit就等於拉了一個Label和Edit。

11 5-5. StringGrid StringGrid最主要的功能就是提供一個Grid可以讓我們儲存一堆相關的文字。
例如我們將在範例5-6實做的『九九乘法表』就是一個好例子。 其餘，像是很多需要填寫的表格，或是工廠機台傳出來的報表等等，都很適合用StringGrid來表現！

12 5-5. StringGrid 範例5-6：利用StringGrid實作九九乘法表 StringGrid需要改變的屬性 屬性 設定說明
ColCount 就是設定Column的數目，在這邊雖然九九乘法表只需要九個Column，但是因為我們需要第一個Column，所以必須要設定成『10』 DefaultColWidth 設定每個Column的寬度，使該StringGrid不需要使用Scroll Bar RowCount 就是設定Row的數目，在這邊雖然九九乘法表只需要九個Row，但是因為我們需要第一個Row，所以必須要設定成『10』 DefaultRowHeight 設定每個Row的高度，使該StringGrid不需要使用Scroll Bar

13 5-5. StringGrid 範例5-6：利用StringGrid實作九九乘法表 主要程式碼
void __fastcall TForm1::BitBtn1Click(TObject *Sender) { int i, j; //設定Row Header 以及Column Header的數字 for (i = 0 ; i <= 9 ; i++) { if (i == 0 ) { //設定StringGrid中最左上角那一小格的資料 StringGrid1->Cells[0][i] = "九九乘法"; } else { //設定Column Header的值..就是最上面那一排的資料 StringGrid1->Cells[i][0] = IntToStr(i); //設定Row Header的值..就是最左邊那一排的資料 StringGrid1->Cells[0][i] = IntToStr(i); //計算九九乘法表內的資料 for (i = 1 ; i <= 9 ; i++) for (j = 1 ; j <=9 ; j++) StringGrid1->Cells[i][j] = IntToStr(i * j);

14 5-5. StringGrid 範例5-6：利用StringGrid實作九九乘法表 執行結果

15 5-5. StringGrid 動態產生StringGrid
在這個範例中，main.h以及main.cpp都有動到，跟平常只有修改main.cpp有點不一樣。

16 5-5. StringGrid 範例5-7：main.h class TForm1 : public TForm {
__published: // IDE-managed Components //省略 private: // User declarations public: // User declarations //宣告一個StringGrid的指標 //讓我們在等一下可以順利的動態產生 TStringGrid *StringGrid; __fastcall TForm1(TComponent* Owner); }; // extern PACKAGE TForm1 *Form1; #endif

17 5-5. StringGrid 範例5-7：main.cpp
void __fastcall TForm1::BitBtn1Click(TObject *Sender) { //利用if來判斷是不是四個LabeledEdit都有輸入資料 //如果都有輸入資料..就new一個TStringGrid出來 //並且對該StringGrid做一些屬性的設定 //如果沒有輸入資料..就顯示一個MessageBox通知使用者 if ((LabeledEdit1->Text.Length() != 0) && (LabeledEdit2->Text.Length() != 0) && \ (LabeledEdit3->Text.Length() != 0) && (LabeledEdit4->Text.Length() != 0)) { StringGrid = new TStringGrid(GroupBox2); //new一個StringGrid StringGrid->Parent = GroupBox2; //將StringGrid的parent設定為GroupBox2 StringGrid->Width = 577; //設定StringGrid的寬度 StringGrid->Height = 209; //設定StringGrid的高度 StringGrid->Top = 24; //設定StringGrid對於GroupBox2的上緣的距離 StringGrid->Left = 16; //設定StringGrid對於GroupBox2的左邊界的距離 //設定該StringGrid的Cell個數的相關屬性 StringGrid->ColCount = StrToInt(LabeledEdit1->Text); StringGrid->RowCount = StrToInt(LabeledEdit2->Text); StringGrid->FixedCols = StrToInt(LabeledEdit3->Text); StringGrid->FixedRows = StrToInt(LabeledEdit4->Text); StringGrid->Visible = true; //將該StringGrid的Visible設定為可看見 StringGrid->Enabled = true; //將該StringGrid設定成Enable } else { //顯示應該輸入完整的資訊 //在這邊會跳出一個MessageBox ShowMessage("請輸入完整的資訊"); 範例5-7：main.cpp

18 5-5. StringGrid 範例5-7：main.cpp
void __fastcall TForm1::BitBtn2Click(TObject *Sender) { //如果StringGrid已經被new出來了，就可以掃過所有的Cells //並把所有的Cell的值都設定為空字串，如此可以模擬出清除Grid資料的感覺 if (StringGrid != NULL) { for (int i = 0 ; i < StringGrid->ColCount ; i++) for (int j = 0 ; j < StringGrid->RowCount ; j++) StringGrid->Cells[i][j] = ""; } // void __fastcall TForm1::BitBtn3Click(TObject *Sender) //將已經new出來的StringGrid delete掉 //這個動作會完整的刪除已經new出來的物件 delete StringGrid;

19 5-5. StringGrid 範例5-7：main.cpp
void __fastcall TForm1::BitBtn4Click(TObject *Sender) { //宣告我們要設定Cell的colunm, row, 以及data的變數 int col, row; AnsiString data; //判斷是不是我們需要的資料都具備了 if ((LabeledEdit5->Text.Length() != 0) && (LabeledEdit6->Text.Length() != 0) && \ (LabeledEdit7->Text.Length() != 0)) { //如果所需的資訊都已經具備，就將這些資訊寫入我們剛剛宣告的變數中 col = LabeledEdit5->Text.ToInt(); row = LabeledEdit6->Text.ToInt(); data = LabeledEdit7->Text; StringGrid->Cells[col][row] = data; } else { ShowMessage("請輸入完整的資訊"); //顯示應該輸入完整的資訊

20 5-5. StringGrid 範例5-7 執行結果

21 5-6. ValueListEdit ValueListEditor最主要的功能就是類似hash table，可以指定key以及value給這個Grid。 ValueListEditor也可以提供視覺化的修改，不一定要像StringGrid只能由程式控制Cell的Value。 在key的部分，有四種Option可以選擇，分別是『keyEdit』、『keyAdd』、『keyDelete』、以及『keyUnique』這四種。 Value部分，可以利用Insert或是Cell等不同的方法來設定，也可以設定是不是可以由視覺化的元件修改等等。 範例5-8

22 5-7. RichEdit元件的使用 相信大家一定對筆記本相當不陌生，筆記本它有相當簡單的介面，除了文字編輯區外就是一個主選單。我們現在所要介紹的就是這個文字編輯區，也就是BCB內所提供的RichEdit元件。 RichEdit元件放在BCB VCL面板的Standard Page上，放到Form上面感覺就像是一大塊的白色方塊，當然，你希望他不是白色的也可以，只需要改一下屬性就好了。

23 5-7. RichEdit元件的使用 RichEdit他本身具有相當多的屬性和方法可以使用，如果大家還記得我們在前面所提到程式編輯器的功能，應該還記得Code Completion這個功能吧！ 因為在RichEdit或是下一小節我們要介紹的RichEdit中，有很多屬性跟方法並不會在Object Inspector中出現，除了查詢Help之外，就是Code Completion最好用了。在範例5-9中，我們將會簡單的介紹一些RichEdit的範例，會讓各位讀者了解該如何對RichEdit內的資料做新增刪除等動作。

24 5-7. RichEdit元件的使用 void __fastcall TForm1::BitBtn1Click(TObject *Sender) { //在RichEdit的最後一行加入字串 if (LabeledEdit1->Text.Length() != 0) { RichEdit1->Lines->Append(LabeledEdit1->Text); //將字串附加到RichEdit的最後 LabeledEdit1->Text = ""; //插入之後將該LabeledEdit清除 } // void __fastcall TForm1::BitBtn2Click(TObject *Sender) { //刪除RichEdit的某一行的資料，RichEdit的行數由第"0"行開始算起 if (LabeledEdit2->Text.Length() != 0) { RichEdit1->Lines->Delete(LabeledEdit2->Text.ToInt()); //刪除指定的行數 LabeledEdit2->Text = ""; //刪除之後將輸入的行數清除 void __fastcall TForm1::BitBtn3Click(TObject *Sender) { //在RichEdit的某一行插入字串，插入字串用的index也是從"0"算起 if ((LabeledEdit3->Text.Length() != 0) && (LabeledEdit4->Text.Length() != 0)) { //用index和Str儲存我們將會使用到的資料 int index = LabeledEdit3->Text.ToInt(); AnsiString Str = LabeledEdit4->Text; RichEdit1->Lines->Insert(index, Str); //將資料插入到RichEdit中 LabeledEdit3->Text = ""; //清除輸入的資料 LabeledEdit4->Text = ""; //清除輸入的資料 範例5-9

25 5-8. RichEdit元件的使用 RichEdit跟RichEdit是很相近的兩個元件，最大的差別大概就是在RichEdit它可以讀寫RTF文件！ RichEdit被放在Win32這個頁次中，將RichEdit放在Form上面的長相幾乎跟RichEdit沒有什麼不同。 RichEdit的基本和RichEdit並沒有什麼差別，程式碼也差不多。

26 5-8. RichEdit元件的使用 void __fastcall TForm1::BitBtn1Click(TObject *Sender) { //在RichEdit的最後一行加入字串 if (LabeledEdit1->Text.Length() != 0) { RichEdit1->Lines->Append(LabeledEdit1->Text); //將字串附加到RichEdit的最後 LabeledEdit1->Text = ""; //插入之後將該LabeledEdit清除 } // void __fastcall TForm1::BitBtn2Click(TObject *Sender) { //刪除RichEdit的某一行的資料，RichEdit的行數由第"0"行開始算起 if (LabeledEdit2->Text.Length() != 0) { RichEdit1->Lines->Delete(LabeledEdit2->Text.ToInt()); //刪除指定的行數 LabeledEdit2->Text = ""; //刪除之後將輸入的行數清除 void __fastcall TForm1::BitBtn3Click(TObject *Sender) { //在RichEdit的某一行插入字串，插入字串用的index也是從"0"算起 if ((LabeledEdit3->Text.Length() != 0) && (LabeledEdit4->Text.Length() != 0)) { //用index和Str儲存我們將會使用到的資料 int index = LabeledEdit3->Text.ToInt(); AnsiString Str = LabeledEdit4->Text; RichEdit1->Lines->Insert(index, Str); //將資料插入到RichEdit中 LabeledEdit3->Text = ""; //清除輸入的資料 LabeledEdit4->Text = ""; //清除輸入的資料 範例5-10

27 本章習題 自己開發一個密碼輸入對話窗，需包含有使用者名稱、密碼兩欄，以及確定及取消兩個按鈕。
利用MaskEdit實作一個身分證字號檢查程式，用來檢查使用者輸入的身分證字號是不是合法的。 將記事本的功能實作完成。 將WordPad的功能實作完成。