1. 1 Prototyping for HCI Spring 2004 (Week 7) Jorge A. Toro

2. 2 The Language Repetitions

3. HCI430 – J.Toro3 Loops Do loop  Repeats a sequence of statements as long as the condition is true  Note: If the condition is false from the beginning, the statements are never executed Do While condition statement(s) Loop

4. HCI430 – J.Toro4 Loops While loop  Repeats a sequence of statements as long as the condition is true  Same as the prevouos Do Loop While condition statement(s) Wend

5. HCI430 – J.Toro5 Loops Do loop  This form of the Do loop executes the statements inside the loop before checking the condition.  Note: If the condition is false from the beginning, the statements are executed at least once. Do statement(s) Loop Until condition

6. HCI430 – J.Toro6 Loops For … Next loop Useful when we know how many times the loop should be executed. For counter = start To end statement(s) Next

7. HCI430 – J.Toro7 Loops For … Next loop This form of the loop increments the counter by 1 every time until it passes the end For counter = start To end statement(s) Next

8. HCI430 – J.Toro8 Loops For … Next loop This form of the loop increments the counter by s every time until it passes the end For counter = start To end Step s statement(s) Next

9. HCI430 – J.Toro9 Loops Breaking a loop  Sometimes you want to exit a loop before it reaches the end of the condition  Use Exit Do inside Do loops  Use Exit For inside For loops For counter = start To end Step s statement(s) If condition Then Exit For End if statement(s) Next If this condition is true, the loop is exited even if it hasn’t reached the end.

10. 10 The Language Arrays

11. HCI430 – J.Toro11 Arrays Store multiple values of the same type under one name Dim arrayname(n) As type n = number of elements the array can hold

12. HCI430 – J.Toro12 Arrays Filling out Dim Arr(5) As integer Arr(0) = 1 Arr(1) = 23 Arr(2) = 37 Arr(3) = 8 Arr(4) = 2

13. HCI430 – J.Toro13 Arrays Filling out Dim Arr(3) As String Arr(0) = “each cell” Arr(1) = “holds” Arr(2) = “a different string”

14. HCI430 – J.Toro14 Arrays Practice: What does this code do? Dim Arr(5) As String For i=0 To 4 Arr(i) = InputBox(“Enter text”) Next

15. 15 The Language Array Lists

16. HCI430 – J.Toro16 Array lists Array whose size is dynamically increased as required. They can store any kind of object.  Controls  Integers  Strings  …

17. HCI430 – J.Toro17 Array Lists Declaration Dim arrayname As New ArrayList() Note that the number of elements it can hold is not specified

18. HCI430 – J.Toro18 Array lists Adding an element to the array  Use the add method Dim lst As New ArrayList() lst.add(“Hello”) lst.add(1) lst.add(12.5) lst.add(True)

19. HCI430 – J.Toro19 Array lists What does this code do? Dim lst As New ArrayList() Dim obj As String obj = InputBox(“type in something”) lst.add(obj)

20. HCI430 – J.Toro20 Array lists Some properties/methods Count Item Insert Remove Add

21. HCI430 – J.Toro21 Array List Traversal Dim lst As New ArrayList() Dim elem as Type For Each elem In lst … Next This loop traverses the ArrayList by setting elem to each one of the objects in the array as it loops. This type must match the type of object in the array list

22. 22 Controls ListView

23. HCI430 – J.Toro23 ListView Allows you to display a list of items with item text and, optionally, an icon to identify the type of item.

24. HCI430 – J.Toro24 ListView ViewGets or sets how items are displayed in the control. SmallImageListGets or sets the ImageList to use when displaying items as small icons in the control LargeImageListGets or sets the ImageList to use when displaying items as small icons in the control StateImageListGets or sets the ImageList associated with application-defined states in the control CheckedItems Gets the currently checked items in the control CheckBoxesGets or sets a value indicating whether a check box appears next to each item in the control

25. HCI430 – J.Toro25 ListView If an ImageList is specified in the StateImageList property and the CheckBoxes property is set to true, the images at index positions 0 and 1 in the ImageList are displayed instead of the check box. The image at index position 0 is displayed instead of the unchecked check box, and the image at index position 1 is displayed instead of the checked check box.

26. HCI430 – J.Toro26 ListView Example… displaying smileys ;)  Create an ImageList control  Populate the ImageList with the images of the smileys  Create an ImageView control  Set the ImageView’s SmallImageList property to the lmageList control  Set the ImageView’s View property to SmallIcon  Add items to the ListView. Fill out the Items propety. For each item, set the ImageIndex property to the corresponding image.

27. HCI430 – J.Toro27 ListView Filling out  If you want to display as SmallIcon, LargeIcon, or List Use lst.items.add(item) where lst is the name of the ListView Control and item is the information you want to show in the list.

28. HCI430 – J.Toro28 ListView Filling out  If you want to display as Details Here, the details view has columns. To add columns, use the Columns property.

29. HCI430 – J.Toro29

30. HCI430 – J.Toro30

31. HCI430 – J.Toro31

32. HCI430 – J.Toro32 ListView Filling out  Now with the columns in place, how do we fill them out? 1. Create a ListViewItem object The text property of this object will store the info for the first column Dim elem as New ListViewItem elem.text = “Hello, I go in the first column”

33. HCI430 – J.Toro33 ListView Filling out 2.To fill out the following colums, use the SubItems property of the ListViewItem object you created. Dim elem as New ListViewItem elem.text = “Hello, I go in the first column” elem.SubItems.Add(“I go in the second column”) elem.SubItems.Add(“I go in the third column”) elem.SubItems.Add(“I go in the fourth column”)

34. HCI430 – J.Toro34 ListView Filling out 3.After adding the sub items, add the ListViewItem object into the ListView control Dim elem as New ListViewItem elem.text = “Hello, I go in the first column” elem.SubItems.Add(“I go in the second column”) elem.SubItems.Add(“I go in the third column”) elem.SubItems.Add(“I go in the fourth column”) Lst.items.Add(elem)

35. 35 Controls ProgressBar

36. HCI430 – J.Toro36 ProgressBar A ProgressBar control visually indicates the progress of a lengthy operation (copying something, transferring data, etc..). It displays a bar that fills in from left to right with the system highlight color as an operation progresses.

37. HCI430 – J.Toro37 ProgressBar ValueGets or sets the current position of the progress bar MaximumThis property specifies the upper limit of the Value property MinimumThis property specifies the lower limit of the Value property StepGets or sets the amount by which a call to the PerformStep method increases the current position of the progress bar PerformStepIncrements the value of the progress bar by the amount specified by the Step property IncrementEnables you to increment the value of the progress bar by a specific amount.

38. 38 Controls Dialogs

39. HCI430 – J.Toro39 OpenFileDialog Represents a common dialog box that displays the control that allows the user to open a file.

40. HCI430 – J.Toro40 OpenFileDialog To use it  Drag an instance of the OpenFileDialog control over the form - OR -  Create the dialog in code Dim dlg As New OpenFileDialog()

41. HCI430 – J.Toro41 Drag an OpenFileDialog control over the form

42. HCI430 – J.Toro42 OpenFileDialog  The rest of the work is in the code Use the ShowDialog() method to display the dialog. This will return a value indicating what the user clicked (Ok or Cancel) Use the Filename property to get the filename selected by the user. Use the OpenFile() method to open the file and have it ready for access.

43. HCI430 – J.Toro43 OpenFileDialog Dim myStream As System.IO.Stream If OpenFileDialog1.ShowDialog() = DialogResult.OK Then myStream = OpenFileDialog1.OpenFile() If Not (myStream Is Nothing) Then ’Code for reading the file… myStream.Close() End If ’Sets the Text property of the form with the ’filename chosen by the user Me.Text = OpenFileDialog1.FileName End If

44. HCI430 – J.Toro44 OpenFileDialog InitialDirectory Gets or sets the initial directory displayed by the file dialog box. Filter Gets or sets the current file name filter string, which determines the choices that appear in the "Save as file type" or "Files of type" box in the dialog box. FilterIndex Gets or sets the index of the filter currently selected in the file dialog box. Filename Gets or sets a string containing the file name selected in the file dialog box. OpenFile Opens the file selected by the user, with read-only permission. The file is specified by the FileName property.

45. HCI430 – J.Toro45 SaveFileDialog Represents a common dialog box that allows the user to specify options for saving a file.

46. HCI430 – J.Toro46 FontDialog Represents a common dialog box that displays a list of fonts that are currently installed on the system.

47. HCI430 – J.Toro47 FontDialog To use it  Drag an instance of the FontDialog control over the form - OR -  Create the dialog in code Dim dlg As New FontDialog()

48. HCI430 – J.Toro48 Drag an FontDialog control over the form

49. HCI430 – J.Toro49 FontDialog FontDialog1.ShowColor = True If FontDialog1.ShowDialog() <> DialogResult.Cancel Then ’Sets the new font and new foreground color for the textbox control TextBox1.Font = FontDialog1.Font TextBox1.ForeColor = FontDialog1.Color End If

50. HCI430 – J.Toro50 FontDialog FontGets or sets the selected font ColorGets or sets the selected font color ShowColorGets or sets a value indicating whether the dialog box displays the color choice ShowEffectsGets or sets a value indicating whether the dialog box contains controls that allow the user to specify strikethrough, underline, and text color options FixedPitchOnlyGets or sets a value indicating whether the dialog box allows only the selection of fixed-pitch fonts.

51. HCI430 – J.Toro51 Questions?