Getting Started with GUI Programming Chapter 10 CSCI 1302

CSCI 1302 – Getting Started with GUI Programming2 Outline Introduction GUI Components –Swing vs. AWT The Java GUI API –Swing GUI Components –Container Classes –GUI Helper Classes Frames –Creating a Frame

CSCI 1302 – Getting Started with GUI Programming3 Outline Frames (cont.) –Adding Components to a Frame –Centering a Frame Layout Managers – FlowLayout – GridLayout – BorderLayout The Color Class The Font Class

CSCI 1302 – Getting Started with GUI Programming4 Outline Using Panels as Subcontainers Drawing Graphics on Panels –Drawing Lines –Drawing Rectangles –Drawing Ovals –Drawing Arcs –The Polygon class and Drawing Polygons and Polylines Centering a Display Using the FontMetrics Class

CSCI 1302 – Getting Started with GUI Programming5 Outline Case Studies –The MessagePanel Class –The StillClock Class

CSCI 1302 – Getting Started with GUI Programming6 Introduction Dialog boxes and command window for input and output Learn to create custom graphical user interfaces (GUI) to obtain and display input and output Learn the basics of GUI programming

CSCI 1302 – Getting Started with GUI Programming7 GUI Components Each GUI component is defined in a class that provides several constructors See DisplayGUI.java

CSCI 1302 – Getting Started with GUI Programming8 Swing vs. AWT All GUI classes were bundled in a library called the Abstract Windows Toolkit (AWT) Automatically maps AWT components to platform-specific components Java 2 added Swing components which are painted directly on canvases Less dependent on the target platform, known as lightweight, always prefixed with a J

CSCI 1302 – Getting Started with GUI Programming9 The Java GUI API

CSCI 1302 – Getting Started with GUI Programming10 The Java GUI API

CSCI 1302 – Getting Started with GUI Programming11 The Java GUI API GUI classes can be classified into three groups: –Component classes – actual GUI components, subclasses of JComponent –Helper classes – used to draw and place objects –Container classes – contain other components

CSCI 1302 – Getting Started with GUI Programming12 Swing GUI Components All user-interface classes have a superclass of Component All lightweight components descend from JComponent Remember that all subclasses can invoke methods of their superclasses Methods like getHeight and getWidth are defined in Component but available to all subclasses

CSCI 1302 – Getting Started with GUI Programming13 Container Classes Used as containers to hold other GUI components Container – Used to group components JFrame – Window not contained in another window, holds Swing components JDialog – Popup window or message box temporarily used to deliver information JApplet – Used to create applets

CSCI 1302 – Getting Started with GUI Programming14 Container Classes JPanel – Invisible container that holds UI components –Can be nested –Can be placed inside other panels –Can be used as a canvas to draw graphics

CSCI 1302 – Getting Started with GUI Programming15 GUI Helper Classes Used to describe properties of GUI components such as graphics context, colors, fonts, and dimension Graphics – Abstract class that can draw strings, lines, and simple shapes Color – Provides color to components Font – Specifies fonts for text and drawings on components FontMetrics – Properties of fonts

CSCI 1302 – Getting Started with GUI Programming16 GUI Helper Classes Dimension – Encapsulates the width and height of a component in an object LayoutManager – Interface, specifies how components are arranged in a container

CSCI 1302 – Getting Started with GUI Programming17 Frames When creating GUI applications, something must be used to hold components Either frames or applets can be used to hold these components

CSCI 1302 – Getting Started with GUI Programming18 Creating a Frame import javax.swing.*; public class MyFrame { public static void main(String[] args) { JFrame frame = new JFrame("MyFrame"); frame.setSize(400, 300); frame.setVisible(true); frame.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE); } See MyFrame.java

CSCI 1302 – Getting Started with GUI Programming19 Creating a Frame

CSCI 1302 – Getting Started with GUI Programming20 Creating a Frame Must import javax.swing.* so that JFrame will be available Create a JFrame with a set title Specify a pixel width and height for the frame Display the frame with setVisible(true) Last line sets the operation to be performed on closing the frame, must be done to terminate the program

CSCI 1302 – Getting Started with GUI Programming21 Adding Components import javax.swing.*; public class MyFrameWithComponents { public static void main(String[] args) { JFrame frame = new JFrame("Adding Components into the Frame"); // Add a button java.awt.Container container = frame.getContentPane(); JButton jbtOK = new JButton("OK"); container.add(jbtOK); frame.setSize(400,300); frame.setVisible(true); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); }

CSCI 1302 – Getting Started with GUI Programming22 Adding Components

CSCI 1302 – Getting Started with GUI Programming23 Adding Components GUI components are placed in the content pane, returned by getContentPane Content panes are created when JFrame objects are created Components are added with the add method, removed with the remove method

CSCI 1302 – Getting Started with GUI Programming24 Layout Managers In many systems, each component is absolutely placed Java components are placed in containers which have layout managers Use the setLayout(LayoutManager) method to set a layout manager for a container LayoutManager lm = new XLayout(); container.setLayout(lm); FlowLayout, GridLayout, BorderLayout

CSCI 1302 – Getting Started with GUI Programming25 FlowLayout Simplest layout manager Components are arranged from left to right in the order that they are added When a row fills up, a new one is started Can set overall alignment with three constants: –FlowLayout.RIGHT –FlowLayout.CENTER –FlowLayout.LEFT

CSCI 1302 – Getting Started with GUI Programming26 FlowLayout Three constructors –public FlowLayout(int align, int hGap, int vGap) –public FlowLayout(int alignment) –public FlowLayout Default alignment is FlowLayout.CENTER and default vGap and hGap is 5 pixels

CSCI 1302 – Getting Started with GUI Programming27 FlowLayout See ShowFlowLayout.java

CSCI 1302 – Getting Started with GUI Programming28 GridLayout Arranges components in a grid Components are placed from left to right in the order that they are added User can specify number of rows and columns –Both cannot be zero –Rows has precedence over columns, will dynamically add columns to keep the row requirement fixed

CSCI 1302 – Getting Started with GUI Programming29 GridLayout Three constructors – public GridLayout(int rows, int cols, int hGap, int vGap) – public GridLayout(int rows, int cols) – public GridLayout() Default gaps of zero

CSCI 1302 – Getting Started with GUI Programming30 GridLayout See ShowGridLayout.java

CSCI 1302 – Getting Started with GUI Programming31 BorderLayout Divides the window into five areas, East, South, West, North, and Center Components are added using constants like BorderLayout.CENTER Two constructors – public BorderLayout(int hGap, int vGap) – public BorderLayout() North and South can stretch horizontally, East and West vertically

CSCI 1302 – Getting Started with GUI Programming32 BorderLayout See BorderLayout.java

CSCI 1302 – Getting Started with GUI Programming33 The Color class Java uses RGB (red, green, blue) model 3-tuple, 0 (darkest) – 255 (lightest) 255, 0, 0 is red; 0, 255, 0 is green public Color(int r, int g, int b) Use setForeground(Color c) and setBackground(Color c) to set a component’s colors Constants for thirteen standard colors See ShowColor.java

CSCI 1302 – Getting Started with GUI Programming34 The Font class Create fonts with java.awt.Font Set the fonts for components using the setFont method public Font(String name, int style, int size) name can be SansSerif, Serif, Monospaced, Dialog, or DialogInput style can be Font.PLAIN (0), Font.BOLD (2), Font.ITALIC (2), or Font.BOLD + Font.ITALIC (3)

CSCI 1302 – Getting Started with GUI Programming35 Using Panels as Subcontainers Single containers are not conducive to good UI Panels can act as subcontainers to apply different layouts to different sections of the application Panels hold groups of components, then the panels are placed on frames Default layout manager for a JPanel is FlowLayout

CSCI 1302 – Getting Started with GUI Programming36 Using Panels as Subcontainers Create a panel and add a button JPanel p = new JPanel(); p.add(new JButton(“OK”)); Add the panel to a frame JFrame f = new JFrame(); f.getContentPane().add(p); Use this method to arrange components into logical groups with different layouts

CSCI 1302 – Getting Started with GUI Programming37 Microwave Using panels as subcontainers, emulate the front of a microwave Design with layout managers in mind