Graphical User Interface GUI TwoDimensional Graphical Shapes GUI

Graphical User Interface (GUI) Two-Dimensional Graphical Shapes

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

GUI AWT Components (adapted from Figure 7. 2 Component Container JPanel JComponent Dialog JDialog Frame JFrame Window

Lab 7: Ball. App. Simple Note: JFrame package ballappsimple; import javax. swing. JFrame; public class Ball. App. Simple extends JFrame { public Ball. App. Simple (String title) { super(title); this. set. Size(600, 350); this. set. Default. Close. Operation(javax. swing. JFrame. EXIT_ON_CLOSE); this. add(new Ball. Panel. Simple()); this. set. Visible(true); Adds the panel to the frame } public static void main(String[] args) { Ball. App. Simple app = new Ball. App. Simple ("Simple Ball"); } }

Lab 7: Ball. App. Simple. Note: JPanel Import javax. swing. JPanel; public class Ball. Panel. Simple extends JPanel { private final int INIT_X = 75; constant attributes private final int INIT_Y = 75; private final int DIAMETER = 60; private Ball _ball 1; object of type Ball or class Ball public Ball. Panel. Simple () { super(); this. set. Background (Color. yellow); _ball 1=new Ball (java. awt. Color. red, this); _ball 1. set. Location(INIT_X, INIT_Y); _ball 1. set. Size(DIAMETER, DIAMETER); } public void paint. Component (java. awt. Graphics a. Brush) { super. paint. Component(a. Brush); java. awt. Graphics 2 D better. Brush = (java. awt. Graphics 2 D) a. Brush; _ball. fill(better. Brush); } }

paint. Component used by JPanel to paint/repaint a panel Important call A shape including its color and other attributes public void paint. Component (java. awt. Graphics a. Brush) { super. paint. Component(a. Brush); Can draw 2 D shapes better with java. awt. Graphics 2 D better. Brush = The 2 DGraphics (casting) (java. awt. Graphics 2 D) a. Brush; _ball. fill(better. Brush); }

repaint Automatically called when: • panel changes size • panel changes location • panel is reopened after being resized l repaint () calls paint. Component l Programmer calls repaint() when something on the panel has changed All JPanels have a repaint method Paintbrush: Must always instantiate the super. paint. Component method and pass a Brush l • • •

import java. awt. Color; public class Ball extends java. awt. geom. Ellipse 2 D. Double { Color _fill. Color; public Ball (Color a. Color) { super (); this. set. Fill. Color (a. Color); } // more readable versions of methods provided by Java public void set. Location (double x, double y) { this. set. Frame (x, y, this. get. Width(), this. get. Height()); } public void set. Size (int a. Width, int a. Height) { this. set. Frame(this. get. X(), this. get. Y(), a. Width, a. Height); public void set. Fill. Color (java. awt. Color a. Color) { _fill. Color = a. Color; } public void fill (java. awt. Graphics 2 D a. Better. Brush){ java. awt. Color saved. Color = a. Better. Brush. get. Color(); a. Better. Brush. set. Color(_fill. Color); a. Better. Brush. fill(this); a. Better. Brush. set. Color(saved. Color); } } }

Lab 8: Run the Ball. App. Simple Code l l l 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 Panel Instance Frame Instance GUI Demo Hello World Message Textfield Instance Label Instance Display Clear Close Button Instance

Screen Design l 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 • Flow. Layout • Grid. Layout • Border. Layout • Box. Layout • Card. Layout • Grid. Bag. Layout Featured in text

Layout Managers l Containers have default layout managers l Programmer can explicitly set the layout manager l Each has its own rules governing how components will be arranged

Border Layout (default for JFrame) North West Center South East

North Border. Layout West Center East public Ball. App. Simple (String title) { super(title); South this. set. Size(600, 350); this. set. Default. Close. Operation(javax. swing. JFrame. EXIT_ON_CLOSE); this. add(new Ball. Panel. Simple()); or this. add (new Ballpanel. Simple (), java. awt. Border. Layout. CENTER); this. set. Visible(true); }

Border Layout (pg 267) l Each area displays a component such as a JPanel l Each of the four outer areas enlarges as needed to accommodate the component added to it l If nothing is added to the outer areas, they take up no space and other areas expand to fill the void l The center area expands to fill space as needed

• Methods common to all layouts • add () • remove () • set. Layout ()

Simple Application (Example of a Button Panel) public class Button. Panel. Lab. App extends javax. swing. JFrame { public Button. Panel. Lab. App (String title) { super(title); this. set. Size(600, 350); this. set. Default. Close. Operation (javax. swing. JFrame. EXIT_ON_CLOSE); this. add(new Button. Panel()); this. pack(); this. set. Visible(true); } public static void main(String[] args) { Button. Panel. Lab. App app = new Button. Panel. Lab. App ("Simple Panel GUI Lab"); } }

Simple Application 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

Button. Panel package buttonpanellab; import javax. swing. JButton; import javax. swing. JPanel; public class Button. Panel extends JPanel { JButton _button 1; public Button. Panel () { _button = new JButton ("Click Me"); this. add(_button); } }

Lab – Creating a Second Panel l Start with the Ball. App. Simple 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 • Create. Button 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 l Flow layout puts as many components as possible on a row, then moves to the next row l Rows are created as needed to accommodate all of the components l Components are displayed in the order they are added to the container l Each row of components is centered horizontally in the window by default, but could also be aligned left or right l The horizontal and vertical gaps between the components can be explicitly set

Grid Layout l A grid layout presents a container’s components in a rectangular grid of rows and columns l One component is placed in each cell of the grid, and all cells have the same size l As components are added to the container, they fill the grid from left-to-right and top-to-bottom (by default) l The size of each cell is determined by the overall size of the container set. Layout (new Grid. Layout (<row>, <col>)

Add another panel class Button. Panel. Grid. java public class Button. Panel. Grid extends JPanel { JButton _button 1, <………………. . >; public Button. Panel. Grid () { 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 the other JPanel to the JFrame public class Ball. App. Simple 2 extends javax. swing. JFrame { private Ball. Panel. Simple _panel 1; private Color. Holder _holder; public Ball. App. Simple 2 (String title) { super (title); _holder= new Color. Holder(); Ball. Panel. Simple _panel 1 = new Ball. Panel. Simple(); this. set. Size(400, 250); this. set. Default. Close. Operation(javax. swing. JFrame. EXIT_ON_CLOSE); add(new Button. Panel. Grid (_holder), Border. Layout. EAST); add(_panel 1, Border. Layout. CENTER); this. set. Visible(true); } public static void main(String[] args) { Ball. App. Simple 2 app = new Ball. App. Simple 2 ("Simple Ball and Buttons"); }

Two Panel Example