Graphical User Interface (GUI) Two-Dimensional Graphical Shapes

GUI Classes AWT (abstract windows toolkit) - java.awt package Swing - javax.swing package Take advantage of inheritance is-a relationships

GUI AWT Components (adapted from Figure 7.2 ContainerComponent JComponent JPanel Dialog JDialog Window Frame 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: BallAppSimple Note: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: BallAppSimple Note: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 including its color and other attributes Can draw 2D shapes better with The 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 CenterEastWest

BorderLayout public 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 CenterEastWest

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

ButtonPanel package 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 (, )

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