用户界面设计

1. 5 用户界面设计 用户界面设计的几条原则 菜单设计 工具栏设计 多页面设计 多窗体设计

2. 用户界面设计的基本原则 • 控制权在用户 • 使用图形用户界面 • 界面操作的一致性 • 宽容性 • 简洁与美观并重

3. 菜单设计 MainMenu PopupMenu

4. 菜单设计窗口

5. 设计菜单结构

6. 为菜单项设计功能 Button 型 RadioButton 型 CheckBox 型

7. 选项型菜单 • 选项型菜单项的选中状态不是靠鼠标单击菜单项自动切换的，而是在菜单项的OnClick事件处理程序中，通过改变其Checked属性值来实现的 。 procedure TForm1.fsBoldClick(Sender: TObject); Begin //粗体 fsbold.Checked :=not fsBold.Checked ; //翻转 if fsBold.checked then //如果菜单项为选中状态… 执行粗体字处理 else 执行非粗体字处理 end ;

8. 单选按钮型菜单 • 菜单项的RadioItem属性值设置为true • 菜单项的GroupIndex属性设定为同组号 • 菜单项的Checked属性值在菜单项的OnClick事件处理程序中设置。 • 当一个菜单项的Checked属性为true时，同组的其他菜单项的Checked属性都自动变为false。 procedure TForm1.songfontClick(Sender: TObject); Begin //"宋体"菜单项 sontfont.checked:= true; …宋体设置… end;

9. 菜单例（例5-1） MainMenu Memo OpenDialog SaveDialog

10. 菜单例（例5-1）

11. 菜单例（例5-1） implementation {$R *.dfm} var fname : string ; //定义单元全局变量，保存原始文件名 procedure TForm1.FormShow(Sender: TObject); //初始化 begin memo1.Modified :=false ; //memo1的初始状态为“未修改” fname := '' ; //设fname变量初始值为空串 memo1.Font.Size := 12 ; //字号设为12 end;

12. 菜单例（例5-1） procedure TForm1.openClick(Sender: TObject); Begin //“打开”菜单项 if opendialog1.Execute then //打开文件对话框 begin if memo1.Modified then //保存当前内容？ savefile ; //调用保存当前内容的子程序 memo1.Lines.LoadFromFile(opendialog1.FileName); fname := opendialog1.FileName ; //保存原始文件名 end ; end;

13. 菜单例（例5-1） procedure TForm1.newClick(Sender: TObject); Begin //“新建”菜单项 if memo1.Modified then savefile ; //调用保存过程 end;

14. 菜单例（例5-1） procedure TForm1.exitClick(Sender: TObject); Begin //“退出”菜单项 if messagedlg ('是否退出', mtConfirmation ,[mbYes,mbNo],0)= mrYes then begin if memo1.Modified then savefile ; form1.close; end; end;

15. 菜单例（例5-1） procedure savefile ; Begin // 保存当前编辑区内容的公共子程序 with form1 do begin if messagedlg ('是否保存', mtConfirmation,[mbYes,mbNo],0)= mrYes then if fname = '' then //判断当前内容是否有原始文件 if savedialog1.Execute then memo1.lines.saveToFile(savedialog1.FileName) else memo1.Lines.SaveToFile(fname); //保存到原文件 memo1.Modified := False; //memo1恢复为未修改状态 memo1.Lines.Clear ; //清空memo窗口内容 end; end;

16. 菜单例（例5-1） procedure TForm1.cutClick(Sender: TObject); //“剪切”菜单项 begin memo1.CutToClipboard; //memo1的剪切方法 end; procedure TForm1.pasteClick(Sender: TObject); //“粘贴”菜单项 begin memo1.PasteFromClipboard; //memo1的粘贴方法 end; procedure TForm1.selallClick(Sender: TObject); //“全选”菜单项 begin memo1.SelectAll; //memo1的全选方法 end;

17. 菜单例（例5-1） procedure TForm1.kaifontClick(Sender: TObject); begin// “楷体”菜单项 kaifont.Checked :=true ; //楷体菜单项被选中 memo1.Font.Name := '楷体_GB2312'; end; procedure TForm1.lifontClick(Sender: TObject); begin //“隶书”菜单项 lifont.Checked := true ; //隶书菜单项被选中 memo1.Font.Name := '隶书' ; //memo1字体设为隶书 end;

18. 菜单例（例5-1） procedure TForm1.BoldClick(Sender: TObject); Begin //“粗体”菜单项 bold.Checked :=not Bold.Checked ; //翻转 if Bold.checked then memo1.Font.Style:= memo1.Font.Style + [fsBold] else memo1.Font.Style:= memo1.Font.Style - [fsBold]; end;

19. 菜单例（例5-1） Style属性 － 集合类型

20. 设计工具栏

21. 工具栏按钮的不同角色 • 普通按钮功能 －如“新建”、“打开”和“保存”。当单击这种按钮时，就执行一项功能。 • 复选框功能 － 如“粗体”、“斜体”、“下划线”。它们有两种状态：按下（选中）和抬起（未选中）。 • 单选按钮功能 － 如“两端对齐”、“居中”和“右对齐”。有按下和抬起两种状态，但同组按钮之间有互斥作用，同一时刻只能有一个按钮处于按下状态（只能选一种对齐方式）。 • 无论是那种工具栏按钮，都保持按钮的基本功能，都能响应OnClick事件。

22. 工具栏设计 • ToolBar是一个容器组件，它可以对放在其上的工具按钮和其他控件统一管理 。 ToolBar （win32）

23. 工具栏设计 • SpeedButton （Additional标签页上）－具有很多工具栏按钮的内在功能和显示效果

24. 工具栏设计 0 ： 普通按钮 非0： 状态按钮 同组：互斥 单击时是否自己能弹起来

25. 工具栏设计 procedure TForm1.pasteClick(Sender: TObject); begin // “粘贴”按钮 memo1.PasteFromClipboard; end; procedure TForm1.spBoldClick(Sender: TObject); begin // “粗体”按钮 if spBold.Down then memo1.Font.Style:= memo1.Font.Style + [fsBold] else memo1.Font.Style:= memo1.Font.Style - [fsBold]; end； procedure TForm1.spLeftClick(Sender: TObject); begin // “左对齐”按钮 memo1.Alignment := taLeftJustify ; end;

26. 多页面设计 PageControl （win32） 在PageControl上 建立的第1个页面 在PageControl上单击鼠标右键 快捷菜单：New Page

27. 多页面 同窗体、同单元、不同界面

28. 窗体标题栏设计 • Bordericons属性 － 决定哪些图标出现在Form的标题栏上： • Bisystemmenu为False时，标题栏上无任何按钮 • Biminimize true/false • Bimaximize true/false Captiom

29. 窗体边框设计 • BorderStyle属性 － 决定了窗体的边框样式： • bsNone：窗体无可视的边框（也无标题栏）。拖动窗体边框不能改变窗体大小。 • bsDialog：标准的对话框样式，即拖动窗体边框不能改变窗体大小，且窗体标题栏上只能出现帮助按钮和关闭按钮。 • bsSingle：窗体有单线边框。拖动窗体边框不能改变窗体大小（可出现最大/最小化按钮）。 • bsSizeable：窗体有单线边框，且拖动窗体边框可以改变窗体大小。

30. 多窗体设计 New Form Project Options…

31. 窗体的建立 program Project1; uses Forms, Unit1 in 'Unit1.pas' {Form1}, Unit2 in 'Unit2.pas' {Form2}, Unit3 in 'Unit3.pas' {Form3}; {$R *.RES} begin Application.Initialize; Application.CreateForm(TForm1, Form1); //建立窗体Form1 Application.CreateForm(TForm2, Form2); Application.CreateForm(TForm3, Form3); Application.Run; end.

32. 多窗体操作 Form2.show Form3.show

33. 多窗体操作 Form.showModal ModalResult:=1

34. 常量 对应值 mrNone 0 mrOk 1 mrCancel 2 mrAbort 3 mrRetry 4 mrIgnore 5 mrYes 6 mrNo 7 mrAll 8 ModalResult可选值 • 为窗体的ModalResult属性赋一非零值 ： ModalResult := mrOk • 设置按钮的ModalResult属性 • 按此按钮，它所在的模式窗体的modalResult 属性被置为mrOk。 • 使用BitBtm按钮 • 设为Kind属性值为bkYes • 它的Caption属性会自动设为&Yes • 它的Glyph属性会自动选择按钮的合适图标 • 当应用程序执行时，按此按钮，它所在的模式窗体的modalResult 属性被置为mrYes。

35. 多窗体（例5-4）

36. 主窗体单元代码 unit Unit1; … … implementation uses unit2, Unit3; //unit1代码中要用到form2和form3 {$R *.DFM} procedure TForm1.Button1Click(Sender: TObject); begin //“打开form2”按钮 edit1.text:=inttostr(form2.showmodal); end; procedure TForm1.Button2Click(Sender: TObject); begin //“打开form3”按钮 form3.show; //在unit1中以普通方式打开form3 end;

37. 按钮名称 属性名 属性值 说明 BitBtn1（Yes按钮） kind bkYes 按钮的modalResult属性也自动设为mrYes BitBtn2（No按钮） kind bkNo 按钮的modalResult属性也自动设为mrNo Button1（OK按钮） modalResult mrOk Caption OK 子窗体

38. 子窗体 procedure TForm3.Button1Click(Sender: TObject); Begin // “hide”按钮 form3.hide; end; procedure TForm3.Button2Click(Sender: TObject); begin // “close”按钮 form3.close; end; procedure TForm3.Button3Click(Sender: TObject); begin //“release”按钮 form3.release; end;