COMP 14Introduction to Programming

Miguel A. Otaduy

June 7, 2004

Last Week of Class

• Basic programming concepts– Review– Finish assignment 6

• Java applets– Compose a web page with a Java

applet• Advance GUI (beyond JOptionPane)• HTML

Advanced GUI

• class JFrame– Methods– Concept of Inheritance– Events

• class JApplet

GUIs

• We used JOptionPane to create a GUI Calculator using dialog boxes.

• We can create more complex GUIs using Java.

Inheritance• JFrame is a class provided by the package javax.swing

• Instead of instantiating an object of the JFrame class, we're going to extend the JFrame class (called inheritance).

• The new class "inherits" features (including methods and variables) from the existing class -- big time-saver!

• We can use all of the methods and variables from JFrame, while adding our own.

Extending JFrame

• Use the modifier extends, which is a reserved word

• JFrame is the superclass• BigGUI is the subclass

• It is ok to learn the recipe

public class BigGUI extends JFrame{

}

Next Step

• We'll need a constructor for BigGUI– set the window title setTitle– set the window size setSize– set the default operation when the

close button is pressed setDefaultCloseOperation

– display the window setVisible(true)• We'll need a main method

– create an object of the BigGUI class (which will call the constructor)

import javax.swing.*; // needed for JFrame

public class BigGUI extends JFrame{

private final static String TITLE = “Big GUI";private final static int WIDTH = 700;private final static int HEIGHT = 600;

public BigGUI() // constructor{

setTitle(TITLE);setSize(WIDTH, HEIGHT);setDefaultCloseOperation(EXIT_ON_CLOSE);setVisible(true);

}

public static void main(String[] args){

BigGUI gui = new BigGUI();}

}

BigGUI.java

• Create JFrame and test.

JFrame

content pane

Adding Things

• Access the content pane so we can add things (buttons, labels, images)

– Container class is provided by the java.awt package

– add import statement for java.awt

• Then, we set the layout type and add things to the content pane

Container content = getContentPane();

Layout Managers

• FlowLayout– default– components are added left to right, top to bottom

• BorderLayout– consists of NORTH, SOUTH, EAST, WEST, CENTER

regions– size of CENTER region depends on the number of

components in the EAST and WEST regions

• GridLayout– define number of rows and columns to get equally

sized cells– cells are filled left to right, top to bottom

BorderLayout

• Select layout for BigGUI as BorderLayout

• When adding components with BorderLayout, you have to specify the section (using NORTH, SOUTH, EAST, WEST, CENTER constants from BorderLayout class)

content.setLayout(new BorderLayout());

content.add(item, BorderLayout.SECTION);

BigGUI.java

• Get content pane and set layout.

JLabels

• We'll identify the regions of the BorderLayout with labels (text areas)

• JLabel is a region of text– can be assigned an alignment (left-

justified, right-justified, centered)

• Text can be changed with setText method

JLabel northLabel = new JLabel ("NORTH", SwingConstants.CENTER);

JLabel southLabel = new JLabel ("SOUTH");

northLabel.setText ("Changed Text");

Adding Labels

Container content = getContentPane();content.setLayout (new BorderLayout());

JLabel northLabel = new JLabel ("NORTH", SwingConstants.RIGHT);

content.add (northLabel, BorderLayout.NORTH);

JLabel southLabel = new JLabel ("SOUTH");content.add (southLabel, BorderLayout.SOUTH);

JLabel westLabel = new JLabel ("WEST", SwingConstants.CENTER);

content.add (westLabel, BorderLayout.WEST);

Adding Labels

• After adding stuff to the content pane...

setVisible(true);

BigGUI.java

• Add labels.

Colors

• Set the background color of the content pane

• Set the foreground color of the text (JLabels)• Use Color class from the java.awt package• Available colors pg. 734

– constants (but lowercase)

• Methods– darker() - darkens the color– brighter() - brightens the color

content.setBackground(Color.blue.darker().darker());northLabel.setForeground(Color.white);

Adding Images

• We can create images and associate them with labels

• ImageIcon– use JPG or GIF images

• Use setIcon method from JLabel class

centerLabel.setIcon (image);

ImageIcon image = new ImageIcon ("img/0.gif");

filename

label.setVerticalTextPosition(vposition);label.setHorizontalTextPosition(hposition);

Text Position Relative to Icon

SwingConstants.LEFTSwingConstants.CENTERSwingConstants.RIGHT

SwingConstants.TOPSwingConstants.CENTERSwingConstants.BOTTOM

BigGUI.java

• Add icon.

To do

• Read ch. 6: pp 282-290 (important)• Get AFS access• Homework 6• Homework 7 will be assigned