1Graphical User Interface (GUI)Nelson Padua-PerezChau-Wen TsengDepartment of Computer ScienceUniversity of Maryland, College ParkGraphical User Interface (GUI)User interfaceInterface between user and computerBoth input and outputAffects usability of computerInterface improving with better hardwareSwitches & light bulbsPunch cards & teletype (typewriter)Keyboard & black/white monitor (text)Mouse & color monitor (graphics)2Graphical User Interface (GUI)GoalPresent information to users clearly & conciselyMake interface easy to use for usersMake software easy to implement / maintain for programmersGraphical User Interface (GUI)Design issuesEase of useEase of understandingAbility to convey informationMaintainabilityEfficiency3GUI TopicsEvent-driven programmingModel-View-Controller (MVC) PatternGUI elementsJava GUI classesEvent-driven ProgrammingNormal (control flow-based) programmingApproachStart at main()Continue until end of program or exit()Event-driven programmingUnable to predict time & occurrence of eventApproachStart with main()Build GUIAwait events (& perform associated computation)4Event-driven Programming in JavaDuring implementation Implement event listeners for each eventUsually one event listener class per widgetAt run timeRegister listener object with widget objectJava generates event object when events occurJava then passes event object to event listenerExample of observer design patternEvent-driven Programming in JavaExample listeners & actions causing eventActionEvent ⇒ clicking button in GUICaretEvent ⇒ selecting portion of text in GUI FocusEvent ⇒ component gains / loses focus KeyEvent ⇒ pressing key ItemEvent ⇒ selecting item from pull-down menuMouseEvent ⇒ dragging mouse over widgetTextEvent ⇒ changing text within a fieldWindowEvent ⇒ closing a window5Model-View-Controller (MVC) PatternDeveloped at Xerox PARC in 1978Separates GUI into 3 componentsModel ⇒ application dataView ⇒ visual interfaceController ⇒ user interaction ModelViewControllerMVC Interaction Order1. User performs action, controller is notified2. Controller may request changes to model 3. Controller may tell view to update4. Model may notify view if it has been modified5. View may need to query model for current data6. View updates display for userModelViewController1234,566MVC Pattern – AdvantagesSeparates data from its appearanceMore robustEasier to maintainProvides control over interfaceEasy to support multiple displays for same dataModelModelGUIGUIGUIMVC Pattern – ModelContains application & its data Provide methods to access & update dataInterface defines allowed interactionsFixed interface enable both model & GUIs to be easily pulled out and replacedExamplesText documentsSpreadsheetsWeb browserVideo games7MVC Pattern – ViewProvides visual representation of modelMultiple views can display model at same timeExample: data represented as table and graphWhen model is updated, all its views are informed & given chance to update themselvesMVC Pattern – ControllerUsers interact with the controllerInterprets mouse movement, keystrokes, etc.Communicates those activities to the model Interaction with model indirectly causes view(s) to update8Principles of GUI DesignModel Should perform actual workShould be independent of the GUIBut can provide access methodsController Lets user control what work the program is doingDesign of controller depends on modelViewLets user see what the program is doingShould not display what controller thinks is happening (base display on model, not controller)Principles of GUI DesignCombining controller & viewAppropriate if very interdependentEspecially in small programsSeparation of concernsNever mix model code with GUI codeView should represent model as it really isNot some remembered statusController should talk to model and viewAvoid manipulate them
View Full Document
Unlocking...