CS211 Spring 2002 Lecture 11: GUI "statics" 2/25/2003 ------------------------------------------------------------------------------- 0) Announcements: + partner list + TA evals (Engineering updated the forms for "missing" TAs) + due dates (A3,A4,T1,...): February 2003 March 2003 S M Tu W Th F S S M Tu W Th F S 1 1 2 3 4 5 6 7 8 2 3 4 5 6 7 8 9 10 11 12 13 14 15 9 10 11 12 13 14 15 16 17 18 19 20 21 22 16 17 18 19 20 21 22 23 24 25 26 27 28 23 24 25 26 27 28 29 30 31 Objectives/Topics of Lecture 11: + JFC and GUI "statics" + Swing and AWT - Components - Containers - Layout Managers + Java 2D API Resources: + API: http://java.sun.com/j2se/1.4/docs/api/javax/swing/ package-summary.html + Tutorial: http://java.sun.com/docs/books/tutorial/uiswing/ http://java.sun.com/docs/books/tutorial/uiswing/ overview/index.html + JFC: http://java.sun.com/products/jfc/index.html + Graphics: http://java.sun.com/docs/books/tutorial/uiswing/painting/ index.html ------------------------------------------------------------------------------- 1) Motivation + Program-Driven Programming + Event-Driven Programming + Command-line and GUI ------------------------------------------------------------------------------- 2) JFC (Java Foundation Classes) http://java.sun.com/products/jfc/index.html + Includes classes to build GUIs: - AWT - Swing - Pluggable Look and Feel Support - Accessibility API - 2D API - Drag and Drop + What to focus on? - Swing - some of the 2D API ------------------------------------------------------------------------------- 3) AWT vs Swing + AWT: NATIVE CODE and HEAVYWEIGHT + Swing: LIGHTWEIGHT + way to spot AWT and Swing + 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.*; ------------------------------------------------------------------------------- 4) Fundamental GUI Elements + General Classifications of GUI classes - components: - containers: - helper classes: Graphics, Color, Font, FontMetrics, Dimension - events: - event listeners: + Hierarchy (the gist) Object Helper Classes Layout Managers Component AWT components, like Button, Canvas, Checkbox, etc Container Panel Applet JApplet (heavyweight) Window Frame JFrame (heavyweight) Dialog JDialog (heavyweight) JWindow JComponent (lightweight) many subclasses that start with "J" + Which are AWT? Swing? ------------------------------------------------------------------------------- 5) Containers http://java.sun.com/docs/books/tutorial/uiswing/components/toplevel.html + container classes: - components that contain other components - four basic top-level containers: + JFrame, JDialog, JApplet, JWindow + We'll use.... - JPanel + http://java.sun.com/docs/books/tutorial/uiswing/components/panel.html + invisible container, handy for place to draw graphics + cannot be "stand-alone" since it's not a top-level container + structure - CONTENT PANE + JFrame JFrame frame = new JFrame("Title!"); // create frame frame.getContentPane().add(new JButton("OK")) // add button ------------------------------------------------------------------------------- 6) 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 + general syntax: container.setLayout( new SpecificLayout() ) example) JPanel p = new JPanel(); p.setLayout(new BorderLayout()); + FlowLayout: - 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 + 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 - divides window into 5 areas (East, South, West, North, Center) - add components with add(Component,index) - indices are BorderLayout.EAST, ... + null layout - 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 ------------------------------------------------------------------------------- 7) 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 -------------------------------------------------------------------------------