COM148X1 Interactive 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 clicked 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 key KeyCode – the code of the pressed key, usually 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 = sender If b.Tag = 1 Then MsgBox(“Button 1 was pressed”) Else MsgBox(“Button 2 was pressed”) End If End Sub