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

1

Prototyping for HCI

Spring 2004 (Week 7)Jorge A. Toro

2

The Language

Repetitions

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

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

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

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

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

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

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.

10

The Language

Arrays

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


Arrays

Filling out

Dim Arr(5) As integer

Arr(0) = 1Arr(1) = 23Arr(2) = 37Arr(3) = 8Arr(4) = 2


Arrays

Filling out

Dim Arr(3) As String

Arr(0) = “each cell”Arr(1) = “holds”Arr(2) = “a different string”


Arrays

Practice: What does this code do?

Dim Arr(5) As String

For i=0 To 4 Arr(i) = InputBox(“Enter text”)Next

15

The Language

Array Lists


Array lists

Array whose size is dynamically increased as required.

They can store any kind of object. Controls Integers Strings …


Array Lists

Declaration

Dim arrayname As New ArrayList()

Note that the number of elements it can hold is not specified


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)


Array lists

What does this code do?


Dim obj As String

obj = InputBox(“type in something”)

lst.add(obj)


Array lists

Some properties/methods

Count

Item

Insert

Remove

Add


Array List

Traversal


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

Controls

ListView


ListView

Allows you to display a list of items with item text and, optionally, an icon to identify the type of item.


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


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.


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.


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.


ListView

Filling out If you want to display as Details

Here, the details view has columns. To add columns, use the Columns property.





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”


ListView

Filling out

2. To fill out the following colums, use the SubItems property of the ListViewItem object you created.



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”)


ListView

Filling out

3. After adding the sub items, add the ListViewItem object into the ListView control



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

Controls

ProgressBar


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.


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.

38

Controls

Dialogs


OpenFileDialog

Represents a common dialog box that displays the control that allows the user to open a file.


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()


Drag an OpenFileDialog control over the form


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.


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


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.


SaveFileDialog

Represents a common dialog box that allows the user to specify options for saving a file.


FontDialog

Represents a common dialog box that displays a list of fonts that are currently installed on the system.


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()


Drag an FontDialog control over the form


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


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.


Questions?

Documents

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