CMSC 341 Building Java GUIs 09262007 CMSC 341

CMSC 341 Building Java GUIs 09/26/2007 CMSC 341 GUI

Why Java GUI Development? n n Course is about Data Structures, not GUIs. We are giving you the opportunity to do extra credit and have some fun on the project. GUIs are a good example of Object Oriented Programming. GUIs are another example of a container. 09/26/2007 CMSC 341 GUI 2

Java and GUIs n There are two packages that generate GUI components in Java. q q n The AWT (Abstract Windows Toolkit) q q n java. awt javax. swing Came first No platform independence Swing q q q Part of Java Foundation Classes (released with Java 2) Built on top of the AWT Offers platform independence 09/26/2007 CMSC 341 GUI 3

Containers n n In Java, all GUI objects go into a Container. A top level container can stand alone in a web browser or in an operating system. q q n JFrame JApplet Some containers may only be added to other containers. q JPanel 09/26/2007 CMSC 341 GUI 4

JFrame Methods n n n add(Object) - adds objects to the frame. set. Visible(boolean) - makes the frame visible set. Location(int x, int y) – aligns top left corner of frame with coordinates on screen set. Size(int width, int height) – sets size of frame in pixels set. Default. Close. Operation(Windows. const ants. EXIT_ON_CLOSE); 09/26/2007 CMSC 341 GUI 5

JFrame Code import javax. swing. *; import java. awt. *; public class Upper. Case. Converter extends JFrame { public Upper. Case. Converter(String name){ Constructor sets the super(name); title, size and location set. Location(300, 100); of the JFrame set. Size (400, 300); set. Default. Close. Operation(Window. Constants. EXIT_ON_CLOSE); } Makes program end when window is closed } public static void main(String args[]){ Upper. Case. Converter ucc = new Upper. Case. Converter("Convert to Upper Case"); ucc. set. Visible(true); } Instantiates JFrame 09/26/2007 and makes it visible CMSC 341 GUI 6

JFrame Example n The code on the previous page renders the following: 09/26/2007 CMSC 341 GUI 7

Layout. Managers n n Every container has an underlying default Layout. Manager. The Layout. Manager determines q q n the size of the objects in the container and how the objects will be laid out. The default Layout. Manager for a JFrame is a Border. Layout. 09/26/2007 CMSC 341 GUI 8

Border. Layout n Divides container into five regions q q q n n Border. Layout. NORTH Border. Layout. SOUTH Border. Layout. CENTER Border. Layout. EAST Border. Layout. WEST One component per region Component takes size of region Center region is greedy Components are added to center by default 09/26/2007 CMSC 341 GUI 9

Border. Layout Code import java. awt. *; Specialized add import javax. swing. *; method for adding public class Border. Layout. Example extends JFrame { to regions public Border. Layout. Example(String name) { super(name); set. Size(300, 300); add(new JButton("North"), Border. Layout. NORTH); add(new JButton("South"), Border. Layout. SOUTH); add(new JButton("East"), Border. Layout. EAST); add(new JButton("West"), Border. Layout. WEST); add(new JButton("Center"), Border. Layout. CENTER); } public static void main(String args[]) { Border. Layout. Example b = new Border. Layout. Example("Border. Layout. Example"); b. set. Visible(true); } } 09/26/2007 CMSC 341 GUI 10

Border. Layout. Example 09/26/2007 CMSC 341 GUI 11

JPanel n n n However, we want to put several buttons in the North region of the GUI, but Border. Layout only allows one component per region… Add a second level container like a JPanels have a Flow. Layout manager by default. 09/26/2007 CMSC 341 GUI 12

Flow. Layout n n Lays components in a fluid direction as determined by its orientation. By default, orientation is L -> R, T -> B. Possible to set the horizontal and vertical width between components. Components take preferred size. q For buttons, preferred size is the size of the text within them. 09/26/2007 CMSC 341 GUI 13

JPanel and Flow. Layout Code //omitting code here from previous example public class Upper. Case. Converter extends JFrame { //Since we are expecting to make these components to //react to user interaction we make them object data JButton upper; JButton clear; public Upper. Case. Converter(String name){ //omitting code here from previous example JPanel top; top = new JPanel(); upper = new JButton("UPPER"); clear = new JButton("CLEAR"); top. add(upper); top. add(clear); add(top, Border. Layout. NORTH); } //omitting code here from previous example } 09/26/2007 CMSC 341 GUI 14

JPanel and Flow. Layout Example n Code on previous page renders as follows: n But, we also need a text field to enter text. 09/26/2007 CMSC 341 GUI 15

Second JPanel public class Upper. Case. Converter extends JFrame { //code omitted from previous example JText. Field input; public Upper. Case. Converter(String name){ //code omitted from previous example JPanel bottom = new JPanel(); JLabel label = new JLabel("Enter text ->"); input = new JText. Field(20); bottom. add(label); bottom. add(input); add(bottom, Border. Layout. SOUTH); } //code omitted from previous example JLabel may also take an Icon or both a String and Icon in its constructor JText. Field takes an int which indicates the number of characters to be displayed } 09/26/2007 CMSC 341 GUI 16

Second JPanel Example How would we add a JText. Area to the center of our frame? 09/26/2007 CMSC 341 GUI 17

JText. Area n n Add JText. Area reference to object data so that it can be referenced by all member methods. Instantiate JText. Area reference in constructor method and add reference to the center of the JFrame. JText. Area output; Declare outside of methods so object data output = new JText. Area(10, 20); add(output); 09/26/2007 CMSC 341 GUI Constructor for JText. Area takes number of rows and columns 18

JText. Area Example Next time, we will make this GUI functional. 09/26/2007 CMSC 341 GUI 19

JComponent Methods n There exists several JComponent methods that allow you to change the look of a component q q q set. Background(Color) Values for all the arguments set. Foreground(Color) of these methods are already defined in Java. set. Font(Font) set. Preferred. Size(Dimension) set. Alignment. X(float) set. Alignment. Y(float) 09/26/2007 CMSC 341 GUI 20

More Layout. Managers n Seven Basic Layout Managers in Java q q q q n Border. Layout Box. Layout Card. Layout Flow. Layout Grid. Bag. Layout Overlay. Layout We will only focus on two more of these. q q Grid. Layout Box. Layout 09/26/2007 CMSC 341 GUI 21

Grid. Layout n n Creates a grid with number of rows and columns given in the constructor One component per cell Cells of equal size Component take the size of the cell 09/26/2007 CMSC 341 GUI 22

Grid. Layout Code import java. awt. *; import javax. swing. *; public class Button. Grid extends JFrame { public Button. Grid() { super("Button Grid Example"); set. Layout(new Grid. Layout(3, 2)); set. Size(300, 400); add(new JButton("1")); add(new JButton("2")); add(new JButton("3")); add(new JButton("4")); add(new JButton("5")); add(new JButton("6")); } public static void main(String arg[]){ Button. Grid bg = new Button. Grid(); bg. set. Visible(true); } } 09/26/2007 CMSC 341 GUI The set. Layout method changes a container’s Layout. Manager. Compare the order in which the buttons are added to the GUI on the next page. 23

Grid. Layout Example 09/26/2007 CMSC 341 GUI 24

Boy. Layout n Components are arranged either vertically or horizontally depending on parameter q q n n n Box. Layout. X_AXIS Box. Layout. Y_AXIS Box. Layout. LINE_AXIS Box. Layout. PAGE_AXIS Components will not wrap even if container is resized Allows for filler (“glue”) between components to make them space evenly within container Part of javax. swing package 09/26/2007 CMSC 341 GUI 25

Box. Layout Code import java. awt. *; import javax. swing. *; public class Button. Box extends JFrame { public Button. Box() { super("Button Box Example"); Component JPanel p = new JPanel(); JButton b 1 = new JButton("B 1"); method to align JButton b 2 = new JButton("B 2"); the button JButton b 3 = new JButton("B 3"); horizontally b 1. set. Alignment. X(Component. CENTER_ALIGNMENT); b 2. set. Alignment. X(Component. CENTER_ALIGNMENT); b 3. set. Alignment. X(Component. CENTER_ALIGNMENT); p. set. Layout(new Box. Layout(p, Box. Layout. Y_AXIS)); set. Size(300, 400); p. add(Box. create. Glue()); Constructor for a p. add(b 1); p. add(b 2)p. add(b 3); Box. Layout takes p. add(Box. create. Glue()); an instance of its add(p); } Here is the “glue” container //main goes here } 09/26/2007 CMSC 341 GUI 26

Box. Layout Example 09/26/2007 CMSC 341 GUI 27

Calculator n What do we need for a Calculator GUI? q 16 JButtons n n q 3 JText. Fields n n n Numbers 0 -9 Operators + - x / =. 2 operands 1 output Which need to respond to events? 09/26/2007 CMSC 341 GUI 28

Declare Object Data import java. awt. *; import javax. swing. *; public class Calculator extends JFrame { JButton [] numbers = new JButton[10]; JButton plus; JButton minus; JButton mult; JButton div; JButton equals; JButton dot; JText. Field output; JText. Field operand 1; JText. Field operand 2; } 09/26/2007 CMSC 341 GUI 29

Constructor n n Constructor is where everything will be created. Before beginning decide q q q how to break up your frame into panels, which Layout. Manager goes where, what components will go where. 09/26/2007 CMSC 341 GUI 30

Instantiate Object Data public Calculator() { super("My Calculator"); numbers = new JButton[10]; for(int i = 0; i < 10; i++) numbers[i] = new JButton("" + i); plus = new JButton("+"); minus = new JButton("+"); mult = new JButton("x"); div = new JButton("/"); Setting properties equals = new JButton("="); for the frame, too dot = new JButton(". "); operand 1 = new JText. Field(10); operand 2 = new JText. Field(10); output = new JText. Field(21); set. Size(300, 400); set. Default. Close. Operation(Window. Constants. EXIT_ON_CLOSE); } 09/26/2007 CMSC 341 GUI 31

Top Panel n Need to split the top panel into a grid with two panels. Why? JPanel top = new JPanel(); top. set. Layout(new Grid. Layout(2, 1)); add(top, Border. Layout. NORTH); JPanel input = new JPanel(); input. add(operand 1); input. add(operand 2); top. add(input); JPanel results = new JPanel(); results. add(output); top. add(results); 09/26/2007 CMSC 341 GUI 32

Rendering of Previous Code 09/26/2007 CMSC 341 GUI 33

The Center Panel n n The center will also consist of a grid with four rows and four columns. What happens if we add buttons directly to grid? What can we do to get our desired effect? What do we want the calculator to do when we resize? 09/26/2007 CMSC 341 GUI 34

Panels of Panels n Often GUI programmers create methods to create Panels. private JPanel get. Row(JButton b 1, JButton b 2, JButton b 3, JButton b 4) { JPanel row = new JPanel(); row. set. Layout(new Box. Layout(row, Box. Layout. X_AXIS)); row. add(b 1); row. add(b 2); row. add(b 3); row. add(b 4); return row; } 09/26/2007 CMSC 341 GUI 35

Panels of Panels (cont. ) n Several calls to the method are made from the constructor. JPanel center = new JPanel(); center. set. Layout(new Grid. Layout(4, 1)); center. add(get. Row(numbers[7], numbers[8], numbers[9], plus)); center. add(get. Row(numbers[4], numbers[5], numbers[6], minus)); center. add(get. Row(numbers[1], numbers[2], numbers[3], mult)); center. add(get. Row(dot, numbers[0], equals, div)); add(center); 09/26/2007 CMSC 341 GUI 36

Calculator n Adding the previous code, the calculator now renders like so. 09/26/2007 CMSC 341 GUI 37

Adding Glue n Adjust the Panel method to incorporate some glue. private JPanel get. Row(JButton b 1, JButton b 2, JButton b 3, JButton b 4) { JPanel row = new JPanel(); row. set. Layout(new Box. Layout(row, Box. Layout. X_AXIS)); row. add(Box. create. Horizontal. Glue()); row. add(b 1); row. add(b 2); row. add(b 3); row. add(b 4); row. add(Box. create. Horizontal. Glue()); return row; } 09/26/2007 CMSC 341 GUI 38

Almost there. n Now it looks like so. 09/26/2007 CMSC 341 GUI 39

Small Changes and Viola set. Size(225, 300) operand 1 = new JText. Field(7); operand 2 = new JText. Field(7); output = new JText. Field(15); Next class we will make it functional using Java’s Event Delegation Model. 09/26/2007 CMSC 341 GUI 40