CS211 GUI Statics additional (and more complete) notes ------------------------------------------------------------------------------- (1) Program-Driven vs Event-Driven Programming + Program-Driven + program executes each statement in predetermined order + typically use keyboard/file I/O from console + Event-Driven Programming - program waits for user input to activate certain statements - typically use graphical I/O ------------------------------------------------------------------------------- (2) GUI + Definition: GUI (pronounced "goo-ey") - Graphical User Interface for event-driven programming - program "waits" for events to occur + Why? - improves I/O interaction w/o necessitating keyboard and console I/O - involves more "modern" programming - need lots of OOP! + Examples: Netscape, IE, Word, MATLAB, .... (aside: are there "program-driven" versions of these?) ------------------------------------------------------------------------------- (3) JFC + JFC: Java Foundation Classes + Includes classes to build GUIs: - AWT: + Abstract Window Toolkit + original API for making GUIs + mostly outdated now - Swing: + the modern API for building GUIs + uses some of AWT, but expands on it - Pluggable Look and Feel Support: + http://java.sun.com/docs/books/tutorial/uiswing/misc/plaf.html + ways to define certain look for a particular OS + Motif vs Windows vs... - Accessibility API + http://java.sun.com/docs/books/tutorial/uiswing/misc/access.html + tools for assistive technologies such as screen readers and Braille + displays for non-standard I/O - 2D API + "high-quality" drawing for graphics, text, images - Drag and Drop + drag and drop between Java application and a native application + What to focus on? - Swing - some of the 2D API ------------------------------------------------------------------------------- (4) AWT vs Swing + AWT classes are mostly written in NATIVE CODE - means that they use code for windowing system from your computer - called HEAVYWEIGHT - disadvantage in not being able to port to other OS - "abstract" term comes from the fact that you can specify a component to be placed somewhere, and Java handles the details of display and generating events - basic API package: java.awt.* + Swing classes have no native code - more portable - added functionality - called LIGHTWEIGHT because mostly written in Java - essentially supercedes AWT - uses LAYOUT MANAGERS to arrange COMPONENTS inside CONTAINERS - basic API package: javax.swing.* + way to spot AWT and Swing: - look for "J" in front of component names - example) AWT has Button, and Swing has JButton + DO NOT MIX AWT AND SWING USER_INTERFACE COMPONENTS! + Which to use? Technically, both.... - Swing replaces AWT user-interface components (buttons, fields, etc) - AWT has "helper classes" (Graphics, Color, Font, FontMetrics, LayoutManager) which Swing did not replace - Swing uses AWT event model + Thus, you will usually have these import statements in your code: import javax.swing.*; import java.awt.*; import java.awt.event.*; ------------------------------------------------------------------------------- (5) Fundamental GUI Elements + Quick Overview: - http://java.sun.com/docs/books/tutorial/uiswing/start/swingTour.html + Overall classification of classes: - Components: pretty much everything you see on the screen - Events: an object that represents an occurrence - Listeners: an object that "listens" for an event + To build a GUI, you will need to learn about - components: what you see on the screen - containers: special kinds of components that contain other comps - layout managers: objects that control placement and sizing of comps - event listeners: objects to respond to events generated by user + Process of creating a GUI: - set up components + define what you want + pick container in which to put them + pick layout manager (could use default!) + place components - create listener objects and connect them to the components which generate events - ensure that user events are handled + Main Execution model: - Write a class with a main() method that creates an object of your new GUI class type. - Write a GUI class that, e.g., extends JFrame. This class's constructor (or other init() method) should: + Create all of the GUI components you will use (objects) + Decide on a Layout + Place all of the objects in the Layout for the JFrame (might use JPanels to nest components) + Define action listeners where appropriate - When the GUI is run, Java will keep track of events that happen and automatically call your listeners when appropriate. ------------------------------------------------------------------------------- (6) API Classes For Building GUIs + Hierarchy ("<--" means "extends" in terms of inheritance) Object <-- Dimension --+ <-- Font | <-- FontMetrics +--> Helper classes <-- Color | <-- Graphics --+ <-- Component -----> Components (things you see) <-- FlowLayout, GridLayout, --+ BorderLayout, GridBagLayout | GridLayout, TextLayout (AWT) +--> Layout <-- BoxLayout, OverlayLayout, | Managers ViewportLayout (Swing) --+ <-- (stuff for events... see later) ---> events, listeners Component <-- Container <-- (a bunch of AWT classes) Container <-- Panel --+ <-- Window | <-- JComponent (lightweight) +--> Containers to hold <-- Box (lightweight) | other components <-- (more stuff) --+ Panel <-- Applet <-- JApplet (heavyweight!) Window <-- Frame <-- JFrame (heavyweight!) <-- Dialog <-- JDialog (heavyweight!) <-- JWindow JComponent <-- AbstractButton <-- JMenuItem <-- JCheckBoxMenuItem <-- JMenu <-- JRadioButtonMenuItem <-- JButton <-- JToggleButton <-- JCheckBox <-- JRadioButton <-- JTextComponent <-- JEditorPane <-- JTextField <-- JPasswordField <-- JTextArea <-- JLabel, JList, JComboBox, JMenuBar, JPanel, JOptionpane, JScrollBar, JTabbedPane, JFileChooser <-- more stuff! + Important Classes - Component: (repeated here) things to put in the GUI - Container: groups components. Components go *inside* containers. - JComponent: superclass of all lightweight components + General Classifications of GUI classes - containers: Components that hold other Components - component class: things to paint for UI see JButton, JTextField, JComboBox, and more - helper classes: used by Components and Containers to draw objects Graphics: abstract class for drawing strings, lines, simple shapes Color: color for objects Font: specify fonts for text in Graphics FontMetrics: get properties of fonts in drawings Dimension: width & height of component in single object - events (see later) - event listeners (see later) ------------------------------------------------------------------------------- (7) Components + Helpful guide! http://java.sun.com/docs/books/tutorial/uiswing/components/index.html + Component: - fundamental GUI object - abstract class! - most other GUI objects inherit from Component - represents something with position and size - can be painted on screen and receive events + basic classifications of methods: - appearance - behavior + further classifications of methods from tutorial: http://java.sun.com/docs/books/tutorial/uiswing/components/ jcomponent.html - Customizing Component Appearance - Setting Component State - Handling Events - Dealing with Focus - Painting Components - Dealing with the Containment Hierarchy - Laying Out Components - Getting Size and Position Information - Specifying Absolute Size and Position ------------------------------------------------------------------------------- (8) Containers + container classes: Components that contain other components + top-level containers (lifting material from: http://java.sun.com/docs/books/tutorial/uiswing/components/toplevel.html) - each top-level container has a CONTENT PANE that contains the visible components in that top-level container's GUI - You can optionally add a menu bar to a top-level container. The menu bar is positioned within the top-level container, but outside the content pane. - four basic top-level Containers: + JFrame: window that stores other components in applications has border and can have a JMenuBar + JDialog: pop-up window or message box + JApplet: Swing-based Applet + JWindow: Swing version of Window, but not very useful! (no border) +------+ JFrame, JDialog, JApplet, JWindow | | Frame are heavyweight! | +-------+ | |_______| Menu Bar So, to store components which, +--| | are lightweight, they go into | | Content Pane content pane. +-------+ - will most likely use JFrame! JFrame frame = new JFrame("Title!"); // create frame frame.getContentPane().add(new JButton("OK")) // add button // using default layout manager + other kinds of containers JPanel: - http://java.sun.com/docs/books/tutorial/uiswing/components/panel.html - invisible container, handy for place to draw graphics - store components but no borders - thus, simplest container! - cannot be "stand-alone" since it's not a top-level container (put inside top-level container or another panel) JFrame frame = new JFrame("Title!"); JPanel panel = new JPanel(); p.add(new JButton("OK2!")); frame.getContentPane().add(panel); ------------------------------------------------------------------------------- (9) Layout Managers + Tutorial: http://java.sun.com/docs/books/tutorial/uiswing/overview/layout.html http://java.sun.com/docs/books/tutorial/uiswing/layout/using.html + What is a layout manager? - object that controls placement and sizing of components in container - if you do not specify a layout manager, the container will use a default: + JPanel: FlowLayout + JFrame: BorderLayout + five common layout managers: BorderLayout, BoxLayout, FlowLayout, GridBagLayout, and GridLayout + usual time to worry about layout managers: - using JPanel - adding components to content pane (contains comps in frame) - want to change default layout manager + adding components to container means you need to deal with requirements from the layout manager that you use general syntax: container.setLayout( new SpecificLayout() ) example) JPanel p = new JPanel(); p.setLayout(new BorderLayout()); + FlowLayout: http://java.sun.com/docs/books/tutorial/uiswing/layout/flow.html - simplest - components arranged in container from left to right in order added - new row started each time row ends - simple alignment with RIGHT, LEFT, CENTER fields - see also BoxLayout http://java.sun.com/docs/books/tutorial/uiswing/layout/box.html + GridLayout: - arranges components in rectangular grid (think array) - rows, cols defined by constructor - components go into grid left-to-right, then top-to-down + BorderLayout - http://java.sun.com/docs/books/tutorial/uiswing/layout/border.html - divides window into 5 areas (East, South, West, North, Center) - add components with add(Component,index) - indices are BorderLayout.EAST, ... + null layout - http://java.sun.com/docs/books/tutorial/uiswing/layout/none.html - don't use any layout manager - programmer has to give absolute locations - can be dangerous to application because of platform dependency + CardLayout - http://java.sun.com/docs/books/tutorial/uiswing/layout/card.html - tabbed index card look from Windows + GridLayout - http://java.sun.com/docs/books/tutorial/uiswing/layout/grid.html - adds components into grid, but makes them all the same size + GridBagLayout - http://java.sun.com/docs/books/tutorial/uiswing/layout/gridbag.html - most versatile, but most complicated + custom - http://java.sun.com/docs/books/tutorial/uiswing/layout/custom.html ------------------------------------------------------------------------------- (10) Graphics + draw Graphics objects in panels + create a class that extends JPanel + put a method for painting inside: public void paintComponent(Graphics g) - inherited from JComponent - method is invoked whenever you display or resize a frame + do not create a "g" object -- Java does that for you for your platform + make first statement super.paintComponent(Graphics g) to + see Graphics2D for example methods + see textbooks for a way of changing parameter values in your panel class -------------------------------------------------------------------------------