Graphical User Interface - Objective of Oriented Program II | CMSC 132, Papers of Computer Science

Download Graphical User Interface - Objective of Oriented Program II | CMSC 132 and more Papers Computer Science in PDF only on Docsity!

CMSC 132:Object-Oriented Programming II Graphic User Interface (GUI) Department of Computer ScienceUniversity of Maryland, College Park

Graphical User Interface (GUI) User interface Interface between user and computer Both input and output Affects^ usability^ of computer Interface improving with better hardware Switches & light bulbs Punch cards & teletype (typewriter) Keyboard & black/white monitor (text) Mouse & color monitor (graphics)

Model-View-Controller (MVC) Model for GUI programming (Xerox PARC ’78) Separates GUI into 3 components 1. Model^ ⇒⇒⇒⇒^ application data 2. View^ ⇒⇒⇒⇒^ visual interface 3. Controller^ ⇒⇒⇒⇒^ user interaction^ View Model^ Controller

MVC Model of GUI Design Model Should perform actual work Should be independent of the GUI But can provide access methods Controller Lets user^ control^ what work the program is doing Design of controller depends on model View Lets user see what the program is doing Should not display what controller

thinks^ is happening (base display on model, not controller)

Creating a GUI in Java 1. Define a^ container^ to hold components Examples: JFrame, JPanel, JApplet… 2. Add GUI^ components^ to the container Examples: JButton, JTextField, JScrollBar… Use layout manager to determine positions 3. Add actions to GUI Add event listeners to GUI components

GUI Elements 1 – Container Definition Abstractions occupying space in GUI Properties Usually contain one or more widgets Can be nested in other containers Examples JFrame, JDialog, JPanel, JScrollPane

JFrame Structure^ Most things go intocontent pane^ getContentPane() glassPane^ Use glassPane for pop upmenus, some animations^ Methods^ getRootPane()^ getLayeredPane() layeredPane^ getContentPane()^ getGlassPane()^ Can set…Pane explicitly rootPane^ LayeredPane manages (optional) JMenuBar JFrame LayeredPane contains contentPane

GUI Elements 2 – Component Definition Actual items (widgets) user sees in GUI Examples Labels (fixed text) Text areas (for entering text) Buttons Checkboxes Tables Menus Toolbars Etc…

Java Components JCheckBox^ JRadioButton

Java Components JTree

Java Components JTable Each JTable object Gets its data from an object implementingTableModel interface Displays contents of TableModel object DefaultTableModel class implements TableModel Many different ways to use JTable to display data

Layout

Definition^ Arrangement of GUI components in container Layout specificationnd^ Logical terms (

st^ row, 1column, left) Preferred approach Actual coordinates (100 pixels, 5 inches) Can be too rigid, limited to certain window sizes

Java Layout Manager FlowLayout Lays out components from left to right

Java Layout Manager BorderLayout Designates portions of the container as North,South, East, West, and Center