graphical user interface (gui) two-dimensional graphical shapes
DESCRIPTION
GUI Classes AWT (abstract windows toolkit) - java.awt package Swing - javax.swing package Take advantage of inheritance is-a relationshipsTRANSCRIPT
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