COM148X1Interactive Programming

Lecture 7

Topics Today

HCI Event Handling

HCI

What is HCI

HCI stands for Human Computer Interaction, it is a field of study of designing user-friendly computer interface

There are different guidelines available included Apple, Microsoft … etc.

What is going to reference mainly from the guidelines provided from Apple

User Interface Design

Use metaphors to present the concepts and features of the application Folder icon represents a directory in file system Recycle Bin icon represents useless files places

Reflect users’ mental model, satisfy users’ expectation of what to do and what to get Familiarity Simplicity Availability Discoverability

User Interface Design (cont’)

Choose explicit action (e.g. show the command of selected object in menu) and implied action (e.g. drag a document icon to word processor) to match users’ expectation

Make user have a feeling of manipulating the data directly Allow users to rearrange the play-list of media

player by drag and drop operation

User Interface Design (cont’)

Provide different level of controls to different level of users (novice to expert)

Provide feedback for users Show progress when application is going to take

a lengthy operation Consistence control among other applications

Windows’ close button always appears in top-right corner

User Interface Design (cont’)

WYSIWYG (What Is See Is What You Get), keep the output consistency among different output devices

Allow users to undo their actions or warn them if something is going to change irreversible

Keep the user interface consist for the whole application Make the disabled menu items dimmer instead of

hide them away from user

User Interface Design (cont’)

Keep user interface “good” looking Use high resolution icons Use anti-alias fonts Use large enough font size

Use model forms as less as possible (forms force focus on themselves such as alert windows)

Last but not the least, simple is good

Test User Interface

Create prototype is a way to test if the user satisfy the user interface design

In prototype, the program not necessary truly do the job but it should be able to demonstrate the workflow when the application completed

Event Handling

Event

An event is an action which programmer can handle in code

An event can be generated by User (clicking a button) System (timer completed count down) Programmer (change the attribute of control)

In VB, different control expose different set of event for programmer to handle

Event Handler

Event handler is the program which handle specific event(s)

Create Event Handler

Step 1: in code view, select the control which generates event

Create Event Handler (cont’)

Step 2: select the event of the control

Create Event Handler (cont’)

Step 3: add code to handle the event

Event Argument

The details of event is store in the EventArgs parameter

Different event will generate different kinds of EventArgs

Example of EventArgs EventArgs (no details provided) MouseEventArgs KeyEventArgs

MouseEventArgs

Store the detail for MouseUp, MouseDown and MouseMove event

X – x coordinate of the mouse Y – y coordinate of the mouse Button – mouse button pressed Clicks – number of time the button was clicke

d Delta – the count of mouse wheel rotated

KeyEventArgs

Store the details of KeyUp and KeyDown event

Alt – indicate if Alt key was pressed Control – indicate if Ctrl key was pressed Shift – indicate if Shift key was pressed KeyValue – the ASCII value of the pressed k

ey KeyCode – the code of the pressed key, usua

lly used for special keys detection

Handle Multiple Events

Sometimes, it is convenient to handle multiple events by 1 event handler only

For this case, programmers can set different value of Tag of each control

Instead of create new event handler, append the event to the same event handler

Check the Tag of the control in event handler to identify the source of event

Handle Multiple Event Example

Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click, Button2.Click

Dim b As Button = senderIf b.Tag = 1 Then

MsgBox(“Button 1 was pressed”)Else

MsgBox(“Button 2 was pressed”)End If

End Sub