1 Prototyping for HCI Spring 2004 (Week 7) Jorge A. Toro.
-
date post
19-Dec-2015 -
Category
Documents
-
view
216 -
download
0
Transcript of 1 Prototyping for HCI Spring 2004 (Week 7) Jorge A. Toro.
![Page 1: 1 Prototyping for HCI Spring 2004 (Week 7) Jorge A. Toro.](https://reader036.fdocuments.us/reader036/viewer/2022062714/56649d3e5503460f94a17aab/html5/thumbnails/1.jpg)
1
Prototyping for HCI
Spring 2004 (Week 7)Jorge A. Toro
![Page 2: 1 Prototyping for HCI Spring 2004 (Week 7) Jorge A. Toro.](https://reader036.fdocuments.us/reader036/viewer/2022062714/56649d3e5503460f94a17aab/html5/thumbnails/2.jpg)
2
The Language
Repetitions
![Page 3: 1 Prototyping for HCI Spring 2004 (Week 7) Jorge A. Toro.](https://reader036.fdocuments.us/reader036/viewer/2022062714/56649d3e5503460f94a17aab/html5/thumbnails/3.jpg)
HCI430 – J.Toro 3
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
![Page 4: 1 Prototyping for HCI Spring 2004 (Week 7) Jorge A. Toro.](https://reader036.fdocuments.us/reader036/viewer/2022062714/56649d3e5503460f94a17aab/html5/thumbnails/4.jpg)
HCI430 – J.Toro 4
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
![Page 5: 1 Prototyping for HCI Spring 2004 (Week 7) Jorge A. Toro.](https://reader036.fdocuments.us/reader036/viewer/2022062714/56649d3e5503460f94a17aab/html5/thumbnails/5.jpg)
HCI430 – J.Toro 5
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
![Page 6: 1 Prototyping for HCI Spring 2004 (Week 7) Jorge A. Toro.](https://reader036.fdocuments.us/reader036/viewer/2022062714/56649d3e5503460f94a17aab/html5/thumbnails/6.jpg)
HCI430 – J.Toro 6
Loops
For … Next loop Useful when we know how many times the
loop should be executed.
For counter = start To end statement(s)Next
![Page 7: 1 Prototyping for HCI Spring 2004 (Week 7) Jorge A. Toro.](https://reader036.fdocuments.us/reader036/viewer/2022062714/56649d3e5503460f94a17aab/html5/thumbnails/7.jpg)
HCI430 – J.Toro 7
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
![Page 8: 1 Prototyping for HCI Spring 2004 (Week 7) Jorge A. Toro.](https://reader036.fdocuments.us/reader036/viewer/2022062714/56649d3e5503460f94a17aab/html5/thumbnails/8.jpg)
HCI430 – J.Toro 8
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
![Page 9: 1 Prototyping for HCI Spring 2004 (Week 7) Jorge A. Toro.](https://reader036.fdocuments.us/reader036/viewer/2022062714/56649d3e5503460f94a17aab/html5/thumbnails/9.jpg)
HCI430 – J.Toro 9
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.
![Page 10: 1 Prototyping for HCI Spring 2004 (Week 7) Jorge A. Toro.](https://reader036.fdocuments.us/reader036/viewer/2022062714/56649d3e5503460f94a17aab/html5/thumbnails/10.jpg)
10
The Language
Arrays
![Page 11: 1 Prototyping for HCI Spring 2004 (Week 7) Jorge A. Toro.](https://reader036.fdocuments.us/reader036/viewer/2022062714/56649d3e5503460f94a17aab/html5/thumbnails/11.jpg)
HCI430 – J.Toro 11
Arrays
Store multiple values of the same type under one name
Dim arrayname(n) As type
n = number of elements the array can hold
![Page 12: 1 Prototyping for HCI Spring 2004 (Week 7) Jorge A. Toro.](https://reader036.fdocuments.us/reader036/viewer/2022062714/56649d3e5503460f94a17aab/html5/thumbnails/12.jpg)
HCI430 – J.Toro 12
Arrays
Filling out
Dim Arr(5) As integer
Arr(0) = 1Arr(1) = 23Arr(2) = 37Arr(3) = 8Arr(4) = 2
![Page 13: 1 Prototyping for HCI Spring 2004 (Week 7) Jorge A. Toro.](https://reader036.fdocuments.us/reader036/viewer/2022062714/56649d3e5503460f94a17aab/html5/thumbnails/13.jpg)
HCI430 – J.Toro 13
Arrays
Filling out
Dim Arr(3) As String
Arr(0) = “each cell”Arr(1) = “holds”Arr(2) = “a different string”
![Page 14: 1 Prototyping for HCI Spring 2004 (Week 7) Jorge A. Toro.](https://reader036.fdocuments.us/reader036/viewer/2022062714/56649d3e5503460f94a17aab/html5/thumbnails/14.jpg)
HCI430 – J.Toro 14
Arrays
Practice: What does this code do?
Dim Arr(5) As String
For i=0 To 4 Arr(i) = InputBox(“Enter text”)Next
![Page 15: 1 Prototyping for HCI Spring 2004 (Week 7) Jorge A. Toro.](https://reader036.fdocuments.us/reader036/viewer/2022062714/56649d3e5503460f94a17aab/html5/thumbnails/15.jpg)
15
The Language
Array Lists
![Page 16: 1 Prototyping for HCI Spring 2004 (Week 7) Jorge A. Toro.](https://reader036.fdocuments.us/reader036/viewer/2022062714/56649d3e5503460f94a17aab/html5/thumbnails/16.jpg)
HCI430 – J.Toro 16
Array lists
Array whose size is dynamically increased as required.
They can store any kind of object. Controls Integers Strings …
![Page 17: 1 Prototyping for HCI Spring 2004 (Week 7) Jorge A. Toro.](https://reader036.fdocuments.us/reader036/viewer/2022062714/56649d3e5503460f94a17aab/html5/thumbnails/17.jpg)
HCI430 – J.Toro 17
Array Lists
Declaration
Dim arrayname As New ArrayList()
Note that the number of elements it can hold is not specified
![Page 18: 1 Prototyping for HCI Spring 2004 (Week 7) Jorge A. Toro.](https://reader036.fdocuments.us/reader036/viewer/2022062714/56649d3e5503460f94a17aab/html5/thumbnails/18.jpg)
HCI430 – J.Toro 18
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)
![Page 19: 1 Prototyping for HCI Spring 2004 (Week 7) Jorge A. Toro.](https://reader036.fdocuments.us/reader036/viewer/2022062714/56649d3e5503460f94a17aab/html5/thumbnails/19.jpg)
HCI430 – J.Toro 19
Array lists
What does this code do?
Dim lst As New ArrayList()
Dim obj As String
obj = InputBox(“type in something”)
lst.add(obj)
![Page 20: 1 Prototyping for HCI Spring 2004 (Week 7) Jorge A. Toro.](https://reader036.fdocuments.us/reader036/viewer/2022062714/56649d3e5503460f94a17aab/html5/thumbnails/20.jpg)
HCI430 – J.Toro 20
Array lists
Some properties/methods
Count
Item
Insert
Remove
Add
![Page 21: 1 Prototyping for HCI Spring 2004 (Week 7) Jorge A. Toro.](https://reader036.fdocuments.us/reader036/viewer/2022062714/56649d3e5503460f94a17aab/html5/thumbnails/21.jpg)
HCI430 – J.Toro 21
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
![Page 22: 1 Prototyping for HCI Spring 2004 (Week 7) Jorge A. Toro.](https://reader036.fdocuments.us/reader036/viewer/2022062714/56649d3e5503460f94a17aab/html5/thumbnails/22.jpg)
22
Controls
ListView
![Page 23: 1 Prototyping for HCI Spring 2004 (Week 7) Jorge A. Toro.](https://reader036.fdocuments.us/reader036/viewer/2022062714/56649d3e5503460f94a17aab/html5/thumbnails/23.jpg)
HCI430 – J.Toro 23
ListView
Allows you to display a list of items with item text and, optionally, an icon to identify the type of item.
![Page 24: 1 Prototyping for HCI Spring 2004 (Week 7) Jorge A. Toro.](https://reader036.fdocuments.us/reader036/viewer/2022062714/56649d3e5503460f94a17aab/html5/thumbnails/24.jpg)
HCI430 – J.Toro 24
ListView
View Gets or sets how items are displayed in the control.
SmallImageList Gets or sets the ImageList to use when displaying items as small icons in the control
LargeImageList Gets or sets the ImageList to use when displaying items as small icons in the control
StateImageList Gets or sets the ImageList associated with application-defined states in the control
CheckedItems Gets the currently checked items in the control CheckBoxes Gets or sets a value indicating whether a check box appears
next to each item in the control
![Page 25: 1 Prototyping for HCI Spring 2004 (Week 7) Jorge A. Toro.](https://reader036.fdocuments.us/reader036/viewer/2022062714/56649d3e5503460f94a17aab/html5/thumbnails/25.jpg)
HCI430 – J.Toro 25
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.
![Page 26: 1 Prototyping for HCI Spring 2004 (Week 7) Jorge A. Toro.](https://reader036.fdocuments.us/reader036/viewer/2022062714/56649d3e5503460f94a17aab/html5/thumbnails/26.jpg)
HCI430 – J.Toro 26
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.
![Page 27: 1 Prototyping for HCI Spring 2004 (Week 7) Jorge A. Toro.](https://reader036.fdocuments.us/reader036/viewer/2022062714/56649d3e5503460f94a17aab/html5/thumbnails/27.jpg)
HCI430 – J.Toro 27
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.
![Page 28: 1 Prototyping for HCI Spring 2004 (Week 7) Jorge A. Toro.](https://reader036.fdocuments.us/reader036/viewer/2022062714/56649d3e5503460f94a17aab/html5/thumbnails/28.jpg)
HCI430 – J.Toro 28
ListView
Filling out If you want to display as Details
Here, the details view has columns. To add columns, use the Columns property.
![Page 29: 1 Prototyping for HCI Spring 2004 (Week 7) Jorge A. Toro.](https://reader036.fdocuments.us/reader036/viewer/2022062714/56649d3e5503460f94a17aab/html5/thumbnails/29.jpg)
HCI430 – J.Toro 29
![Page 30: 1 Prototyping for HCI Spring 2004 (Week 7) Jorge A. Toro.](https://reader036.fdocuments.us/reader036/viewer/2022062714/56649d3e5503460f94a17aab/html5/thumbnails/30.jpg)
HCI430 – J.Toro 30
![Page 31: 1 Prototyping for HCI Spring 2004 (Week 7) Jorge A. Toro.](https://reader036.fdocuments.us/reader036/viewer/2022062714/56649d3e5503460f94a17aab/html5/thumbnails/31.jpg)
HCI430 – J.Toro 31
![Page 32: 1 Prototyping for HCI Spring 2004 (Week 7) Jorge A. Toro.](https://reader036.fdocuments.us/reader036/viewer/2022062714/56649d3e5503460f94a17aab/html5/thumbnails/32.jpg)
HCI430 – J.Toro 32
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”
![Page 33: 1 Prototyping for HCI Spring 2004 (Week 7) Jorge A. Toro.](https://reader036.fdocuments.us/reader036/viewer/2022062714/56649d3e5503460f94a17aab/html5/thumbnails/33.jpg)
HCI430 – J.Toro 33
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”)
![Page 34: 1 Prototyping for HCI Spring 2004 (Week 7) Jorge A. Toro.](https://reader036.fdocuments.us/reader036/viewer/2022062714/56649d3e5503460f94a17aab/html5/thumbnails/34.jpg)
HCI430 – J.Toro 34
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)
![Page 35: 1 Prototyping for HCI Spring 2004 (Week 7) Jorge A. Toro.](https://reader036.fdocuments.us/reader036/viewer/2022062714/56649d3e5503460f94a17aab/html5/thumbnails/35.jpg)
35
Controls
ProgressBar
![Page 36: 1 Prototyping for HCI Spring 2004 (Week 7) Jorge A. Toro.](https://reader036.fdocuments.us/reader036/viewer/2022062714/56649d3e5503460f94a17aab/html5/thumbnails/36.jpg)
HCI430 – J.Toro 36
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.
![Page 37: 1 Prototyping for HCI Spring 2004 (Week 7) Jorge A. Toro.](https://reader036.fdocuments.us/reader036/viewer/2022062714/56649d3e5503460f94a17aab/html5/thumbnails/37.jpg)
HCI430 – J.Toro 37
ProgressBar
Value Gets or sets the current position of the progress bar
Maximum This property specifies the upper limit of the Value property
Minimum This property specifies the lower limit of the Value property
Step Gets or sets the amount by which a call to the PerformStep method increases the current position of the progress bar
PerformStep Increments the value of the progress bar by the amount specified by the Step property
Increment Enables you to increment the value of the progress bar by a specific amount.
![Page 38: 1 Prototyping for HCI Spring 2004 (Week 7) Jorge A. Toro.](https://reader036.fdocuments.us/reader036/viewer/2022062714/56649d3e5503460f94a17aab/html5/thumbnails/38.jpg)
38
Controls
Dialogs
![Page 39: 1 Prototyping for HCI Spring 2004 (Week 7) Jorge A. Toro.](https://reader036.fdocuments.us/reader036/viewer/2022062714/56649d3e5503460f94a17aab/html5/thumbnails/39.jpg)
HCI430 – J.Toro 39
OpenFileDialog
Represents a common dialog box that displays the control that allows the user to open a file.
![Page 40: 1 Prototyping for HCI Spring 2004 (Week 7) Jorge A. Toro.](https://reader036.fdocuments.us/reader036/viewer/2022062714/56649d3e5503460f94a17aab/html5/thumbnails/40.jpg)
HCI430 – J.Toro 40
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()
![Page 41: 1 Prototyping for HCI Spring 2004 (Week 7) Jorge A. Toro.](https://reader036.fdocuments.us/reader036/viewer/2022062714/56649d3e5503460f94a17aab/html5/thumbnails/41.jpg)
HCI430 – J.Toro 41
Drag an OpenFileDialog control over the form
![Page 42: 1 Prototyping for HCI Spring 2004 (Week 7) Jorge A. Toro.](https://reader036.fdocuments.us/reader036/viewer/2022062714/56649d3e5503460f94a17aab/html5/thumbnails/42.jpg)
HCI430 – J.Toro 42
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.
![Page 43: 1 Prototyping for HCI Spring 2004 (Week 7) Jorge A. Toro.](https://reader036.fdocuments.us/reader036/viewer/2022062714/56649d3e5503460f94a17aab/html5/thumbnails/43.jpg)
HCI430 – J.Toro 43
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.FileNameEnd If
![Page 44: 1 Prototyping for HCI Spring 2004 (Week 7) Jorge A. Toro.](https://reader036.fdocuments.us/reader036/viewer/2022062714/56649d3e5503460f94a17aab/html5/thumbnails/44.jpg)
HCI430 – J.Toro 44
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.
![Page 45: 1 Prototyping for HCI Spring 2004 (Week 7) Jorge A. Toro.](https://reader036.fdocuments.us/reader036/viewer/2022062714/56649d3e5503460f94a17aab/html5/thumbnails/45.jpg)
HCI430 – J.Toro 45
SaveFileDialog
Represents a common dialog box that allows the user to specify options for saving a file.
![Page 46: 1 Prototyping for HCI Spring 2004 (Week 7) Jorge A. Toro.](https://reader036.fdocuments.us/reader036/viewer/2022062714/56649d3e5503460f94a17aab/html5/thumbnails/46.jpg)
HCI430 – J.Toro 46
FontDialog
Represents a common dialog box that displays a list of fonts that are currently installed on the system.
![Page 47: 1 Prototyping for HCI Spring 2004 (Week 7) Jorge A. Toro.](https://reader036.fdocuments.us/reader036/viewer/2022062714/56649d3e5503460f94a17aab/html5/thumbnails/47.jpg)
HCI430 – J.Toro 47
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()
![Page 48: 1 Prototyping for HCI Spring 2004 (Week 7) Jorge A. Toro.](https://reader036.fdocuments.us/reader036/viewer/2022062714/56649d3e5503460f94a17aab/html5/thumbnails/48.jpg)
HCI430 – J.Toro 48
Drag an FontDialog control over the form
![Page 49: 1 Prototyping for HCI Spring 2004 (Week 7) Jorge A. Toro.](https://reader036.fdocuments.us/reader036/viewer/2022062714/56649d3e5503460f94a17aab/html5/thumbnails/49.jpg)
HCI430 – J.Toro 49
FontDialog
FontDialog1.ShowColor = TrueIf FontDialog1.ShowDialog() <> DialogResult.Cancel Then ’Sets the new font and new foreground color for the
textbox control TextBox1.Font = FontDialog1.Font TextBox1.ForeColor = FontDialog1.ColorEnd If
![Page 50: 1 Prototyping for HCI Spring 2004 (Week 7) Jorge A. Toro.](https://reader036.fdocuments.us/reader036/viewer/2022062714/56649d3e5503460f94a17aab/html5/thumbnails/50.jpg)
HCI430 – J.Toro 50
FontDialog
Font Gets or sets the selected font
Color Gets or sets the selected font color
ShowColor Gets or sets a value indicating whether the dialog box displays the color choice
ShowEffects Gets or sets a value indicating whether the dialog box contains controls that allow the user to specify strikethrough, underline, and text color options
FixedPitchOnly Gets or sets a value indicating whether the dialog box allows only the selection of fixed-pitch fonts.
![Page 51: 1 Prototyping for HCI Spring 2004 (Week 7) Jorge A. Toro.](https://reader036.fdocuments.us/reader036/viewer/2022062714/56649d3e5503460f94a17aab/html5/thumbnails/51.jpg)
HCI430 – J.Toro 51
Questions?