��������������������������������� ����������������������� Fall 2003 6.893 UI Design and Implementation 1 Fall 2003 6.893 UI Design and Implementation 2 ������������������������� �������������� 12. Grade Book 1. Spam Control 13. MRI Region of Interest 2. Firewall Visualization Analysis 3. Lecture Player 14. 6.370 Contest Interface 4. Timeliner IDE 15. Recitation Assignment 16. Sensor Network 5. Kerberos/AFS Ticket Administration Manager 17. Hotel Food Management 6. Semantic Web By Example 18. MIT Course Planner 7. ComicKit 19. Drink Database 8. Electronic Ballots 20. Music Theory Helper 21. Grade Recording & Student 9. Rummikub Game Performance Assessment 10.Airport Information Kiosk 22. IFC Rush Manager 11.Air Traffic Control Fall 2003 6.893 UI Design and Implementation 3 Fall 2003 6.893 UI Design and Implementation 4 1
����� �����!�� �!��������"�#�$$!�$�%����� � Input � Something you � re drawing isn � t appearing on the screen. Why not? � Wrong place � Wrong size � Wrong color � Wrong z-order Fall 2003 6.893 UI Design and Implementation 5 Fall 2003 6.893 UI Design and Implementation 6 &�������'(���������)��������� *!�������������'(���� � Raw input events � Console I/O uses blocking procedure calls print ( � Enter name: � ) � Mouse moved name = readLine(); � Mouse button pressed or released print ( � Enter phone number: � ) � Key pressed or released name = readLine(); � Translated input events � System controls the dialogue � GUI input uses event handling instead � Mouse click or double-click � Mouse entered or exited component � User has much more control over the dialogue (user control and freedom) � Keyboard focus gained or lost � User can click on almost anything � Character typed Fall 2003 6.893 UI Design and Implementation 7 Fall 2003 6.893 UI Design and Implementation 8 2
�������!���������������'(��� '(����+���� � Events are stored in a queue � Mouse position (X,Y) � User input tends to be bursty � Mouse button state � Queue saves application from hard real � Modifier key state (Ctrl, Shift, Alt, Meta) time constraints (i.e., having to finish � Timestamp handling each event before next one might occur) � Why is timestamp important? � Mouse moves are coalesced into a single event in queue � If application can � t keep up, then sketched lines have very few points Fall 2003 6.893 UI Design and Implementation 9 Fall 2003 6.893 UI Design and Implementation 10 '(�������� '(����"!�������,������$��!�� � Dispatch: choose target component for � While application is running � Block until an event is ready event � Get event from queue � Key event: component with keyboard focus � (sometimes) Translate raw event into higher-level events � Generates double-clicks, characters, focus, enter/exit, etc. � Mouse event: component under mouse � Translated events are put into the queue � Mouse capture : any component can grab � Dispatch event to target component mouse temporarily so that it receives all mouse � Who provides the event loop? events (e.g. for drag & drop) � High-level GUI toolkits do it internally (Java, VB, C#) � Propagation: if target component � Low-level toolkits require application to do it (MS Win, Palm, SWT) declines to handle event, the event passes up to its parent Fall 2003 6.893 UI Design and Implementation 11 Fall 2003 6.893 UI Design and Implementation 12 3
"��!$�!�$������������� ����������� � � A controller is a finite state machine Generic reusable controllers (Garnet and Amulet toolkits) � Selection interactor � Move/Grow interactor � Example: push button � New-point interactor � Text editing interactor � Rotating interactor � Hide the details of handling input events and finite state Armed machines press � mouse enter Useful only in a component model � Parameterized release exit Idle Hover enter � start, stop, abort events (invoke) � start location, inside/outside predicates mouse exit � feedback components � callback procedures on event transitions Disarmed release Fall 2003 6.893 UI Design and Implementation 13 Fall 2003 6.893 UI Design and Implementation 14 4
Recommend
More recommend
