![Page 1: COMP 14 Introduction to Programming Miguel A. Otaduy June 7, 2004](https://reader030.vdocuments.site/reader030/viewer/2022032704/56649d815503460f94a66d0b/html5/thumbnails/1.jpg)
COMP 14Introduction to Programming
Miguel A. Otaduy
June 7, 2004
![Page 2: COMP 14 Introduction to Programming Miguel A. Otaduy June 7, 2004](https://reader030.vdocuments.site/reader030/viewer/2022032704/56649d815503460f94a66d0b/html5/thumbnails/2.jpg)
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
![Page 3: COMP 14 Introduction to Programming Miguel A. Otaduy June 7, 2004](https://reader030.vdocuments.site/reader030/viewer/2022032704/56649d815503460f94a66d0b/html5/thumbnails/3.jpg)
Advanced GUI
• class JFrame– Methods– Concept of Inheritance– Events
• class JApplet
![Page 4: COMP 14 Introduction to Programming Miguel A. Otaduy June 7, 2004](https://reader030.vdocuments.site/reader030/viewer/2022032704/56649d815503460f94a66d0b/html5/thumbnails/4.jpg)
GUIs
• We used JOptionPane to create a GUI Calculator using dialog boxes.
• We can create more complex GUIs using Java.
![Page 5: COMP 14 Introduction to Programming Miguel A. Otaduy June 7, 2004](https://reader030.vdocuments.site/reader030/viewer/2022032704/56649d815503460f94a66d0b/html5/thumbnails/5.jpg)
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.
![Page 6: COMP 14 Introduction to Programming Miguel A. Otaduy June 7, 2004](https://reader030.vdocuments.site/reader030/viewer/2022032704/56649d815503460f94a66d0b/html5/thumbnails/6.jpg)
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{
}
![Page 7: COMP 14 Introduction to Programming Miguel A. Otaduy June 7, 2004](https://reader030.vdocuments.site/reader030/viewer/2022032704/56649d815503460f94a66d0b/html5/thumbnails/7.jpg)
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)
![Page 8: COMP 14 Introduction to Programming Miguel A. Otaduy June 7, 2004](https://reader030.vdocuments.site/reader030/viewer/2022032704/56649d815503460f94a66d0b/html5/thumbnails/8.jpg)
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();}
}
![Page 9: COMP 14 Introduction to Programming Miguel A. Otaduy June 7, 2004](https://reader030.vdocuments.site/reader030/viewer/2022032704/56649d815503460f94a66d0b/html5/thumbnails/9.jpg)
BigGUI.java
• Create JFrame and test.
JFrame
content pane
![Page 10: COMP 14 Introduction to Programming Miguel A. Otaduy June 7, 2004](https://reader030.vdocuments.site/reader030/viewer/2022032704/56649d815503460f94a66d0b/html5/thumbnails/10.jpg)
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();
![Page 11: COMP 14 Introduction to Programming Miguel A. Otaduy June 7, 2004](https://reader030.vdocuments.site/reader030/viewer/2022032704/56649d815503460f94a66d0b/html5/thumbnails/11.jpg)
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
![Page 12: COMP 14 Introduction to Programming Miguel A. Otaduy June 7, 2004](https://reader030.vdocuments.site/reader030/viewer/2022032704/56649d815503460f94a66d0b/html5/thumbnails/12.jpg)
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);
![Page 13: COMP 14 Introduction to Programming Miguel A. Otaduy June 7, 2004](https://reader030.vdocuments.site/reader030/viewer/2022032704/56649d815503460f94a66d0b/html5/thumbnails/13.jpg)
BigGUI.java
• Get content pane and set layout.
![Page 14: COMP 14 Introduction to Programming Miguel A. Otaduy June 7, 2004](https://reader030.vdocuments.site/reader030/viewer/2022032704/56649d815503460f94a66d0b/html5/thumbnails/14.jpg)
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");
![Page 15: COMP 14 Introduction to Programming Miguel A. Otaduy June 7, 2004](https://reader030.vdocuments.site/reader030/viewer/2022032704/56649d815503460f94a66d0b/html5/thumbnails/15.jpg)
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);
![Page 16: COMP 14 Introduction to Programming Miguel A. Otaduy June 7, 2004](https://reader030.vdocuments.site/reader030/viewer/2022032704/56649d815503460f94a66d0b/html5/thumbnails/16.jpg)
Adding Labels
• After adding stuff to the content pane...
setVisible(true);
![Page 17: COMP 14 Introduction to Programming Miguel A. Otaduy June 7, 2004](https://reader030.vdocuments.site/reader030/viewer/2022032704/56649d815503460f94a66d0b/html5/thumbnails/17.jpg)
BigGUI.java
• Add labels.
![Page 18: COMP 14 Introduction to Programming Miguel A. Otaduy June 7, 2004](https://reader030.vdocuments.site/reader030/viewer/2022032704/56649d815503460f94a66d0b/html5/thumbnails/18.jpg)
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);
![Page 19: COMP 14 Introduction to Programming Miguel A. Otaduy June 7, 2004](https://reader030.vdocuments.site/reader030/viewer/2022032704/56649d815503460f94a66d0b/html5/thumbnails/19.jpg)
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
![Page 20: COMP 14 Introduction to Programming Miguel A. Otaduy June 7, 2004](https://reader030.vdocuments.site/reader030/viewer/2022032704/56649d815503460f94a66d0b/html5/thumbnails/20.jpg)
label.setVerticalTextPosition(vposition);label.setHorizontalTextPosition(hposition);
Text Position Relative to Icon
SwingConstants.LEFTSwingConstants.CENTERSwingConstants.RIGHT
SwingConstants.TOPSwingConstants.CENTERSwingConstants.BOTTOM
![Page 21: COMP 14 Introduction to Programming Miguel A. Otaduy June 7, 2004](https://reader030.vdocuments.site/reader030/viewer/2022032704/56649d815503460f94a66d0b/html5/thumbnails/21.jpg)
BigGUI.java
• Add icon.
![Page 22: COMP 14 Introduction to Programming Miguel A. Otaduy June 7, 2004](https://reader030.vdocuments.site/reader030/viewer/2022032704/56649d815503460f94a66d0b/html5/thumbnails/22.jpg)
To do
• Read ch. 6: pp 282-290 (important)• Get AFS access• Homework 6• Homework 7 will be assigned