1CMSC 132: Object-Oriented Programming IIGraphic User Interface (GUI)Department of Computer ScienceUniversity of Maryland, College Park2Graphical 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)3GUI TopicsModel-View-Controller modelJava support for GUIsContainersComponentsEventsEvent-driven programming4Model-View-Controller (MVC)Model for GUI programming (Xerox PARC ’78)Separates GUI into 3 components1.Model⇒⇒⇒⇒application data2.View ⇒⇒⇒⇒visual interface3.Controller ⇒⇒⇒⇒user interaction ModelViewController5MVC Model 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)6Java 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 architectureSWT (Standard Widget Toolkit; from Eclipse)7Creating a GUI in Java1.Define a container to hold componentsExamples: JFrame, JPanel, JApplet…2.Add GUI components to the containerExamples: JButton, JTextField, JScrollBar…Use layout manager to determine positions3.Add actions to GUI Add event listeners to GUI components8GUI Elements 1 – ContainerDefinitionAbstractions occupying space in GUIPropertiesUsually contain one or more widgetsCan be nested in other containersExamplesJFrame, JDialog, JPanel, JScrollPane9Java ContainersJFrame JDialog10JFrame 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) JMenuBar11GUI Elements 2 – ComponentDefinitionActual items (widgets) user sees in GUIExamplesLabels (fixed text)Text areas (for entering text)ButtonsCheckboxesTablesMenusToolbarsEtc…12Java ComponentsJButton JMenu13Java ComponentsJCheckBox JRadioButton14Java ComponentsJTree15Java ComponentsJTable16Java ComponentsJTableEach JTable object Gets its data from an object implementing TableModel interfaceDisplays contents of TableModel objectDefaultTableModel class implements TableModelMany different ways to use JTable to display data17LayoutDefinitionArrangement of GUI components in containerLayout specificationLogical terms (2ndrow, 1stcolumn, left)Preferred approachActual coordinates (100 pixels, 5 inches)Can be too rigid, limited to certain window sizes18Java Layout ManagerLayout managerEntity translating layout specifications into actual coordinates at runtime, depending on conditionsExamplesFlowLayoutBorderLayoutGridLayoutGridBagLayout19Java Layout ManagerFlowLayoutLays out components from left to right20Java Layout ManagerBorderLayoutDesignates portions of the container as North, South, East, West, and Center21Java Layout ManagerGridLayoutLays out components in a grid (rows & columns)Makes components the same size22Java Layout ManagerGridBagLayoutUses rows and columns of varying lengthsVery flexible23GUI Elements 3 – EventsDefinitionAction or condition occurring outside normal flow of control of programExamplesMouse clicks Keyboard inputMenu selectionsWindow actions24Event-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)25Event-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 listener26DispatcherDispatcherEvent Handling in ActionEventsE4E4E5E5E6E6E7E7E8E8E1E1E2E2E3E3Registered Event Handlerse1e2e3State = S0State = S1State = S2State = S3e3E1E1E2E2E3E3E4E4E5E5E6E6E7E7E8E8Event HandlersCan handle an event of type e1Execution Environment27GUIEventHandlersUser events invokeevent handlersGUIs are Event-Driven SoftwareE1E2E3E4E5UserEventschangeFontSizeActionPerformed(java.awt.event.ActionEvent evt)newDocActionPerformed(java.awt.event.ActionEvent evt)fileSaveActionPerformed(java.awt.event.ActionEvent evt)28Event-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 In JavaGUI events handled in event dispatching thread29Event Dispatching ThreadBackground thread to process events From AWT graphical interface event queueThese events are mainly updates thatCause components to redraw themselvesRepresent input events Swing uses a single-threaded painting modelEvent Dispatching thread is the only valid thread for updating GUI componentsAvoid updating GUI components from other threadsA source of common bugs30Event Dispatching ThreadExample codeAllows current thread to execute GUI code in dispatching threadcreateAndDisplayGUIMethod that actually defines the GUIjavax.swing.SwingUtilities.invokeLater(new Runnable( ) {public void run( ) {createAndDisplayGUI( );}});31Java Support For GUIsSeveral GUI code examplesAdditional ResourcesAppendix C of textbookJavadoc for the JDKSwing tutorialCourse slides and code handoutsJava
View Full Document
Unlocking...