Graphical User Interface (GUI)Nelson Padua-PerezBill PughDepartment 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)Graphical 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 informationMaintainabilityEfficiencyGUI 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)Event-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 windowModel-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,56MVC 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 gamesMVC 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 updateThe Model View Controller SongLyrics and music by James Dempsey.Model View, Model View, Model View ControllerMVC's the paradigm for factoring your code, into functional segments so your brain does not explode.To achieve reusability you gotta keep those boundaries clean, Model on the one side, View on the other, the Controller's in between.Model View - It's got three layers like Oreos do.Model View creamy ControllerModel objects represent your applications raison d’ere. Custom classes that contain data logic and et cetra.You create custom classes in your app's problem domain, then you can choose to reuse them with all the views, but the model objects stay the samePrinciples 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 DesignModel is separateNever mix model code with GUI codeView should represent model as it really isNot some remembered statusIn GUI’s, user code for view and controller tend to mingleEspecially in small programsLot of the view is in system codeDo you have a good model?Could you reuse the model if you wanted to port the application to:a command-line textual interfacean interface for the blindan iPoda web application, run on the web server, accessed via a web browserModel’s for JTables and JList’sJTable represents a two dimensional arrayJList represents a one dimensional arrayYou can create a JTable or JList by just passing an array to the constructorOr you can create a modeleasy and more powerfulcan handle edits easier to
View Full Document