Graphical User Interfaces GUIs Comp Sci 4 Graphical

Graphical User Interfaces GUIs Comp. Sci 4 Graphical User Interfaces 14. 1

The Plan v v v Components Flat Layouts Hierarchical Layouts Designing a GUI Coding a GUI Comp. Sci 4 Graphical User Interfaces 14. 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 4 Graphical User Interfaces 14. 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 4 Graphical User Interfaces 14. 4

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 4 Graphical User Interfaces 14. 5

Flat Layouts Grid. Layout Border. Layout NORTH EAST WEST CENTER SOUTH Comp. Sci 4 Graphical User Interfaces 14. 6

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 4 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 Graphical User Interfaces 14. 7

Flat Layouts Border. Layout Comp. Sci 4 Graphical User Interfaces 14. 8

Flat Layouts Grid. Layout Comp. Sci 4 Graphical User Interfaces 14. 9

Hierarchical Layouts You can put layouts within layouts: Comp. Sci 4 Graphical User Interfaces 14. 10

Hierarchical Layouts Identify the Border. Layout and Grid. Layouts in the application on the right. Comp. Sci 4 Graphical User Interfaces 14. 11

Hierarchical Layouts CENTER Comp. Sci 4 EAST Graphical User Interfaces 14. 12

Hierarchical Layouts Grid. Layout Comp. Sci 4 Graphical User Interfaces 14. 13

Hierarchical Layouts Grid. Layout Comp. Sci 4 Graphical User Interfaces 14. 14

Hierarchical Layouts CENTER SOUTH Comp. Sci 4 Graphical User Interfaces 14. 15

Hierarchical Layouts CENTER SOUTH Comp. Sci 4 Graphical User Interfaces 14. 16

Hierarchical Layouts Comp. Sci 4 Graphical User Interfaces 14. 17

Hierarchical Layouts v v Virtually every layout we make is a hierarchy of Grid. Layout and Border. Layout Other Layouts include q q Comp. Sci 4 Box. Layout Grid. Bag. Layout Flow. Layout Card. Layout Graphical User Interfaces 14. 18

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 4 Graphical User Interfaces 14. 19

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 4 Graphical User Interfaces 14. 20

Examples Border. Example. java (today) v In code directory (GUIs. jar) v Grid. Example. java q Combined. Example. java q Comp. Sci 4 Graphical User Interfaces 14. 21

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 4 Graphical User Interfaces 14. 22

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 4 Graphical User Interfaces 14. 23

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 4 Graphical User Interfaces 14. 24

Border. Example. java public Border. Example() { make. Components(); make. Layout(); } public void set. Visible(boolean vis) { frame. set. Visible(vis); } Comp. Sci 4 Graphical User Interfaces 14. 25

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 4 Graphical User Interfaces 14. 26