DOC PREVIEW
UMD CMSC 132 - Graphical User Interface (GUI)

This preview shows page 1-2-3-4-5-6 out of 19 pages.

Save
View full document
View full document
Premium Document
Do you want full access? Go Premium and unlock all 19 pages.
Access to all documents
Download any document
Ad free experience
View full document
Premium Document
Do you want full access? Go Premium and unlock all 19 pages.
Access to all documents
Download any document
Ad free experience
View full document
Premium Document
Do you want full access? Go Premium and unlock all 19 pages.
Access to all documents
Download any document
Ad free experience
View full document
Premium Document
Do you want full access? Go Premium and unlock all 19 pages.
Access to all documents
Download any document
Ad free experience
View full document
Premium Document
Do you want full access? Go Premium and unlock all 19 pages.
Access to all documents
Download any document
Ad free experience
View full document
Premium Document
Do you want full access? Go Premium and unlock all 19 pages.
Access to all documents
Download any document
Ad free experience
Premium Document
Do you want full access? Go Premium and unlock all 19 pages.
Access to all documents
Download any document
Ad free experience

Unformatted text preview:

1Graphical User Interface (GUI)Fawzi EmadChau-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)Design issuesEase of useEase of understandingAbility to convey informationMaintainabilityEfficiencyGraphic User Interface OverviewGUI elementsJava GUI classesEvent-driven programmingModel-View-Controller (MVC) Pattern3GUI ElementsComponent⇒items displayed (widgets)Container ⇒region containing widgets Layout⇒arrangement of containerEvent ⇒interactions for GUIGUI Elements – ComponentDefinitionActual items (widgets) user sees in GUIExamplesLabels (fixed text)Text areas (for entering text)ButtonsCheckboxesTablesMenusToolbarsEtc…4GUI Elements – ContainerDefinitionAbstractions occupying space in GUIPropertiesUsually contain one or more widgetsCan be nested in other containersExampleWindow containing1 menu (component) 3 buttons (component)2 windows (container)GUI Elements – LayoutDefinitionArrangement of widgets in containerLayout specificationLogical terms (2ndrow, 1stcolumn, left)Preferred approachActual coordinates (100 pixels, 5 inches)Can be too rigid, limited to certain window sizes Layout managerEntity translating layout specifications into actual coordinates at runtime, depending on conditions5Example Java Layout ManagersGridLayoutLays out components in a grid of user specified sizeBorderLayoutDesignates portions of the container as North, South, East, West, and Center CardLayout Adds components one on top of another GridBagLayout Customizable manager that can use rows and columns of varying lengthsGUI Elements – EventsDefinitionAction or condition occurring outside normal flow of control of programExamplesMouse clicks Keyboard inputMenu selectionsWindow actions6Event-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 pattern7Event-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 window Java GUI ClassesAWT (Abstract Window Toolkit) (java.awt.*)Old GUI framework for Java (Java 1.1)Some reliance on native code counterpartsPlatform independence problemsSwing (javax.swing.*)New GUI framework first introduced in Java 1.2Includes AWT features plus many enhancementsPure Java components (no reliance on native code)Pluggable look and feel architecture8Java GUI ComponentsExamplesJFrameJTextfieldJlabelButtonJListJComboBoxMenuComboPanesIndicators Dialog boxesJFileChooserColor chooserJTableJTreeJFrame9JTextField and JLabelButtonsToolbar10JList and JComboBoxMenu11Panels and PanesTabbed PaneSplit PaneScroll PaneVarious IndicatorsSpinnerSliderProgress Bar12A Dialog BoxJFileChooser13Color ChooserJtable and JTree14Text FieldsSimple Java GUI Exampleimport javax.swing.*;public class HelloWorldApplication{ public static void main(String[ ] args) {JFrame myFrame = new ThreadExample(“Hello”);myFrame.setSize(300, 150);myFrame.setVisible(true);}}15JFrame HierarchySeveral super classes and well as implemented interfacesMany, many member methods including inherited methods that allow for operations such as resizing, setting properties, adding components, etc.Other top level containersJDialog (dialog boxes)JApplet (web applets)JWindow (stripped down JFrame, no title bar or window buttons)ObjectComponentContainerWindowFrameJFrameJFrame StructureMost things go into content panegetContentPane()Use glassPane for pop up menus, some animationsMethodsgetRootPane()getLayeredPane()getContentPane()getGlassPane()Can set…Pane explicitlyglassPanerootPaneJFramelayeredPaneLayeredPane contains contentPaneLayeredPane manages (optional) JMenuBar16Model-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,5617MVC 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 games18MVC Pattern – ControllerUsers interact with the controllerInterprets mouse movement, keystrokes, etc.Communicates those activities to the model Interaction with model indirectly causes view(s) to updateMVC 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 themselves19Principles 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


View Full Document

UMD CMSC 132 - Graphical User Interface (GUI)

Documents in this Course
Notes

Notes

8 pages

Recursion

Recursion

12 pages

Sorting

Sorting

31 pages

HTML

HTML

7 pages

Trees

Trees

19 pages

HTML

HTML

18 pages

Trees

Trees

19 pages

Honors

Honors

19 pages

Lecture 1

Lecture 1

11 pages

Quiz #3

Quiz #3

2 pages

Hashing

Hashing

21 pages

Load more
Download Graphical User Interface (GUI)
Our administrator received your request to download this document. We will send you the file to your email shortly.
Loading Unlocking...
Login

Join to view Graphical User Interface (GUI) and access 3M+ class-specific study document.

or
We will never post anything without your permission.
Don't have an account?
Sign Up

Join to view Graphical User Interface (GUI) 2 2 and access 3M+ class-specific study document.

or

By creating an account you agree to our Privacy Policy and Terms Of Use

Already a member?