1. CSCI 3327 Visual Basic Chapter 10: Windows Forms GUI: A Deeper Look UTPA – Fall 2011

2. Objectives In this chapter, you will –Learn the design of graphical user interfaces (GUIs) –Get familiar with programming mouse and keyboard events –Know how to create and manipulate controls E.g., Panel, ToolTip, Menu, MonthCalendar, LinkLabel, and CheckedListBox, 2

3. Controls 3

4. Controls and Components ToolBox A form is a container for controls and components Visual Studio generates code of controls and components when you drag them onto the form 4

5. Common Properties of a Form AcceptButton –Button that is clicked when Enter key is pressed AutoScroll CancelButton –Button that is clicked when Esc key is pressed FormBorderStyle Font Text 5

6. Common Methods & Events of a Form Methods –Close Close a form and release its resources –Hide Hide a form without releasing or destroying its resources –Show Display a hidden form Events –Load 6

7. Create Event Handlers In the code editor window –Select a control (e.g. button) from the left combo box –Select an event from the right combo box –Code is generated automatically 7

8. Control Properties and Methods Properties –TabIndex Controls receive focus in the order of TabIndex property –TabStop Prevent the control from receiving the focus in this manner –Enabled vs. Visible Methods –Focus –Hide: set Visible property to False –Show: set Visible property to True 8

9. GroupBoxes and Panels Properties of GroupBox –Controls –Text Properties of Panel –AutoScroll –BorderStyle –Controls 9

10. Example 14.12: PanelDemo.vb URL: –http://media.pearsoncmg.com/ph/esm/deitel/vb_ht p_2010/codeexamples.htmlhttp://media.pearsoncmg.com/ph/esm/deitel/vb_ht p_2010/codeexamples.html Display the button you clicked on Panel –Hanldes Button1.Click, Button2.Click –The same method for multiple events –Ctype (sender, Button).Text 10

11. Tool Tips A helpful text that appears when the mouse hovers over a GUI control Drag ToolTip component to form –It appears below the form in the design mode Each control will have an extra property –ToolTip on ToolTip1 11

12. Mouse-Event Handling Mouse events –Clicks, presses, and moves –For most mouse events, information about the event is passed to the event-handling method by an object of class MouseEventArgs Mouse pointer's x- and y-coordinates The mouse button pressed (Right, Left or Middle) The number of times the mouse was clicked 12

13. Mouse-Event Handling (cont'd) Mouse events –Mouse event with event argument of type EventArgs MouseEnter, MouseLeave –Mouse event with event argument of type MouseEventArgs MouseDown, MouseHover, MouseMove, MouseUp –Class MouseEventArgs properties Button, Clicks, X, Y 13

14. Example 14.18: Painter.vb URL: –http://media.pearsoncmg.com/ph/esm/deitel/vb_ht p_2010/codeexamples.htmlhttp://media.pearsoncmg.com/ph/esm/deitel/vb_ht p_2010/codeexamples.html Painter_MouseMove –e As MouseEventArgs e.X, e.Y –g As Graphics = CreateGraphics() –G.FillEllipse(New SolidBrush(Color.BlueViolet), e.X, e.Y, 4, 4) 14 (e.X, e.Y) 4 4

15. Keyboard-Event Handling Key Events with Event Arguments of Type KeyEventArgs –KeyDown, KeyUp Key Events with Event Arguments of Type KeyPressEventArgs –KeyPress Class KeyPressEventArgs properties –KeyChar (ASCII character for the key pressed) –Handled (indicating wether the KeyPress event was handled) Class KeyEventArgs properties –Alt, Control, Shift, Handled, KeyCode 15

16. Example 14.20: KeyDemo URL: –http://media.pearsoncmg.com/ph/esm/deitel/vb_ht p_2010/codeexamples.htmlhttp://media.pearsoncmg.com/ph/esm/deitel/vb_ht p_2010/codeexamples.html ByVal e As KeyPressEventArgs –e.KeyChar ByVal e As KeyEventArgs –e.Alt, e.Shift, e.Control –e.KeyCode.ToString(), e.KeyData.ToString(), e.KeyValue.ToString() 16

17. Menu –Shortcut Keys Type an ampersand (&) symbol before the character to be underlined To display &, use && –To add shortcut keys for menu items Set the ShortcutKeys property –Other types of menu items Separator bar ComboBox MenuItem TextBox 17

18. Example 14.25: MenuTest.vb URL: –http://media.pearsoncmg.com/ph/esm/deitel/vb_ht p_2010/codeexamples.htmlhttp://media.pearsoncmg.com/ph/esm/deitel/vb_ht p_2010/codeexamples.html blackToolStripMenuItem.Checked = True displayLabel.Font = New Font("Times New Roman", 14, displayLabel.Font.Style) Application.Exit() 18

19. MonthCalendar Control Properties –FirstDayOfWeek –MaxDate, MinDate –MaxSelectionCount –SelectionRange Event –DateChanged 19

20. Example 14.29: DateTimePicker URL: –http://media.pearsoncmg.com/ph/esm/deitel/vb_htp_20 10/codeexamples.htmlhttp://media.pearsoncmg.com/ph/esm/deitel/vb_htp_20 10/codeexamples.html dropOffDateTimePicker.MinDate=DateTime.Tod ay dropOffDateTimePicker.MaxDate=DateTime.Tod ay.AddYears(1) Dim dropOffDate As DateTime = dropOffDateTimePicker.Value –dropOffDate.DayOfWeek=DayOfWeek.Friday –dropOffDate.AddDays(3).ToLongDateString() 20

21. LinkLabel Control Display links to other resources Example 14.31: –URL:http://media.pearsoncmg.com/ph/esm/deitel/ vb_htp_2010/codeexamples.htmlURL:http://media.pearsoncmg.com/ph/esm/deitel/ vb_htp_2010/codeexamples.html cDriveLinkLabel.LinkClicked –cDriveLinkLabel.LinkVisited = True –Process.Start(“C:\”) –Process.Start(“http://www.deitel.com”) –Process.Start(“notepad”) 21

22. Process.Start(" ") Effect of Process.Start(" ") –Start  Run cmd calc notepad 22

23. ListBox and CheckedListBox Controls ListBox properties –MultiColumn –SelectedIndex -1 – no items are selected If multiple items are selected, one of selected indices is returned –SelectedIndices For multiple selected items –SelectedItem, SelectedItems –SelectionMode: None, One, MultiSimple, MultiExtended –Sorted: alphabetically, False by default 23

24. ListBox and CheckedListBox Controls (cont'd) ListBox methods –ClearSelected –GetSelected Take an index as an argument, and return True if the corresponding item is selected –myListBox.Items.Add(myListItem) ListBox Events –SelectedIndexChanged 24

25. ListBox and CheckedListBox Controls (cont'd) CheckedListBox properties –CheckedItems A collection of items that are checked –CheckedIndices A collection of indices for all checked items –CheckOnClick False by Default –SelectionMode Determine how many items can be checked: One or None 25

26. ListBox and CheckedListBox Controls (cont'd) CheckedListBox Method –GetItemChecked Take an index and returns True if the corresponding items is checked CheckedListBox Event –ItemCheck ItemCheckEventArgs –CurrentValue –Index –NewValue 26

27. Example 14.35: CheckedListBoxTest.vb URL: –http://media.pearsoncmg.com/ph/esm/deitel/vb_ht p_2010/codeexamples.htmlhttp://media.pearsoncmg.com/ph/esm/deitel/vb_ht p_2010/codeexamples.html itemCheckedListBox.SelectedItem.ToString() If e.NewValue = CheckState.Checked 27

28. Multiple Document Interface (MDI) Windows Single document interface (SDI) vs. multiple document interface (MDI) MDI: Parent and child windows 28 MDI parent MDI child

29. Multiple Document Interface (MDI) Windows (cont'd) Specify a form is an MDI container –Set IsMdiContainer property to True Create a class for child forms –Solution Explorer  Add  Windows Form… Create a new child form Set MdiParent property to the parent form Call the child form’s Show method 29

30. Multiple Document Interface (MDI) Windows (cont'd) MDI container features –MdiChildren property Return an array of child Form references –ActiveMdiChild property Return a reference to the active child window Tracking child windows in menus –MenuStrip class provides property MdiWindowListItem To check which child windows are open in an MDI container 30

31. Multiple Document Interface (MDI) Windows (cont'd) Arrange child windows –Parent form has method LayoutMdi Tiled windows (value TileHorizontal or TileVertical) Cascaded windows (value Cascade) 31

32. Example 14.42: UsingMDI.vb URL: –http://media.pearsoncmg.com/ph/esm/deitel/vb_htp_20 10/codeexamples.htmlhttp://media.pearsoncmg.com/ph/esm/deitel/vb_htp_20 10/codeexamples.html Dim child = new ChildForm(“XXX”, “vb2008htp") –child.MdiParent = Me –child.Show() Me.LayoutMdi(MdiLayout.Cascade) Me.LayoutMdi(MdiLayout.TileHorizontal) Me.LayoutMdi(MdiLayout.TileVertical) 32

33. Animation with the Timer Component Timer component generates Tick events at fixed time interval –Timer component has Interval property The number of milliseconds between events –By default, timers are disabled Set Enabled property to True 33

34. Example 14.47: AnimationDemo.vb URL: –http://media.pearsoncmg.com/ph/esm/deitel/vb_ht p_2010/codeexamples.htmlhttp://media.pearsoncmg.com/ph/esm/deitel/vb_ht p_2010/codeexamples.html Display a new image every 50 milliseconds –Handles animationTimer.Tick 34

35. 35