多文档界面设计

1、第第6章章 多文档界面设计多文档界面设计6.1 组件组件6.2 父窗体的设计父窗体的设计6.3 子窗体的设计子窗体的设计6.4 关于窗体设计关于窗体设计6.5 编写程序代码编写程序代码6.6 编译运行程序编译运行程序6.7 小结小结6.1 组 件使用的组件主要有以下几个：（1）主菜单栏：用于执行相关操作的命令，在主窗体上使用。（2）工具栏：用于执行常用操作的命令，在主窗体上使用。（3）状态栏：用于显示应用程序执行的状态。（4）TImageList组件：用于修饰菜单和工具栏，把它们设计成图标菜单和图标工具栏。（5）对话框组件：用于特定的目的对话框，包括保存文件对话框、打开文件对话框、颜色对话框和

2、字体对话框等。（6）弹出式菜单：用于在TRichEdit组件中单击鼠标右键。（7）TRichEdit组件：用于编辑文本。（8）TActionList组件：用于关联菜单和工具栏，以尽量达到少编写代码的目的。（9）TTimer组件：用于在状态栏显示系统时间。6.2 父窗体的设计新建一个项目，将Form1设置为父窗体，即默认时为主窗体。当运行时此窗体需要最大化显示，下面讲述设置主窗体的属性。6.2.1 窗体窗体Form1属性设置属性设置窗体Form1属性的主要设置如下：（1）Caption属性：设置标题名为“多文档程序”。（2）FormStyle属性：属性值设置为fsMDIForm。这是设置父窗体的

3、重要一步。（3）Icon属性：设置标题栏最左侧的图标。单击Icon属性选项左侧的按钮，可以从计算机*.Ico格式的图标中选择一个合适的图标。（4）WindowState属性：属性值设置为wsMaximized，当启动应用程序时，主窗体以最大化形式显示在屏幕中。6.2.2 菜单的设计菜单的设计双击工具面板上的“TMainMenu”组件，在窗体中显示主菜单的图标，双击该图标，打开菜单设计器，在菜单设计器中设计菜单。菜单设计器如图6.2.1所示。其中，编辑菜单、格式菜单和窗口菜单在其子窗体中设计成动态菜单，即菜单的合并。图6.2.1 菜单设计器设计复选菜单时，在“查看”下拉菜单中，有两个菜单项，即工

4、具栏和状态栏。若“工具栏”菜单项为选中“工具栏”状态，则显示工具栏；若“工具栏”菜单项为未选中“工具栏”状态，则不显示工具栏。最后设计添加TImageList组件，并设置图标，此组件支持的格式有*.Ico和*.bmp。把图标添加到菜单中。注意：设计菜单时最好把热键和快捷键也设计在内。6.2.3 工具栏的设计工具栏的设计添加TCoolBar工具栏，其作用是作为容器存放TToolBar工具栏。然后再添加两个TToolBar工具栏，一个用于设计常用工具栏，一个用于设计格式工具栏。1ToolBar1常用工具栏设计在常用工具栏中，有“新建”、“打开”、“保存”、“剪切”、“复制”和“粘贴”按钮。（1）用

5、鼠标右键单击ToolBar1工具栏，在弹出的快捷菜单中选择“New Button”命令，即可创建按钮。（2）设置ToolBar1工具栏和ImageList1组件关联。2ToolBar2格式工具栏设计在格式工具栏中，有“粗体”、“斜体”、“下画线”、“左对齐”、“居中对齐”和“右对齐”按钮。（1）用鼠标右键单击ToolBar2工具栏，在弹出的快捷菜单中选择“New Button”命令，即可创建按钮。（2）工具栏复选按钮设计。其中有加粗、倾斜和下画线按钮要设置为复选按钮。设置这组按钮时，Style属性值为tbsCheck。（3）工具栏单选按钮设计。其中有左对齐、居中对齐和右对齐按钮组，设计单选按钮

6、要设置的属性有Grouped属性和Style属性。如果全选需要设置单选按钮的按钮组，设置这组按钮的Grouped属性值为true，Style属性值为tbsCheck。工具栏的设置如图6.2.2所示。图6.2.2 工具栏的设置6.2.4 状态栏的设计状态栏的设计添加状态栏并划分为4个区域，其作用分别如下：第一个区域：用于设置指向按钮的提示信息。第二个区域：用于设置打开的或者保存后的文件是否被修改。第三个区域：用于显示系统的日期时间。第四个区域：用于显示“欢迎使用多文档程序”语句。6.3 子窗体的设计设计子窗体，首先新建一个窗体，选择“New”“VCL Form”命令，即可创建第二个窗体Form2

7、。6.3.1 窗体窗体Form2属性设置属性设置窗体Form2属性设置如下：（1）FormStyle属性：属性值设置为fsMDIChild。（2）Icon属性：用于设置子窗体标题栏左侧的图标。（3）Caption属性：设置为空，可以在打开此窗体时命名。（4）设置Form2在应用程序启动时不自动启动，选择“Project”“Options”命令，弹出“Project Options for Project1.exe”对话框，将“Auto-create forms”列表框中的Form2移到“Available forms”列表框中，即可实现启动应用程序时不启动Form2，如图6.3.1所示。图6.

8、3.1 “Project Options for Project1.exe”对话框6.3.2 Form2菜单设计菜单设计添加主菜单组件，添加菜单项“编辑”、“格式”和“窗口”，设计主菜单如图6.3.2所示。图6.3.2 Form2主菜单1菜单合并技术菜单合并技术是指在主窗体的主菜单不隐藏的基础上直接插入子窗体的主菜单，也可以替换部分或者全部主菜单。一般地，不但主窗体上有主菜单，而且子窗体上也自带主菜单。当子窗体获得焦点时，需要合并整个应用程序的主菜单和子窗体的主菜单。如果直接运行以上程序，当子窗体获得焦点时，主窗体的主菜单消失，此位置显示子窗体的主菜单，如图6.3.3所示。菜单的合并主要是设置

9、菜单项的GroupIndex属性，默认值为0。若不同窗体的菜单的GroupIndex属性值相同，子窗体未被激活时，则显示主窗体的主菜单；如果子窗体被激活，则显示子窗体的主菜单，而不显示主窗体的主菜单。如果使两个窗体的主菜单都显示，则只设置子窗体的GroupIndex属性即可。图6.3.3 子窗体的主菜单GroupIndex属性值越小，菜单的位置越靠左。主窗体的主菜单中有“文件”、“查看”、“帮助”；子窗体的主菜单中有“编辑”、“格式”、“窗口”。若设计子窗体获得焦点时显示的菜单为“文件”、“编辑”、“查看”、“格式”、“窗口”、“帮助”，则应设置主窗体中“文件”的GroupIndex属性值为1

10、，“查看”的GroupIndex属性值为3，“帮助”的GroupIndex属性值为6；设置子窗体中“编辑”的GroupIndex属性值为2，“格式”的GroupIndex属性值为4，“窗口”的GroupIndex属性值为5。设置完毕，单击“运行”按钮，运行界面如图6.3.4所示。2菜单覆盖技术有时需要用到菜单覆盖技术，与菜单合并技术原理相似。当GroupIndex属性值相同时即可覆盖，如果主窗体中主菜单的“文件”的GroupIndex属性值为1，则子窗体中主菜单“编辑”的GroupIndex属性值也为1。运行程序即可完成子窗体的主菜单“编辑”覆盖主窗体的主菜单“文件”。图6.3.4 运行界面6

11、.3.3 TRichEdit组件组件添加TRichEdit组件，用于编辑文本，它是子窗体中占用面积最大的一个组件。TRichEdit组件属性如下：（1）Align属性：设置此属性值为alClient，使该组件充满菜单以外的剩余空间。（2）ScrollBar属性：设置此属性值为ssBoth，当文字到达右边界或底边界时，出现水平滚动条或垂直滚动条。6.3.4 TPopupMenu组件组件添加弹出式菜单，并设计复制、剪切、粘贴、全选菜单，如图6.3.5所示。6.3.5 TActionList组件组件添加TActionList组件并设置复制、粘贴、剪切、全选选项。将ActionList1组件和Popu

12、pMenu1组件关联并将ActionList1组件和MainMenu1组件关联。将RichEdit1的PopupMenu属性值设置为PopupMenu1。当运行程序时，单击鼠标右键即可弹出快捷菜单。图6.3.5 弹出式菜单设计6.4 关于窗体设计新建窗体Form3，此窗体只是版本声明之类的对话框，只需要设置属性值。1窗体Form3属性设置（1）Caption属性：其属性值设置为“关于多文档程序”。（2）BorderStryle属性：其属性值设置为bsDialog。（3）Position属性：其属性值设置为poDesktopCenter。2TImage组件添加TImage组件，默认名为Image

13、1，选择Image1属性选项卡中的picture属性，添加一幅具有一定意义的图片。3TLabel组件添加组件并设置组件的属性。（1）Caption属性：其属性值设置为“多文档程序1.0版，版权所有(c)拷贝必纠”。（2）AutoSize属性：其属性值设置为false。（3）WordWrap属性：其属性值设置为true。4TButton组件添加组件并设置按钮的属性。（1）Caption属性：其属性值设置为确定。（2）Default属性：其属性值设置为true。按钮中的程序代码如下：procedure TForm3.Button1Click(Sender: TObject);begin close

14、;end;设置后的界面如图6.4.1所示。图6.4.1 关于多文档程序设计界面6.5 编写程序代码界面设计已经完成，下一步是编写程序代码。6.5.1 主窗体的工具栏主窗体的工具栏添加工具栏中按钮的程序代码。1“新建”按钮程序代码（1）完成新建一个子窗体功能，双击“新建”按钮，添加程序代码如下：procedure TForm1.ToolButton1Click(Sender: TObject);begin /由于应用程序未完成自动生成窗体Form2 form2:=tform2.Create(application); form2.Show; /子窗体的标题名 form2.Caption :=文档

15、+inttostr(mdichildcount);end;（2）当鼠标指向“新建”按钮时，在状态栏第一个区域中提示“新建”，完成此功能，其事件和程序代码如下：procedure TForm1.ToolButton1MouseMove(Sender: TObject; Shift: TShiftState;X, Y: Integer);Begin /StatusBar1.Panels0指向状态栏的第一区域 StatusBar1.Panels0.Text:= 新建end;2“打开”按钮程序代码（1）添加组件TOpenDialog，并双击“打开”按钮，添加程序代码如下：procedure TForm

16、1.ToolButton2Click(Sender: TObject);begin /判断子窗体是否打开 if mdichildcount=0 then ToolButton1.Click; if OpenDialog1.Execute then begin form2.RichEdit1.Lines.LoadFrom);/打开的文件路径赋值给变量; end else ;end;其中，单击“保存”按钮时，要考虑保存路径。所以设置单元变量代码如下：implementationuses Unit2;uses Unit3; var /保存路径 ;（2）当鼠标指向“打开”按钮时，在状态栏第一个区域中提

17、示“打开”，完成此功能，其事件和程序代码如下：procedure TForm1.ToolButton2MouseMove(Sender: TObject; Shift: TShiftState;X, Y: Integer);begin /状态栏的提示标记信息为打开 StatusBar1.Panels0.Text:= 打开;end;3“保存”按钮程序代码（1）添加组件TSaveDialog，“保存”按钮程序代码的功能是当用户打开文件时，单击此按钮自动保存到原文件中；当用户新建文件时，单击“保存”按钮，弹出“保存”对话框，用户保存完毕将状态栏上的修改标记清空。程序代码如下：procedure TF

18、orm1.ToolButton3Click(Sender: TObject);begin if then begin form2.RichEdit1.Lines.SaveTo); /状态栏的修改标记 StatusBar1.Panels1.Text :=; end else begin if SaveDialog1.Execute then begin form2.RichEdit1.Lines.SaveTo); /状态栏的修改标记 StatusBar1.Panels1.Text :=; end else ; end;end;（2）当鼠标指向“保存”按钮时，在状态栏第一个区域中提示“保存”，完成

19、此功能，其事件和程序代码如下：procedure TForm1.ToolButton3MouseMove(Sender: TObject; Shift: TShiftState;X, Y: Integer);begin /状态栏的提示标记信息为保存 StatusBar1.Panels0.Text:= 保存;end;4“粗体”按钮程序代码（1）“粗体”按钮的功能是加粗子窗体中RichEdit1选中文字的字体。程序代码如下：procedure TForm1.ToolButton8Click(Sender: TObject);begin with form2.richedit1.SelAttribu

20、tes do begin if ToolButton8.Down then Style:=Style+fsbold else Style:=Style-fsbold; end;end;（2）当鼠标指向“粗体”按钮时，在状态栏第一个区域中提示“粗体”，完成此功能，其事件和程序代码如下：procedure TForm1.ToolButton8MouseMove(Sender: TObject; Shift: TShiftState;X, Y: Integer);begin /状态栏的提示标记信息为粗体 StatusBar1.Panels0.Text:= 粗体;end;5“斜体”按钮程序代码（1）“

21、斜体”按钮的功能是倾斜子窗体中RichEdit1选中文字的字体。程序代码如下：procedure TForm1.ToolButton9Click(Sender: TObject);begin with form2.richedit1.SelAttributes do begin if ToolButton9.Down then Style:=Style+fsItalic else Style:=Style-fsItalic; end;end;（2）当鼠标指向“斜体”按钮时，在状态栏第一个区域中提示“斜体”，完成此功能，其事件和程序代码如下：procedure TForm1.ToolButton

22、9MouseMove(Sender: TObject; Shift: TShiftState;X, Y: Integer);begin /状态栏的提示标记信息为斜体 StatusBar1.Panels0.Text:= 斜体;end;6“下画线”按钮程序代码（1）“下画线”按钮的功能是给子窗体中RichEdit1选中文字的字体加下画线。程序代码如下：procedure TForm1.ToolButton10Click(Sender: TObject);begin with form2.richedit1.SelAttributes do begin if ToolButton10.Down th

23、en Style:=Style+fsUnderline else Style:=Style-fsUnderline; end;end;（2）当鼠标指向“下画线”按钮时，在状态栏第一个区域中提示“下画线”，完成此功能，其事件和程序代码如下：procedure TForm1.ToolButton10MouseMove(Sender: TObject; Shift: TShiftState;X, Y: Integer);begin /状态栏的提示标记信息为下画线 StatusBar1.Panels0.Text:= 下画线;end;7“左对齐”按钮程序代码（1）“左对齐”按钮的功能是设置子窗体中Ric

24、hEdit1的段落为左对齐。程序代码如下：procedure TForm1.ToolButton12Click(Sender: TObject);begin /设置左对齐 form2.richedit1.Paragraph.Alignment:=taLeftJustify;end;（2）当鼠标指向“左对齐”按钮时，在状态栏第一个区域中提示“左对齐”，完成此功能，其事件和程序代码如下：procedure TForm1.ToolButton12MouseMove(Sender: TObject; Shift: TShiftState;X, Y: Integer);begin /状态栏的提示标记信息

25、为左对齐 StatusBar1.Panels0.Text:= 左对齐;end;8“居中对齐”按钮程序代码（1）“居中对齐”按钮的功能是设置子窗体中RichEdit1的段落为居中对齐。程序代码如下：procedure TForm1.ToolButton13Click(Sender: TObject);begin /设置居中对齐 form2.richedit1.Paragraph.Alignment:=taCenter;end;（2）当鼠标指向“居中对齐”按钮时，在状态栏第一个区域中提示“居中对齐”，完成此功能，其事件和程序代码如下：procedure TForm1.ToolButton13Mou

26、seMove(Sender: TObject; Shift: TShiftState;X, Y: Integer);begin /状态栏的提示标记信息为居中对齐 StatusBar1.Panels0.Text:= 居中对齐;end;9“右对齐”按钮程序代码（1）“右对齐”按钮的功能是设置子窗体中RichEdit1的段落为右对齐。程序代码如下：procedure TForm1.ToolButton14Click(Sender: TObject);begin /设置右对齐 form2.richedit1.Paragraph.Alignment:=taRightJustify;end;（2）当鼠标指

27、向“右对齐”按钮时，在状态栏第一个区域中提示“右对齐”，完成此功能，其事件和程序代码如下：procedure TForm1.ToolButton14MouseMove(Sender: TObject; Shift: TShiftState;X, Y: Integer);begin /状态栏的提示标记信息为右对齐 StatusBar1.Panels0.Text:= 右对齐;end;10复制、剪切、粘贴按钮程序代码由于复制、剪切、粘贴按钮是关联ActionList组件，所以不需要任何代码即可实现其功能。当鼠标指向该按钮时，在状态栏提示复制、剪切、粘贴标记。这3个按钮的程序代码如下：procedur

28、e TForm1.ToolButton5MouseMove(Sender: TObject; Shift: TShiftState;X, Y: Integer);begin /状态栏的提示标记信息为剪切 StatusBar1.Panels0.Text:= 剪切;end;procedure TForm1.ToolButton6MouseMove(Sender: TObject; Shift: TShiftState;X, Y: Integer);begin /状态栏的提示标记信息为复制 StatusBar1.Panels0.Text:= 复制;end;procedure TForm1.ToolB

29、utton7MouseMove(Sender: TObject; Shift: TShiftState;X, Y: Integer);begin /状态栏的提示标记信息为粘贴 StatusBar1.Panels0.Text:= 粘贴;end;6.5.2 主窗体的菜单栏主窗体的菜单栏添加菜单栏中菜单项的程序代码。1“文件”下拉菜单（1）“新建”菜单项：完成“新建”按钮的功能。程序代码如下：procedure TForm1.N2Click(Sender: TObject);begin toolbutton1.Click ;end;（2）“打开”菜单项：完成“打开”按钮的功能。程序代码如下：proc

30、edure TForm1.N3Click(Sender: TObject);begin toolbutton2.Click ;end;（3）“保存”菜单项：完成“保存”按钮的功能。程序代码如下：procedure TForm1.N4Click(Sender: TObject);begin toolbutton3.Click ;end;（4）“另存为”菜单项：完成重新保存的功能，如果单击保存窗体上的“保存”按钮，弹出“保存”对话框，单击“确定”按钮即可保存，并把状态栏的修改标记变为空；当单击“取消”按钮时，执行空语句。程序代码如下：procedure TForm1.N5Click(Sender:

31、 TObject);begin if SaveDialog1.Execute then begin form2.RichEdit1.Lines.SaveTo); /状态栏的修改标记 StatusBar1.Panels1.Text :=; end else ;end;（5）“关闭”菜单项：完成关闭子窗体的功能，如果子窗体的个数为0，则不执行语句；否则关闭活动子窗体。程序代码如下：procedure TForm1.N8Click(Sender: TObject);begin if mdichildcount=0 then else activemdichild.Close;end;其中，此段语句不

32、能把子窗体关闭，还需要销毁子窗体，需要在子窗体的关闭事件中编写程序，程序代码如下：procedure TForm2.FormClose(Sender: TObject; var Action: TCloseAction);begin action:=cafree;end;（6）“退出”菜单项：完成关闭子窗体和主窗体的功能。程序代码如下：procedure TForm1.N9Click(Sender: TObject);begin close;end;2“查看”下拉菜单（1）“工具栏”菜单项：用于显示或隐藏工具栏。程序代码如下：procedure TForm1.N20Click(Sender:

33、TObject);begin if n20.Checked then CoolBar1.Visible :=true else CoolBar1.Visible :=false;end;（2）“状态栏”菜单项：用于显示或隐藏状态栏。程序代码如下：procedure TForm1.N21Click(Sender: TObject);begin if n21.Checked then statusbar1.Visible :=true else statusbar1.Visible :=false;end;3“帮助”下拉菜单“关于多文档程序”菜单项：用于显示窗体form3。程序代码如下：proce

34、dure TForm1.N23Click(Sender: TObject);begin form3.show;end;6.5.3 主窗体的主窗体的Timer组件组件添加Timer组件，其功能是将系统的时间和日期返回到状态栏的第三个区域。程序代码如下：procedure TForm1.Timer1Timer(Sender: TObject);begin StatusBar1.Panels2.Text:= formatdatetime(“今日是：”dddddd ddd “ 时间：”h“:” n “:”s,now);end;6.5.4 主窗体其他事件主窗体其他事件关于主窗体的其他事件程序代码。1关闭

35、询问当窗体关闭时，若未保存文件，则弹出对话框询问是否保存。当用户单击“是”按钮时，保存文档并退出；当用户单击“否”按钮时，不保存文档直接退出；当用户单击“取消”按钮时，关闭询问对话框。程序代码如下：procedure TForm1.FormCloseQuery(Sender: TObject; var CanClose: Boolean); var /保存用户单击按钮的信息 answer:integer;begin /统计是否有子窗体存在 if mdichildcount0 then begin if form2.RichEdit1.Modified then begin /弹出询问对话框 a

36、nswer:=messagedlg(文件未保存，是否退出多文档程序？,mtConfirmation,mbyes,mbno,mbcancel,0); if answer=mryes then ToolButton3.Click else if answer=mrno then canclose:=true else canclose:=false; end; end;end;2状态栏的提示标记信息用于当鼠标移到主窗体时，状态栏第一个区域的提示。程序代码如下：procedure TForm1.FormMouseMove(Sender: TObject; Shift: TShiftState; X,

37、 Y: Integer);begin /状态栏的提示 StatusBar1.Panels0.Text :=主窗体;end;6.5.5 子窗体主菜单子窗体主菜单子窗体中主菜单的程序代码。1“格式”下拉菜单（1）“字体”菜单项：用于设置RichEdit1的字体，添加一个TFontDialog组件。程序代码如下：procedure TForm2.N10Click(Sender: TObject);begin if FontDialog1.Execute then richedit1.Font.Assign(FontDialog1.Font);end;（2）“背景”菜单项：用于设置RichEdit1的

38、背景颜色，添加一个TColorDialog组件。程序代码如下：procedure TForm2.N11Click(Sender: TObject);begin if ColorDialog1.Execute then richedit1.Color :=ColorDialog1.Color; end;2“窗口”下拉菜单此菜单用于设置子窗体的排列方式。排列方式有层叠、水平平铺、垂直平铺和排列图标。（1）“层叠”菜单项：用于设置多个子窗体为层叠排列方式，只显示子窗体的标题栏，如图6.5.1所示。程序代码如下：procedure TForm2.Y1Click(Sender: TObject);beg

39、in /层叠 form1.cascade;end;图6.5.1 子窗体为层叠排列方式（2）“水平平铺”菜单项：使所有打开的子窗体都显示，彼此之间不重叠，界面如图6.5.2所示。程序代码如下：procedure TForm2.Z1Click(Sender: TObject);begin /水平平铺 form1.TileMode :=tbhorizontal; form1.Tile;end;（3）“垂直平铺”菜单项：使打开的子窗体为垂直平铺排列方式。图6.5.2 子窗体为水平平铺排列方式程序代码如下：procedure TForm2.H1Click(Sender: TObject);begin /

40、垂直平铺 form1.TileMode :=tbvertical; form1.Tile;end;（4）“排列图标”菜单项：当子窗体最小化时，排列其最小化子窗体的图标，这样可以使最小化的子窗体重新排列。程序代码如下：procedure TForm2.N6Click(Sender: TObject);begin form1.ArrangeIcons;end;注意：子窗体的排列是相对父窗体而言的，不是子窗体，因此在语句前面加上Form1。（5）“关闭所有的窗口”菜单项：其功能是关闭所有打开的子窗体。程序代码如下：procedure TForm2.N8Click(Sender: TObject);

41、var i:integer;begin with form1 do begin for i:=MDIChildCount-1 downto 0 do MDIChildreni.Close; end;end;6.5.6 子窗体的子窗体的RichEdit1组件组件子窗体中RichEdit1组件的代码主要用于一些提示信息。1状态栏的修改标记前面已经叙述当保存文件时把状态栏的修改标记变为空，表示保存文件；当RichEdit1中的内容改变时，要把状态栏的修改标记变为“修改”。只需要在子窗体的RichEdit1组件的Change事件中编写程序代码。程序代码如下：procedure TForm2.RichE

42、dit1Change(Sender: TObject);begin /状态栏的修改标记 form1.StatusBar1.Panels1.Text :=修改;end;2状态栏的提示标记信息当鼠标移到正文中时，状态栏的提示标记为“正文”。程序代码如下：procedure TForm2.RichEdit1MouseMove(Sender: TObject; Shift: TShiftState; X,Y: Integer);begin /状态栏的修改标记 form1.StatusBar1.Panels0.Text :=正文;end;6.6 编译运行程序程序编写完成后编译成可执行文件，可以脱离Delphi运行。实际上在设计程序过程中，当单击“运行”按钮时，Delphi自动编译成可执行文件，保存在项目的文件夹中。6.6.1 设