Graphical User InterfacePowerPoint PresentationUser InterfaceSignals and ActionsEvolution of GUIGraphical ToolkitSlide 7Glade Screen ShotGUI <==> AppInstant MessagingIM State Transition DiagramIM State Transition Diagram IIBetter Specification of UIThe challenge of handheldsInput ErrorsWhat can be done?Errors are device specificXstrokeWhat do we need?MIT 6.893; SMA 5508 Spring 2004 Larry Rudolph Lecture 4: Graphic User Interface Graphical User InterfaceLarry RudolphMIT 6.893; SMA 5508Spring 2004MIT 6.893; SMA 5508 Spring 2004 Larry Rudolph Lecture 4: Graphic User Interface 2MIT 6.893; SMA 5508 Spring 2004 Larry Rudolph Lecture 4: Graphic User Interface 3User InterfaceApplication needs external interaction.Disconnect application from user interfaceUI could be: character display & keyboardOr: file, tape, CD, ...Graphical user interfaceMust make many assumptions about h/wCode usually written to lowest common denominatorWhy write different code for each fancy featyreCode gets tied to GUIAbstraction advantage is minimizedhard to adapt to different interfacese.g. try to access web page via dumb terminal (lynx)MIT 6.893; SMA 5508 Spring 2004 Larry Rudolph Lecture 4: Graphic User Interface 4Signals and ActionsUser Interface output: data & signals (event == signal)data is usually text to display to usercause something to happen e.g. popup windowinput: data & signaldata is usually text that the user typesevent is other user action, e.g. enter key, mouse click, mouse movementTwo types of signals (events)window manager, e.g. kill window, resizeapplication UI, e.g. menu selectionSignals invoke application code “call back” or “handler”MIT 6.893; SMA 5508 Spring 2004 Larry Rudolph Lecture 4: Graphic User Interface 5Evolution of GUIEvolutionapplication code does everythinglibraries provide uniformityapps examine all events & pass on irrelevant onesmulti-tasking pushes routing down to OS levelwindow manager (pull routing out of OS)multi-threading: data & signals passed between app and gui via window manager full separation: xml, soap, ...MIT 6.893; SMA 5508 Spring 2004 Larry Rudolph Lecture 4: Graphic User Interface 6Graphical ToolkitNeed something to draw graphicsNeed something to manage windows, menus, buttons, icons, etc.Need a “Toolkit”There are lots of them; some language specificWe use GTK 2 (pygtk2 python interface) http://www.moeraki.com/pygtkreference/pygtk2reference/ http://www.async.com.br/faq/pygtk/index.py?req=indexMIT 6.893; SMA 5508 Spring 2004 Larry Rudolph Lecture 4: Graphic User Interface 7Graphical User InterfaceWe will use Glade 2 : can see what gui will look like (but maybe not on ipaq small screen)Glade is a program designed to enable the quick building of graphical user interfaces for GTK+ and Gnome applications. http://glade.gnome.org/http://www.kplug.org/glade_tutorial/glade2_tutorial/glade2_introduction.htmlMIT 6.893; SMA 5508 Spring 2004 Larry Rudolph Lecture 4: Graphic User Interface 8Glade Screen ShotMIT 6.893; SMA 5508 Spring 2004 Larry Rudolph Lecture 4: Graphic User Interface 9 GUI <==> AppApplication registers call-backs with GUISignals or events invoke the call-backsWho ensures that the right connection?It is all in the programmer’s head(generally not a good idea)How much does the GUI know about the semantics of the input?Not very muchWant abstraction and autogen or checkerstill open problemMIT 6.893; SMA 5508 Spring 2004 Larry Rudolph Lecture 4: Graphic User Interface 10Instant MessagingA server mediates messagesClients registers and connect with serverClients “subscribe” to other clientsClient sends message to server, server forwards to recipientcan only send messages to registered/published recipientsSupported operations:Register, Unregister, Logon, Logoff, Send/Rec, Add/Remove Buddy, etc.MIT 6.893; SMA 5508 Spring 2004 Larry Rudolph Lecture 4: Graphic User Interface 11IM State Transition DiagramStartChoose ServerRegisterConnectDisconnectSend MessageRecv MessageAdd Buddy EndMIT 6.893; SMA 5508 Spring 2004 Larry Rudolph Lecture 4: Graphic User Interface 12IM State Transition Diagram IIStartChoose ServerRegisterConnectDisconnectSend MessageRecv MessageAdd Buddy EndMIT 6.893; SMA 5508 Spring 2004 Larry Rudolph Lecture 4: Graphic User Interface 13Better Specification of UIWant universal user interface descriptionApplication can interact with several UI’skeyboard, mouse, touch screenspeech, gestureagent (a real PDA)brainwaves, ESPAnswer: still open research questionMIT 6.893; SMA 5508 Spring 2004 Larry Rudolph Lecture 4: Graphic User Interface 14The challenge of handhelds Small screen; poor lighting, stylusTouch screenon-screen keyboardhandwriting recognitionmenu’sjog dialWhat is the problem?MIT 6.893; SMA 5508 Spring 2004 Larry Rudolph Lecture 4: Graphic User Interface 15Input ErrorsTouch screenon-screen keyboard: hit adjacent lettershandwriting recognition: mis-recognitionmenu’s: choose adjacent itemjog dial: choose adjacent itemSelect wrong iconCannot see the writing (old folk’s problem)Just do the wrong thingMIT 6.893; SMA 5508 Spring 2004 Larry Rudolph Lecture 4: Graphic User Interface 16What can be done?Add semantic knowledgePart of UI specificationLimit acceptable inputUser interface can pass on several alternatives to applicationTop “N” choices with associated probabilityApplication can handle probabilistic choice of inputMIT 6.893; SMA 5508 Spring 2004 Larry Rudolph Lecture 4: Graphic User Interface 17Errors are device specificAdjacent letter mistakewhat do you think “ues” means?does it matter if it is keyboard or xstroke?xstroke has reg-exp description of lettersMIT 6.893; SMA 5508 Spring 2004 Larry Rudolph Lecture 4: Graphic User Interface 18Xstroke# 1 2 3# 4 5 6# 7 8 9# The extents of the grid will be automatically inferred based on the# bounding box of the input stroke. This
View Full Document
Unlocking...