1Fall 2003 6.893 UI Design and Implementation 1 Fall 2003 6.893 UI Design and Implementation 2 Fall 2003 6.893 UI Design and Implementation 3 Fall 2003 6.893 UI Design and Implementation 4 1. Spam Control2. Firewall Visualization3. Lecture Player4. Timeliner IDE5. Kerberos/AFS Ticket Manager6. Semantic Web By Example7. ComicKit8. Electronic Ballots9. Rummikub Game10.Airport Information Kiosk11.Air Traffic Control12. Grade Book13. MRI Region of Interest Analysis14. 6.370 Contest Interface15. Recitation Assignment16. Sensor Network Administration17. Hotel Food Management18. MIT Course Planner19. Drink Database20. Music Theory Helper21. Grade Recording & Student Performance Assessment22. IFC Rush Manager2Fall 2003 6.893 UI Design and Implementation 5 ! InputFall 2003 6.893 UI Design and Implementation 6!"#$$!$% Something youre drawing isnt appearing on the screen. Why not? Wrong place Wrong size Wrong color Wrong z-orderFall 2003 6.893 UI Design and Implementation 7& '() Console I/O uses blocking procedure callsprint (Enter name:)name = readLine();print (Enter phone number:)name = readLine(); System controls the dialogue GUI input uses event handling instead User has much more control over the dialogue (user control and freedom) User can click on almost anythingFall 2003 6.893 UI Design and Implementation 8*!'( Raw input events Mouse moved Mouse button pressed or released Key pressed or released Translated input events Mouse click or double-click Mouse entered or exited component Keyboard focus gained or lost Character typed3Fall 2003 6.893 UI Design and Implementation 9!'( Mouse position (X,Y) Mouse button state Modifier key state (Ctrl, Shift, Alt, Meta) Timestamp Why is timestamp important?Fall 2003 6.893 UI Design and Implementation 10'(+ Events are stored in a queue User input tends to be bursty Queue saves application from hard real time constraints (i.e., having to finish handling each event before next one might occur) Mouse moves are coalesced into a single event in queue If application cant keep up, then sketched lines have very few pointsFall 2003 6.893 UI Design and Implementation 11'( While application is running Block until an event is ready Get event from queue (sometimes) Translate raw event into higher-level events Generates double-clicks, characters, focus, enter/exit, etc. Translated events are put into the queue Dispatch event to target component Who provides the event loop? High-level GUI toolkits do it internally (Java, VB, C#) Low-level toolkits require application to do it (MS Win, Palm, SWT)Fall 2003 6.893 UI Design and Implementation 12'("! , $! Dispatch: choose target component for event Key event: component with keyboard focus Mouse event: component under mouse Mouse capture: any component can grab mouse temporarily so that it receives all mouse events (e.g. for drag & drop) Propagation: if target component declines to handle event, the event passes up to its parent4Fall 2003 6.893 UI Design and Implementation 13"!$!$ A controller is a finite state machine Example: push buttonHoverArmedDisarmedpressIdlemouse entermouse exitexitenterrelease(invoke)releaseFall 2003 6.893 UI Design and Implementation 14 Generic reusable controllers (Garnet and Amulet toolkits) Selection interactor Move/Grow interactor New-point interactor Text editing interactor Rotating interactor Hide the details of handling input events and finite state machines Useful only in a component model Parameterized start, stop, abort events start location, inside/outside predicates feedback components callback procedures on event
View Full Document
Unlocking...