Graphical User Interfaces GUIs v v v Components

Graphical User Interfaces (GUIs) v v v Components Flat Layouts Hierarchical Layouts Designing a GUI Coding a GUI (These notes come from Comp. Sci 4, Java for Video Games) Comp. Sci 100 E 30. 1

Components v v v JLabel text/image display JText. Field single line for text input/output JText. Area multiple lines for text input/output JButton used for decisions JFrame a basic window Comp. Sci 100 E 30. 2

Components v v v JLabel text/image display JText. Field single line for text input/output JText. Area multiple lines for text input/output JButton used for decisions JFrame a basic window Comp. Sci 100 E 30. 3

Components v v v JLabel text/image display JText. Field single line for text input/output JText. Area multiple lines for text input/output JButton used for decisions JFrame a basic window Comp. Sci 100 E 30. 4

Flat Layouts Grid. Layout Border. Layout NORTH EAST WEST CENTER SOUTH Comp. Sci 100 E 30. 5

Flat Layouts Grid. Layout v Added left to right, top to bottom v Expands to fill horizontally and vertically v Each space equal width and height Comp. Sci 100 E Border. Layout v Not all positions must be filled v CENTER expands horizontally and vertically v NORTH and SOUTH expand horizontally v WEST and EAST expand vertically 30. 6

Flat Layouts Border. Layout Comp. Sci 100 E 30. 7

Flat Layouts Grid. Layout Comp. Sci 100 E 30. 8

Hierarchical Layouts You can put layouts within layouts: Comp. Sci 100 E 30. 9

Hierarchical Layouts Identify the Border. Layout and Grid. Layouts in the application on the right. Comp. Sci 100 E 30. 10

Hierarchical Layouts CENTER Comp. Sci 100 E EAST 30. 11

Hierarchical Layouts Grid. Layout Comp. Sci 100 E 30. 12

Hierarchical Layouts Grid. Layout Comp. Sci 100 E 30. 13

Hierarchical Layouts CENTER SOUTH Comp. Sci 100 E 30. 14

Hierarchical Layouts CENTER SOUTH Comp. Sci 100 E 30. 15

Hierarchical Layouts Comp. Sci 100 E 30. 16

Hierarchical Layouts v v Virtually every layout we make is a hierarchy of Grid. Layout and Border. Layout Other Layouts include q q Box. Layout Grid. Bag. Layout Flow. Layout Card. Layout Comp. Sci 100 E 30. 17

Designing a GUI v v v What components are needed? Which components are of primary importance? Secondary? How do the components relate to each other? How big are the components? How can they be arranged into Border. Layout and Grid. Layout? Comp. Sci 100 E 30. 18

Coding a GUI 1. 2. 3. 4. 5. Declare the components as instance variables Write a make. Components method to initialize the components Write a layout. Components methods to arrange the components Write a constructor to call the above two methods Write a set. Visible method to set the primary component’s visibility (usually a JFrame). Comp. Sci 100 E 30. 19

Examples Border. Example. java (today) v In code directory (GUIs. jar) v Grid. Example. java q Combined. Example. java q Comp. Sci 100 E 30. 20

Border. Example. java import java. awt. *; import java. awt. event. *; import javax. swing. *; public class Border. Example extends JApplet { JFrame frame; JText. Area middle; JText. Field bottom; JButton left, right; JLabel title; Comp. Sci 100 E 30. 21

Border. Example. java private void make. Components() { frame=new JFrame("Border. Example"); middle=new JText. Area(10, 40); bottom=new JText. Field(); left=new JButton("left"); right=new JButton("right"); title=new JLabel("Title"); } Comp. Sci 100 E 30. 22

Border. Example. java private void make. Layout() { Container container=frame. get. Content. Pane(); container. set. Layout(new Border. Layout()); container. add(new JScroll. Pane(middle), Border. Layout. CENTER); container. add(title, Border. Layout. NORTH); container. add(left, Border. Layout. WEST); container. add(right, Border. Layout. EAST); container. add(bottom, Border. Layout. SOUTH); frame. pack(); } Comp. Sci 100 E 30. 23

Border. Example. java public Border. Example() { make. Components(); make. Layout(); } public void set. Visible(boolean vis) { frame. set. Visible(vis); } Comp. Sci 100 E 30. 24

Border. Example. java public void init() { main(null); } public static void main(String[] args) { Border. Example example=new Border. Example(); example. set. Visible(true); } Comp. Sci 100 E 30. 25

Event Handling v v v Sequential (Single Thread) Model Event Model Making the GUI interactive Examples Practice Comp. Sci 100 E 30. 26

Sequential (Single Thread) Model Program Start Comp. Sci 100 E Program End 30. 27

Event Model AWT Event Loop Comp. Sci 100 E Program Thread 30. 28

Making the GUI Interactive 1) 2) 3) 4) import java. awt. event. * implements Action. Listener (interface) write method public void action. Performed(Action. Event e) call add. Action. Listener(this) for all JButtons Comp. Sci 100 E 30. 29

Examples Adder. GUI. java Comp. Sci 100 E Game. Shell. java 30. 30

Examples Adder. GUI. java import java. awt. *; import java. awt. event. *; import javax. swing. *; public class Adder. GUI extends JApplet implements Action. Listener Comp. Sci 100 E 30. 31

Examples Adder. GUI. java public void action. Performed(Action. Event ae) { String addend 0 Text=addend 0. get. Text(); double addend 0 Number=Double. parse. Double(addend 0 Text); String addend 1 Text=addend 1. get. Text(); double addend 1 Number=Double. parse. Double(addend 1 Text); double answer=addend 0 Number+addend 1 Number; sum. set. Text(""+answer); } Comp. Sci 100 E 30. 32

Examples Adder. GUI. java private void make. Components() { frame=new JFrame("Game Shell"); addend 0=new JText. Field(8); addend 1=new JText. Field(8); sum=new JText. Field(8); compute=new JButton("="); compute. add. Action. Listener(this); plus=new JLabel("+"); plus. set. Horizontal. Alignment(Swing. Constants. CENTER); } Comp. Sci 100 E 30. 33

Game. Shell. java Examples import java. awt. *; import java. awt. event. *; import javax. swing. *; public class Game. Shell extends JApplet implements Action. Listener Comp. Sci 100 E 30. 34

Examples public void action. Performed(Action. Event ae) { Object cause=ae. get. Source(); if(cause==pause) { if(pause. get. Text(). equals("Pause")) Game. Shell. java { pause. set. Text("Resume"); shell. set. Text("Paused"); } else { pause. set. Text("Pause"); shell. set. Text("Game Running"); } } if(cause==reset) { pause. set. Text("Start"); shell. set. Text("Splash"); } } Comp. Sci 100 E 30. 35

Game. Shell. java Examples pause=new JButton("Start"); pause. add. Action. Listener(this); reset=new JButton("Start New Game"); reset. add. Action. Listener(this); Comp. Sci 100 E 30. 36

Practice v v Make a 2 x 2 tic-tac-toe board out of initially blank Jbuttons. Make the JButton text change to X when the user clicks on it. Make the JButton text change to X and O alternatively as the user clicks on the buttons. Hint: use a boolean instance variable. Make the fonts larger, and maybe add images. Comp. Sci 100 E 30. 37