Graphical User Interface (GUI)

Two-Dimensional Graphical Shapes

GUI Classes

AWT (abstract windows toolkit) -java.awt package

Swing - javax.swing package

Take advantage of inheritanceis-a relationships

GUI AWT Components (adapted from Figure 7.2

ContainerComponentJComponent JPanel

Dialog JDialog

WindowFrame JFrame

package ballappsimple;import javax.swing.JFrame;public class BallAppSimple extends JFrame { public BallAppSimple (String title) {

super(title);this.setSize(600, 350);

this.setDefaultCloseOperation(javax.swing.JFrame.EXIT_ON_CLOSE); this.add(new BallPanelSimple()); this.setVisible(true); } public static void main(String[] args) {

BallAppSimple app = new BallAppSimple ("Simple Ball"); }

}

Lab 7: BallAppSimpleNote:JFrame

Adds the panel to the frame

Import javax.swing.JPanel;public class BallPanelSimple extends JPanel { private final int INIT_X = 75; constant attributes private final int INIT_Y = 75; private final int DIAMETER = 60; private Ball _ball1; object of type Ball or class Ball public BallPanelSimple () { super(); this.setBackground (Color.yellow); _ball1=new Ball (java.awt.Color.red, this); _ball1.setLocation(INIT_X, INIT_Y); _ball1.setSize(DIAMETER, DIAMETER); } public void paintComponent (java.awt.Graphics aBrush) { super.paintComponent(aBrush); java.awt.Graphics2D betterBrush = (java.awt.Graphics2D) aBrush; _ball.fill(betterBrush); } }

Lab 7: BallAppSimpleNote:JPanel

paintComponent used by JPanel to paint/repaint a panel

public void paintComponent (java.awt.Graphics aBrush) {

super.paintComponent(aBrush);java.awt.Graphics2D betterBrush = (java.awt.Graphics2D) aBrush; _ball.fill(betterBrush);

}

A shape includingits color and other attributes

Can draw 2D shapes better withThe 2DGraphics (casting)

Important call

repaint Automatically called when:

• panel changes size • panel changes location• panel is reopened after being resized

repaint () calls paintComponent Programmer calls repaint() when something on the panel has changed• All JPanels have a repaint method• Paintbrush:

• Must always instantiate the super.paintComponent method and pass a Brush

import java.awt.Color;public class Ball extends java.awt.geom.Ellipse2D.Double { Color _fillColor; public Ball (Color aColor) { super ();

this.setFillColor (aColor); } // more readable versions of methods provided by Java public void setLocation (double x, double y) {

this.setFrame (x, y, this.getWidth(), this.getHeight()); } public void setSize (int aWidth, int aHeight) {

this.setFrame(this.getX(), this.getY(), aWidth, aHeight); } public void setFillColor (java.awt.Color aColor) { _fillColor = aColor; } public void fill (java.awt.Graphics2D aBetterBrush){

java.awt.Color savedColor = aBetterBrush.getColor();aBetterBrush.setColor(_fillColor);aBetterBrush.fill(this);

aBetterBrush.setColor(savedColor); } }

Lab 8: Run the BallAppSimple Code Modify program to change height and

width of the JFrame Modify program to change ball color and

background color of the JPanel Modify the program to add another

shape, perhaps a rectangle, in a different color to the JPanel. Experiment with size and location.

GUI Components and Screen Design

GUI Demo

Message

Hello World

CloseClearDisplay

Panel Instance

Textfield Instance

Label Instance

Button Instance

Frame Instance

Screen Design

Layout Managers facilitate better programmer control of interfaces!

Layout Managers

• Are objects that place components within a container

• determines component size• determines component position• Specifies a strategy for screen

layout

Predefined Layout Manager Subclasses

•FlowLayout•GridLayout•BorderLayout•BoxLayout•CardLayout•GridBagLayout

Featured in text

Layout Managers

Containers have default layout managers

Programmer can explicitly set the layout manager

Each has its own rules governing how components will be arranged

Border Layout (default for JFrame)

North

South

Center EastWest

BorderLayoutpublic BallAppSimple (String title) {

super(title);

this.setSize(600, 350);

this.setDefaultCloseOperation(javax.swing.JFrame.EXIT_ON_CLOSE);

this.add(new BallPanelSimple());

or

this.add (new BallpanelSimple (), java.awt.BorderLayout.CENTER);

this.setVisible(true);

}

North

South

Center EastWest

Border Layout (pg 267)

Each area displays a component such as a JPanel

Each of the four outer areas enlarges as needed to accommodate the component added to it

If nothing is added to the outer areas, they take up no space and other areas expand to fill the void

The center area expands to fill space as needed

• Methods common to all layouts•add () • remove () •setLayout ()

public class ButtonPanelLabApp extends javax.swing.JFrame {

public ButtonPanelLabApp (String title) { super(title); this.setSize(600, 350);this.setDefaultCloseOperation

(javax.swing.JFrame.EXIT_ON_CLOSE);this.add(new ButtonPanel());this.pack();this.setVisible(true); }

public static void main(String[] args) {ButtonPanelLabApp app = new ButtonPanelLabApp

("Simple Panel GUI Lab");} }

Simple Application(Example of a Button Panel)

Calling pack makes JFrame resize to fit contents (default size for JFrame is (0,0) ); here it fits to enclose the button which has a default size

Simple Application

ButtonPanelpackage buttonpanellab;

import javax.swing.JButton;

import javax.swing.JPanel;

public class ButtonPanel extends JPanel {

JButton _button1;

public ButtonPanel () {

_button = new JButton ("Click Me");

this.add(_button); }

}

Lab – Creating a Second Panel

Start with the BallAppSimple Code (Note: if you want to save it as is, make another copy

in another package)

Lab 8 Continued – Add a Create Button Panelclass to program

• CreateButton creates a button, extends javax.swing.JButton

• Receives three parameters• a color for the button,• a string message to place on the button, and • a panel on which the button will be placedl

• Send the message parameter to the super class JButton• Set the button background to the color that is passed• Add the button to the passed JPanel• Do whatever else you desire to finish a button

Flow Layout Flow layout puts as many components as possible on a

row, then moves to the next row Rows are created as needed to accommodate all of the

components Components are displayed in the order they are added

to the container Each row of components is centered horizontally in

the window by default, but could also be aligned left or right

The horizontal and vertical gaps between the components can be explicitly set

Grid Layout A grid layout presents a container’s components in a rectangular

grid of rows and columns

One component is placed in each cell of the grid, and all cells have the same size

As components are added to the container, they fill the grid from left-to-right and top-to-bottom (by default)

The size of each cell is determined by the overall size of the container

setLayout (new GridLayout (<row>, <col>)

public class ButtonPanelGrid extends JPanel{

JButton _button1,<……………………………..>;public ButtonPanelGrid () {

super ();<set the layout to a grid layout of 4 rows with 2 buttons

to each row; note that to apply this to the Panel, we need to precede the statement with either a panel name or, in this case “this”>

<create each button in turn for a total of 8 buttons in this manner, adding and passing whatever is necessary>

}}

Add another panel class ButtonPanelGrid.java

public class BallAppSimple2 extends javax.swing.JFrame {private BallPanelSimple _panel1;private ColorHolder _holder; public BallAppSimple2 (String title){ super (title); _holder= new ColorHolder(); BallPanelSimple _panel1 = new BallPanelSimple(); this.setSize(400, 250); this.setDefaultCloseOperation(javax.swing.JFrame.EXIT_ON_CLOSE); add(new ButtonPanelGrid (_holder), BorderLayout.EAST); add(_panel1, BorderLayout.CENTER); this.setVisible(true); }public static void main(String[] args) {

BallAppSimple2 app = new BallAppSimple2 ("Simple Ball and Buttons");

}

Add the other JPanel to the JFrame

Two Panel Example